/* RideOS beta-16 map-first design system. Loaded after legacy styles so the
   proven recorder/storage DOM can remain intact while presentation evolves. */
:root[data-rideos-ui="v16"]{
  color-scheme:dark;
  --v16-bg:#070a0d;
  --v16-surface:#10161c;
  --v16-surface-raised:#17212a;
  --v16-surface-overlay:rgba(10,15,20,.86);
  --v16-text:#f5f8fa;
  --v16-text-secondary:#c0cbd3;
  --v16-text-muted:#7f909d;
  --v16-accent:#39d6ff;
  --v16-accent-strong:#8ae8ff;
  --v16-success:#64ee9a;
  --v16-warning:#ffc46b;
  --v16-danger:#ff727d;
  --v16-record:#ff5364;
  --v16-divider:rgba(173,203,220,.15);
  --v16-map-control:rgba(8,13,18,.84);
  --v16-shadow:0 16px 48px rgba(0,0,0,.38);
  --v16-radius:18px;
}
:root[data-rideos-ui="v16"][data-resolved-theme="day"]{
  color-scheme:light;
  --v16-bg:#e9eff2;
  --v16-surface:#f8fbfc;
  --v16-surface-raised:#ffffff;
  --v16-surface-overlay:rgba(247,251,252,.91);
  --v16-text:#0a151d;
  --v16-text-secondary:#31434e;
  --v16-text-muted:#647884;
  --v16-accent:#007fa7;
  --v16-accent-strong:#005f7c;
  --v16-success:#0b7b42;
  --v16-warning:#985d00;
  --v16-danger:#bf2635;
  --v16-record:#d71934;
  --v16-divider:rgba(19,50,66,.16);
  --v16-map-control:rgba(250,253,254,.9);
  --v16-shadow:0 14px 40px rgba(23,45,55,.18);
}

