/* ══════════════════════════════════════════════════════════════════════════
   My4wd — design system
   Direction: instrument cluster meets topographic chart. Ink and sand, hairlines
   instead of heavy borders, three levels of depth and nothing else. Numbers are
   the heroes; a driver reads this at 100 km/h in the sun, so contrast and size
   beat decoration every time.
   Tokens mirror brand/tokens.css — keep the two in step.
   ══════════════════════════════════════════════════════════════════════════ */

@import url("fonts.css");

:root {
  /* ink */
  --ink-900: #06080B;  --ink-800: #0B0F14;  --ink-700: #121821;
  --ink-600: #1A2230;  --ink-500: #26313F;
  /* accent */
  --sand: #F5A524;  --sand-soft: #FFD9A0;  --ember: #FF7A45;
  --mint: #3FB950;  --ice: #58A6FF;  --danger: #F85149;
  /* roles */
  --bg: var(--ink-800);       --surface: var(--ink-700);
  --raised: var(--ink-600);   --sunken: var(--ink-900);
  --line: rgba(255,255,255,.075);
  --line-2: rgba(255,255,255,.14);
  --line-warm: rgba(245,165,36,.28);
  --text: #EDF1F6;  --text-2: #A9B5C3;  --muted: #7B8794;
  /* depth */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 8px 24px rgba(0,0,0,.38);
  --sh-3: 0 20px 50px rgba(0,0,0,.5);
  --sh-glow: 0 0 0 1px rgba(245,165,36,.22), 0 12px 40px rgba(245,165,36,.14);
  --sheen: inset 0 1px 0 rgba(255,255,255,.06);
  /* geometry */
  --r-xs: 8px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  /* motion */
  --ease: cubic-bezier(.2,.7,.2,1); --t-fast: 120ms; --t-med: 220ms;
  /* layout */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --topbar-h: 86px;  --tabbar-h: 64px;
  --ui: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

[data-theme="daylight"] {
  --bg: #EDEFF2;  --surface: #FFFFFF;  --raised: #F4F6F8;  --sunken: #E2E6EB;
  --line: rgba(10,20,30,.10);  --line-2: rgba(10,20,30,.22);
  --line-warm: rgba(178,106,0,.35);
  --text: #0B1016;  --text-2: #38424E;  --muted: #5D6875;
  --sand: #B26A00;  --sand-soft: #8A5200;  --ember: #C2410C;
  --mint: #1F7A34;  --ice: #1B5FA8;  --danger: #C0322B;
  --sh-1: 0 1px 2px rgba(10,20,30,.10);
  --sh-2: 0 6px 20px rgba(10,20,30,.12);
  --sh-3: 0 16px 40px rgba(10,20,30,.16);
  --sh-glow: 0 0 0 1px rgba(178,106,0,.28), 0 10px 30px rgba(178,106,0,.12);
  --sheen: inset 0 1px 0 rgba(255,255,255,.7);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* The [hidden] attribute is the app's only hide mechanism (sheets, toast, the
   install button) and a class rule like `.sheet { display: grid }` OUTRANKS the
   browser's own `[hidden] { display: none }` — so without this the settings drawer
   renders permanently, pinned across the bottom of the screen, and every tap lands
   on it. My first rewrite of this file dropped the guard the old `.sheet[hidden]`
   rule provided. Never rely on the UA rule for this. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--ui); font-size: 16px; line-height: 1.42;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* faint topographic texture on inert surfaces only — never behind a number */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'><g fill='none' stroke='%23ffffff' stroke-opacity='0.035' stroke-width='1'><path d='M-10 60 C 40 20, 90 100, 150 60 S 250 20, 290 60'/><path d='M-10 100 C 40 60, 90 140, 150 100 S 250 60, 290 100'/><path d='M-10 140 C 40 100, 90 180, 150 140 S 250 100, 290 140'/><path d='M-10 180 C 40 140, 90 220, 150 180 S 250 140, 290 180'/></g></svg>");
}
[data-theme="daylight"] body::before { opacity: .5; stroke-opacity: .5; }

