*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
:root{
  --font-sans:"Assistant",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-num:"Rubik","Assistant",ui-sans-serif,sans-serif;
  --ink:#1F2937;--ink-soft:#4B5563;--ink-muted:#8A8E96;--ink-faint:#C2C5CC;
  --bg:#F2EFE9;--surface:#FFFFFF;--surface-2:#FAF8F3;
  --hairline:rgba(31,41,55,.10);--hairline-2:rgba(31,41,55,.06);
  --mint:oklch(78% 0.10 165);--mint-ink:oklch(38% 0.08 165);--mint-tint:oklch(94% 0.04 165);
  --peach:oklch(82% 0.10 55);--peach-ink:oklch(42% 0.10 55);--peach-tint:oklch(95% 0.04 55);
  --lavender:oklch(78% 0.09 295);--lavender-ink:oklch(40% 0.10 295);--lavender-tint:oklch(94% 0.04 295);
  --sky:oklch(73% 0.10 235);--sky-ink:oklch(38% 0.10 235);--sky-tint:oklch(94% 0.04 235);
  --coral:oklch(67% 0.16 22);--coral-ink:oklch(38% 0.14 22);--coral-tint:oklch(94% 0.04 22);
  --blue:oklch(73% 0.10 235);--blue-dk:oklch(38% 0.10 235);
  --green:var(--mint);--orange:var(--peach);--red:var(--coral);--purple:var(--lavender);
  /* ── Primitives (theme-agnostic) — never used directly in components ── */
  --c-green:#34C759;--c-amber:#FF9500;--c-red:#FF3B30;--c-blue:#007AFF;
  /* ── Semantic status tokens — components reference these ── */
  --status-available:var(--c-green);--status-low:var(--c-amber);
  --status-danger:var(--c-red);--status-user:var(--c-blue);
  /* ── Spacing scale (4px base) ── */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
  --card:var(--surface);--card2:var(--surface-2);
  --label:var(--ink);--label2:var(--ink-soft);--label3:var(--ink-muted);
  --sep:var(--hairline);
  --shadow:0 2px 8px rgba(31,41,55,.08),0 1px 2px rgba(31,41,55,.05);
  --shadow-md:0 4px 16px rgba(31,41,55,.11),0 2px 4px rgba(31,41,55,.06);
  --shadow-lg:0 10px 32px rgba(31,41,55,.14),0 4px 10px rgba(31,41,55,.06);
  --shadow-pop:0 20px 60px rgba(31,41,55,.22),0 6px 16px rgba(31,41,55,.10);
  --r:20px;--r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-pill:999px;
}
html,body{height:100%;font-family:var(--font-sans);overflow:hidden;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;}
.skip-link{
  position:fixed;
  inset-block-start:12px;
  inset-inline-start:12px;
  transform:translateY(-160%);
  background:var(--ink);
  color:var(--surface);
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  z-index:5000;
  box-shadow:var(--shadow-md);
}
.skip-link:focus{
  transform:translateY(0);
  outline:3px solid var(--sky);
  outline-offset:3px;
}

/* ── MAP ── */
#map{position:fixed;inset:0;z-index:1;}

/* leaflet-rotate 0.2.8 positions the SVG/Canvas overlay renderer with
   L.DomUtil.setTransform, which only lines up when the renderer container keeps
   transform-origin:0 0 (Leaflet's `leaflet-zoom-animated` class). That class is
   added only for zoom-animated renderers, and leaflet-rotate force-adds it only
   for Leaflet <= 1.9.3. We run Leaflet 1.9.4 with zoomAnimation:false (to stop
   overlays drifting mid-zoom), so neither path applies it and every vector layer
   — bike paths, traffic/route segments, municipal polygons — renders shifted off
   the tiles. Pin the origin back so the overlays stay aligned with the map. */
.leaflet-overlay-pane svg,
.leaflet-overlay-pane canvas{transform-origin:0 0;}

.leaflet-control-zoom{border:none!important;box-shadow:var(--shadow-md)!important;border-radius:14px!important;overflow:hidden;}
.leaflet-control-zoom a{background:var(--surface)!important;color:var(--ink)!important;border:none!important;font-size:18px!important;line-height:30px!important;}
.leaflet-control-zoom a:hover{background:var(--surface-2)!important;}
.leaflet-popup-content-wrapper{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);border:.5px solid var(--hairline-2);}
.leaflet-popup-tip{background:var(--surface);}
.leaflet-popup-content{margin:14px 16px;font-family:var(--font-sans);direction:rtl;text-align:right;color:var(--ink);}
/* Keep embedded numbers / units / currency from breaking the RTL flow */
.leaflet-popup-content bdi{unicode-bidi:isolate;}
.leaflet-attribution-flag{display:none!important;}
.leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.7)!important;border-radius:6px;}

/* ── IDLE: TOP (hidden, buttons still functional via JS) ── */
#idle-top{display:none;}

/* ── SEARCH CARD (inside sheet) ── */
#search-card{
  display:flex;align-items:center;min-height:54px;
  background:var(--surface-2);border-radius:14px;
  border:1px solid var(--hairline);
  box-shadow:0 1px 2px rgba(31,41,55,.05);
  overflow:visible;position:relative;pointer-events:auto;
  margin:4px 14px 0;
}
#search-icon{padding:13px 8px 13px 16px;color:var(--ink-soft);flex-shrink:0;}
#dest-input{
  flex:1;padding:13px 4px;background:none;border:none;
  color:var(--ink);font-size:16px;font-weight:600;outline:none;font-family:var(--font-sans);
}
#dest-input::placeholder{color:var(--ink-soft);font-weight:600;}

#ac-list{
  position:absolute;top:calc(100% + 8px);right:0;left:0;
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);border:.5px solid var(--hairline-2);
  max-height:280px;overflow-y:auto;display:none;z-index:400;
}
#ac-list.open{display:block;}
.ac-row{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;border-bottom:.5px solid var(--hairline-2);}
.ac-row:last-child{border-bottom:none;}
.ac-row:active{background:var(--surface-2);}
.ac-ico{width:36px;height:36px;border-radius:10px;background:var(--surface-2);border:.5px solid var(--hairline-2);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.ac-name{font-size:15px;font-weight:600;color:var(--ink);}
.ac-sub{font-size:13px;color:var(--ink-muted);margin-top:2px;}

/* mode pills */
#mode-pills{display:flex;gap:0;margin:10px 14px 0;pointer-events:auto;
  background:var(--surface-2);border-radius:var(--r-pill);padding:4px;
  border:.5px solid var(--hairline-2);
}
.pill{
  flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 6px;border-radius:var(--r-pill);
  background:transparent;border:none;white-space:nowrap;
  font-size:14px;font-weight:600;color:var(--ink-soft);cursor:pointer;
  font-family:var(--font-sans);transition:background .15s,color .15s;
}
/* The merged "רכיבה" pill carries two glyphs (bike + scooter) — tighten their gap
   so the icon pair reads as one combined mode, and keep all three pills on one row. */
#mode-pills .pill{gap:4px;}
#mode-pills .pill [data-ti]{display:inline-flex;}
#mode-pills .pill [data-ti] + [data-ti]{margin-inline-start:-2px;}
@media (max-width:380px){ #mode-pills .pill{font-size:13px;} }
.pill.active{background:var(--ink);color:#fff;}
/* hide mode pills in search mode */
.search-active #mode-pills{display:none;}
#bike-net-toggle,#routes-toggle,#traffic-toggle,#waze-toggle,
#cameras-toggle,#lime-toggle,#bird-toggle,#dott-toggle{
  display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:7px 13px;
  border:none;border-radius:var(--r-pill);
  background:var(--surface);box-shadow:var(--shadow);border:.5px solid var(--hairline-2);
  font-size:13px;font-weight:500;color:var(--ink-soft);cursor:pointer;pointer-events:auto;
  font-family:var(--font-sans);transition:background .15s,color .15s;
}
#bike-net-toggle.off,#routes-toggle.off,#traffic-toggle.off,#waze-toggle.off,
#cameras-toggle.off,#lime-toggle.off,#bird-toggle.off,#dott-toggle.off{opacity:.6;}
#bike-net-toggle.loading,#routes-toggle.loading,#traffic-toggle.loading,#waze-toggle.loading,
#cameras-toggle.loading,#lime-toggle.loading,#bird-toggle.loading,#dott-toggle.loading{color:var(--ink-muted);}
#bike-net-dot,#routes-dot,#traffic-dot,#waze-dot,
#cameras-dot,#lime-dot,#bird-dot,#dott-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
#bike-net-dot{background:var(--mint);}
#routes-dot{background:var(--peach);}
#traffic-dot{background:var(--coral);}
#waze-dot{background:var(--sky);}
#cameras-dot{background:var(--lavender);}
#lime-dot{background:#7ACC00;}
#bird-dot{background:#666;}
#dott-dot{background:var(--sky);}
#routes-filters{display:none;gap:8px;overflow-x:auto;margin-top:8px;padding-bottom:2px;pointer-events:auto;scrollbar-width:none;}
#routes-filters::-webkit-scrollbar{display:none;}
#routes-filters.open{display:flex;}
.route-filter{
  white-space:nowrap;padding:7px 12px;border:none;border-radius:var(--r-pill);
  background:var(--surface);box-shadow:var(--shadow);border:.5px solid var(--hairline-2);
  color:var(--ink-muted);font-size:12px;font-weight:600;cursor:pointer;flex-shrink:0;
  font-family:var(--font-sans);transition:all .15s;
}
.route-filter.active{background:var(--peach);color:var(--peach-ink);border-color:transparent;}

/* ── BOTTOM SHEET ── */
#sheet{
  position:fixed;bottom:0;left:0;right:0;z-index:20;
  height:100vh;height:100dvh;
  transform:translateY(calc(100% - 160px));
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  pointer-events:auto;
}
#sheet-card{
  background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 -1px 0 var(--hairline-2),var(--shadow-lg);
  height:100%;display:flex;flex-direction:column;overflow:visible;
  transition:border-radius .2s;
}
.search-active{border-radius:0!important;}
.search-active #sheet-handle-wrap{display:none;}
#sheet-handle-wrap{
  padding:12px 0 8px;cursor:ns-resize;touch-action:none;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;
  min-height:44px;
}
.handle-pill{width:40px;height:5px;border-radius:3px;background:var(--ink-faint);margin-bottom:4px;}
#sheet-scroll{flex:1;overflow-y:auto;padding:0 0 40px;margin-top:4px;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
/* In search mode the panel is pinned to the visible viewport, so let the list
   breathe at the bottom (keyboard already clears the rest). */
.search-active #sheet-scroll{padding-bottom:16px;}

/* ── SEARCH MODE ── */
#search-back{
  display:none;width:40px;height:40px;border:none;background:none;cursor:pointer;
  color:var(--ink);flex-shrink:0;align-items:center;justify-content:center;padding:0 0 0 10px;
}
.search-active #search-back{display:flex;}
.search-active #search-icon{display:none;}
#search-clear{
  display:none;width:36px;height:36px;border:none;background:none;cursor:pointer;
  flex-shrink:0;align-items:center;justify-content:center;padding:0;
}
.search-active #search-clear{display:flex;}
/* Search mode: keep the field a clearly-defined, filled pill at the top of the
   panel (not a flat header that melts into the white background). */
.search-active #search-card{
  background:var(--surface-2);border-radius:14px;margin:10px 12px;
  border:1px solid var(--hairline);
  box-shadow:0 1px 3px rgba(31,41,55,.06);
}
.search-active #mode-pills{display:none;}

