:root{color-scheme:dark;--bg:#07090c;--panel:#10151b;--panel2:#151b22;--edge:#28313b;--text:#f5f7fa;--muted:#8e99a6;--accent:#86ff8f;--warn:#ff6b6b}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 50% -20%,#18202a 0,#080b0f 42%,#05070a 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}button{touch-action:manipulation}.shell{height:100dvh;display:flex;flex-direction:column;padding:12px;gap:10px}.topbar{height:48px;display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}.brand{background:none;border:0;color:var(--text);padding:0;display:flex;align-items:baseline;gap:10px;cursor:pointer}.brand strong{font-size:24px;letter-spacing:.2px}.sub{color:var(--muted);font-size:12px;font-weight:700}.status{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.dot{width:9px;height:9px;border-radius:50%;background:#58616b}.dot.live{background:var(--accent);box-shadow:0 0 10px rgba(134,255,143,.65)}.badge{padding:5px 8px;border-radius:999px;border:1px solid var(--edge);font-size:10px;font-weight:900;letter-spacing:.8px;color:#bec7d0}#clock{margin-left:6px;color:var(--text);font-weight:800}.view{display:none;flex:1;min-height:0}.view.active{display:block}.eyebrow{font-size:11px;letter-spacing:1.8px;font-weight:900;color:var(--muted)}.muted{color:var(--muted);line-height:1.45}.hero-grid{height:100%;display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:10px}.tile{border:1px solid var(--edge);background:linear-gradient(160deg,#141a21,#0e1217);color:var(--text);border-radius:22px;padding:20px;text-align:left;display:flex;align-items:center;gap:18px;cursor:pointer}.tile:active{transform:scale(.99)}.tile b{display:block;font-size:27px}.tile small{display:block;color:var(--muted);font-weight:700;margin-top:4px}.tile-icon{font-size:36px;width:52px;text-align:center}.speed-tile{grid-row:1/4;flex-direction:column;align-items:stretch;justify-content:space-between;padding:26px;background:radial-gradient(circle at 25% 25%,#1d2630,#10151a 55%,#0b0f13)}.hero-speed{display:flex;align-items:flex-end;gap:14px}.hero-speed b{font-size:clamp(120px,19vw,230px);line-height:.78;letter-spacing:-10px}.hero-speed small{font-size:22px;margin-bottom:12px}.tile-foot{display:flex;justify-content:space-between;color:#d4dae0;font-size:18px;font-weight:900}.ride-layout,.map-layout{height:100%;display:grid;grid-template-columns:1.55fr .75fr;gap:10px}.speed-panel,.stats-panel,.map-panel,.map-tools,.center-card,.settings-card{border:1px solid var(--edge);background:linear-gradient(160deg,#121820,#0d1116);border-radius:22px}.speed-panel{padding:24px;display:flex;flex-direction:column;justify-content:space-between}.speed-readout{display:flex;align-items:flex-end;gap:16px}.speed-readout>span{font-size:clamp(130px,21vw,250px);font-weight:900;line-height:.75;letter-spacing:-12px}.speed-readout small{font-size:24px;color:var(--muted);font-weight:900;margin-bottom:14px}.heading-strip{display:flex;justify-content:space-between;font-size:21px;font-weight:800;color:#d3d9df}.stats-panel{padding:18px;display:flex;flex-direction:column;gap:10px}.stat{padding:14px 0;border-bottom:1px solid #222b34;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}.stat span{font-size:11px;letter-spacing:1.3px;color:var(--muted);font-weight:900}.stat b{font-size:22px}.stat.compact b{font-size:26px}.stack-buttons{display:grid;gap:8px;margin-top:auto}button{min-height:50px;border:0;border-radius:13px;background:var(--text);color:#090b0e;font-weight:900;padding:0 16px;cursor:pointer}.ghost{background:#192028;color:var(--text);border:1px solid #303b46}.danger{color:#ffb5b5}.map-panel{position:relative;overflow:hidden;background:radial-gradient(circle at center,#111a1e,#090d11)}#trailCanvas{display:block;width:100%;height:100%}.map-overlay{position:absolute;background:rgba(6,9,12,.78);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px 13px}.top-left{left:14px;top:14px}.bottom-left{left:14px;bottom:14px;color:#c7d0d8;font-size:12px}.map-overlay b{font-size:34px}.map-overlay small{margin-left:7px;color:var(--muted);font-weight:900}.map-fab{position:absolute;right:14px;bottom:14px;width:54px;min-height:54px;border-radius:50%;padding:0;font-size:24px}.map-tools{padding:18px;display:flex;flex-direction:column;gap:12px}.map-tools h2,.settings-card h2{margin:4px 0 0}.map-tools p{margin:6px 0}.onx-box{display:grid;gap:8px;margin-top:auto}.onx-box label{font-size:10px;letter-spacing:1.4px;font-weight:900;color:var(--muted)}input{width:100%;min-height:48px;background:#080b0f;border:1px solid #303944;border-radius:12px;color:var(--text);padding:0 12px;outline:none}.button-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.center-card{height:100%;padding:28px;display:flex;flex-direction:column;justify-content:center;max-width:900px;margin:auto}.center-card h1{font-size:46px;margin:5px 0}.media-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:620px}.now-playing{margin-top:30px;padding:20px;border-radius:17px;border:1px solid var(--edge);background:#0a0e13;display:grid;gap:8px}.now-playing span{font-size:10px;letter-spacing:1.4px;color:var(--muted);font-weight:900}.now-playing b{font-size:24px}.now-playing small{color:var(--muted)}.settings-grid{height:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.settings-card{padding:20px;display:flex;flex-direction:column;gap:10px}.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:14px;background:#090d11}.segmented button{min-height:42px;background:transparent;color:var(--muted);border-radius:10px}.segmented button.active{background:#202832;color:var(--text)}.full{width:100%;margin-top:4px}.dock{height:62px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;flex:0 0 auto}.dock button{min-height:62px;background:#10151a;color:var(--muted);border:1px solid var(--edge);display:flex;align-items:center;justify-content:center;gap:8px}.dock button span{font-size:20px}.dock button small{font-weight:900;font-size:11px}.dock button.active{background:#1b232b;color:var(--text);border-color:#3a4652}@media(max-width:760px){.shell{padding:7px;gap:7px}.topbar{height:40px}.brand strong{font-size:20px}.status{font-size:10px}.hero-grid{grid-template-columns:1.4fr 1fr;gap:7px}.tile{padding:12px;border-radius:16px}.tile b{font-size:21px}.tile-icon{font-size:28px;width:38px}.speed-tile{padding:16px}.hero-speed b{font-size:95px;letter-spacing:-6px}.hero-speed small{font-size:16px}.tile-foot{font-size:14px}.ride-layout,.map-layout{grid-template-columns:1.35fr .8fr;gap:7px}.speed-panel,.stats-panel,.map-panel,.map-tools,.center-card,.settings-card{border-radius:16px}.speed-panel{padding:16px}.speed-readout>span{font-size:105px;letter-spacing:-7px}.speed-readout small{font-size:17px}.heading-strip{font-size:15px}.stats-panel,.map-tools{padding:12px}.stat{padding:9px 0}.stat b{font-size:17px}.settings-grid{gap:7px}.settings-card{padding:12px}.settings-card p{font-size:12px}.dock{height:54px;gap:5px}.dock button{min-height:54px;gap:5px;padding:0 8px}.dock button span{font-size:17px}.dock button small{font-size:9px}}


/* Preserve the Pi landscape layout while making beta controls reachable on phones. */
[hidden]{display:none!important}button:disabled{opacity:.55;cursor:default}input{font-size:16px}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shell{padding-top:max(7px,env(safe-area-inset-top));padding-bottom:max(7px,env(safe-area-inset-bottom))}.view.active{overflow:auto;overscroll-behavior:contain}.settings-card,.map-tools,.stats-panel{min-width:0}.settings-card{overflow:auto}.map-tools{overflow:auto}.history-row{flex-wrap:wrap}.history-copy{flex:1 1 120px}.history-copy b{white-space:normal}.history-view{min-height:44px}.field-label{margin-bottom:8px}#storageStatus{font-size:12px;margin:0}.settings-grid{min-height:0}.brand .sub{font-size:10px}
@media(max-width:600px){
 .topbar{height:auto;min-height:42px;gap:6px}.brand{align-items:flex-start;flex-direction:column;gap:0}.status{flex-wrap:wrap;justify-content:flex-end;gap:5px}.brand .sub{font-size:8px}#clock{display:none}
 .hero-grid{grid-template-columns:1fr 1fr;grid-template-rows:1.5fr 1fr 1fr}.speed-tile{grid-column:1/3;grid-row:1;min-height:170px}.hero-speed b{font-size:100px}.tile{gap:8px}.tile b{font-size:20px}.tile-icon{width:28px}.hero-grid>.tile:last-child{grid-column:1/3}
 .ride-layout,.map-layout{height:auto;min-height:100%;grid-template-columns:1fr}.speed-panel{min-height:235px}.speed-readout>span{font-size:125px}.stats-panel{min-height:320px}.map-panel{height:55dvh;min-height:300px}.map-tools{overflow:visible}.settings-grid{height:auto;grid-template-columns:1fr}.settings-card{overflow:visible}.dock button{flex-direction:column;gap:1px}.center-card{height:auto;min-height:100%;padding:18px}.center-card h1{font-size:34px}.media-actions.single{grid-template-columns:1fr}.notice-card{max-height:85dvh}.field-grid{grid-template-columns:1fr}.map-status{top:80px;left:14px;transform:none;max-width:75%;font-size:9px}.map-past{min-height:44px;font-size:10px}
}
@media(max-height:500px) and (min-width:601px){.ride-layout,.map-layout{min-height:410px}.hero-grid{min-height:280px}.topbar{height:34px}.dock{height:48px}.dock button{min-height:48px}.settings-grid{height:100%;}.speed-readout>span{font-size:140px}}

/* v0.16 field cockpit pass: high contrast hierarchy without adding animation cost. */
:root{--bg:#070b10;--panel:#111923;--panel2:#17222c;--edge:#2b3a46;--muted:#aab7c4;--accent:#50d7ff;--live:#76f2a0;--amber:#ffbe69;--danger:#ff7474}
body{background:radial-gradient(circle at 50% -20%,#183040 0,#0a1016 45%,#05070a 100%)}
.topbar{border-bottom:1px solid rgba(80,215,255,.12);padding-bottom:7px}.brand strong{letter-spacing:.4px}.brand strong::before{content:'// ';color:var(--accent);font-weight:500}.status{color:#c2ced8}.device-badge,.record-badge{padding:5px 8px;border-radius:999px;border:1px solid #334451;font-size:9px;font-weight:900;letter-spacing:.7px}.device-badge{color:var(--accent)}.record-badge{color:var(--live)}.record-badge[data-state=recording]{color:#07120b;background:var(--live);border-color:var(--live)}.record-badge[data-state=paused]{color:var(--amber);border-color:rgba(255,190,105,.45)}.record-badge[data-state=saving]{color:var(--amber);border-color:var(--amber)}
.tile,.speed-panel,.stats-panel,.map-panel,.map-tools,.center-card,.settings-card,.library-card,.library-hero{border-color:#2b3d4b;box-shadow:0 12px 32px rgba(0,0,0,.22)}.tile:hover,.dock button:hover{border-color:rgba(80,215,255,.65)}.tile:focus-visible,.dock button:focus-visible{outline-color:var(--accent)}.speed-tile{background:radial-gradient(circle at 18% 18%,#1b3a49,#101a22 52%,#0a1015)}.speed-tile .eyebrow,.ride-layout .eyebrow{color:var(--accent)}.nav-tile{background:linear-gradient(145deg,#142c39,#10171e)}.tile-icon{color:var(--accent)}.stat b{color:#f8fbff}.stat span{color:#aebdca}.dock{grid-template-columns:repeat(6,1fr)}.dock button.active{color:#f9fdff;background:linear-gradient(180deg,#1c3b4a,#14232e);border-color:var(--accent);box-shadow:0 0 0 1px rgba(80,215,255,.12) inset}.dock button.active span{color:var(--accent)}
.library-layout{height:100%;display:grid;grid-template-columns:1.1fr 1.4fr;grid-template-rows:auto 1fr;gap:10px;overflow:auto}.library-hero{grid-column:1/-1;padding:22px;border:1px solid var(--edge);border-radius:22px;background:linear-gradient(140deg,#132c38,#0f161d)}.library-hero h1{margin:5px 0;font-size:clamp(28px,4vw,46px)}.library-hero p{max-width:720px;margin:0 0 16px}.library-actions{display:flex;gap:8px}.library-card{min-height:0;padding:18px;border:1px solid var(--edge);border-radius:22px;background:linear-gradient(160deg,#121c25,#0d1319);overflow:auto}.route-box{display:grid;gap:9px}.route-box::before{content:'ROUTE PLANNER';font-size:11px;letter-spacing:1.8px;font-weight:900;color:var(--accent)}.legacy-history{border-top:1px solid #273541;margin-top:14px;padding-top:14px}
.daylight{--text:#faffff;--muted:#e0edf4;--edge:#557080;--panel:#16232b;--panel2:#20323e;--accent:#00a9d1}.daylight body{background:#10232c}.daylight .tile,.daylight .speed-panel,.daylight .stats-panel,.daylight .map-panel,.daylight .map-tools,.daylight .center-card,.daylight .settings-card,.daylight .library-card,.daylight .library-hero{box-shadow:0 10px 28px rgba(0,0,0,.34)}
@media(max-width:760px){.dock{grid-template-columns:repeat(6,1fr)}.dock button{padding:0 3px}.dock button small{font-size:8px}.library-layout{grid-template-columns:1fr;grid-template-rows:auto auto auto}.library-hero,.library-card{border-radius:16px}.library-card{padding:13px}.library-actions button{flex:1}.status{gap:4px}.device-badge{display:none}}

/* v0.17 product pass: More is a secondary hub, while the map gets the full
   mobile viewport and its tools float above the map instead of pushing it
   below the fold. */
.dock{grid-template-columns:repeat(5,1fr)}
.more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0 6px}.more-tile{min-height:78px;padding:14px;text-align:left;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;background:linear-gradient(145deg,#152a35,#10171e);color:var(--text);border:1px solid #2b4653}.more-tile span{grid-row:1 / span 2;font-size:26px;color:#50d7ff}.more-tile b{font-size:15px}.more-tile small{color:var(--muted);font-size:11px}.more-divider{height:1px;background:#293843;margin:12px 0 18px}.more-panel{margin-top:18px;padding:16px;border:1px solid #2b4653;border-radius:16px;background:#0b1218}.offline-list{display:grid;gap:8px;margin:12px 0}.offline-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid #2b3d48;border-radius:12px;background:#101a21}.offline-row div{display:grid;gap:4px;min-width:0}.offline-row b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.offline-row small{color:var(--muted);font-size:10px}.file-button{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;cursor:pointer}.file-button input{display:none}
@media(max-width:600px){
  .dock{grid-template-columns:repeat(5,1fr)}
  .dock button{padding:0 3px}
  .dock button small{font-size:8px}
  #mapView.view.active{overflow:hidden}
  #mapView .map-layout{height:100%;min-height:0;display:block;position:relative}
  #mapView .map-panel{height:100%;min-height:0;border-radius:16px}
  #mapView .map-tools{position:absolute;z-index:6;left:8px;right:8px;bottom:8px;max-height:31dvh;overflow:auto;padding:10px;border-radius:15px;background:rgba(8,14,19,.9);backdrop-filter:blur(14px);box-shadow:0 14px 36px rgba(0,0,0,.42)}
  #mapView .map-tools>div:first-child{display:none}
  #mapView .map-tools .stat{display:none}
  #mapView .map-tools .route-nav-status{margin:0 0 7px}
  #mapView .map-tools .external-route-box{display:grid}
  #mapView .map-tools #exportGpx{min-height:42px}
  .more-grid{gap:7px}.more-tile{min-height:70px;padding:10px}.more-tile b{font-size:13px}.more-tile small{font-size:9px}
}
.route-nav-status{padding:12px 14px;border:1px solid #2b3d4b;border-radius:13px;background:rgba(8,14,19,.72);color:#dceaf1;font-size:13px;font-weight:800;line-height:1.35}.route-nav-status[data-state="on-route"]{border-color:rgba(200,255,94,.55);color:#e2ffb0}.route-nav-status[data-state="off-route"]{border-color:rgba(255,154,77,.7);color:#ffd0a8}