::selection { background: var(--line-warm); }

:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ══ shell ═════════════════════════════════════════════════════════════════ */
.app {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh; overflow: hidden;
  max-width: 760px; margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,.017), transparent 220px);
}
@media (min-width: 761px) {
  .app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

.topbar {
  height: var(--topbar-h);
  padding: var(--safe-top) 12px 0;
  display: flex; align-items: center; gap: 10px;
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand-mark {
  width: 54px; height: 54px; flex: none;
  filter: drop-shadow(0 3px 10px rgba(245,165,36,.28));
}
.brand-name {
  font-size: 21px; font-weight: 700; letter-spacing: -.02em;
  color: var(--text); white-space: nowrap;
}
.brand-name i { font-style: normal; color: var(--sand); }
.region-tag {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-2); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 3px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 34vw; cursor: pointer; background: transparent;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.region-tag:hover { border-color: var(--line-warm); color: var(--text); }

.pills { margin-left: auto; display: flex; gap: 6px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 4px 9px; background: rgba(255,255,255,.02);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; }
.pill[data-state="on"]      { color: var(--text);  border-color: var(--line-2); }
.pill[data-state="on"] i    { background: var(--mint); box-shadow: 0 0 0 3px rgba(63,185,80,.16); }
.pill[data-state="warn"] i  { background: var(--sand); box-shadow: 0 0 0 3px rgba(245,165,36,.16); }
.pill[data-state="error"]   { color: var(--danger); border-color: rgba(248,81,73,.35); }
.pill[data-state="error"] i { background: var(--danger); box-shadow: 0 0 0 3px rgba(248,81,73,.16); }

.icon-btn {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  color: var(--text-2); background: rgba(255,255,255,.03);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
                              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { color: var(--text); border-color: var(--line-2); }
.icon-btn:active { transform: scale(.95); }

.alert-ribbon {
  margin: 8px 12px 0; padding: 10px 12px;
  font-size: 13px; line-height: 1.35;
  border-radius: var(--r-md);
  border: 1px solid rgba(245,165,36,.35);
  background: linear-gradient(180deg, rgba(245,165,36,.14), rgba(245,165,36,.06));
  color: var(--text);
  box-shadow: var(--sh-1);
}
.alert-ribbon strong { color: var(--sand); }

/* ══ views ═════════════════════════════════════════════════════════════════ */
.views { flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; }
.view { display: none; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.view.is-active { display: block; animation: viewIn var(--t-med) var(--ease); }
/* No fill mode on purpose: with `both`, a child whose animation never starts (its
   parent began life as display: none) stays at opacity 0 forever — a blank screen
   with a working tab bar, which is indistinguishable from a broken app. */
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

#view-dash > *, #view-places > *, #view-car > * { margin: 12px 12px 0; }
#view-live > * { margin: 12px 12px 0; }
#view-live, #view-car, #view-dash { padding-bottom: calc(var(--tabbar-h) + var(--safe-bot) + 20px); }

/* ══ building blocks ═══════════════════════════════════════════════════════ */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008)), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px;
  box-shadow: var(--sh-1), var(--sheen);
}
.card-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 12px;
}
.card-head h2 {
  margin: 0; font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-2);
}
.card-head .stamp { margin-left: auto; }