/* ── SEARCH RESULTS (in sheet) ── */
.search-result-row{
  display:flex;align-items:center;gap:14px;padding:13px 18px;
  border-bottom:.5px solid var(--hairline-2);cursor:pointer;transition:background .12s;
}
.search-result-row:last-child{border-bottom:none;}
.search-result-row:active{background:var(--surface-2);}
.search-result-ico{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--surface-2);border:.5px solid var(--hairline-2);
  display:flex;align-items:center;justify-content:center;color:var(--ink-muted);
}
.search-result-body{flex:1;min-width:0;}
.search-result-name{font-size:15px;font-weight:700;color:var(--ink);}
.search-result-sub{font-size:13px;color:var(--ink-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.search-result-ico--recent{background:var(--surface-3,var(--surface-2));color:var(--ink-soft);}
.search-recents-hdr{padding:10px 18px 4px;font-size:12px;font-weight:700;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em;}
.search-smart-hdr{display:flex;align-items:center;gap:6px;color:var(--sky-ink);}
.search-smart-row{display:flex;flex-wrap:wrap;gap:8px;padding:4px 18px 10px;}
.search-smart-chip{
  display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:var(--r-pill);
  background:var(--sky-tint);border:.5px solid var(--hairline-2);cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;color:var(--ink);
}
.search-smart-chip:active{transform:scale(.96);}
.search-smart-ico{font-size:15px;}
.search-smart-hint{font-size:11px;font-weight:700;color:var(--sky-ink);opacity:.85;}

/* ── FAVORITES ── */
.sheet-section-hdr{
  font-size:12px;font-weight:700;color:var(--ink-muted);
  padding:10px 18px 6px;letter-spacing:.05em;text-transform:uppercase;
}
.sheet-section-hdr--flex{
  display:flex;align-items:center;justify-content:space-between;
}

/* ── Colorblind accessible mode ── */
body.colorblind #turn-bar.danger{background:repeating-linear-gradient(45deg,#B42318,#B42318 8px,#7B1A12 8px,#7B1A12 16px);}
body.colorblind #turn-bar.warn{background:repeating-linear-gradient(-45deg,#B65A00,#B65A00 8px,#8A3A00 8px,#8A3A00 16px);}
body.colorblind #turn-bar.success{background:repeating-linear-gradient(90deg,#1A7A3C,#1A7A3C 8px,#0E5A2A 8px,#0E5A2A 16px);}
body.colorblind .rwarn[style*="#D1F5DF"],body.colorblind .rwarn--rec-ok{border-left:4px solid #1A7A3C!important;}
body.colorblind .rwarn[style*="#FFECEA"]{border-left:4px solid #B42318!important;}
body.colorblind .rwarn[style*="#FFF4E0"],body.colorblind .rwarn--rec-low{border-left:4px dashed #B65A00!important;}
body.colorblind .zone-chip.zone-forbidden{background:repeating-linear-gradient(45deg,var(--coral-tint),var(--coral-tint) 4px,#fff 4px,#fff 8px)!important;}

/* ── Auth modal ── */
.auth-provider-btn{
  width:100%;border:none;border-radius:14px;padding:13px;margin-bottom:10px;
  background:var(--surface-2);color:var(--ink);font-size:15px;font-weight:700;
  cursor:pointer;font-family:inherit;border:.5px solid var(--hairline-2);
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .12s;
}
.auth-provider-btn:active{filter:brightness(.92);}

/* ── Large text accessibility mode ── */
body.large-text #turn-street{font-size:20px!important;}
body.large-text #turn-in{font-size:16px!important;}
body.large-text .nb-val{font-size:24px!important;}
body.large-text .step-label{font-size:16px!important;}
body.large-text #nb-eta{font-size:20px!important;}
body.large-text .fav-name{font-size:17px!important;}
body.large-text .nearby-sc-name{font-size:16px!important;}

/* ── Report age badge ── */
.inc-age-badge{
  position:absolute;bottom:-4px;right:-4px;
  background:rgba(31,41,55,.72);color:#fff;
  font-size:9px;font-weight:800;
  padding:1px 4px;border-radius:6px;
  pointer-events:none;white-space:nowrap;
}
.inc-pin{position:relative;}

/* Install banner */
#install-banner{
  position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 70px);left:14px;right:14px;z-index:200;
  background:var(--ink);color:#fff;border-radius:16px;
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  box-shadow:var(--shadow-pop);font-size:13px;font-weight:700;
}
#install-banner-text{flex:1;font-size:12px;}
#install-yes{border:none;border-radius:10px;padding:6px 12px;background:var(--mint-tint);color:var(--mint-ink);font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;}
#install-no{border:none;background:rgba(255,255,255,.15);color:#fff;border-radius:10px;padding:6px 10px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;}

/* Route freshness */
#route-freshness{
  text-align:center;font-size:11px;color:var(--ink-muted);
  font-weight:600;padding:2px 0 4px;
}
#waypoint-teaser-btn{
  width:100%;border:none;border-radius:12px;padding:8px;margin-top:4px;
  background:transparent;color:var(--sky-ink);font-size:13px;font-weight:700;
  cursor:pointer;font-family:inherit;border:.5px dashed var(--sky);
  transition:background .12s;
}
#waypoint-teaser-btn:active{background:var(--sky-tint);}

/* ── In-ride parking card (auto-nearest, shown near arrival) ─────────── */
#nav-parking-card{
  position:fixed;
  bottom:calc(200px + env(safe-area-inset-bottom,0px));
  left:14px;right:14px;z-index:22;
  background:var(--surface);border:.5px solid var(--hairline-2);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:10px;padding:11px 12px;
  transform:translateY(20px);opacity:0;pointer-events:none;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .3s;
}
#nav-parking-card.show{transform:none;opacity:1;pointer-events:auto;}
.nav-parking-icon{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  background:var(--mint-tint);
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.nav-parking-text{flex:1;min-width:0;}
.nav-parking-title{font-size:14px;font-weight:800;color:var(--ink);line-height:1.25;}
.nav-parking-sub{font-size:11px;color:var(--ink-muted);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-parking-go{
  flex-shrink:0;border:none;border-radius:var(--r-pill);
  padding:9px 14px;background:var(--mint);color:var(--mint-ink);
  font-family:inherit;font-size:13px;font-weight:800;
  cursor:pointer;transition:filter .12s;letter-spacing:-.1px;
}
.nav-parking-go:active{filter:brightness(.9);}
.nav-parking-x{
  flex-shrink:0;background:none;border:none;color:var(--ink-muted);
  cursor:pointer;padding:4px;display:flex;align-items:center;
}

/* Parking cell map dot */
.parking-finder-dot{
  width:24px;height:24px;border-radius:50%;
  background:var(--mint);color:var(--mint-ink);
  font-size:13px;font-weight:900;font-family:var(--font-sans);
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;
  box-shadow:0 1px 4px rgba(31,41,55,.25);
}

/* Dark-tiles overrides */
/* CartoDB dark_all tiles are near-black with very dim labels. Lift the whole
   tile pane (only the basemap — route/marker overlays live in other panes, so
   they keep their true colors): contrast<1 raises the near-black background to
   a softer dark-gray, brightness>1 makes street labels legible. */
body.dark-tiles .leaflet-tile-pane{
  filter:brightness(1.65) contrast(0.85) saturate(1.08);
}
body.dark-tiles #nav-parking-card{
  background:#252C3A;border-color:rgba(255,255,255,.06);
}
body.dark-tiles .nav-parking-title{color:#fff;}
body.dark-tiles .nav-parking-icon{background:rgba(52,168,83,.18);}
body.dark-tiles .nav-parking-go{background:#34A853;color:#fff;}
/* ── end parking finder ─────────────────────────────────────────────── */

.rs-badge{
  padding:4px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:800;
  background:var(--surface-2);color:var(--ink-soft);border:.5px solid var(--hairline-2);
}

/* Bulk clear button */
#bulk-clear-btn{
  width:100%;border:none;border-radius:12px;padding:10px;
  background:var(--surface-2);color:var(--ink-muted);
  font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;
  border:.5px solid var(--hairline-2);transition:background .12s, color .12s;
}
#bulk-clear-btn:active{background:var(--coral-tint);color:var(--coral-ink);}

/* Provider filter chips */
#provider-filter-row{
  display:flex;gap:6px;padding:8px 14px 4px;overflow-x:auto;scrollbar-width:none;
}
#provider-filter-row::-webkit-scrollbar{display:none;}
.prov-chip{
  flex:0 0 auto;border:none;border-radius:var(--r-pill);padding:5px 12px;
  background:var(--surface-2);color:var(--ink-muted);font-size:12px;font-weight:700;
  cursor:pointer;font-family:inherit;border:.5px solid var(--hairline-2);
  transition:background .12s, color .12s;white-space:nowrap;
}
.prov-chip.active{background:var(--sky-tint);color:var(--sky-ink);border-color:var(--sky);}

/* Incident type filter */
/* Area risk banner */
#area-risk-banner{
  padding:8px 16px 6px;font-size:12px;font-weight:700;
  color:var(--peach-ink);background:var(--peach-tint);
  border-bottom:.5px solid var(--peach);
}

/* Incident type filter */
#incident-filter-toggle{
  display:flex;align-items:center;gap:7px;margin:8px 14px 0;
  background:var(--surface-2);border:.5px solid var(--hairline-2);
  border-radius:var(--r-pill);padding:9px 14px;min-height:40px;
  font-family:inherit;font-size:13px;font-weight:700;color:var(--ink-soft);
  cursor:pointer;width:calc(100% - 28px);box-sizing:border-box;
}
#incident-filter-toggle:active{background:var(--surface-3,var(--surface-2));}
#incident-filter-chevron{margin-inline-start:auto;transition:transform .2s;font-size:11px;}
#incident-filter-toggle[aria-expanded="true"] #incident-filter-chevron{transform:rotate(180deg);}
#incident-filter-count{
  display:none;background:var(--ink);color:#fff;border-radius:99px;
  min-width:18px;height:18px;padding:0 5px;font-size:11px;font-weight:800;
  align-items:center;justify-content:center;
}
#incident-filter-count.show{display:inline-flex;}
#incident-filter-row{
  display:flex;gap:6px;padding:8px 14px 6px;overflow-x:auto;scrollbar-width:none;
}
#incident-filter-row.collapsed{display:none;}
#incident-filter-row::-webkit-scrollbar{display:none;}
.inc-filter-chip{
  flex:0 0 auto;border:none;border-radius:var(--r-pill);padding:8px 14px;min-height:40px;
  display:inline-flex;align-items:center;gap:5px;
  background:var(--surface-2);color:var(--ink-soft);font-size:13px;font-weight:700;
  cursor:pointer;font-family:inherit;border:.5px solid var(--hairline-2);
  transition:background .12s, color .12s;white-space:nowrap;
}
.inc-filter-chip.active{background:var(--ink);color:#fff;}

/* Battery filter chips */
#scooter-batt-filter{
  display:flex;gap:6px;padding:4px 18px 8px;overflow-x:auto;scrollbar-width:none;
}
#scooter-batt-filter::-webkit-scrollbar{display:none;}
.batt-chip{
  flex:0 0 auto;border:none;border-radius:var(--r-pill);padding:8px 14px;min-height:40px;
  display:inline-flex;align-items:center;
  background:var(--surface-2);color:var(--ink-soft);font-size:13px;font-weight:700;
  cursor:pointer;font-family:inherit;border:.5px solid var(--hairline-2);
  transition:background .15s, color .15s;
}
.batt-chip.active{background:var(--ink);color:#fff;}

/* Favorite edit mode */
.fav-row--edit{background:var(--surface-2);}
.fav-rename-input{padding:2px 0;}
.fav-row{
  display:flex;align-items:center;gap:14px;padding:12px 18px;
  border-bottom:.5px solid var(--hairline-2);transition:background .12s;
}
.fav-row:last-child{border-bottom:none;}
.fav-row:active{background:var(--surface-2);}
.fav-info{flex:1;min-width:0;cursor:pointer;}
.fav-edit-btn{
  background:none;border:none;cursor:pointer;padding:6px 4px;
  font-size:15px;opacity:.4;flex-shrink:0;line-height:1;
  transition:opacity .15s;
}
.fav-edit-btn:active{opacity:1;}
.fav-ico--clickable:hover{transform:scale(1.15);transition:transform .12s;}
.fav-ico--clickable:active{transform:scale(.9);}
.fav-ico{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:var(--surface-2);border:.5px solid var(--hairline-2);
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.fav-name{font-size:15px;font-weight:700;color:var(--ink);}
.fav-sub{font-size:13px;color:var(--ink-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fav-arrow{color:var(--ink-faint);font-size:18px;flex-shrink:0;line-height:1;}

.preset-row{
  display:flex;align-items:center;gap:14px;padding:14px 18px;
  border-bottom:.5px solid var(--hairline-2);cursor:pointer;
  transition:background .12s;
}
.preset-row:active{background:var(--surface-2);}
.preset-ico-wrap{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;
}
.preset-row.easy .preset-ico-wrap{background:var(--mint-tint);}
.preset-row.med  .preset-ico-wrap{background:var(--peach-tint);}
.preset-row.hard .preset-ico-wrap{background:var(--coral-tint);}
.preset-info{flex:1;min-width:0;}
.preset-name{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.preset-meta{font-size:12.5px;color:var(--ink-muted);margin-top:3px;font-family:var(--font-num);}
.preset-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px;}
.tag{font-size:11px;font-weight:600;padding:3px 8px;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--ink-soft);display:inline-flex;align-items:center;gap:4px;
  border:.5px solid var(--hairline-2);}
.tag.mint{background:var(--mint-tint);color:var(--mint-ink);border-color:transparent;}
.tag.peach{background:var(--peach-tint);color:var(--peach-ink);border-color:transparent;}
.tag.coral{background:var(--coral-tint);color:var(--coral-ink);border-color:transparent;}
.preset-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--r-pill);flex-shrink:0;}
.preset-row.easy .preset-badge{background:var(--mint-tint);color:var(--mint-ink);}
.preset-row.med  .preset-badge{background:var(--peach-tint);color:var(--peach-ink);}
.preset-row.hard .preset-badge{background:var(--coral-tint);color:var(--coral-ink);}
.easy .preset-ico-wrap{background:var(--mint-tint);}
.med  .preset-ico-wrap{background:var(--peach-tint);}
.hard .preset-ico-wrap{background:var(--coral-tint);}
.easy .preset-badge{background:var(--mint-tint);color:var(--mint-ink);}
.med  .preset-badge{background:var(--peach-tint);color:var(--peach-ink);}
.hard .preset-badge{background:var(--coral-tint);color:var(--coral-ink);}

.route-hazards{display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px 0;}
.hazard-chip{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;}

/* ── ROUTE PREVIEW ── */
#route-screen{display:none;position:fixed;inset:0;z-index:19;pointer-events:none;}
#route-screen > *{pointer-events:auto;}

#route-top{
  position:fixed;top:0;left:0;right:0;z-index:21;
  padding:12px 14px;display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,var(--bg) 70%,transparent);
}
#back-btn{
  width:40px;height:40px;border-radius:50%;
  background:var(--surface);box-shadow:var(--shadow-md);border:.5px solid var(--hairline-2);
  font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--ink);flex-shrink:0;
}
#route-label{
  flex:1;background:var(--surface);border-radius:var(--r-pill);
  box-shadow:var(--shadow-md);border:.5px solid var(--hairline-2);
  padding:10px 16px;font-size:14px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;user-select:none;
  transition:background .12s;
}
#route-label:active{background:var(--surface-2);}

#route-bottom{
  position:fixed;bottom:0;left:0;right:0;z-index:21;
  background:var(--surface);border-top:.5px solid var(--hairline-2);
  box-shadow:0 -4px 24px rgba(31,41,55,.10);
  padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));
  transition:background .3s, border-color .3s;
  max-height:72vh;max-height:72dvh;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
/* Dark tile mode — route card adapts */
body.dark-tiles #route-bottom{background:#1E2433;border-top-color:rgba(255,255,255,.08);}
body.dark-tiles #route-bottom .rs-val{color:#fff;}
body.dark-tiles #route-bottom .rs-lbl{color:rgba(255,255,255,.5);}
body.dark-tiles #route-bottom #route-label{color:rgba(255,255,255,.9);}
body.dark-tiles #route-bottom .route-mode-pill{color:rgba(255,255,255,.6);background:rgba(255,255,255,.06);}
body.dark-tiles #route-bottom .route-mode-pill.active{background:#fff;color:#1E2433;}
body.dark-tiles #route-bottom #route-summary{background:#252C3A;border-color:rgba(255,255,255,.06);}
body.dark-tiles #route-bottom .route-summary-val{color:#fff;}
body.dark-tiles #route-bottom .route-summary-lbl{color:rgba(255,255,255,.45);}
body.dark-tiles #route-bottom #go-btn{background:#3A7BFF;}
body.dark-tiles #route-bottom #gpx-btn,body.dark-tiles #route-bottom #share-route-btn{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.1);}
.route-stats{display:flex;justify-content:space-around;margin-bottom:8px;}
#walk-compare{
  font-size:11px;font-weight:600;color:var(--ink-muted);
  text-align:center;padding:4px 0 10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rs{text-align:center;}
.rs-val{font-size:24px;font-weight:800;color:var(--ink);line-height:1;font-family:var(--font-num);}
.rs-lbl{font-size:12px;color:var(--ink-muted);margin-top:3px;}