html[data-rideos-ui="v16"],html[data-rideos-ui="v16"] body{background:var(--v16-bg);color:var(--v16-text)}
html[data-rideos-ui="v16"] body{background-image:radial-gradient(circle at 30% -10%,color-mix(in srgb,var(--v16-accent) 13%,transparent),transparent 38%)}
html[data-rideos-ui="v16"] .shell{padding:8px;gap:8px;background:transparent}
html[data-rideos-ui="v16"] .topbar{height:44px;padding:0 4px 7px;border-bottom:1px solid var(--v16-divider);z-index:20}
html[data-rideos-ui="v16"] .brand strong{font-size:22px;letter-spacing:-.4px;color:var(--v16-text)}
html[data-rideos-ui="v16"] .brand strong::before{content:''}
html[data-rideos-ui="v16"] .brand .sub{color:var(--v16-text-muted);font-size:9px;letter-spacing:.8px}
html[data-rideos-ui="v16"] .status{color:var(--v16-text-secondary)}
html[data-rideos-ui="v16"] #sourceBadge,html[data-rideos-ui="v16"] #deviceMode,html[data-rideos-ui="v16"] #clock{display:none}
html[data-rideos-ui="v16"] #gpsText{font-weight:800}
html[data-rideos-ui="v16"] .record-badge{background:transparent;border-color:var(--v16-divider);color:var(--v16-text-secondary)}
html[data-rideos-ui="v16"] .record-badge[data-state="recording"]{background:var(--v16-record);border-color:var(--v16-record);color:#fff}

/* Beta-16 primary experience is the map. Legacy Home/Ride screens remain in the
   DOM for recovery/tests but are no longer first-class navigation destinations. */
html[data-rideos-ui="v16"] #mapView.view.active{display:block;overflow:hidden;position:relative}
html[data-rideos-ui="v16"] #mapView .map-layout{height:100%;min-height:0;display:block;position:relative}
html[data-rideos-ui="v16"] #mapView .map-panel{height:100%;min-height:0;border:0;border-radius:var(--v16-radius);background:#10161b;box-shadow:var(--v16-shadow)}
html[data-rideos-ui="v16"] #trailCanvas{background:#10161b}
html[data-rideos-ui="v16"] #mapView .map-overlay.top-left{display:none}
html[data-rideos-ui="v16"] #mapView .map-overlay.bottom-left{left:12px;bottom:12px;max-width:52%;padding:7px 10px;font-size:10px;background:var(--v16-map-control);color:var(--v16-text-secondary);border:1px solid var(--v16-divider);backdrop-filter:blur(10px)}
html[data-rideos-ui="v16"] #mapStatus{top:12px;left:50%;transform:translateX(-50%);background:var(--v16-map-control);border:1px solid var(--v16-divider);color:var(--v16-text-secondary);box-shadow:none;font-size:9px;letter-spacing:.8px}
html[data-rideos-ui="v16"] #mapStatus.live{color:var(--v16-success);border-color:color-mix(in srgb,var(--v16-success) 35%,transparent)}
html[data-rideos-ui="v16"] #mapView .map-zoom{right:12px;top:58px;gap:5px}
html[data-rideos-ui="v16"] #mapView .map-zoom button,html[data-rideos-ui="v16"] #mapView .map-fab,html[data-rideos-ui="v16"] .v16-map-actions button{background:var(--v16-map-control);color:var(--v16-text);border:1px solid var(--v16-divider);box-shadow:0 8px 24px rgba(0,0,0,.22);backdrop-filter:blur(10px)}
html[data-rideos-ui="v16"] #mapView .map-zoom button{width:46px;min-height:46px;border-radius:14px;font-size:23px}
html[data-rideos-ui="v16"] #layersBtn{right:12px;bottom:76px;width:auto;min-width:76px;height:46px;min-height:46px;border-radius:14px;padding:0 14px;font-size:11px}
html[data-rideos-ui="v16"] #recenterBtn{right:12px;bottom:14px;width:52px;min-height:52px;border-radius:16px;font-size:22px}
html[data-rideos-ui="v16"] .map-attribution{background:rgba(6,10,13,.7);border-radius:7px;color:#d7e0e5}

/* Existing large map-tools column becomes a contextual sheet instead of permanent chrome. */
html[data-rideos-ui="v16"] #mapView .map-tools{display:none;position:absolute;z-index:25;left:12px;right:12px;bottom:12px;max-height:min(58dvh,520px);overflow:auto;padding:14px;border:1px solid var(--v16-divider);border-radius:20px;background:var(--v16-surface-overlay);color:var(--v16-text);box-shadow:var(--v16-shadow);backdrop-filter:blur(18px)}
html[data-rideos-ui="v16"] #mapView.v16-tools-open .map-tools{display:flex}
html[data-rideos-ui="v16"] #mapView .map-tools>.map-tools-intro{display:none}
html[data-rideos-ui="v16"] #mapView .map-tools>#rideGroupBox{display:none!important}
html[data-rideos-ui="v16"] #mapView .map-tools .stat{display:none}

/* Dash HUD: one source of glanceable ride information, all backed by the existing recorder state. */
.v16-hud{position:absolute;z-index:9;left:14px;top:14px;display:grid;gap:9px;pointer-events:none;max-width:min(360px,62%)}
.v16-speed-block{display:flex;align-items:flex-end;gap:8px;width:max-content;padding:10px 14px;border:1px solid var(--v16-divider);border-radius:18px;background:var(--v16-surface-overlay);box-shadow:0 10px 30px rgba(0,0,0,.22);backdrop-filter:blur(12px)}
.v16-speed-block span{font-size:clamp(54px,10vw,92px);line-height:.78;font-weight:950;letter-spacing:-5px;color:var(--v16-text);font-variant-numeric:tabular-nums}
.v16-speed-block small{margin-bottom:4px;font-size:10px;font-weight:950;letter-spacing:1.3px;color:var(--v16-text-muted)}
.v16-dash-data{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.v16-dash-data>div,.v16-group-glance{padding:8px 10px;border:1px solid var(--v16-divider);border-radius:13px;background:var(--v16-surface-overlay);backdrop-filter:blur(10px)}
.v16-dash-data span,.v16-group-glance span{display:block;font-size:8px;font-weight:950;letter-spacing:1.2px;color:var(--v16-text-muted)}
.v16-dash-data b,.v16-group-glance b{display:block;margin-top:2px;font-size:13px;color:var(--v16-text)}
.v16-group-glance{display:none}
.v16-ride-actions{display:flex;align-items:center;gap:7px;pointer-events:none}
.v16-record{pointer-events:auto;width:max-content;min-height:44px;padding:0 14px;display:flex;align-items:center;gap:8px;border-radius:14px;background:var(--v16-surface-overlay);border:1px solid var(--v16-divider);color:var(--v16-text);backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.v16-finish{pointer-events:auto;width:max-content;min-height:44px;padding:0 14px;border-radius:14px;background:var(--v16-surface-overlay);border:1px solid color-mix(in srgb,var(--v16-danger) 42%,var(--v16-divider));color:var(--v16-danger);backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.v16-record .v16-rec-dot{width:9px;height:9px;border-radius:50%;background:var(--v16-text-muted)}
.v16-record[data-state="recording"] .v16-rec-dot{background:var(--v16-record);box-shadow:0 0 0 5px color-mix(in srgb,var(--v16-record) 18%,transparent)}
.v16-record[data-state="recording"]{border-color:color-mix(in srgb,var(--v16-record) 45%,transparent)}
.v16-record[data-state="saving"] .v16-rec-dot{background:var(--v16-warning)}

.v16-map-actions{position:absolute;z-index:13;right:12px;top:12px;display:flex;gap:7px}
.v16-map-actions button{min-height:42px;padding:0 13px;border-radius:13px;font-size:11px}

.v16-sheet{position:absolute;z-index:35;right:12px;top:62px;width:min(390px,calc(100% - 24px));padding:14px;border-radius:20px;border:1px solid var(--v16-divider);background:var(--v16-surface-overlay);box-shadow:var(--v16-shadow);backdrop-filter:blur(20px);color:var(--v16-text)}
.v16-sheet[hidden]{display:none!important}.v16-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.v16-sheet-head div{display:grid;gap:2px}.v16-sheet-head span{font-size:9px;font-weight:950;letter-spacing:1.4px;color:var(--v16-text-muted)}.v16-sheet-head b{font-size:20px}.v16-sheet-head button{min-height:38px;width:38px;padding:0;border-radius:12px;background:var(--v16-surface-raised);color:var(--v16-text);border:1px solid var(--v16-divider);font-size:22px}
.v16-segment{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:4px;background:color-mix(in srgb,var(--v16-surface) 88%,transparent);border-radius:14px}.v16-segment button{min-height:42px;background:transparent;color:var(--v16-text-secondary);border:1px solid transparent}.v16-segment button.active{background:var(--v16-surface-raised);color:var(--v16-accent);border-color:var(--v16-divider)}
.v16-sheet-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}.v16-sheet-actions button{min-height:44px;background:var(--v16-surface-raised);color:var(--v16-text);border:1px solid var(--v16-divider);font-size:11px}
.v16-layout-sheet{width:min(470px,calc(100% - 24px))}.v16-layout-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.v16-layout-grid button{min-height:72px;padding:11px;text-align:left;display:grid;align-content:center;gap:3px;background:var(--v16-surface-raised);color:var(--v16-text);border:1px solid var(--v16-divider)}.v16-layout-grid button b{font-size:13px}.v16-layout-grid button small{color:var(--v16-text-muted);font-size:10px}.v16-layout-grid button.active{border-color:var(--v16-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--v16-accent) 28%,transparent) inset}.v16-layout-grid button.active b{color:var(--v16-accent)}

/* Layout personalities all share one canvas and one recorder. */
html[data-dashboard-layout="map-focus"] .v16-dash-data{display:none}
html[data-dashboard-layout="map-focus"] .v16-speed-block span{font-size:clamp(58px,9vw,84px)}
html[data-dashboard-layout="split-dash"] .v16-hud{left:auto;right:10px;top:68px;bottom:12px;width:min(34%,360px);max-width:none;align-content:start;padding:14px;border-left:1px solid var(--v16-divider);border-radius:18px;background:var(--v16-surface-overlay);backdrop-filter:blur(18px);box-shadow:-12px 0 36px rgba(0,0,0,.2)}
html[data-dashboard-layout="split-dash"] .v16-speed-block{width:100%;justify-content:center;background:transparent;border:0;box-shadow:none;padding:14px 4px 18px}
html[data-dashboard-layout="split-dash"] .v16-speed-block span{font-size:clamp(70px,12vw,120px)}
html[data-dashboard-layout="split-dash"] .v16-dash-data{grid-template-columns:1fr}.v16-dash-data>div{min-width:0}
html[data-dashboard-layout="instrument"] .v16-hud{left:50%;top:50%;transform:translate(-50%,-50%);max-width:min(520px,80%);width:min(520px,80%);justify-items:center}.v16-record{justify-self:center}
html[data-dashboard-layout="instrument"] .v16-speed-block span{font-size:clamp(105px,21vw,210px)}
html[data-dashboard-layout="instrument"] .v16-dash-data{width:100%;grid-template-columns:repeat(4,1fr)}
html[data-dashboard-layout="group"] .v16-group-glance{display:block}
html[data-dashboard-layout="group"] .v16-dash-data{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-dashboard-layout="minimal"] .v16-dash-data,html[data-dashboard-layout="minimal"] .v16-group-glance{display:none}
html[data-dashboard-layout="minimal"] .v16-speed-block{padding:8px 12px}.v16-speed-block span{transition:font-size .15s ease}
html[data-dashboard-layout="explorer"] .v16-dash-data,html[data-dashboard-layout="explorer"] .v16-group-glance,html[data-dashboard-layout="explorer"] .v16-record{display:none}
html[data-dashboard-layout="explorer"] .v16-speed-block{padding:7px 10px}.v16-speed-block span{font-size:44px;letter-spacing:-2px}

html[data-ride-context="explore"] .v16-record{display:none}
html[data-ride-context="explore"] #mapView .map-overlay.bottom-left{display:block}
html[data-ride-context="ride"] #mapView .map-overlay.bottom-left{opacity:.75}

/* Auto-hide only removes secondary chrome; speed/recording/warnings remain.
   recenterBtn is deliberately excluded below - "find my position" is a
   safety/utility action a rider needs precisely when idly glancing at a
   drifted map mid-ride, not chrome to declutter away. It only dims. */
html[data-rideos-ui="v16"] #mapView.v16-controls-hidden .v16-secondary-control,
html[data-rideos-ui="v16"] #mapView.v16-controls-hidden #layersBtn,
html[data-rideos-ui="v16"] #mapView.v16-controls-hidden .map-zoom,
html[data-rideos-ui="v16"] #mapView.v16-controls-hidden .map-overlay.bottom-left{opacity:0;pointer-events:none;transition:opacity .22s ease}
html[data-rideos-ui="v16"] #mapView.v16-controls-hidden #recenterBtn{opacity:.55;transition:opacity .22s ease}
.v16-secondary-control,#layersBtn,.map-zoom,#recenterBtn,.map-overlay.bottom-left{transition:opacity .18s ease}

/* Modern layer sheet */
html[data-rideos-ui="v16"] .map-layers{top:62px;right:12px;width:min(420px,calc(100% - 24px));max-height:calc(100% - 78px);overflow:auto;border-radius:20px;border:1px solid var(--v16-divider);background:var(--v16-surface-overlay);color:var(--v16-text);box-shadow:var(--v16-shadow);backdrop-filter:blur(20px)}
html[data-rideos-ui="v16"] .layer-style,html[data-rideos-ui="v16"] .orientation-button{background:var(--v16-surface-raised);color:var(--v16-text-secondary);border-color:var(--v16-divider)}
html[data-rideos-ui="v16"] .layer-style.active,html[data-rideos-ui="v16"] .orientation-button.active{border-color:var(--v16-accent);color:var(--v16-accent)}

/* Dedicated group management: the existing live group component is moved here. */
.v16-page{height:100%;overflow:auto;padding:clamp(14px,2.2vw,26px);border-radius:var(--v16-radius);background:linear-gradient(150deg,var(--v16-surface),color-mix(in srgb,var(--v16-surface) 82%,var(--v16-accent) 5%));border:1px solid var(--v16-divider);box-shadow:var(--v16-shadow)}
.v16-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.v16-page-head h1{margin:4px 0;font-size:clamp(28px,5vw,48px);letter-spacing:-1.3px}.v16-page-head p{margin:0;color:var(--v16-text-muted)}.v16-page-head button{background:var(--v16-surface-raised);color:var(--v16-text);border:1px solid var(--v16-divider)}
.v16-group-surface{display:grid;gap:10px;max-width:900px}.v16-group-card{display:grid;gap:12px;padding:18px;border:1px solid var(--v16-divider);border-radius:18px;background:var(--v16-surface-raised);margin:0}.v16-group-card>.muted:last-child{font-size:11px}.v16-empty{display:grid;gap:6px;padding:24px;border:1px dashed var(--v16-divider);border-radius:18px;color:var(--v16-text-muted)}.v16-empty b{font-size:19px;color:var(--v16-text)}

/* Five obvious destinations. */
html[data-rideos-ui="v16"] .dock{height:60px;grid-template-columns:repeat(5,1fr);gap:6px}
html[data-rideos-ui="v16"] .dock button{min-height:60px;padding:0 8px;display:flex;flex-direction:column;gap:2px;background:color-mix(in srgb,var(--v16-surface) 94%,transparent);color:var(--v16-text-muted);border:1px solid var(--v16-divider);border-radius:16px}
html[data-rideos-ui="v16"] .dock button span{font-size:17px;line-height:1}html[data-rideos-ui="v16"] .dock button small{font-size:9px;letter-spacing:.4px}
html[data-rideos-ui="v16"] .dock button.active{background:var(--v16-surface-raised);color:var(--v16-text);border-color:color-mix(in srgb,var(--v16-accent) 65%,var(--v16-divider));box-shadow:0 0 0 1px color-mix(in srgb,var(--v16-accent) 12%,transparent) inset}
html[data-rideos-ui="v16"] .dock button.active span{color:var(--v16-accent)}

/* Keep legacy advanced controls wired but remove duplicated daylight control from normal UI. */
html[data-rideos-ui="v16"] [data-v16-legacy="true"]{display:none!important}
html[data-rideos-ui="v16"] .settings-card,html[data-rideos-ui="v16"] .center-card,html[data-rideos-ui="v16"] .library-card,html[data-rideos-ui="v16"] .library-hero{background:var(--v16-surface);border-color:var(--v16-divider);color:var(--v16-text);box-shadow:none}
html[data-rideos-ui="v16"] button{border-radius:14px}
html[data-rideos-ui="v16"] button:focus-visible{outline:2px solid var(--v16-accent);outline-offset:2px}

/* Phone portrait */
@media(max-width:600px){
  html[data-rideos-ui="v16"] .shell{padding:5px;padding-top:max(5px,env(safe-area-inset-top));padding-bottom:max(5px,env(safe-area-inset-bottom));gap:5px}
  html[data-rideos-ui="v16"] .topbar{min-height:38px;height:38px}.brand{flex-direction:row;align-items:baseline;gap:7px}.brand .sub{font-size:7px}.status{font-size:9px}
  html[data-rideos-ui="v16"] #mapView .map-panel{border-radius:14px}
  .v16-hud{left:9px;top:9px;max-width:62%;gap:6px}.v16-speed-block{padding:8px 10px;border-radius:14px}.v16-speed-block span{font-size:58px;letter-spacing:-4px}.v16-dash-data{gap:4px}.v16-dash-data>div,.v16-group-glance{padding:6px 8px;border-radius:11px}.v16-dash-data b,.v16-group-glance b{font-size:11px}.v16-record{min-height:40px;padding:0 11px;border-radius:12px;font-size:11px}
  .v16-map-actions{right:9px;top:9px}.v16-map-actions button{min-height:38px;padding:0 10px;font-size:10px}
  html[data-rideos-ui="v16"] #mapStatus{top:55px;font-size:8px;max-width:54%}
  html[data-rideos-ui="v16"] #mapView .map-zoom{right:9px;top:98px}html[data-rideos-ui="v16"] #mapView .map-zoom button{width:40px;min-height:40px}
  html[data-rideos-ui="v16"] #layersBtn{right:9px;bottom:64px;height:42px;min-height:42px}html[data-rideos-ui="v16"] #recenterBtn{right:9px;bottom:9px;width:48px;min-height:48px}
  .v16-sheet{right:7px;top:52px;width:calc(100% - 14px);padding:12px;border-radius:17px}.v16-layout-grid button{min-height:64px}.v16-sheet-actions{grid-template-columns:1fr 1fr 1fr}
  html[data-dashboard-layout="split-dash"] .v16-hud{left:auto;right:7px;top:55px;bottom:8px;width:42%;padding:8px;max-width:none}.v16-speed-block span{font-size:52px}html[data-dashboard-layout="split-dash"] .v16-speed-block span{font-size:62px}
  html[data-dashboard-layout="instrument"] .v16-hud{width:84%;max-width:84%}html[data-dashboard-layout="instrument"] .v16-speed-block span{font-size:120px}html[data-dashboard-layout="instrument"] .v16-dash-data{grid-template-columns:repeat(2,1fr)}
  html[data-rideos-ui="v16"] .dock{height:55px;gap:4px}html[data-rideos-ui="v16"] .dock button{min-height:55px;border-radius:13px;padding:0 3px}.dock button small{font-size:8px}
  .v16-page{padding:14px;border-radius:14px}.v16-page-head{display:grid}.v16-page-head button{width:100%}
}

/* Landscape phone / Pi / truck: maximize map and use the right side intentionally. */
@media(max-height:520px) and (min-width:601px){
  html[data-rideos-ui="v16"] .shell{padding:5px;gap:5px}.topbar{height:34px;min-height:34px}.brand strong{font-size:18px}.brand .sub{font-size:7px}
  html[data-rideos-ui="v16"] .dock{height:46px}html[data-rideos-ui="v16"] .dock button{min-height:46px;flex-direction:row;gap:6px}.dock button small{font-size:9px}
  .v16-hud{top:8px;left:8px}.v16-speed-block span{font-size:64px}.v16-dash-data>div{padding:5px 8px}
  html[data-dashboard-layout="split-dash"] .v16-hud{top:8px;bottom:8px;right:8px;width:31%;padding:10px}.v16-speed-block span{font-size:74px}html[data-dashboard-layout="split-dash"] .v16-dash-data{grid-template-columns:repeat(2,1fr)}
  html[data-dashboard-layout="instrument"] .v16-speed-block span{font-size:116px}html[data-dashboard-layout="instrument"] .v16-dash-data{grid-template-columns:repeat(4,1fr)}
  .v16-sheet{top:52px;max-height:calc(100% - 58px);overflow:auto}
}

@media(min-width:1000px) and (min-height:560px){
  html[data-dashboard-layout="split-dash"] .v16-hud{width:30%;max-width:420px}
  html[data-dashboard-layout="split-dash"] .v16-dash-data{grid-template-columns:repeat(2,1fr)}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.v16-secondary-control,#layersBtn,.map-zoom,#recenterBtn,.map-overlay.bottom-left{transition:none!important}}