.start-actions{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.route-top-button{font-size:13px!important;font-weight:700;letter-spacing:1px;min-width:56px!important}
.route-switch{display:flex;gap:6px;width:max-content;max-width:100%;padding:4px;margin:12px 0 4px;border:1px solid #ffffff32;border-radius:9px;background:#0d201bd9;backdrop-filter:blur(12px)}
.route-switch button{padding:8px 12px;min-height:38px;max-width:48vw;border-radius:6px;background:transparent;color:#d3e1d6;font-size:13px;white-space:nowrap}
.route-switch button[aria-current=true]{background:#d6ff61;color:#142016;font-weight:800}
.route-menu{display:grid;gap:10px;margin:16px 0}.route-menu button{text-align:left;padding:15px;border:1px solid #ffffff32;background:#21392e;color:#edf6e8;border-radius:8px;line-height:1.5}.route-menu button strong{display:block;font-size:17px}.route-menu button small{display:block;color:#b9cdbd;font-size:12px;margin-top:5px}.route-menu button[aria-current=true]{border-color:#d6ff61;background:#294330}
#jump-start{padding:12px 18px;min-height:48px;border:1px solid #d6ff6180;border-radius:5px;background:#173226ed;color:#e2ffac;font-size:14px}
@media (max-width:380px){.start-actions{gap:6px}.start-actions .primary{min-width:0;padding:12px;font-size:14px}#jump-start{padding:10px;font-size:13px}}
@media (pointer:coarse),(max-width:760px){.route-switch{margin:8px 0 2px}.route-switch button{font-size:12px;padding:6px 9px;min-height:36px}.route-top-button{min-width:44px!important;font-size:11px!important}}
@media (pointer:coarse),(max-width:760px){#app:has(.welcome:not(.hidden)) .trail-card,#app:has(.welcome:not(.hidden)) .terrain-status{display:none}}
@media (pointer:coarse),(max-width:760px){
 #app{height:100dvh;min-height:0}
 header{padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left))}
 .top-actions button{min-width:44px;min-height:44px}
 .trail-card{top:80px;left:16px;width:185px;pointer-events:none}
 .trail-card .eyebrow{font-size:12px;letter-spacing:1px}
 .trail-card h1{font-size:19px;letter-spacing:0}
 .trail-card p{font-size:12px}
 .ride-info{top:82px;right:16px;pointer-events:none}
 #timer{font-size:26px}
 .trail-data{margin:12px 0}.route-labels{font-size:12px;letter-spacing:0}
 .terrain-status{top:260px;left:16px;width:210px;pointer-events:none}
 .welcome{left:16px;bottom:255px;right:16px}
 .welcome h2{font-size:36px;margin-bottom:10px}
 .welcome p{font-size:14px;line-height:1.6}
 .welcome .primary{min-height:48px}
 .telemetry{right:16px;bottom:218px;width:116px;pointer-events:none}
 .speed>span{font-size:58px}.speed-track{margin:8px 0 12px}
 .camera-hint{bottom:191px;font-size:12px;white-space:normal;width:max-content;max-width:92%;text-align:center}
 .touch-controls{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(68px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr .9fr 1.28fr;gap:7px;align-items:end}
 .touch-pad{display:grid;grid-template-columns:1fr 1fr;gap:6px;min-width:0}
 .touch-pad button{min-width:0;min-height:58px;padding:5px 2px;font-size:14px;box-shadow:0 2px 8px #0003;background:#172c27eb}
 .touch-pad.weight{grid-template-columns:1fr}
 .touch-pad.weight button{min-height:49px;font-size:13px}
 .touch-pad.drive{grid-template-columns:1fr 1fr}
 .touch-pad.drive button{min-height:49px;font-size:13px;line-height:1.4}
 .touch-pad.drive .accelerate{width:auto;align-self:stretch;min-height:104px}
 .touch-pad button.active{background:#d6ff61;color:#142016;box-shadow:inset 0 0 0 2px white}
 footer{padding:7px max(14px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
 .utility button{min-height:44px}.utility span{font-size:13px;margin-left:3px}.utility kbd{display:none}#help{width:44px;height:44px}
 #toast{top:auto;bottom:calc(195px + env(safe-area-inset-bottom));font-size:13px;max-width:92%;z-index:3}
 .crash-panel{right:14px;top:80px}.crash-panel .primary{min-height:48px}
}
@media (max-width:380px){.brand{font-size:24px;gap:6px}.top-actions{gap:3px}.trail-card{width:170px}.ride-info p{font-size:11px}.touch-controls{gap:5px;left:8px;right:8px}.touch-pad.weight button,.touch-pad.drive button{font-size:12px}}
@media (max-height:600px) and (pointer:coarse){
 header{padding-top:max(5px,env(safe-area-inset-top))}.brand{font-size:24px}.brandmark{font-size:30px}
 .trail-card{top:60px;width:220px}.trail-card h1{margin:5px 0}.trail-card p,.trail-data,.route-line,.route-labels{display:none}
 .ride-info{top:58px}.ride-info>span{display:none}#timer{margin:0}
 .terrain-status{top:112px;font-size:12px;gap:6px}.terrain-status>b{font-size:13px}
 .welcome{bottom:155px}.welcome h2{font-size:30px}.welcome p{display:none}.welcome .primary{min-width:170px;padding:10px 16px}
 .touch-controls{grid-template-columns:1fr .85fr 1.2fr;gap:16px;bottom:calc(58px + env(safe-area-inset-bottom))}
 .touch-pad{gap:8px}.touch-pad button{min-height:50px}.touch-pad.weight{max-width:180px;justify-self:center;width:100%}
 .touch-pad.weight button,.touch-pad.drive button{min-height:44px}.touch-pad.drive .accelerate{min-height:96px}
 .telemetry{right:18px;bottom:168px;width:112px}.speed>span{font-size:40px}.speed-track,.balance-head,.balance-track,.balance-label{display:none}
 .camera-hint{display:none}#toast{bottom:170px;max-width:48%;padding:6px 10px}
 footer{padding-top:2px;padding-bottom:calc(2px + env(safe-area-inset-bottom))}
 .crash-panel{top:58px;right:18px;padding:12px}.crash-panel h2{font-size:20px}.crash-panel small{display:none}
}

/* Settings remain scrollable above iOS browser chrome and the on-screen keyboard. */
#modal:has(.settings-tabs){width:min(620px,calc(100% - 24px));max-width:620px;padding:24px;max-height:calc(100dvh - 24px);overflow:hidden}
#modal:has(.settings-tabs) #modal-content{display:flex;flex-direction:column;max-height:calc(100dvh - 74px);min-height:0}
#modal:has(.settings-tabs) h2{flex-shrink:0;margin-bottom:12px}
#keys-panel{display:flex;flex-direction:column;min-height:0;overflow:hidden}
#video-panel{overflow:auto;min-height:0}
#binding-list{overflow:auto;min-height:60px;overscroll-behavior:contain;touch-action:pan-y}
#keys-panel>.binding-help,#keys-panel>.binding-head,#keys-panel>#binding-status,#keys-panel>#reset-bindings{flex-shrink:0}
#reset-bindings{align-self:flex-start}
#close-modal{min-width:44px;min-height:44px;right:8px;top:6px;z-index:2}
.settings-tabs{display:flex;flex-shrink:0;gap:8px;border-bottom:1px solid #ffffff26;padding-bottom:8px;margin-bottom:8px}
.settings-tabs button,.setting-button{background:#263c33;color:#dce7de;border:1px solid #ffffff29;padding:10px 16px;border-radius:6px;min-height:44px}
.settings-tabs [aria-selected=true]{background:#d6ff61;color:#172017;border-color:#d6ff61}
#modal [hidden]{display:none!important}
.binding-head,.binding-row{display:grid;grid-template-columns:minmax(104px,1.2fr) minmax(80px,1fr) minmax(96px,1fr);align-items:center;gap:10px}
.binding-head{font-size:12px;color:#a7bdad;padding:6px 0}
.binding-row{padding:7px 0;border-bottom:1px solid #ffffff12;font-size:13px}
.binding-cell{display:flex;gap:4px;min-width:0}
.binding-key{border:1px solid #69816c;background:#20362e;color:#edf5e9;border-radius:5px;min-width:0;flex:1;min-height:44px;padding:6px;font-size:13px;overflow-wrap:anywhere}
.binding-key.listening{background:#d6ff61;color:#142016;border-color:#d6ff61}
.binding-clear{background:#3b2929;color:#ffcbb3;border-radius:5px;width:32px;flex-shrink:0;min-height:44px;font-size:20px}
#modal .binding-help{font-size:12px;line-height:1.6;margin:10px 0}
#binding-status{font-size:13px;min-height:42px;color:#d6ff61}
#binding-status[data-type=error]{color:#ffb7a1}
@media(max-height:600px){
 #modal:has(.settings-tabs){padding:12px 18px}
 #modal:has(.settings-tabs) #modal-content{max-height:calc(100dvh - 50px)}
 #modal:has(.settings-tabs) h2{display:none}
 .settings-tabs{padding-right:42px;margin-bottom:4px;padding-bottom:4px}
 #modal .binding-help{margin:4px 0;font-size:11px}
 #keys-panel>.binding-help:last-child{display:none}
 #binding-status{min-height:22px;margin:6px 0;font-size:12px;line-height:1.5}
 #binding-list{min-height:40px}.binding-row{padding:4px 0}
 #reset-bindings{min-height:38px;padding:7px 12px}
}
@media(max-width:420px){
 #modal:has(.settings-tabs){padding:18px 12px}#modal h2{font-size:23px;margin-right:36px}
 .binding-head,.binding-row{grid-template-columns:minmax(86px,1fr) minmax(64px,.8fr) minmax(92px,1fr);gap:6px}
 .binding-row{font-size:12px}.binding-key{font-size:12px;padding:4px}.binding-clear{width:28px}
}
/* iPad with a trackpad still has touch support; do not rely only on primary pointer. */
html.touch-device #app{height:100dvh;min-height:0}
html.touch-device .controls{display:none}
html.touch-device .touch-controls{display:grid}
html.touch-device .brand-sub,html.touch-device .live-label{display:none}
@media (orientation:landscape) and (min-width:600px){
 html.touch-device{--control-h:clamp(44px,8.5dvh,68px);--edge: max(16px,env(safe-area-inset-left));--right-edge:max(16px,env(safe-area-inset-right))}
 html.touch-device header{padding: max(6px,env(safe-area-inset-top)) var(--right-edge) 6px var(--edge)}
 html.touch-device .brand{font-size:26px}html.touch-device .brandmark{font-size:32px}
 html.touch-device .top-actions button{min-width:44px;min-height:44px}html.touch-device .top-actions button span{display:none}
 html.touch-device .trail-card{top:64px;left:var(--edge);width:230px;pointer-events:none}
 html.touch-device .trail-card h1{font-size:19px;margin:6px 0}
 html.touch-device .trail-card .eyebrow{font-size:11px;letter-spacing:1px}
 html.touch-device .trail-data,html.touch-device .trail-card p,html.touch-device .route-line,html.touch-device .route-labels{display:none}
 html.touch-device .ride-info{right:var(--right-edge);top:64px;pointer-events:none}
 html.touch-device #timer{font-size:29px;margin:0}html.touch-device .ride-info>span{display:none}
 html.touch-device .terrain-status{left:var(--edge);top:118px;width:250px;gap:7px;pointer-events:none}
 html.touch-device .terrain-status>b{font-size:13px}
 html.touch-device .touch-controls{left:var(--edge);right:var(--right-edge);bottom:calc(60px + env(safe-area-inset-bottom));display:grid;grid-template-columns:clamp(164px,23vw,250px) 1fr clamp(188px,26vw,290px);grid-template-rows:var(--control-h) var(--control-h);gap:8px 16px;pointer-events:none;align-items:stretch}
 html.touch-device .touch-pad{gap:8px;display:grid;min-width:0;pointer-events:auto;grid-template-columns:1fr 1fr}
 html.touch-device .touch-pad:first-child{grid-column:1;grid-row:2}
 html.touch-device .touch-pad.weight{grid-column:1;grid-row:1;max-width:none;width:auto;justify-self:stretch}
 html.touch-device .touch-pad.drive{grid-column:3;grid-row:1 / 3;grid-template-rows:1fr 1fr}
 html.touch-device .touch-pad button{height:100%;min-height:var(--control-h);min-width:0;font-size:14px;padding:4px 6px;background:#172c27d6}
 html.touch-device .touch-pad.drive .accelerate{min-height:calc(var(--control-h)*2 + 8px);width:auto;background:#d6ff61}
 html.touch-device .touch-pad button.active{background:#e5ff9f;color:#142016}
 html.touch-device .telemetry{right:var(--right-edge);bottom:calc(var(--control-h)*2 + 92px + env(safe-area-inset-bottom));width:115px;pointer-events:none}
 html.touch-device .speed>span{font-size:48px}html.touch-device .speed-track,html.touch-device .balance-head,html.touch-device .balance-track,html.touch-device .balance-label{display:none}
 html.touch-device .camera-hint{display:none}
 html.touch-device footer{padding:3px var(--right-edge) calc(3px + env(safe-area-inset-bottom)) var(--edge);min-height:54px}
 html.touch-device .utility{width:100%;justify-content:space-between;gap:8px}
 html.touch-device .utility button{min-height:44px}html.touch-device .utility kbd{display:none}
 html.touch-device #help{width:44px;height:44px}
 html.touch-device .welcome{left:var(--edge);right:auto;bottom:calc(var(--control-h)*2 + 84px + env(safe-area-inset-bottom));max-width:55vw}
 html.touch-device .route-switch{margin:4px 0}
 html.touch-device .welcome h2{font-size:34px;margin:8px 0 14px;letter-spacing:3px}
 html.touch-device .welcome .eyebrow,html.touch-device .welcome p,html.touch-device .start-note{display:none}
 html.touch-device .welcome .primary{min-width:150px;padding:12px 16px}
 html.touch-device #toast{top:auto;bottom:calc(var(--control-h)*2 + 80px + env(safe-area-inset-bottom));max-width:48%;white-space:normal;text-align:center;padding:8px 12px}
 html.touch-device .crash-panel{right:var(--right-edge);top:60px;bottom:auto;width:min(300px,42vw);padding:12px}
 html.touch-device .crash-panel h2{font-size:22px}html.touch-device .crash-panel small{display:none}
}
@media (orientation:landscape) and (max-height:430px){
 html.touch-device .welcome{bottom:170px}html.touch-device .welcome h2{font-size:27px;margin:4px 0 8px}
 html.touch-device .welcome .primary,html.touch-device #jump-start{min-height:44px;padding:9px 12px;font-size:13px}
 html.touch-device .terrain-status{top:114px;font-size:11px}
 html.touch-device .telemetry{bottom:170px}html.touch-device .speed>span{font-size:38px}
 html.touch-device #toast{bottom:160px;font-size:12px}
}
@media (orientation:landscape) and (max-height:430px) and (max-width:700px){
 html.touch-device .welcome .route-switch{display:none}
}