#route-mode-pills{
  display:flex;gap:6px;margin:0 0 14px;overflow-x:auto;
  background:var(--surface-2);border-radius:var(--r-pill);padding:4px;
  border:.5px solid var(--hairline-2);scrollbar-width:none;
}
#route-mode-pills::-webkit-scrollbar{display:none;}
.route-mode-pill{
  flex:0 0 auto;border:none;border-radius:var(--r-pill);padding:10px 12px;
  background:transparent;color:var(--ink-soft);font-size:13px;font-weight:700;
  cursor:pointer;font-family:var(--font-sans);transition:background .15s,color .15s,transform .15s;
  white-space:nowrap;
}
.route-mode-pill.active{background:var(--ink);color:#fff;animation:pill-select .25s ease;}
.route-mode-pill:active{transform:scale(.98);}
.pill-eta{margin-inline-start:6px;font-size:11px;font-weight:800;opacity:.7;
  font-family:var(--font-num);}
.route-mode-pill.active .pill-eta{opacity:.9;}
/* Niche modes (delivery/covered) tucked behind a "עוד" pill */
#route-mode-more-btn{
  flex:0 0 auto;border:none;border-radius:var(--r-pill);padding:10px 12px;
  background:transparent;color:var(--ink-soft);font-size:13px;font-weight:700;
  cursor:pointer;font-family:var(--font-sans);white-space:nowrap;
}
#route-mode-more{display:none;}
#route-mode-more.open{display:contents;}
@keyframes pill-select{0%{transform:scale(.95);}60%{transform:scale(1.04);}100%{transform:scale(1);}}

/* ── Per-mode route card accent colors ── */
#route-bottom[data-mode="fastest"] #go-btn{background:#007AFF;}
#route-bottom[data-mode="safest"]  #go-btn{background:#34C759;}
#route-bottom[data-mode="smooth"]  #go-btn{background:#5856D6;}
#route-bottom[data-mode="chill"]   #go-btn{background:#30B0C7;}
#route-bottom[data-mode="delivery"]#go-btn{background:#FF9500;}
#route-bottom[data-mode="fastest"] .route-mode-pill.active{background:#007AFF;}
#route-bottom[data-mode="safest"]  .route-mode-pill.active{background:#34C759;}
#route-bottom[data-mode="smooth"]  .route-mode-pill.active{background:#5856D6;}
#route-bottom[data-mode="chill"]   .route-mode-pill.active{background:#30B0C7;}
#route-bottom[data-mode="delivery"].route-mode-pill.active{background:#FF9500;}

/* ── Mode ETA strip ── */
#mode-eta-strip{
  display:flex;gap:6px;margin:-4px 0 14px;overflow-x:auto;scrollbar-width:none;
}
#mode-eta-strip::-webkit-scrollbar{display:none;}
.mode-eta-chip{
  flex:0 0 auto;display:flex;align-items:center;gap:5px;
  padding:6px 10px;border-radius:var(--r-pill);
  background:var(--surface-2);border:.5px solid var(--hairline-2);
  font-size:12px;font-weight:700;color:var(--ink-soft);cursor:pointer;
  transition:background .15s, color .15s;white-space:nowrap;
}
.mode-eta-chip.active{background:var(--ink);color:#fff;}
.mode-eta-chip .eta-mins{font-size:13px;font-weight:800;}

/* ── Context chips ── */
#context-chips-wrap{padding:10px 14px 0;}
#context-chips{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
}
#context-chips::-webkit-scrollbar{display:none;}
.ctx-chip{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  padding:9px 14px;border-radius:var(--r-pill);
  background:var(--surface-2);border:.5px solid var(--hairline-2);
  box-shadow:var(--shadow);cursor:pointer;
  font-size:13px;font-weight:700;color:var(--ink);
  transition:background .12s, transform .12s;white-space:nowrap;
}
.ctx-chip:active{transform:scale(.96);}
.ctx-chip-ico{font-size:16px;}
.ctx-chip-hint{font-size:11px;color:var(--ink-muted);font-weight:600;}

/* ── Predictive destination hero card (Waze-style) ───────────────────────── */
#predict-card{
  margin:8px 14px 4px;padding:14px;border-radius:18px;
  background:var(--surface);border:.5px solid var(--hairline-2);
  box-shadow:var(--shadow-md);
  animation:predict-in .28s cubic-bezier(.2,.7,.3,1);
}
@keyframes predict-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
#predict-main{display:flex;align-items:center;gap:12px;}
#predict-ico{
  width:42px;height:42px;flex-shrink:0;border-radius:13px;
  background:var(--sky-tint);display:flex;align-items:center;justify-content:center;font-size:22px;
}
#predict-body{flex:1;min-width:0;}
#predict-title{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
#predict-meta{font-size:13px;font-weight:600;color:var(--ink-muted);margin-top:2px;min-height:16px;}
#predict-dismiss{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;
  background:var(--surface-2);color:var(--ink-muted);
  display:flex;align-items:center;justify-content:center;
}
#predict-dismiss:active{transform:scale(.92);}
#predict-actions{display:flex;gap:10px;margin-top:12px;}
#predict-no{
  flex:0 0 auto;padding:11px 22px;border-radius:var(--r-pill);border:none;cursor:pointer;
  background:var(--surface-2);color:var(--sky-ink);font-family:inherit;font-size:15px;font-weight:700;
}
#predict-go{
  flex:1;padding:11px 0;border-radius:var(--r-pill);border:none;cursor:pointer;
  background:var(--sky);color:#fff;font-family:inherit;font-size:15px;font-weight:800;
  box-shadow:var(--shadow);
}
#predict-no:active,#predict-go:active{transform:scale(.97);}

/* ── Route-alternative comparison bubbles (Waze-style) ───────────────────── */
.alt-bubble{
  position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
  padding:6px 11px;border-radius:13px;font-size:12px;font-weight:800;line-height:1.1;
  background:var(--surface);color:var(--ink-soft);
  box-shadow:var(--shadow-md);border:.5px solid var(--hairline-2);cursor:pointer;
}
.alt-bubble--fast{background:#fff;color:var(--mint-ink);border-color:var(--mint);}
.alt-bubble--current{background:var(--sky-ink);color:#fff;border:none;cursor:default;}

#route-summary{
  background:linear-gradient(180deg,var(--surface-2),#fff);
  border:.5px solid var(--hairline-2);border-radius:18px;
  padding:14px 14px 12px;margin-bottom:14px;
  box-shadow:var(--shadow);
}
#route-summary-top{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;}
#route-summary-mode{font-size:14px;font-weight:800;color:var(--ink);}
#route-summary-reason{font-size:12px;line-height:1.4;color:var(--ink-soft);}
#route-summary-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;margin-bottom:10px;
}
.route-summary-metric{
  background:rgba(255,255,255,.82);border:.5px solid var(--hairline-2);
  border-radius:14px;padding:10px 6px;text-align:center;
}
.route-summary-val{font-size:18px;font-weight:800;color:var(--ink);font-family:var(--font-num);line-height:1;}
.route-summary-lbl{font-size:11px;color:var(--ink-muted);margin-top:4px;}
#route-summary-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
/* Collapsible details (metrics grid + bike-lane bar) */
#route-summary-details-toggle{
  width:100%;border:none;background:var(--surface);
  border:.5px solid var(--hairline-2);border-radius:var(--r-pill);
  padding:7px 12px;font-family:inherit;font-size:12px;font-weight:700;
  color:var(--ink-soft);cursor:pointer;margin-bottom:2px;
}
#route-summary-details-toggle:active{background:var(--surface-2);}
#route-summary-details{display:none;margin-top:10px;}
#route-summary-details.open{display:block;}
#bike-lane-bar-wrap{margin-top:4px;}
#bike-lane-bar-label{
  display:flex;justify-content:space-between;
  font-size:12px;color:var(--ink-muted);font-weight:600;margin-bottom:5px;
}
#bike-lane-bar-pct{font-weight:800;color:var(--ink);}
#bike-lane-bar-track{
  height:6px;background:var(--hairline-2);border-radius:4px;overflow:hidden;
}
#bike-lane-bar-fill{
  height:100%;width:0%;border-radius:4px;
  background:linear-gradient(90deg, #34C759, #30B050);
  transition:width .6s ease;
}
.route-summary-tag{
  display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:var(--r-pill);
  font-size:12px;font-weight:700;
}
.route-summary-tag.good{background:var(--mint-tint);color:var(--mint-ink);}
.route-summary-tag.warn{background:var(--peach-tint);color:var(--peach-ink);}
.route-summary-tag.alert{background:var(--coral-tint);color:var(--coral-ink);}

#departure-advisor{
  font-size:12px;font-weight:700;padding:9px 14px;border-radius:12px;
  margin-bottom:10px;line-height:1.4;
}

#elev-bar{height:36px;margin-bottom:14px;position:relative;}
#elev-bar svg{width:100%;height:100%;}

#route-warns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
#route-quick-toggles{margin-bottom:12px;}
.rqt-row{
  display:flex;align-items:center;gap:10px;
  background:var(--surface-2);border-radius:14px;padding:10px 14px;
  cursor:pointer;border:.5px solid var(--hairline-2);
}
.rqt-icon{font-size:16px;flex-shrink:0;}
.rqt-label{flex:1;font-size:14px;font-weight:600;color:var(--ink);}
.rqt-toggle{flex-shrink:0;}
.rwarn{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:var(--r-pill);font-size:13px;font-weight:600;
}
/* Declutter: cap the warnings stack to the first 3 until expanded */
#route-warns.collapsed > .rwarn:nth-child(n+4){display:none;}
#route-warns-toggle{
  width:100%;border:none;background:var(--surface);
  border:.5px solid var(--hairline-2);border-radius:var(--r-pill);
  padding:7px 12px;margin:4px 0 8px;font-family:inherit;font-size:12px;
  font-weight:700;color:var(--ink-soft);cursor:pointer;
}
#route-warns-toggle:active{background:var(--surface-2);}
.rwarn--scooter-rec{border-radius:14px;padding:8px 12px;flex-wrap:wrap;}
/* Token-driven scooter chips — readable + correctly inverted in dark mode */
.rwarn--rec-ok{background:var(--mint-tint);color:var(--mint-ink);--cta-bg:var(--mint-ink);}
.rwarn--rec-low{background:var(--peach-tint);color:var(--peach-ink);--cta-bg:var(--peach-ink);}
.rwarn--info{background:var(--sky-tint);color:var(--sky-ink);}
.rwarn--note{background:var(--peach-tint);color:var(--peach-ink);}
.rwarn-cta{
  display:inline-block;padding:5px 12px;border-radius:var(--r-pill);
  text-decoration:none;font-size:12px;font-weight:800;flex-shrink:0;
  background:var(--cta-bg,rgba(0,0,0,.12));color:var(--surface);
}
.rwarn-cta:hover{opacity:.85;}

/* ── Weekly stats card ── */
#weekly-stats-card{padding:0 14px 10px;}
#weekly-stats-card .sheet-section-hdr{padding-left:0;padding-right:0;}
.weekly-stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px;
}
.ws-cell{
  background:var(--surface-2);border-radius:12px;padding:10px 6px;
  text-align:center;border:.5px solid var(--hairline-2);
}
.ws-val{font-size:17px;font-weight:800;font-family:var(--font-num);color:var(--ink);}
.ws-lbl{font-size:10px;color:var(--ink-muted);font-weight:600;margin-top:3px;}
.ws-mode-row{
  font-size:12px;color:var(--ink-muted);font-weight:600;
  padding:6px 8px;background:var(--surface-2);border-radius:10px;
  border:.5px solid var(--hairline-2);
}

#steps-toggle{
  width:100%;border:none;background:none;
  color:var(--sky-ink);font-size:14px;font-weight:600;
  padding:0 0 12px;cursor:pointer;font-family:inherit;text-align:right;
}
#steps-preview{border-top:.5px solid var(--hairline-2);margin-bottom:0;}
#steps-preview:empty{display:none;}
#steps-list{display:none;margin-bottom:12px;}
#steps-list.open{display:block;}
.step-row{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 0;border-bottom:.5px solid var(--hairline-2);
}
.step-row:last-child{border-bottom:none;}
.step-row--tappable{cursor:pointer;transition:background .12s;}
.step-row--tappable:active{background:var(--surface-2);}
.step-map-hint{font-size:14px;opacity:.35;flex-shrink:0;align-self:center;}
.step-row--tappable:active .step-map-hint{opacity:.8;}
.step-arrow-box{
  width:36px;height:36px;border-radius:10px;
  background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.step-info{flex:1;}
.step-label{font-size:14px;font-weight:600;color:var(--ink);}
.step-sub{font-size:12px;color:var(--ink-muted);margin-top:2px;}
.step-dist{font-size:13px;color:var(--ink-muted);margin-top:1px;font-family:var(--font-num);}
.step-progress-bar{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--hairline-2);overflow:hidden;}
.step-progress-fill{height:100%;border-radius:1px;transition:width .4s ease;}
.step-row{position:relative;}

#go-btn{
  width:100%;padding:16px;border-radius:var(--r-lg);border:none;
  background:var(--ink);color:#fff;font-size:17px;font-weight:700;
  cursor:pointer;letter-spacing:-.2px;font-family:inherit;
  position:sticky;bottom:0;z-index:2;
  box-shadow:0 -8px 20px var(--surface);
}
#go-btn:active{filter:brightness(1.15);}

#share-eta-btn{
  width:34px;height:34px;border-radius:50%;border:none;
  background:rgba(255,255,255,.12);color:rgba(255,255,255,.7);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .12s,color .12s;
}
#share-eta-btn:active{background:rgba(255,255,255,.25);color:#fff;}

/* ── NAVIGATION ── */
#nav-screen{display:none;position:fixed;inset:0;z-index:19;pointer-events:none;}
#nav-screen > *{pointer-events:auto;}

#turn-bar{
  position:fixed;top:0;left:0;right:0;z-index:21;
  /* Airy frosted panel — the maneuver "floats" over the map like the reference.
     Theme-aware: light surface by day, dark by night (content follows --ink). */
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  padding:calc(env(safe-area-inset-top,12px) + 4px) 16px 12px;
  border-radius:0 0 26px 26px;
  box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:10px;
}
/* Normal-state content tracks the theme ink (dark on light, light on dark) */
#turn-svg path{fill:none;stroke-width:2;}
#turn-bar #turn-svg path{stroke:var(--ink);}
#turn-bar #turn-ring-track{stroke:var(--hairline-2);}
#turn-bar #turn-ring-fill{stroke:#16A34A;}
#turn-icon-box{background:var(--surface-2);border-color:var(--hairline-2);}
#voice-repeat-btn,#step-skip-btn{background:var(--surface-2);color:var(--ink-muted);}
#voice-repeat-btn:active,#step-skip-btn:active{background:var(--hairline-2);color:var(--ink);}