.stamp, .tiny {
  font-family: var(--mono); font-size: 11px; letter-spacing: .02em;
  color: var(--muted); white-space: nowrap;
}
.subhead {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 16px 0 8px;
}
.card .subhead:first-of-type { margin-top: 0; }
.fineprint {
  margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted);
}
.fineprint strong { color: var(--text-2); font-weight: 600; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* tiles: the app's atom. label, value, caption */
.tile {
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent), var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 11px 12px; min-width: 0;
  box-shadow: var(--sheen);
}
.tile-tight { padding: 9px 11px; }
.tile-k {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
.tile-v {
  display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em;
  color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.tile-v em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 3px; }
.tile-c { display: block; margin-top: 4px; font-size: 11px; color: var(--text-2); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* lists and rows */
.list { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; margin: 0 -4px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer; text-align: left;
  background: transparent; color: inherit; font: inherit; width: calc(100% + 8px);
  transition: background var(--t-fast) var(--ease);
}
.row:last-child { border-bottom: 0; }
.row:hover { background: rgba(255,255,255,.03); }
.row:active { background: rgba(255,255,255,.06); }
.row-title { font-size: 15px; font-weight: 600; color: var(--text); }
.row-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.row-right { margin-left: auto; text-align: right; font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.list-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted);
}
.list-meta .ghost-btn { margin-left: auto; }

/* chips */
.chips-scroll {
  display: flex; gap: 7px; padding: 2px 0 2px; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.chips-scroll::-webkit-scrollbar { display: none; }
.chip {
  flex: none; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-2); background: rgba(255,255,255,.03);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 7px 13px; cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--line-2); }