/* Hazard emphasis states keep a saturated colored bar with WHITE content */
#turn-bar.warn{background:linear-gradient(135deg,#F59E0B,#D97706);}
#turn-bar.danger{background:linear-gradient(135deg,#EF4444,#B91C1C);animation:turn-danger-pulse 1.1s ease-in-out infinite;}
#turn-bar.success{background:linear-gradient(135deg,#22C55E,#15803D);}
#turn-bar.warn #turn-street,#turn-bar.danger #turn-street,#turn-bar.success #turn-street{color:#fff;}
#turn-bar.warn #turn-in,#turn-bar.danger #turn-in,#turn-bar.success #turn-in{color:rgba(255,255,255,.85);}
#turn-bar.warn #turn-svg path,#turn-bar.danger #turn-svg path,#turn-bar.success #turn-svg path{stroke:#fff;}
#turn-bar.warn #turn-icon-box,#turn-bar.danger #turn-icon-box,#turn-bar.success #turn-icon-box{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.22);}
#turn-bar.warn #turn-ring-track,#turn-bar.danger #turn-ring-track,#turn-bar.success #turn-ring-track{stroke:rgba(255,255,255,.18);}
#turn-bar.warn #turn-ring-fill,#turn-bar.danger #turn-ring-fill,#turn-bar.success #turn-ring-fill{stroke:#fff;}
#turn-bar.warn #voice-repeat-btn,#turn-bar.danger #voice-repeat-btn,#turn-bar.success #voice-repeat-btn,
#turn-bar.warn #step-skip-btn,#turn-bar.danger #step-skip-btn,#turn-bar.success #step-skip-btn{background:rgba(255,255,255,.16);color:rgba(255,255,255,.85);}
@keyframes turn-danger-pulse{0%,100%{box-shadow:inset 0 0 0 0 rgba(255,255,255,0);}50%{box-shadow:inset 0 0 0 4px rgba(255,255,255,.22);}}
#turn-bar.step-complete-flash{background:#22C55E!important;transition:background .1s;}
@keyframes step-complete{0%{opacity:1;}100%{opacity:0;}}

/* Compact horizontal maneuver row (Waze-style): icon beside the instruction. */
#turn-inner{flex:1;min-width:0;display:flex;flex-direction:row;align-items:center;gap:13px;text-align:start;}
#turn-controls{
  flex-shrink:0;display:flex;gap:6px;z-index:3;
}
#voice-repeat-btn,#step-skip-btn{
  border:none;border-radius:10px;
  width:32px;height:32px;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s, color .12s;
  /* colours come from the theme-aware rules above (normal = surface-2/ink-muted,
     coloured states = white-on-tint) so the buttons stay visible on the frosted bar */
}
#turn-icon-box{
  width:62px;height:62px;border-radius:16px;
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
#turn-svg{width:38px;height:38px;}
#turn-text-col{flex:1;min-width:0;text-align:start;}
#turn-in{font-size:13px;color:var(--ink-muted);margin-bottom:1px;font-weight:600;letter-spacing:.01em;}
#turn-street{font-size:23px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15;letter-spacing:-.01em;}

#hazard-card{
  position:fixed;top:110px;left:14px;right:14px;z-index:21;
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);border:.5px solid var(--hairline-2);
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  transform:translateY(-150px);opacity:0;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .3s;
  pointer-events:none;
}
#hazard-card.show{transform:none;opacity:1;pointer-events:auto;}
#haz-icon-wrap{width:44px;height:44px;border-radius:12px;background:var(--peach-tint);color:var(--peach-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s;}
#haz-title{font-size:15px;font-weight:700;color:var(--ink);}
#haz-sub{font-size:12px;color:var(--ink-muted);margin-top:2px;}
#haz-close{background:none;border:none;color:var(--ink-muted);font-size:18px;cursor:pointer;padding:4px;flex-shrink:0;}

/* ── PIKUD HAOREF ALERT — centered emergency popup ── */
#pikud-popup{
  position:fixed;inset:0;z-index:600;
  display:none;align-items:center;justify-content:center;
  padding:24px;direction:rtl;
  background:radial-gradient(120% 120% at 50% 35%,rgba(120,12,8,.50),rgba(31,41,55,.62));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .25s ease;
}
#pikud-popup.show{display:flex;opacity:1;animation:pikud-flash 1.4s ease-in-out infinite;}
@keyframes pikud-flash{
  0%,100%{background:radial-gradient(120% 120% at 50% 35%,rgba(120,12,8,.50),rgba(31,41,55,.62));}
  50%{background:radial-gradient(120% 120% at 50% 35%,rgba(179,38,30,.62),rgba(31,41,55,.70));}
}
#pikud-popup-card{
  width:min(100%,400px);
  background:var(--surface);border-radius:var(--r-xl);
  box-shadow:0 24px 70px rgba(120,12,8,.45),0 8px 24px rgba(31,41,55,.30);
  border:1px solid rgba(179,38,30,.18);
  padding:30px 24px calc(22px + env(safe-area-inset-bottom,0px));
  text-align:center;
  transform:scale(.82) translateY(10px);opacity:0;
}
#pikud-popup.show #pikud-popup-card{
  animation:pikud-pop .45s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes pikud-pop{to{transform:none;opacity:1;}}
#pikud-popup-icon{
  position:relative;width:96px;height:96px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
}
#pikud-popup-icon .pikud-siren{
  position:relative;z-index:2;width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--coral);color:#fff;padding:12px;
  box-shadow:0 6px 18px rgba(179,38,30,.5);
  animation:pikud-shake .9s ease-in-out infinite;
}
#pikud-popup-icon .pikud-ring{
  position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;
  border:2.5px solid var(--coral);opacity:0;
  animation:pikud-ripple 1.8s ease-out infinite;
}
#pikud-popup-icon .pikud-ring:nth-child(2){animation-delay:.6s;}
#pikud-popup-icon .pikud-ring:nth-child(3){animation-delay:1.2s;}
@keyframes pikud-ripple{
  0%{transform:scale(1);opacity:.65;}
  100%{transform:scale(2.1);opacity:0;}
}
@keyframes pikud-shake{
  0%,100%{transform:rotate(-7deg);}
  50%{transform:rotate(7deg);}
}
#pikud-popup-kicker{
  font-size:13px;font-weight:800;letter-spacing:.04em;
  color:var(--coral-ink);text-transform:none;
}
#pikud-popup-threat{
  margin-top:4px;font-size:26px;font-weight:900;line-height:1.15;color:var(--ink);
}
#pikud-popup-cities{
  margin-top:10px;font-size:15px;font-weight:700;color:var(--ink-soft);
  line-height:1.4;max-height:4.4em;overflow:hidden;
}
#pikud-popup-instruct{
  margin-top:14px;font-size:14px;line-height:1.5;font-weight:700;
  background:var(--coral-tint);color:var(--coral-ink);
  border-radius:var(--r-md);padding:11px 14px;
}
#pikud-popup-actions{display:grid;gap:10px;margin-top:20px;}
#pikud-popup-shelter,#pikud-popup-dismiss{
  border:none;border-radius:16px;padding:15px 12px;font-family:inherit;cursor:pointer;
  font-size:16px;font-weight:800;
}
#pikud-popup-shelter{
  background:var(--coral);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 6px 16px rgba(179,38,30,.35);
}
#pikud-popup-shelter:active{transform:scale(.98);}
#pikud-popup-dismiss{background:var(--surface-2);color:var(--ink-soft);font-weight:700;}
@media (prefers-reduced-motion:reduce){
  #pikud-popup.show,#pikud-popup-icon .pikud-siren,#pikud-popup-icon .pikud-ring{animation:none;}
  #pikud-popup.show #pikud-popup-card{animation:none;transform:none;opacity:1;}
  #pikud-popup-icon .pikud-ring{display:none;}
}

/* ── LIVE-SHARE ENDED — centered informational popup ── */
#share-ended-popup{
  position:fixed;inset:0;z-index:560;
  display:none;align-items:center;justify-content:center;
  padding:24px;direction:rtl;
  background:rgba(31,41,55,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .25s ease;
}
#share-ended-popup.show{display:flex;opacity:1;}
#share-ended-card{
  width:min(100%,380px);
  background:var(--surface);border-radius:var(--r-xl);
  box-shadow:var(--shadow-pop);border:.5px solid var(--hairline-2);
  padding:30px 24px calc(22px + env(safe-area-inset-bottom,0px));
  text-align:center;
  transform:scale(.85) translateY(8px);opacity:0;
}
#share-ended-popup.show #share-ended-card{
  animation:share-ended-pop .4s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes share-ended-pop{to{transform:none;opacity:1;}}
#share-ended-icon{
  position:relative;width:84px;height:84px;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
}
#share-ended-icon svg{
  position:relative;z-index:2;width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--sky-tint);color:var(--sky-ink);padding:11px;
}
#share-ended-icon .se-ring{
  position:absolute;inset:0;margin:auto;width:60px;height:60px;border-radius:50%;
  border:2px solid var(--sky);opacity:0;
  animation:share-ended-ripple 2.4s ease-out infinite;
}
#share-ended-icon .se-ring:nth-child(2){animation-delay:1.2s;}
@keyframes share-ended-ripple{
  0%{transform:scale(1);opacity:.4;}
  100%{transform:scale(1.9);opacity:0;}
}
#share-ended-title{font-size:22px;font-weight:800;color:var(--ink);}
#share-ended-sub{
  margin-top:8px;font-size:14px;line-height:1.5;color:var(--ink-muted);
}
#share-ended-ok{
  margin-top:22px;width:100%;
  border:none;border-radius:16px;padding:15px 12px;font-family:inherit;cursor:pointer;
  font-size:16px;font-weight:800;background:var(--sky);color:var(--sky-ink);
}
#share-ended-ok:active{transform:scale(.98);}
@media (prefers-reduced-motion:reduce){
  #share-ended-popup.show #share-ended-card{animation:none;transform:none;opacity:1;}
  #share-ended-icon .se-ring{display:none;}
}

#nav-status-chip{
  position:fixed;top:104px;left:14px;right:14px;z-index:20;
  width:fit-content;max-width:calc(100% - 28px);margin-inline:auto;
  background:var(--surface);
  border:.5px solid var(--hairline-2);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:10px 14px;
  transition:transform .25s ease,opacity .2s ease,background .2s ease,color .2s ease;
}
#nav-status-chip.hidden{opacity:0;transform:translateY(-8px);pointer-events:none;}
#nav-status-chip.pending{background:var(--sky-tint);color:var(--sky-ink);}
#nav-status-chip.warn{background:var(--peach-tint);color:var(--peach-ink);}
#nav-status-chip.alert{background:var(--coral-tint);color:var(--coral-ink);}
#nav-status-title{font-size:13px;font-weight:800;}
#nav-status-detail{font-size:12px;opacity:.8;margin-top:2px;}

/* ── Zone chip (live zone indicator during nav) ── */
#zone-chip{
  position:fixed;
  bottom:calc(182px + env(safe-area-inset-bottom,0px));
  right:14px;z-index:21;
  display:flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:var(--r-pill);
  font-size:12px;font-weight:700;
  background:rgba(255,255,255,.95);backdrop-filter:blur(16px);
  border:.5px solid var(--hairline-2);box-shadow:var(--shadow-md);
  transition:opacity .2s, transform .2s;
  max-width:200px;
}
#zone-chip.hidden{opacity:0;transform:translateY(6px);pointer-events:none;}
#zone-chip.zone-slow{background:var(--peach-tint);color:var(--peach-ink);border-color:var(--peach);}
#zone-chip.zone-slow-viol{background:var(--coral-tint)!important;color:var(--coral-ink)!important;border-color:var(--coral)!important;animation:zone-viol-flash .4s ease 2;}
@keyframes zone-viol-flash{0%,100%{opacity:1;}50%{opacity:.4;}}
#zone-chip.zone-forbidden{background:var(--coral-tint);color:var(--coral-ink);border-color:var(--coral);}
#zone-chip.zone-noparking{background:var(--sky-tint);color:var(--sky-ink);border-color:var(--sky);}

/* ── Compass chip ── */
#compass-chip{
  position:fixed;
  bottom:calc(182px + env(safe-area-inset-bottom,0px));
  left:14px;z-index:21;
  display:flex;align-items:center;gap:5px;
  padding:7px 11px;border-radius:var(--r-pill);
  font-size:12px;font-weight:700;
  background:rgba(31,41,55,.78);backdrop-filter:blur(10px);
  color:#fff;
  transition:opacity .2s, transform .2s;
}
#compass-chip.hidden{opacity:0;transform:translateY(6px);pointer-events:none;}
#compass-arrow{font-size:14px;line-height:1;transition:transform .3s ease;}
#compass-dir{letter-spacing:.04em;}

#nav-quick-report{
  position:fixed;bottom:calc(130px + env(safe-area-inset-bottom,0px));left:0;right:0;
  z-index:20;display:flex;gap:8px;padding:0 14px;
  overflow-x:auto;scrollbar-width:none;
  pointer-events:none;opacity:0;transform:translateY(10px);
  transition:opacity .25s, transform .25s;
}
#nav-quick-report::-webkit-scrollbar{display:none;}
#nav-quick-report.visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.nqr-btn{
  flex:0 0 auto;border:none;border-radius:var(--r-pill);
  padding:9px 12px;font-size:12px;font-weight:700;font-family:var(--font-sans);
  background:var(--surface);box-shadow:var(--shadow-lg);
  border:.5px solid var(--hairline-2);cursor:pointer;
  color:var(--ink);transition:transform .12s, background .15s;
  white-space:nowrap;
}
.nqr-btn:active{transform:scale(.94);background:var(--surface-2);}

#nav-bottom{
  position:fixed;bottom:0;left:0;right:0;z-index:21;
  background:var(--surface);border-top:.5px solid var(--hairline-2);
  box-shadow:0 -1px 0 var(--hairline-2),var(--shadow-lg);
  display:flex;flex-direction:column;align-items:stretch;
  padding:0 0 calc(env(safe-area-inset-bottom,0px));gap:0;
}
/* Bottom bar: destination + arrival time, flanked by stop / share */
#nav-bottom-stats{
  display:flex;align-items:center;gap:10px;
  padding:8px 16px 12px;
}
#nav-dest-block{flex:1;min-width:0;text-align:center;}
#nav-dest-row{
  display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:12px;font-weight:600;color:var(--ink-muted);
  white-space:nowrap;overflow:hidden;
}
#nav-dest-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#nav-eta-row{
  display:flex;align-items:baseline;justify-content:center;gap:6px;margin-top:1px;
}
#nb-eta{font-size:21px;font-weight:800;color:var(--ink);font-family:var(--font-num);line-height:1;}
.nav-eta-lbl{font-size:12px;color:var(--ink-muted);font-weight:600;}

/* ── Segmented progress bar with rider puck ── */
#nav-wave{
  display:flex;align-items:center;gap:12px;
  padding:10px 16px 18px;
}
/* Combined "remaining" readout — time + distance together on one side */
.wave-remain{
  flex-shrink:0;display:flex;align-items:baseline;gap:3px;white-space:nowrap;
}
.wave-remain .nb-val{font-size:17px;font-weight:800;color:var(--ink);font-family:var(--font-num);line-height:1;}
.wave-remain .wave-unit{font-size:11px;color:var(--ink-muted);font-weight:600;}
.wave-remain .wave-dot{color:var(--ink-faint);margin:0 2px;font-weight:700;}
#wave-track{
  position:relative;flex:1;height:32px;
  display:flex;align-items:center;
}
#wave-bars{
  display:flex;align-items:center;gap:3px;
  width:100%;
  /* LTR timeline: origin=left, destination=right (page is RTL). */
  direction:ltr;
}
.wseg{
  flex:1 1 0;min-width:6px;height:9px;border-radius:99px;
  background:#22C55E;            /* road ahead — green remaining */
  transition:background .4s ease;
}
.wseg.done{background:var(--hairline-2);} /* already travelled — muted */
#wave-puck{
  position:absolute;top:50%;left:0%;
  width:30px;height:30px;border-radius:50%;
  background:#fff;border:2px solid #16A34A;
  box-shadow:0 2px 7px rgba(17,24,39,.22);
  display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,-50%);
  transition:left .6s ease;
  z-index:3;
}
/* Speed pill hanging beneath the avatar, like the reference's "12 mph" tag */
#wave-spd{
  position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);
  background:#16A34A;color:#fff;font-size:10px;font-weight:800;line-height:1.4;
  padding:1px 6px;border-radius:99px;white-space:nowrap;font-family:var(--font-num);
  box-shadow:0 1px 3px rgba(17,24,39,.2);
}

/* ── Upcoming maneuver cards ── */
#nav-next-cards{
  display:flex;flex-direction:column;gap:7px;
  padding:2px 14px 4px;
}
#nav-next-cards:empty{display:none;}
.nav-card{
  display:flex;align-items:center;gap:11px;
  background:var(--surface);border:.5px solid var(--hairline-2);
  border-radius:15px;padding:10px 13px;
  box-shadow:0 1px 4px rgba(17,24,39,.05);
}
.nav-card--tappable{cursor:pointer;transition:background .15s, transform .12s;}
.nav-card--tappable:active{background:var(--surface-2);transform:scale(.99);}
.nav-card .nc-icon{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.nav-card .nc-icon svg{width:22px;height:22px;}
.nav-card .nc-text{flex:1;min-width:0;}
.nav-card .nc-kind{
  font-size:10px;font-weight:700;letter-spacing:.04em;
  color:var(--ink-muted);text-transform:uppercase;
}
.nav-card .nc-street{
  font-size:16px;font-weight:700;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;
}
.nav-card .nc-meta{
  font-size:12px;color:var(--ink-muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-card .nc-chev{color:var(--ink-faint);flex-shrink:0;}
#stop-btn{
  width:40px;height:40px;border-radius:50%;
  background:var(--coral);border:none;
  font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:#fff;flex-shrink:0;
}
.nb{flex:1;text-align:center;}
.nb-val{font-size:22px;font-weight:800;color:var(--ink);line-height:1;font-family:var(--font-num);}
.nb-lbl{font-size:11px;color:var(--ink-muted);margin-top:3px;}
.nb-sep{width:.5px;background:var(--hairline-2);height:34px;flex-shrink:0;}

/* ── FLOATING ELEMENTS ── */
#fab-col{
  position:fixed;left:14px;bottom:110px;z-index:15;
  display:flex;flex-direction:column;gap:10px;
}
.fab{
  width:46px;height:46px;border-radius:50%;
  background:var(--surface);box-shadow:var(--shadow-lg);
  border:.5px solid var(--hairline-2);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s;color:var(--ink);
}
.fab:active{transform:scale(.9);}
/* Collapsible secondary FABs (map-as-hero declutter) */
.fab-secondary{
  display:flex;flex-direction:column;gap:10px;overflow:hidden;
  max-height:0;opacity:0;pointer-events:none;
  transition:max-height .26s cubic-bezier(.4,0,.2,1), opacity .2s;
}
#fab-col.fab-expanded .fab-secondary{max-height:120px;opacity:1;pointer-events:auto;}
#fab-more svg circle{transition:transform .2s;}
#fab-col.fab-expanded #fab-more{background:var(--ink);color:var(--surface);}
#sos-fab{background:#FF3B30;color:#fff;border-color:transparent;font-size:13px;font-weight:800;letter-spacing:.5px;}
#report-fab{background:var(--coral);color:var(--coral-ink);border-color:transparent;}
/* Emergency-services quick-dial buttons (emergency modal) */
.emrg-svc{
  display:flex;align-items:center;justify-content:center;gap:4px;
  text-decoration:none;text-align:center;
  background:var(--surface-2);color:var(--ink);
  border:.5px solid var(--hairline-2);border-radius:12px;
  padding:12px 8px;font-size:13px;font-weight:700;font-family:inherit;
  transition:transform .12s;
}
.emrg-svc:active{transform:scale(.96);}
.emrg-svc-danger{background:#FF3B30;color:#fff;border-color:transparent;}
#report-fab-badge{
  position:absolute;top:-4px;right:-4px;
  min-width:16px;height:16px;border-radius:8px;
  background:#fff;color:var(--coral-ink);
  font-size:10px;font-weight:800;
  display:flex!important;align-items:center;justify-content:center;
  padding:0 3px;pointer-events:none;
  border:1.5px solid var(--coral);
}
#share-route-btn{
  border:none;background:transparent;color:var(--ink-muted);
  font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;
  padding:4px 10px;border-radius:var(--r-pill);
  border:.5px solid var(--hairline-2);
  transition:background .12s, color .12s;
}
#share-route-btn:active{background:var(--surface-2);color:var(--ink);}
#recenter-fab{
  position:fixed;bottom:170px;left:50%;transform:translateX(-50%) translateY(20px);
  z-index:16;display:none;align-items:center;gap:8px;
  background:var(--ink);color:#fff;border:none;border-radius:var(--r-pill);
  padding:10px 20px;font-size:14px;font-weight:700;font-family:var(--font-sans);
  cursor:pointer;box-shadow:var(--shadow-pop);
  opacity:0;transition:opacity .22s, transform .22s;
}
#recenter-fab.show{display:flex;opacity:1;transform:translateX(-50%) translateY(0);}
#recenter-fab:active{transform:translateX(-50%) scale(.97);}

.inc-pin{
  background:var(--surface);border-radius:50%;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
  box-shadow:var(--shadow-md);border:1.5px solid var(--hairline-2);cursor:pointer;
}

.pop-title{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:3px;display:flex;align-items:center;gap:6px;}
.pop-sub{font-size:13px;color:var(--ink-muted);margin-bottom:10px;}
.pop-source{
  font-size:11px;color:var(--ink-muted);
  padding-top:8px;border-top:.5px solid var(--hairline-2);margin-top:8px;
}
.pop-btns{display:flex;gap:8px;}
.pop-btn{
  flex:1;padding:8px;border-radius:10px;border:none;background:var(--surface-2);
  font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--ink);
  border:.5px solid var(--hairline-2);text-align:center;text-decoration:none;display:block;
}
.pop-btn:active{opacity:.7;}
/* Primary "open in app" action — filled, theme-aware (AA contrast both modes) */
.pop-btn--app{background:var(--ink);color:var(--surface);border-color:transparent;font-weight:700;}
html[data-theme="dark"] .pop-btn--app{background:#34C759;color:#0A1F12;}
/* Scooter popup accent chips — token-driven so they invert correctly with theme */
.scooter-pop .pop-badge,.pop-badge{
  display:inline-flex;align-items:center;gap:4px;margin-top:6px;margin-bottom:8px;
  padding:4px 9px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.25;
}
.pop-badge--rec{background:var(--mint-tint);color:var(--mint-ink);}
.pop-reach{font-size:13px;font-weight:700;margin-bottom:10px;}
.pop-reach--ok{color:var(--mint-ink);}
.pop-reach--no{color:var(--coral-ink);}

/* ── REPORT MODAL ── */
#rep-modal{
  position:fixed;inset:0;z-index:50;
  background:rgba(0,0,0,.38);
  display:none;align-items:flex-end;
}
#rep-modal.open{display:flex;}
#rep-sheet{
  width:100%;background:var(--surface);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:0 0 calc(20px + env(safe-area-inset-bottom,0px));
  box-shadow:var(--shadow-pop);
  max-height:90vh;max-height:90dvh;overflow-y:auto;
}
.rep-handle{width:40px;height:5px;border-radius:3px;background:var(--ink-faint);margin:12px auto 0;}
.rep-header{font-size:18px;font-weight:700;color:var(--ink);text-align:center;padding:10px 16px 0;}
#rep-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:4px 0;padding:16px 8px 8px;
}
.rep-btn{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:none;border:none;cursor:pointer;padding:10px 6px;
  border-radius:16px;transition:background .12s;font-family:inherit;
}
.rep-btn:active{background:var(--surface-2);}
.rep-circle{
  width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s;
  background:var(--surface-2);color:var(--ink-soft);
  border:.5px solid var(--hairline-2);
}
.rep-btn:active .rep-circle{transform:scale(.90);}
.rep-btn.sel .rep-circle{outline:3px solid var(--ink);outline-offset:3px;}
/* Incident-type tints on report circles */
.rep-circle.police    {background:var(--coral-tint);   color:var(--coral-ink);   border-color:transparent}
.rep-circle.inspector {background:var(--sky-tint);     color:var(--sky-ink);     border-color:transparent}
.rep-circle.traffic_police{background:var(--mint-tint);color:var(--mint-ink);    border-color:transparent}
.rep-circle.accident  {background:var(--coral-tint);   color:var(--coral-ink);   border-color:transparent}
.rep-circle.block     {background:var(--peach-tint);   color:var(--peach-ink);   border-color:transparent}
.rep-circle.hazard    {background:var(--peach-tint);   color:var(--peach-ink);   border-color:transparent}
.rep-circle.stairs    {background:var(--peach-tint);   color:var(--peach-ink);   border-color:transparent}
.rep-circle.camera    {background:var(--lavender-tint);color:var(--lavender-ink);border-color:transparent}
.rep-circle.pothole   {background:var(--peach-tint);   color:var(--peach-ink);   border-color:transparent}
.rep-circle.flood     {background:var(--sky-tint);     color:var(--sky-ink);     border-color:transparent}
.rep-circle.roadwork  {background:var(--peach-tint);   color:var(--peach-ink);   border-color:transparent}
.rep-circle.stopped   {background:var(--coral-tint);   color:var(--coral-ink);   border-color:transparent}
.rep-circle.closure   {background:var(--coral-tint);   color:var(--coral-ink);   border-color:transparent}
.rep-lbl{font-size:13px;font-weight:600;color:var(--ink);text-align:center;line-height:1.2;}
#rep-note{
  width:calc(100% - 32px);margin:0 16px 12px;padding:12px 14px;border-radius:var(--r-md);
  border:1px solid var(--hairline-2);font-size:15px;color:var(--ink);
  font-family:inherit;background:var(--surface-2);outline:none;resize:none;display:block;
}
#rep-note:focus{border-color:var(--sky);}
#rep-submit{
  display:block;width:calc(100% - 32px);margin:0 16px;padding:15px;border-radius:var(--r-lg);border:none;
  background:var(--ink);color:#fff;font-size:16px;font-weight:700;
  cursor:pointer;font-family:inherit;
}
#rep-submit:active{filter:brightness(1.15);}
#rep-cancel{
  display:block;width:calc(100% - 32px);margin:6px 16px 0;padding:12px;border-radius:var(--r-lg);border:none;
  background:none;color:var(--sky-ink);font-size:16px;font-weight:600;cursor:pointer;font-family:inherit;
}

#safety-check-modal{
  position:fixed;inset:0;z-index:45;
  background:rgba(31,41,55,.42);
  display:none;align-items:flex-end;justify-content:center;
  padding:18px;
}
#safety-check-modal.open{display:flex;}
#safety-check-sheet{
  width:min(100%, 420px);
  background:var(--surface);border-radius:28px;
  box-shadow:var(--shadow-pop);
  padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));
}
.safety-check-icon{
  width:58px;height:58px;border-radius:18px;
  background:var(--sky-tint);color:var(--sky-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;margin:6px auto 10px;
}
.safety-check-title{
  text-align:center;font-size:22px;font-weight:800;color:var(--ink);
}
.safety-check-sub{
  margin-top:8px;text-align:center;font-size:13px;line-height:1.55;color:var(--ink-muted);
}
.safety-check-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;
}
#safety-check-ok,#safety-check-help,#safety-check-dismiss{
  border:none;border-radius:16px;padding:14px 12px;font-family:inherit;cursor:pointer;
  font-size:15px;font-weight:800;
}
#safety-check-ok{background:var(--mint);color:var(--mint-ink);}
#safety-check-help{background:var(--coral-tint);color:var(--coral-ink);}
#safety-check-dismiss{
  display:block;width:100%;margin-top:8px;
  background:var(--surface-2);color:var(--ink-soft);font-weight:700;
}

/* ── RIDE SUMMARY ── */
#ride-summary-modal{
  position:fixed;inset:0;z-index:46;
  background:rgba(31,41,55,.42);
  display:none;align-items:flex-end;justify-content:center;
  padding:18px;
}
#ride-summary-modal.open{display:flex;}
#ride-summary-sheet{
  width:min(100%, 420px);
  background:var(--surface);border-radius:28px;
  box-shadow:var(--shadow-pop);
  padding:10px 16px calc(22px + env(safe-area-inset-bottom,0px));
}
#rs-header{display:flex;align-items:center;gap:12px;justify-content:center;margin:8px 0 14px;}
#rs-icon{font-size:32px;line-height:1;}
#rs-title{font-size:22px;font-weight:800;color:var(--ink);}
#rs-stats{
  display:flex;align-items:center;justify-content:center;gap:0;
  background:var(--surface-2);border-radius:18px;padding:16px 0;margin-bottom:12px;
}
.rs-stat{flex:1;text-align:center;}
.rs-stat-val{font-size:28px;font-weight:800;color:var(--ink);font-family:var(--font-num);}
.rs-stat-lbl{font-size:12px;color:var(--ink-muted);margin-top:3px;font-weight:600;}
.rs-stat-sep{width:1px;height:36px;background:var(--hairline-2);flex-shrink:0;}
#rs-mode-row{
  text-align:center;font-size:13px;color:var(--ink-soft);font-weight:600;
  margin-bottom:10px;
}
#rs-sparkline-wrap{
  margin:0 0 14px;padding:10px 12px 6px;
  background:var(--surface-2);border-radius:12px;
  border:.5px solid var(--hairline-2);
}
#rs-sparkline{width:100%;height:40px;display:block;}
#rs-sparkline-labels{
  display:flex;align-items:center;justify-content:space-between;
  font-size:10px;color:var(--ink-muted);font-weight:600;margin-top:2px;
}
#rs-sparkline-wrap.hidden{display:none;}
#rs-actions{display:grid;grid-template-columns:1fr 2fr;gap:10px;}
#rs-share{
  border:none;border-radius:16px;padding:14px;
  background:var(--surface-2);color:var(--ink);font-size:15px;font-weight:800;
  cursor:pointer;font-family:var(--font-sans);border:.5px solid var(--hairline-2);
}
#rs-dismiss{
  border:none;border-radius:16px;padding:14px;
  background:var(--ink);color:#fff;font-size:16px;font-weight:800;
  cursor:pointer;font-family:var(--font-sans);
}