.chip.is-on {
  color: var(--ink-900); background: var(--sand); border-color: transparent;
  box-shadow: 0 6px 18px rgba(245,165,36,.22);
}
[data-theme="daylight"] .chip.is-on { color: #fff; }

/* buttons */
.primary-btn {
  width: 100%; font: inherit; font-size: 15px; font-weight: 700;
  color: var(--ink-900); background: linear-gradient(180deg, var(--sand-soft), var(--sand));
  border: 0; border-radius: var(--r-md); padding: 12px 16px; cursor: pointer;
  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
[data-theme="daylight"] .primary-btn { color: #fff; }
.primary-btn:hover { filter: brightness(1.04); }
.primary-btn:active { transform: translateY(1px) scale(.995); }
.ghost-btn {
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--text); background: rgba(255,255,255,.03);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 10px 14px; cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.ghost-btn:hover { background: rgba(255,255,255,.06); border-color: var(--line-warm); }
.ghost-btn:active { transform: translateY(1px); }
.ghost-btn.tiny { padding: 6px 10px; font-size: 12px; }
.rec-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
  font: inherit; font-size: 14px; font-weight: 700;
  color: var(--text); background: rgba(255,255,255,.03);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 8px 14px; cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.rec-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none;
  transition: background var(--t-fast) var(--ease);
}
.rec-btn.is-active { border-color: rgba(248,81,73,.5); color: var(--danger); }
.rec-btn.is-active .rec-dot { background: var(--danger); animation: pulse 1.6s var(--ease) infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(248,81,73,.5); } 50% { box-shadow: 0 0 0 7px rgba(248,81,73,0); } }

/* forms */
.form-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.form-row label { flex: 1; font-size: 14px; color: var(--text-2); }
.form-row input, .form-row select {
  flex: 1.2; min-width: 0; font: inherit; font-size: 15px;
  color: var(--text); background: var(--sunken);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form-row input::placeholder { color: var(--muted); }
/* Feedback box. Matches the settings inputs rather than inventing a second look, and
   stays resizable because people write more than one line about a bug. */
.fb-text {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 15px;
  color: var(--text); background: var(--sunken);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; margin: 4px 0 8px; resize: vertical; min-height: 88px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.fb-text::placeholder { color: var(--muted); }
.fb-text:focus { outline: none; border-color: var(--line-warm); box-shadow: var(--sh-glow); }
.form-row input:focus, .form-row select:focus {
  outline: none; border-color: var(--line-warm); box-shadow: var(--sh-glow);
}

/* ══ dash ══════════════════════════════════════════════════════════════════ */
.dash-hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; align-items: stretch; }
.speed-cluster {
  position: relative; display: grid; place-items: center;
  background: radial-gradient(120% 100% at 50% 0%, rgba(245,165,36,.07), transparent 60%), var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 6px; box-shadow: var(--sh-2), var(--sheen);
}
.speed-ring { width: 100%; max-width: 240px; height: auto; display: block; }
.ring-track { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 9; }
.ring-limit { fill: none; stroke: var(--sand); stroke-width: 3.5; stroke-linecap: round; opacity: .85; transition: stroke-dasharray var(--t-med) var(--ease); }
.ring-speed { fill: none; stroke: url(#speedGrad, var(--sand)); stroke-width: 12; stroke-linecap: round; transition: stroke-dasharray var(--t-med) var(--ease); }
.speed-readout { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.speed-value {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(52px, 17vw, 76px); font-weight: 700; line-height: .92;
  letter-spacing: -.04em; color: var(--text);
}
.speed-unit { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.speed-limit {
  margin: 9px auto 0; display: inline-grid; place-items: center;
  min-width: 46px; padding: 3px 10px;
  font-family: var(--mono); font-size: 19px; font-weight: 700; color: var(--ink-900);
  background: var(--sand); border-radius: var(--r-pill);
  box-shadow: 0 6px 18px rgba(245,165,36,.25);
}
[data-theme="daylight"] .speed-limit { color: #fff; }
.dash-side { display: grid; gap: 8px; grid-auto-rows: 1fr; }

.tilt-card {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent), var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 12px; box-shadow: var(--sh-1), var(--sheen);
  transition: border-color var(--t-med) var(--ease);
}
.tilt-card.is-over { border-color: rgba(248,81,73,.45); box-shadow: 0 0 0 1px rgba(248,81,73,.2), var(--sh-1); }
.tilt-gauge { width: 104px; height: 104px; display: block; }
.tg-outer { fill: none; stroke: var(--line); stroke-width: 1.5; }
.tg-warn  { fill: none; stroke: rgba(248,81,73,.28); stroke-width: 1.5; stroke-dasharray: 4 6; }
.tg-safe  { fill: none; stroke: rgba(63,185,80,.30); stroke-width: 1.5; }
.tg-axis  { stroke: var(--line); stroke-width: 1; }
.tg-bubble { filter: drop-shadow(0 4px 12px rgba(245,165,36,.4)); transition: cx var(--t-fast) linear, cy var(--t-fast) linear; }
.tilt-readout { display: grid; gap: 8px; }
.tilt-state {
  font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: .1em;
  color: var(--mint);
}
.tilt-card.is-over .tilt-state { color: var(--danger); }

.trip-card {
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent), var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px; box-shadow: var(--sh-1), var(--sheen);
}
.trip-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.trip-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.trip-stats .tile-v { font-size: 19px; }
.trip-actions { display: flex; gap: 8px; margin-top: 12px; }
.trip-actions .ghost-btn { flex: 1; }

/* ══ live ══════════════════════════════════════════════════════════════════ */
.wx-now { display: flex; align-items: center; gap: 14px; }
.wx-icon { font-size: 44px; line-height: 1; filter: saturate(1.1); }
.wx-temp {
  font-size: 46px; font-weight: 700; letter-spacing: -.03em; line-height: 1;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.wx-desc { font-size: 13px; color: var(--text-2); margin-top: 3px; }
.wx-grid, .sea-grid, .obd-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px;
}
.wx-grid strong, .sea-grid strong, .obd-grid strong { font-size: 17px; font-weight: 700; color: var(--text); }
.chart { width: 100%; height: auto; display: block; border-radius: var(--r-sm); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.day {
  display: grid; gap: 4px; justify-items: center; text-align: center;
  padding: 9px 4px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: rgba(255,255,255,.02);
}
.day:first-child { border-color: var(--line-warm); background: rgba(245,165,36,.06); }
.day-n { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.day-i { font-size: 18px; line-height: 1.1; }
.day-t { font-family: var(--mono); font-size: 12px; color: var(--text); }
.day-r { font-family: var(--mono); font-size: 10px; color: var(--ice); }
.sun-arc { position: relative; }
.sun-svg { width: 100%; height: auto; display: block; }
.sun-legend {
  display: flex; justify-content: space-between; font-family: var(--mono);
  font-size: 11px; color: var(--muted); margin-top: 4px;
}
.sun-legend span:nth-child(2) { color: var(--sand); }

/* ══ map ═══════════════════════════════════════════════════════════════════ */
#view-map { position: relative; overflow: hidden; }
#map { position: absolute; inset: 0; background: var(--sunken); }
.map-layers {
  position: absolute; left: 10px; right: 10px; bottom: calc(var(--tabbar-h) + var(--safe-bot) + 12px);
  display: flex; gap: 7px; overflow-x: auto; padding: 4px;
  scrollbar-width: none;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  box-shadow: var(--sh-2);
}
.map-layers::-webkit-scrollbar { display: none; }
.fab {
  position: absolute; right: 12px; bottom: calc(var(--tabbar-h) + var(--safe-bot) + 74px);
  width: 46px; height: 46px; display: grid; place-items: center;
  color: var(--text); background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line-2); border-radius: 50%;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--sh-2); cursor: pointer;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.fab svg { width: 22px; height: 22px; }
.fab:hover { border-color: var(--line-warm); }
.fab:active { transform: scale(.94); }
.poi-pin { font-size: 15px; text-align: center; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }

/* ══ tab bar ═══════════════════════════════════════════════════════════════ */
.tabbar {
  flex: none; z-index: 30;
  height: calc(var(--tabbar-h) + var(--safe-bot));
  padding-bottom: var(--safe-bot);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-top: 1px solid var(--line);
}
.tab {
  position: relative; display: grid; place-items: center; gap: 3px;
  font: inherit; font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  background: none; border: 0; cursor: pointer; padding-top: 6px;
  transition: color var(--t-fast) var(--ease);
}
.tab svg { width: 22px; height: 22px; }
.tab::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%) scaleX(0);
  width: 34px; height: 2px; border-radius: 2px; background: var(--sand);
  transition: transform var(--t-med) var(--ease);
}
.tab.is-active { color: var(--text); }
.tab.is-active svg { color: var(--sand); }
.tab.is-active::before { transform: translateX(-50%) scaleX(1); }

/* ══ sheets & toast ════════════════════════════════════════════════════════ */
.sheet {
  position: fixed; inset: 0; z-index: 60;
  display: grid; align-items: end;
  background: rgba(3,5,8,.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: fade var(--t-med) var(--ease) both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet-panel {
  max-height: 88dvh; overflow-y: auto;
  background: var(--surface);
  border-top: 1px solid var(--line-2);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 16px 16px calc(var(--safe-bot) + 22px);
  box-shadow: var(--sh-3);
  animation: sheetUp var(--t-med) var(--ease) both;
}
@keyframes sheetUp { from { transform: translateY(14px); } to { transform: none; } }
.sheet-panel::before {
  content: ""; display: block; width: 40px; height: 4px; border-radius: 4px;
  background: var(--line-2); margin: -6px auto 12px;
}
.sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sheet-head h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + var(--safe-bot) + 18px);
  z-index: 80; max-width: min(92vw, 520px);
  padding: 11px 16px; font-size: 13px; font-weight: 600;
  color: var(--text); background: color-mix(in srgb, var(--ink-600) 92%, transparent);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--sh-2, var(--sh-3));
  animation: toastIn var(--t-med) var(--ease) both;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ══ landscape dash: one row, no scrolling ═════════════════════════════════ */
@media (max-height: 520px) and (orientation: landscape) {
  .dash-hero { grid-template-columns: 1fr 1fr 1fr; }
  .speed-ring { max-width: 170px; }
  .speed-value { font-size: clamp(44px, 12vh, 64px); }
  .tilt-card { grid-template-columns: 90px 1fr; }
  .tilt-gauge { width: 84px; height: 84px; }
  .trip-stats { grid-template-columns: repeat(4, 1fr); }
  :root { --topbar-h: 68px; --tabbar-h: 52px; }
}