/* ── HISTORY ROWS ── */
.history-row{
  display:flex;align-items:center;gap:12px;padding:10px 18px;
  border-bottom:.5px solid var(--hairline-2);
}
.history-row:last-child{border-bottom:none;}
.history-ico{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:var(--surface-2);border:.5px solid var(--hairline-2);
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.history-body{flex:1;min-width:0;}
.history-dest{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.history-meta{font-size:12px;color:var(--ink-muted);margin-top:2px;}

/* ── Ambient mode overlay ── */
#ambient-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;
}
#ambient-inner{text-align:center;color:#fff;}
#ambient-street{font-size:28px;font-weight:800;margin-bottom:12px;padding:0 20px;}
#ambient-eta{font-size:56px;font-weight:900;font-family:var(--font-num);line-height:1;}
#ambient-remain{font-size:16px;color:rgba(255,255,255,.6);margin-top:8px;font-weight:600;}

/* ── Legend overlay ── */
#legend-overlay{
  position:fixed;inset:0;z-index:55;
  display:flex;align-items:flex-end;justify-content:flex-start;
  padding:0 14px calc(220px + env(safe-area-inset-bottom,0px));
  pointer-events:none;opacity:0;
  transition:opacity .2s;
}
#legend-overlay.show{opacity:1;pointer-events:auto;}
#legend-card{
  background:var(--surface);border-radius:18px;
  box-shadow:var(--shadow-pop);padding:14px 16px;
  min-width:200px;border:.5px solid var(--hairline-2);
}
.legend-title{font-size:12px;font-weight:800;color:var(--ink-muted);letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px;}
.legend-row{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--ink);padding:4px 0;}
.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.legend-sep{height:.5px;background:var(--hairline-2);margin:6px 0;}

/* ── Pre-ride toast ── */
#preride-toast{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;
  transition:opacity .25s ease;
}
#preride-toast.show{opacity:1;}
#preride-toast-inner{
  background:rgba(31,41,55,.88);backdrop-filter:blur(20px);
  color:#fff;border-radius:24px;padding:20px 32px;
  display:flex;gap:20px;font-size:20px;font-weight:800;
  box-shadow:var(--shadow-pop);
}

/* ── MAP TAP CARD ── */
#map-tap-card{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:var(--surface);border-radius:24px 24px 0 0;
  box-shadow:var(--shadow-pop);
  padding:0 18px calc(20px + env(safe-area-inset-bottom,0px));
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.32,1,.6,1);
  pointer-events:none;
}
#map-tap-card.open{transform:translateY(0);pointer-events:auto;}
#map-tap-handle{display:flex;justify-content:center;padding:10px 0 6px;}
#map-tap-body{
  display:flex;align-items:center;gap:14px;padding:10px 0 16px;
  border-bottom:.5px solid var(--hairline-2);
}
#map-tap-ico{font-size:26px;flex-shrink:0;}
#map-tap-info{flex:1;min-width:0;}
#map-tap-label{font-size:16px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#map-tap-sub{font-size:13px;color:var(--ink-muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#map-tap-actions{display:grid;grid-template-columns:1fr 2fr;gap:10px;padding-top:14px;}
#map-tap-cancel{
  border:none;border-radius:16px;padding:14px;
  background:var(--surface-2);color:var(--ink);font-size:15px;font-weight:700;
  cursor:pointer;font-family:var(--font-sans);border:.5px solid var(--hairline-2);
}
#map-tap-confirm{
  border:none;border-radius:16px;padding:14px;
  background:var(--ink);color:#fff;font-size:16px;font-weight:800;
  cursor:pointer;font-family:var(--font-sans);
}
#map-tap-confirm:active{opacity:.85;}
#map-tap-cancel:active{background:var(--surface-2);opacity:.7;}

/* ── Scooter reserve countdown chip ── */
#scooter-reserve-chip{
  position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:14px;right:14px;z-index:202;
  background:var(--sky-tint);color:var(--sky-ink);border-radius:16px;
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  box-shadow:var(--shadow-md);font-size:13px;font-weight:700;
  border:.5px solid var(--sky);
}
#scooter-reserve-timer{
  font-size:20px;font-weight:800;font-family:var(--font-num);min-width:44px;
}
#scooter-reserve-label{flex:1;font-size:12px;}
#scooter-reserve-close{
  background:rgba(0,0,0,.08);border:none;border-radius:8px;
  width:28px;height:28px;cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}

/* ── Resume banner ── */
#resume-banner{
  position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:14px;right:14px;z-index:201;
  background:var(--ink);color:#fff;border-radius:16px;
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  box-shadow:var(--shadow-pop);font-size:13px;font-weight:700;
}
#resume-text{flex:1;}
#resume-yes, #resume-no{
  border:none;border-radius:10px;padding:6px 12px;
  font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;
}
#resume-yes{background:var(--mint-tint);color:var(--mint-ink);}
#resume-no{background:rgba(255,255,255,.15);color:#fff;}

/* ── Route handoff banner ── */
#handoff-banner{
  position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:14px;right:14px;z-index:201;
  background:var(--ink);color:#fff;border-radius:16px;
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  box-shadow:var(--shadow-pop);font-size:13px;font-weight:700;
}
#handoff-text{flex:1;}
#handoff-yes, #handoff-no{
  border:none;border-radius:10px;padding:6px 12px;
  font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;
}
#handoff-yes{background:var(--mint-tint);color:var(--mint-ink);}
#handoff-no{background:rgba(255,255,255,.15);color:#fff;}

/* ── Send-to-phone button: hidden by default (desktop only) ── */
#send-to-phone-btn{display:none;}

/* ── OFFLINE BANNER ── */
#offline-banner{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:#FF3B30;color:#fff;
  font-size:13px;font-weight:700;text-align:center;
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;
  transform:translateY(-100%);opacity:0;
  transition:transform .3s ease, opacity .3s ease;
  pointer-events:none;
}
#offline-banner.show{transform:translateY(0);opacity:1;}

/* ── SPLASH ── */
#splash{
  position:fixed;inset:0;z-index:100;
  background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .4s ease,transform .4s ease;
}
#splash.hide{opacity:0;transform:scale(1.04);pointer-events:none;}
#splash-logo{
  width:72px;height:72px;border-radius:22px;
  background:linear-gradient(135deg,var(--mint),var(--sky));
  display:flex;align-items:center;justify-content:center;
  font-size:36px;box-shadow:0 12px 40px rgba(0,0,0,.3);
}
#splash-title{font-size:28px;font-weight:800;color:#fff;letter-spacing:-.5px;}
#splash-sub{font-size:15px;color:rgba(255,255,255,.55);font-weight:500;}
#splash-spinner{
  width:32px;height:32px;border:2.5px solid rgba(255,255,255,.15);
  border-top-color:var(--mint);border-radius:50%;
  animation:spin .8s linear infinite;position:absolute;bottom:60px;
}
@keyframes spin{to{transform:rotate(360deg)}}
/* ── Destination pin ── */
.dest-pin-wrap{
  display:flex;flex-direction:column;align-items:center;
  position:relative;width:40px;
}
.dest-pin{
  width:36px;height:36px;border-radius:50% 50% 50% 0;
  background:var(--coral);transform:rotate(-45deg);
  box-shadow:0 4px 14px rgba(0,0,0,.28),0 0 0 3px #fff;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:2;flex-shrink:0;
}
.dest-pin-pulse{
  position:absolute;top:0;left:50%;
  width:36px;height:36px;border-radius:50% 50% 50% 0;
  background:var(--coral);
  transform:translateX(-50%) rotate(-45deg);
  transform-origin:center center;
  animation:dest-pulse 2s ease-out infinite;
  z-index:1;pointer-events:none;
}
.dest-pin-label{
  margin-top:5px;
  background:rgba(255,255,255,.96);color:var(--ink);
  font-size:11px;font-weight:700;font-family:var(--font-sans);
  padding:3px 8px;border-radius:var(--r-pill);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  white-space:nowrap;max-width:130px;
  overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;
}
@keyframes dest-pulse{
  0%{opacity:.55;transform:translateX(-50%) rotate(-45deg) scale(1);}
  100%{opacity:0;transform:translateX(-50%) rotate(-45deg) scale(2.2);}
}

/* ── Nearby scooters section ── */
#nearby-scooters-wrap{padding:0 0 4px;}
#nearby-scooters-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 18px 6px;cursor:pointer;user-select:none;
}
#nearby-scooters-hdr-title{
  font-size:12px;font-weight:700;color:var(--ink-muted);
  letter-spacing:.05em;text-transform:uppercase;
}
#nearby-scooters-toggle-arrow{
  font-size:12px;color:var(--ink-muted);
  transition:transform .2s;
}
#nearby-scooters-toggle-arrow.open{transform:rotate(180deg);}
#nearby-scooters-list{overflow:hidden;}
.nearby-scooter-row{
  display:flex;align-items:center;gap:12px;
  padding:9px 18px;border-bottom:.5px solid var(--hairline-2);
  cursor:pointer;transition:background .12s;
}
.nearby-scooter-row:last-child{border-bottom:none;}
.nearby-scooter-row:active{background:var(--surface-2);}
.nearby-sc-ico{font-size:20px;flex-shrink:0;}
.nearby-sc-info{flex:1;min-width:0;}
.nearby-sc-name{font-size:14px;font-weight:700;color:var(--ink);}
.nearby-sc-meta{font-size:12px;color:var(--ink-muted);margin-top:2px;}
.nearby-sc-dist{
  font-size:13px;font-weight:800;color:var(--sky-ink);
  flex-shrink:0;
}
/* Preferred (favourite) scooter provider */
.nearby-scooter-row.is-favorite{background:var(--amber-tint,rgba(255,193,7,.10));}
.nearby-sc-fav-tag{
  font-size:10px;font-weight:800;color:var(--amber-ink,#B8860B);
  background:var(--amber-tint,rgba(255,193,7,.18));
  border-radius:6px;padding:1px 6px;margin-inline-start:6px;vertical-align:middle;
}
.nearby-sc-fav-btn{
  flex-shrink:0;background:none;border:none;cursor:pointer;
  font-size:18px;line-height:1;color:var(--ink-muted);
  padding:4px;border-radius:8px;transition:transform .12s,color .12s;
}
.nearby-sc-fav-btn:hover{transform:scale(1.15);}
.nearby-sc-fav-btn.on{color:#F4B400;}

@keyframes scooter-pulse{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(2.4);opacity:0}
  100%{transform:scale(2.4);opacity:0}
}
.scooter-rec-pin{position:relative;width:40px;height:40px;}
.scooter-rec-pulse{
  position:absolute;inset:0;border-radius:50%;
  background:var(--c,#007AFF);opacity:.6;
  animation:scooter-pulse 1.6s ease-out infinite;
}
.scooter-rec-dot{
  position:absolute;inset:4px;border-radius:50%;
  background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;font-size:16px;
  border:2.5px solid var(--c,#007AFF);
}

/* ── MAP PIN COMPONENT (shared base + variants; props via inline CSS-vars) ──
   --pin-size, --pin-bg (body fill), --pin-ring (border), --pin-fg (glyph color) */
.pin{
  width:var(--pin-size,28px);height:var(--pin-size,28px);
  display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;
}
.pin__glyph{
  font-size:calc(var(--pin-size,28px) * .52);line-height:1;color:var(--pin-fg,#fff);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));
}
/* Teardrop pin (scooters / incidents / cameras) */
.pin--teardrop{
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--pin-bg,var(--surface));
  border:2.5px solid var(--pin-ring,#fff);
  box-shadow:0 3px 8px rgba(0,0,0,.28);
}
.pin--teardrop .pin__glyph{transform:rotate(45deg);}
.pin--near{box-shadow:0 4px 12px rgba(0,0,0,.34);}
/* Circle pin (Lime-style scooters): white fill, provider-coloured ring, dark glyph */
.pin--circle{
  border-radius:50%;background:#fff;
  border:3px solid var(--pin-ring,var(--status-available));
  box-shadow:0 3px 8px rgba(0,0,0,.28);
}
.pin--circle.pin--near{border-width:3.5px;}
.pin--circle svg{display:block;}
/* Dot pin (user) */
.pin--dot{
  border-radius:50%;
  background:var(--pin-bg,var(--status-user));
  border:3px solid var(--pin-ring,#fff);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--pin-bg,var(--status-user)) 22%, transparent);
}

/* ── LAYERS PANEL ── */
#layers-panel{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--shadow-pop);
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  padding:0 0 calc(24px + env(safe-area-inset-bottom,0px));
  pointer-events:none;
  max-height:min(82vh, calc(100dvh - 18px));
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
#layers-panel.open{transform:none;pointer-events:auto;}
#layers-panel-backdrop{
  position:fixed;inset:0;z-index:39;
  background:rgba(31,41,55,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .25s;
}
#layers-panel-backdrop.open{opacity:1;pointer-events:auto;}
#layers-handle{padding:8px 0 0;display:flex;flex-direction:column;align-items:center;}
#layers-handle .handle-pill{margin-bottom:0;}
#layers-title{
  font-size:17px;font-weight:700;color:var(--ink);
  padding:12px 18px 10px;border-bottom:.5px solid var(--hairline-2);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:sticky;top:0;background:var(--surface);z-index:1;
}
#layers-close{
  width:34px;height:34px;border:none;border-radius:17px;
  background:var(--surface-2);color:var(--ink-muted);
  font-size:24px;line-height:1;cursor:pointer;flex-shrink:0;
}
#layer-presets-card{
  padding:14px 18px 12px;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border-bottom:.5px solid var(--hairline-2);
}
#layer-legend-card{
  padding:14px 18px 14px;
  background:var(--surface-2);
  border-bottom:.5px solid var(--hairline-2);
}
#safety-settings-card{
  padding:14px 18px 14px;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border-bottom:.5px solid var(--hairline-2);
}
#source-health-card{
  padding:14px 18px 14px;
  background:var(--surface-2);
  border-bottom:.5px solid var(--hairline-2);
}
.layer-presets-head{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;}
.layer-presets-title{font-size:14px;font-weight:800;color:var(--ink);}
.layer-presets-sub{font-size:12px;color:var(--ink-muted);}
#layer-presets-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;}
#layer-presets-row::-webkit-scrollbar{display:none;}
.layer-preset-btn{
  border:none;border-radius:999px;padding:9px 12px;
  background:var(--surface);color:var(--ink-soft);
  border:.5px solid var(--hairline-2);box-shadow:var(--shadow);
  font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;flex-shrink:0;
  transition:background .15s,color .15s,border-color .15s,transform .15s;
}
.layer-preset-btn.active{
  background:var(--ink);color:#fff;border-color:transparent;
}
.layer-preset-btn:active{transform:scale(.98);}
.legend-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-bottom:10px;
}
.legend-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 11px;border-radius:14px;
  background:rgba(255,255,255,.72);
  border:.5px solid var(--hairline-2);
}
.legend-swatch{
  width:12px;height:12px;border-radius:50%;margin-top:4px;flex-shrink:0;
  box-shadow:0 0 0 4px rgba(255,255,255,.5);
}
.legend-swatch.mint{background:var(--mint);}
.legend-swatch.peach{background:var(--peach);}
.legend-swatch.coral{background:var(--coral);}
.legend-swatch.sky{background:var(--sky);}
.legend-copy{min-width:0;}
.legend-name{font-size:12px;font-weight:800;color:var(--ink);margin-bottom:2px;}
.legend-desc{font-size:11px;line-height:1.45;color:var(--ink-muted);}
.legend-tips{display:flex;flex-direction:column;gap:7px;}
.legend-tip{
  font-size:11.5px;line-height:1.45;color:var(--ink-soft);
  padding:8px 10px;border-radius:12px;
  background:rgba(255,255,255,.62);
  border:.5px solid var(--hairline-2);
}
.safety-settings-list{display:flex;flex-direction:column;gap:9px;}
.safety-setting-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.72);
  border:.5px solid var(--hairline-2);
}
.safety-setting-copy{flex:1;min-width:0;}
.safety-setting-name{font-size:13px;font-weight:800;color:var(--ink);}
.safety-setting-desc{font-size:11.5px;line-height:1.4;color:var(--ink-muted);margin-top:2px;}
#source-health-list{display:flex;flex-direction:column;gap:8px;}
.source-health-row{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 11px;border-radius:14px;
  background:rgba(255,255,255,.72);
  border:.5px solid var(--hairline-2);
}
.source-health-dot{
  width:10px;height:10px;border-radius:50%;margin-top:5px;flex-shrink:0;
  box-shadow:0 0 0 4px rgba(255,255,255,.45);
}
.source-health-dot.ok{background:var(--mint);}
.source-health-dot.warn{background:var(--peach);}
.source-health-dot.error{background:var(--coral);}
.source-health-copy{flex:1;min-width:0;}
.source-health-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.source-health-name{font-size:12.5px;font-weight:800;color:var(--ink);}
.source-health-age{font-size:11px;color:var(--ink-muted);white-space:nowrap;}
.source-health-meta{font-size:11.5px;color:var(--ink-soft);line-height:1.45;margin-top:3px;}
.layer-row{
  display:flex;align-items:center;gap:14px;
  padding:13px 18px;border-bottom:.5px solid var(--hairline-2);
}
.layer-row:last-child{border-bottom:none;}
.layer-ico{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}
.layer-info{flex:1;}
.layer-name{font-size:15px;font-weight:600;color:var(--ink);}
.layer-desc{font-size:12px;color:var(--ink-muted);margin-top:2px;}
.layer-fresh{
  display:inline-block;margin-right:6px;font-size:11px;font-weight:700;
  padding:1px 6px;border-radius:20px;vertical-align:middle;
}
.layer-fresh.fresh{background:var(--mint-tint);color:var(--mint-ink);}
.layer-fresh.stale{background:var(--peach-tint,#FFF4E0);color:var(--peach-ink,#B65A00);}
.layer-fresh.error{background:var(--coral-tint);color:var(--coral-ink);}
.layer-toggle{position:relative;width:46px;height:28px;flex-shrink:0;}
.layer-toggle input{opacity:0;width:0;height:0;}
.layer-toggle .track{
  position:absolute;inset:0;border-radius:14px;
  background:var(--ink-faint);transition:background .2s;cursor:pointer;
}
.layer-toggle .thumb{
  position:absolute;top:3px;left:3px;
  width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.22);
  transition:transform .2s;pointer-events:none;
}
.layer-toggle input:checked + .track{background:var(--mint);}
.layer-toggle input:checked + .track + .thumb,
.layer-toggle input:checked ~ .thumb{transform:translateX(18px);}
.layer-expand-btn{
  background:none;border:none;padding:4px 6px;cursor:pointer;
  font-size:18px;color:var(--ink-muted);transition:transform .2s;line-height:1;flex-shrink:0;
}
.layer-expand-btn.open{transform:rotate(90deg);}
.layer-sub{display:none;background:var(--surface-2);}
.layer-sub.open{display:block;}
.layer-sub-row{
  display:flex;align-items:center;gap:12px;
  padding:9px 18px 9px 42px;
  border-bottom:.5px solid var(--hairline-2);
}
.layer-sub-row:last-child{border-bottom:none;}
.layer-sub-ico{font-size:15px;flex-shrink:0;}
.layer-sub-name{flex:1;font-size:13px;color:var(--ink-soft);}
.layer-sub-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;}
.layer-sub-info .layer-sub-name{flex:none;}
.layer-sub-meta{font-size:12px;color:var(--ink-muted);line-height:1.3;}
.layer-toggle-sm{width:36px;height:22px;}
.layer-toggle-sm .thumb{width:16px;height:16px;top:3px;left:3px;}
.layer-toggle-sm input:checked ~ .thumb{transform:translateX(14px);}
.layer-sub.parent-off .layer-sub-row{opacity:.45;pointer-events:none;}
.layer-sub.parent-off .layer-toggle .track{background:var(--ink-faint)!important;}
.layer-sub.parent-off .layer-toggle .thumb{transform:translateX(0)!important;}
.layer-expand-btn-sm{font-size:13px;width:20px;height:20px;flex-shrink:0;}
.layer-sub-row-zones{border-top:1px solid var(--hairline-2);margin-top:2px;}
.layer-sub-sub{display:none;}
.layer-sub-sub.open{display:block;}
.layer-sub-sub-row{
  display:flex;align-items:center;gap:12px;
  padding:7px 18px 7px 56px;
  border-bottom:.5px solid var(--hairline-2);
  background:rgba(0,0,0,.06);
}
.layer-sub-sub-row:last-child{border-bottom:none;}
.layer-sub-sub-row .layer-sub-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;}
.layer-sub-sub-row .layer-sub-name{flex:none;font-size:12px;}
.layer-sub-sub-row .layer-sub-meta{font-size:10px;}
.layer-sub-sub-name{flex:1;font-size:12px;color:var(--ink-soft);}
.layer-sub-sub.parent-off .layer-sub-sub-row{opacity:.45;pointer-events:none;}
.layer-sub-sub.parent-off .layer-toggle .track{background:var(--ink-faint)!important;}
.layer-sub-sub.parent-off .layer-toggle .thumb{transform:translateX(0)!important;}
.layer-sub-sub-note{
  padding:8px 18px 10px 56px;
  font-size:11px;
  color:var(--ink-muted);
  line-height:1.45;
  background:rgba(0,0,0,.04);
  border-bottom:.5px solid var(--hairline-2);
}

.user-puck-outer{
  width:22px;height:22px;border-radius:50%;
  background:rgba(73,168,255,.2);
  display:flex;align-items:center;justify-content:center;
}
.user-puck{
  width:14px;height:14px;border-radius:50%;
  background:var(--sky);border:2.5px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}

/* ── DARK MODE ── */
/* ── Live data freshness bar ── */
#freshness-bar{
  position:fixed;top:0;left:0;right:0;z-index:300;
  height:3px;background:transparent;pointer-events:none;
}
#freshness-bar-fill{
  height:100%;border-radius:0 2px 2px 0;
  background:linear-gradient(90deg,var(--mint),var(--sky));
  transition:width .6s ease, opacity .3s;
}

/* ═══ PANEL SHEETS & MODAL OVERLAYS ════════════════════════════════════════
   Shared classes for the bottom-sheet panels (settings/stats/leaderboard/
   missions/grouprides/deals/plans) and full-screen modal overlays (auth,
   emergency contacts). display is controlled by JS via inline style only —
   do NOT add display rules here. Values match the previous inline styles. */
.panel-backdrop{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.45)}
.panel-sheet{position:fixed;bottom:0;left:0;right:0;z-index:71;background:var(--surface);
  border-radius:24px 24px 0 0;padding:20px 18px calc(24px + env(safe-area-inset-bottom,0px));
  max-height:85vh;overflow-y:auto}
.panel-sheet--h80{max-height:80vh}
.panel-sheet--h82{max-height:82vh}
.panel-backdrop--top{z-index:72;background:rgba(0,0,0,.5)}
.panel-sheet--top{z-index:73;padding:24px 18px calc(28px + env(safe-area-inset-bottom,0px))}
.modal-overlay{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.5);align-items:flex-end}
.modal-overlay--auth{z-index:90;background:rgba(0,0,0,.55)}

/* ── Viewer mode — hide rider chrome when viewing someone else's live share ── */
.viewer-mode #sheet,
.viewer-mode #idle-screen,
.viewer-mode #nav-screen,
.viewer-mode #fab-col,
.viewer-mode #report-fab,
.viewer-mode #freshness-bar,
.viewer-mode #offline-banner,
.viewer-mode #resume-banner,
.viewer-mode #handoff-banner,
.viewer-mode #scooter-reserve-chip,
.viewer-mode #ad-banner,
.viewer-mode #send-to-phone-btn,
.viewer-mode #live-share-chip { display: none !important; }

/* Tablet/desktop responsive layout lives in css/desktop.css,
   loaded with media="(min-width:768px)" so phones never parse it. */

/* ═══ DARK THEME ═══════════════════════════════════════════════════════════
   Single source of truth: html[data-theme="dark"], set by JS setTheme().
   The @media(prefers-color-scheme:dark) block below is a no-JS fallback that
   applies ONLY until JS sets an explicit theme (html:not([data-theme])).
   --ink-muted/--ink-faint raised for AA contrast on dark surfaces; the colored
   *-ink tokens are LIGHTENED so colored text stays readable on dark tints. */
html[data-theme="dark"]{
  --bg:#111318;--surface:#1C1F26;--surface-2:#242830;
  --ink:#F0F2F5;--ink-soft:#A0A8B5;--ink-muted:#9AA4B2;--ink-faint:#6B7585;
  --hairline:rgba(240,242,245,.10);--hairline-2:rgba(240,242,245,.06);
  --mint-tint:color-mix(in oklch, var(--mint) 18%, var(--surface));
  --peach-tint:color-mix(in oklch, var(--peach) 18%, var(--surface));
  --lavender-tint:color-mix(in oklch, var(--lavender) 18%, var(--surface));
  --sky-tint:color-mix(in oklch, var(--sky) 18%, var(--surface));
  --coral-tint:color-mix(in oklch, var(--coral) 18%, var(--surface));
  --mint-ink:oklch(80% 0.10 165);--peach-ink:oklch(80% 0.10 55);
  --lavender-ink:oklch(76% 0.10 295);--sky-ink:oklch(74% 0.10 235);--coral-ink:oklch(75% 0.14 22);
}
html[data-theme="dark"] #go-btn,
html[data-theme="dark"] #rep-submit{background:#1F2937;color:#fff;}
html[data-theme="dark"] #stop-btn{background:var(--coral);color:#fff;}
html[data-theme="dark"] .route-mode-pill.active,
html[data-theme="dark"] .pill.active{background:#ECEEF2;color:#1A1D26;}
/* Toast banners use var(--ink) as a *dark* background; --ink flips light in
   dark theme, so pin them to a dark elevated surface to keep #fff text legible. */
html[data-theme="dark"] #resume-banner,
html[data-theme="dark"] #handoff-banner{background:#252C3A;border:1px solid rgba(255,255,255,.06);}

@media(prefers-color-scheme:dark){
  html:not([data-theme]){
    --bg:#111318;--surface:#1C1F26;--surface-2:#242830;
    --ink:#F0F2F5;--ink-soft:#A0A8B5;--ink-muted:#9AA4B2;--ink-faint:#6B7585;
    --hairline:rgba(240,242,245,.10);--hairline-2:rgba(240,242,245,.06);
    --mint-tint:color-mix(in oklch, var(--mint) 18%, var(--surface));
    --peach-tint:color-mix(in oklch, var(--peach) 18%, var(--surface));
    --lavender-tint:color-mix(in oklch, var(--lavender) 18%, var(--surface));
    --sky-tint:color-mix(in oklch, var(--sky) 18%, var(--surface));
    --coral-tint:color-mix(in oklch, var(--coral) 18%, var(--surface));
    --mint-ink:oklch(80% 0.10 165);--peach-ink:oklch(80% 0.10 55);
    --lavender-ink:oklch(76% 0.10 295);--sky-ink:oklch(74% 0.10 235);--coral-ink:oklch(75% 0.14 22);
  }
  html:not([data-theme]) #go-btn,
  html:not([data-theme]) #rep-submit{background:#1F2937;color:#fff;}
  html:not([data-theme]) #stop-btn{background:var(--coral);color:#fff;}
  html:not([data-theme]) .route-mode-pill.active,
  html:not([data-theme]) .pill.active{background:#ECEEF2;color:#1A1D26;}
  html:not([data-theme]) #resume-banner,
  html:not([data-theme]) #handoff-banner{background:#252C3A;border:1px solid rgba(255,255,255,.06);}
}

/* ═══ PROFILE SCREEN (full-page account hub) ═══════════════════════════════ */
.profile-topbar{display:flex;align-items:center;gap:10px;padding:14px 16px;position:sticky;top:0;
  background:var(--bg);border-bottom:.5px solid var(--hairline-2);z-index:1}
.profile-back{width:38px;height:38px;border:none;border-radius:50%;background:var(--surface-2);
  color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
/* Lime-style drawer identity: start-aligned, big greeting, km/rides strip */
.profile-identity{text-align:start;padding:20px 20px 22px}
.profile-avatar{width:64px;height:64px;border-radius:50%;background:var(--surface-2);margin:0 0 12px;
  display:flex;align-items:center;justify-content:center;font-size:32px;
  border:.5px solid var(--hairline-2);box-shadow:var(--shadow-md,0 4px 16px rgba(0,0,0,.10))}
.profile-name{font-size:26px;font-weight:800;line-height:1.1}
.profile-rep{font-size:13px;color:var(--ink-muted);margin-top:4px;min-height:18px}
.profile-stats{display:flex;align-items:center;gap:var(--sp-5);margin-top:16px}
.profile-stat{display:flex;flex-direction:column}
.profile-stat-val{font-size:24px;font-weight:800;color:var(--ink);font-family:var(--font-num);line-height:1}
.profile-stat-lbl{font-size:12px;color:var(--ink-muted);margin-top:4px}
.profile-stat-sep{width:.5px;align-self:stretch;background:var(--hairline);margin:2px 0}
.profile-login-cta{margin-top:18px;border:none;border-radius:var(--r-pill);padding:12px 28px;
  background:var(--lavender-tint);color:var(--lavender-ink);font-size:14px;font-weight:700;
  cursor:pointer;font-family:inherit;min-height:44px}
.profile-menu{padding:0 14px;display:flex;flex-direction:column;gap:1px;
  background:var(--surface);border-radius:16px;margin:0 14px;overflow:hidden;
  border:.5px solid var(--hairline-2)}
.profile-row{display:flex;align-items:center;gap:14px;width:100%;box-sizing:border-box;
  padding:15px 16px;border:none;border-bottom:.5px solid var(--hairline-2);background:var(--surface);
  color:var(--ink);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;text-align:start;
  transition:background .12s}
.profile-row:last-child{border-bottom:none}
.profile-row:active{background:var(--surface-2)}
.profile-row-i{font-size:21px;line-height:1;flex-shrink:0;width:26px;text-align:center}
.profile-row-t{flex:1}
.profile-row-c{color:var(--ink-faint);font-size:22px;font-weight:400;transform:scaleX(-1)}

/* ═══ SETTINGS PANEL ═══════════════════════════════════════════════════════ */
.settings-group-title{font-size:12px;font-weight:700;color:var(--ink-muted);
  margin:16px 2px 8px;text-transform:none}
.settings-group-title:first-child{margin-top:0}
.settings-toggle{display:flex;align-items:center;justify-content:space-between;
  padding:13px 14px;background:var(--surface-2);border-radius:12px;margin-bottom:8px;
  font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.settings-toggle input{width:20px;height:20px;accent-color:var(--mint);cursor:pointer}
.settings-select{border:none;background:var(--surface);border-radius:8px;
  padding:6px 10px;font-family:inherit;font-size:13px;font-weight:700;
  color:var(--ink);cursor:pointer;border:.5px solid var(--hairline-2)}
.st-label{display:inline-flex;align-items:center;gap:11px}
.st-label svg{color:var(--ink-muted)}
.theme-seg{display:flex;gap:0;background:var(--surface-2);border-radius:var(--r-pill);
  padding:4px;margin-bottom:8px;border:.5px solid var(--hairline-2)}
.theme-seg-btn{flex:1;border:none;background:transparent;border-radius:var(--r-pill);
  padding:10px 8px;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink-soft);
  cursor:pointer;transition:background .15s,color .15s;min-height:44px}
.theme-seg-btn.active{background:var(--ink);color:#fff}
html[data-theme="dark"] .theme-seg-btn.active{background:#ECEEF2;color:#1A1D26}
.settings-link{display:flex;align-items:center;justify-content:space-between;width:100%;
  box-sizing:border-box;padding:13px 14px;background:var(--surface-2);border:none;border-radius:12px;
  margin-bottom:8px;font-size:14px;font-weight:600;color:var(--ink);font-family:inherit;cursor:pointer;
  text-align:start}
.settings-link span:last-child{transform:scaleX(-1);font-size:20px}

/* ── Nav bottom: hide less-critical stats on narrow phones ── */
@media (max-width: 420px) {
  .nb-opt,.nb-sep-opt{display:none;}
  .nb-val{font-size:20px;}
}

/* ── Small phones (< 375px) ── */
@media (max-width: 374px) {
  #search-card{margin:4px 10px 0;}
  #mode-pills{margin:8px 10px 0;}
  .pill{font-size:13px;padding:8px 4px;gap:4px;}
  .fav-name,.preset-name,.search-result-name,.ac-name{font-size:14px;}
  .fav-sub,.preset-meta,.search-result-sub,.ac-sub{font-size:12px;}
  #turn-street{font-size:clamp(15px,4.5vw,21px)!important;}
  .nb-val{font-size:19px;}
  #fab-col{left:10px;}
  .fab{width:42px;height:42px;}
  .profile-name{font-size:22px;}
  .profile-stat-val{font-size:20px;}
  #rep-grid{grid-template-columns:repeat(2,1fr);}
}

/* ── Short screens: limit autocomplete/dropdown height ── */
@media (max-height: 600px) {
  #ac-list{max-height:160px;}
  .rep-handle{margin-top:8px;}
}

/* ── Landscape on phones (rotated, short height) ── */
@media (orientation: landscape) and (max-height: 500px) {
  /* Turn bar: compact padding since there's no room for notch inset */
  #turn-bar{padding:8px 16px 10px;}
  #turn-icon-box{width:48px;height:48px;}
  #turn-ring-svg{width:52px;height:52px;}
  #turn-svg{width:30px;height:30px;}
  #turn-street{font-size:18px!important;}
  /* Hazard / status chips: stack tighter below turn bar */
  #hazard-card{top:80px;}
  #nav-status-chip{top:80px;}
  /* Nav bottom bar: reduce padding to save vertical space */
  #nav-bottom-stats{padding:8px 16px 10px;}
  .nb-val{font-size:20px;}
  /* FABs and speed badge sit above the shrunken sheet */
  #fab-col{bottom:100px;}
  /* Banners: hug the top more tightly */
  #offline-banner,#resume-banner,#handoff-banner{top:calc(env(safe-area-inset-top,0px) + 4px);}
  /* Sheet snaps stay functional — window.innerHeight drives them */
}

/* ── Focus-visible ring (keyboard users — not gated by pointer media) ────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[role="button"]:focus-visible,
.search-result-row:focus-visible,
.pill:focus-visible,
.route-mode-pill:focus-visible,
.fab:focus-visible,
.settings-toggle:focus-visible,
.fav-row:focus-visible,
.profile-row:focus-visible,
.ctx-chip:focus-visible,
.settings-link:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
  border-radius: inherit;
}

/* Keyboard-navigable search-result highlight */
.search-result-row--active {
  background: var(--surface-2);
}

/* ── Hover affordances — only for real pointer devices ───────────────────── */
@media (hover: hover) and (pointer: fine) {
  /* List rows: subtle background lift */
  .search-result-row:hover,
  .fav-row:hover,
  .profile-row:hover {
    background: var(--surface-2);
    cursor: pointer;
  }

  /* Pills and chip buttons: small upward lift */
  .pill:hover,
  .route-mode-pill:hover,
  .ctx-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
  }

  /* FAB circular buttons: brightness dip + stronger shadow */
  .fab:hover {
    filter: brightness(.95);
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    cursor: pointer;
  }

  /* Settings toggle rows */
  .settings-toggle:hover,
  .settings-link:hover {
    background: var(--surface-2);
    cursor: pointer;
  }
}

/* ── Transitions for the lift effect (skipped when motion is reduced) ─────── */
@media (prefers-reduced-motion: no-preference) {
  .pill,
  .route-mode-pill,
  .ctx-chip {
    transition: transform .12s, box-shadow .12s, background .12s;
  }
  .settings-toggle,
  .settings-link {
    transition: background .12s;
  }
}

/* ── Reduced-motion safety net (covers all existing animations too) ────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}
/* ════════════════════════════════════════════════════════════════════════════
   ONBOARDING / WELCOME WIZARD
   ════════════════════════════════════════════════════════════════════════════ */
#onboarding-modal{
  position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .25s ease;
}
#onboarding-modal.open{opacity:1;visibility:visible;}
#onboarding-modal .ob-sheet{
  position:relative;background:var(--surface);width:100%;max-width:480px;box-sizing:border-box;
  border-radius:26px 26px 0 0;padding:18px 20px calc(20px + env(safe-area-inset-bottom,0px));
  max-height:92vh;display:flex;flex-direction:column;
  box-shadow:0 -8px 40px rgba(0,0,0,.18);
  transform:translateY(24px);transition:transform .3s cubic-bezier(.22,1,.36,1);
}
#onboarding-modal.open .ob-sheet{transform:translateY(0);}

.ob-progress{height:5px;border-radius:99px;background:var(--hairline-2);overflow:hidden;margin:4px 0 14px;}
.ob-progress-fill{height:100%;border-radius:99px;background:var(--mint);width:0;transition:width .3s ease;}

.ob-skip{
  position:absolute;top:14px;left:18px;border:none;background:none;cursor:pointer;
  color:var(--ink-muted);font-size:13px;font-weight:700;font-family:inherit;
}

.ob-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px 2px 4px;}

.ob-step-head{margin-bottom:16px;}
.ob-step-title{font-size:20px;font-weight:800;color:var(--ink);margin:0 0 6px;line-height:1.25;}
.ob-step-sub{font-size:13.5px;color:var(--ink-muted);margin:0;line-height:1.5;}

/* Hero (welcome + done) */
.ob-hero{text-align:center;padding:16px 6px 4px;}
.ob-hero-emoji{font-size:52px;line-height:1;margin-bottom:10px;}
.ob-title{font-size:23px;font-weight:800;color:var(--ink);margin:0 0 8px;}
.ob-sub{font-size:14px;color:var(--ink-muted);line-height:1.55;margin:0 auto;max-width:340px;}
.ob-bullets{list-style:none;padding:0;margin:18px auto 4px;max-width:300px;text-align:start;}
.ob-bullets li{
  font-size:14px;color:var(--ink-soft);font-weight:600;padding:9px 14px;margin-bottom:8px;
  background:var(--surface-2);border:.5px solid var(--hairline-2);border-radius:14px;
}

/* Single-select options */
.ob-options{display:flex;flex-direction:column;gap:10px;}
.ob-option{
  display:flex;align-items:center;gap:14px;width:100%;box-sizing:border-box;
  padding:14px 16px;border-radius:16px;cursor:pointer;font-family:inherit;text-align:start;
  background:var(--surface-2);border:1.5px solid var(--hairline-2);transition:border-color .15s,background .15s,transform .08s;
}
.ob-option:active{transform:scale(.99);}
.ob-option.selected{border-color:var(--mint);background:var(--mint-tint);}
.ob-option-emoji{font-size:26px;flex-shrink:0;width:34px;text-align:center;}
.ob-option-text{display:flex;flex-direction:column;flex:1;min-width:0;}
.ob-option-label{font-size:15px;font-weight:700;color:var(--ink);}
.ob-option-sub{font-size:12.5px;color:var(--ink-muted);margin-top:2px;}
.ob-option-check{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--mint);color:#fff;font-size:14px;font-weight:800;opacity:0;transform:scale(.6);transition:.15s;
}
.ob-option.selected .ob-option-check{opacity:1;transform:scale(1);}
/* Ordered multi-select (route priority) — sky-tinted to read as a rank, not a tick */
.ob-options-ranked .ob-option.selected{border-color:var(--sky);background:var(--sky-tint);}
.ob-option-rank{background:var(--sky);font-variant-numeric:tabular-nums;}

/* Multi-select chips (operators) */
.ob-chips{display:flex;flex-wrap:wrap;gap:10px;}
.ob-chip{
  display:inline-flex;align-items:center;gap:7px;padding:11px 16px;border-radius:14px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);
  background:var(--surface-2);border:1.5px solid var(--hairline-2);transition:.15s;
}
.ob-chip.selected{border-color:var(--sky);background:var(--sky-tint);color:var(--sky-ink);}
.ob-hint{font-size:12.5px;color:var(--ink-faint);margin-top:14px;}

/* Toggles (safety) */
.ob-toggles{display:flex;flex-direction:column;gap:4px;}
.ob-toggle-row{
  display:flex;align-items:center;gap:13px;padding:12px 4px;cursor:pointer;
  border-bottom:.5px solid var(--hairline-2);
}
.ob-toggle-row:last-child{border-bottom:none;}
.ob-toggle-emoji{font-size:22px;flex-shrink:0;width:30px;text-align:center;}
.ob-toggle-text{display:flex;flex-direction:column;flex:1;min-width:0;}
.ob-toggle-label{font-size:14.5px;font-weight:700;color:var(--ink);}
.ob-toggle-sub{font-size:12px;color:var(--ink-muted);margin-top:2px;}
.ob-switch{
  flex-shrink:0;width:48px;height:28px;border-radius:99px;background:var(--hairline);position:relative;
  cursor:pointer;transition:background .2s;
}
.ob-switch.on{background:var(--mint);}
.ob-switch-knob{
  position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s;
}
.ob-switch.on .ob-switch-knob{transform:translateX(20px);}

/* Summary (done step) */
.ob-summary{display:flex;flex-direction:column;gap:8px;margin-top:14px;text-align:start;}
.ob-summary-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 15px;background:var(--surface-2);border:.5px solid var(--hairline-2);border-radius:13px;
}
.ob-summary-row span{font-size:13px;color:var(--ink-muted);}
.ob-summary-row b{font-size:14px;color:var(--ink);font-weight:700;}

/* Nav */
.ob-nav{display:flex;align-items:center;gap:12px;margin-top:16px;}
.ob-back{
  border:none;background:none;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;
  color:var(--ink-muted);padding:12px 6px;flex-shrink:0;
}
.ob-next{
  flex:1;border:none;border-radius:15px;padding:15px;cursor:pointer;font-family:inherit;
  font-size:15px;font-weight:800;color:#fff;background:var(--ink);transition:opacity .15s,transform .08s;
}
.ob-next:active{transform:scale(.99);}
.ob-next:disabled{opacity:.4;cursor:default;}

/* Onboarding — nickname input */
.ob-input{
  width:100%;box-sizing:border-box;padding:15px 16px;border-radius:15px;
  border:1.5px solid var(--hairline-2);background:var(--surface-2);color:var(--ink);
  font-family:inherit;font-size:16px;font-weight:600;transition:border-color .15s;
}
.ob-input:focus{outline:none;border-color:var(--mint);background:var(--surface);}
.ob-input::placeholder{color:var(--ink-faint);font-weight:500;}

/* Onboarding — directional step transitions */
@keyframes obEnterFwd{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes obEnterBack{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.ob-enter-fwd{animation:obEnterFwd .26s cubic-bezier(.22,1,.36,1);}
.ob-enter-back{animation:obEnterBack .26s cubic-bezier(.22,1,.36,1);}
@media (prefers-reduced-motion:reduce){
  .ob-enter-fwd,.ob-enter-back{animation:none;}
  #onboarding-modal .ob-sheet{transition:none;}
}