/* LAST CHANGED: 29 Aug 2026, even later still — WHAT'S NEW: two field-usability fixes.
   (1) D-DRIVER-GRID-ROW-MISMATCH — .driver's grid-template-rows shrunk from 4 tracks to 3
   (auto 1fr auto), now mapping unambiguously onto #drApp's new 3-direct-child structure
   (index.html wraps everything into .dr-top-chrome/main.dmain/.dr-bottom-chrome) instead of
   the old positional guess that put the leftover-height track on the header. (2)
   D-DRIVER-UNSTYLED-TOUCH-TARGETS — new #breakdownPanel/#extChargePanel input/select rule,
   bringing 6 previously-unstyled fields up to --touch-min. See each rule's own comment
   below for full detail. GAP_REGISTER.md has the full record for both.
   ---
   PRIOR: 29 Aug 2026, later — Phase 1 Design Language Refresh, Driver App rollout
   (PHASE1_DESIGN_LANGUAGE_REFRESH_SPEC.md, Founder-confirmed; GAP_REGISTER.md's
   D-DRIVER-ROLLOUT). WHAT'S NEW: .sos gets the Founder-confirmed styling change — the
   first real product usage anywhere of --c-safety/--c-on-safety, deliberately, on the
   single most safety-critical control in the app (a real sos_panic DriverSafetyEvent).
   Was background:var(--c-danger); color:var(--c-on-danger) at min-height:var(--touch-min)
   (48px) — the same red used for routine warn/danger elsewhere, no visual distinction for
   an actual emergency control. Now background:var(--c-safety); color:var(--c-on-safety)
   at min-height:var(--touch-driver) (64px, the primary-driver-action size, matching
   .act-big). min-width stays 110px unchanged — confirmed by direct rendering (both
   themes) that the taller button does not look disproportionate or overflow .dbottom at
   this width; not adjusted since nothing looked broken. Contrast re-confirmed, not
   assumed: driver.css always renders inside :root[data-app="driver"], which
   tokens.css forces to the dark-tuned --c-safety #FF6B6B / --c-on-safety #062019
   UNCONDITIONALLY (same forced-dark-regardless-of-data-theme block that already governs
   --c-danger etc. for this app) — measured ~6.16:1, clears WCAG AA's 4.5:1 with margin;
   tests/layer_web/test_color_contrast.py's existing driver trip-stage sweep (both themes)
   re-passed after this change with no test edits needed. New .dbottom-item wrapper (see
   components.css's .precommit-label, now placed under #sos/#escalate) so each footer
   button and its offline-write-class label sit together as one flex column instead of
   the label floating loose in .dbottom's row.
   ---
   PRIOR: 29 Aug 2026 — WHAT'S NEW: Phase 1 Design Language Refresh, Deliverable 1
   touch-target fix — .lang (was 40px) and .steps button (was 36px) now reference
   var(--touch-min) instead of a hardcoded sub-48px value; two of the 9 confirmed
   violations found repo-wide (design-system/tokens.css's own LAST CHANGED has the full
   list + Founder confirmation, PHASE1_DESIGN_LANGUAGE_REFRESH_SPEC.md).
   ---
   PRIOR: 04 Jul 2026 — WHAT'S NEW: a deeper phone overflow bug found AFTER the
   .vbar fix below actually shipped to the Android emulator — .driver/.dmain had no
   grid-template-columns (or none at all), which floors at the widest child's content
   width instead of the viewport. Fixed via minmax(0,1fr) tracks. See
   design-system/components.css LAST CHANGED for the full root-cause writeup.
   ---
   WHAT'S NEW (earlier pass): phone form-factor fit — found via real-device
   emulator testing of the native-wrapped app. .vbar (the big-mic + "or" + input voice/
   type row) was the actual overflow culprit on the login/ask screens: its input had
   flex:1 but no min-width, so it refused to shrink below its own content width and
   forced the whole page wider than the screen. .dtop/.vbar also get flex-wrap:wrap as a
   fallback for very narrow phones. See design-system/components.css for the shared
   half of this fix (.prompt input min-width — a different bar, same root cause).
   ---
   Driver App — field-first surface. Consumes ../design-system tokens + components.
   Everything here serves the Driver App Decisions Log (A–M). */

/* D-DRIVER-GRID-ROW-MISMATCH (29 Aug 2026): #drApp had grown to 9-11 direct children with no
   explicit grid-row/grid-area, so plain auto-placement put the 1fr "fill remaining height"
   track on the 3rd child (<header class="dtop">) instead of <main class="dmain"> — confirmed
   live, the header ballooned to 160-266px on 3 of 5 trip steps at an ordinary 1280x1000
   window. Fixed at the root, not the instance: index.html now wraps #drApp's children into
   exactly 3 direct children (.dr-top-chrome / main.dmain / .dr-bottom-chrome), so this 3-track
   rule maps unambiguously to them by position. Any future persistent chrome element must go
   INSIDE one of the two wrapper divs, never appended directly to #drApp, or this bug
   reappears. */
.driver { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; min-height: 100vh; }

/* Behaviour strip — D4: persistent, green→amber→red, no modal, no interaction */
.behaviour {
  height: 10px; background: var(--c-ok); transition: background .3s;
}
.behaviour[data-state="amber"] { background: var(--c-warn); }
.behaviour[data-state="red"]   { background: var(--c-danger); }

/* Top status row */
.dtop {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4); background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.dtop .veh { font-weight: var(--fw-medium); }
.lang {
  margin-left: auto; border: 1px solid var(--c-border); background: var(--c-surface-2);
  border-radius: var(--r-pill); min-height: var(--touch-min); padding: 0 var(--s-3); color: var(--c-text);
}

/* Main driver canvas */
.dmain { padding: var(--s-4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-content: start; }
@media (min-width: 800px) { .dmain { max-width: 760px; margin: 0 auto; width: 100%; } }

/* Voice warning banner — D4: voice + visual, calm coaching tone, by name */
.warn {
  display: none; align-items: center; gap: var(--s-3);
  background: var(--c-surface); border: 2px solid var(--c-warn);
  border-radius: var(--r-lg); padding: var(--s-4); color: var(--c-text);
}
.warn[data-show="1"] { display: flex; }
.warn .ico { font-size: var(--fs-xl); color: var(--c-warn); }

/* Big primary action — gloves/eyes-free */
.act-big {
  width: 100%; min-height: var(--touch-driver); border-radius: var(--r-lg);
  border: 0; background: var(--c-brand); color: var(--c-on-brand);
  font-size: var(--fs-lg); font-weight: var(--fw-medium); cursor: pointer;
}
.act-secondary {
  width: 100%; min-height: var(--touch-min); border-radius: var(--r-md);
  border: 1px solid var(--c-border); background: var(--c-surface-2);
  color: var(--c-text); font-size: var(--fs-md); cursor: pointer;
}

/* Voice-first prompt — I4: voice option 1, typing always available, same pipeline */
.vbar { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.vbar .mic-big {
  min-width: 84px; min-height: 84px; border-radius: 50%; border: 0;
  background: var(--c-brand); color: var(--c-on-brand); font-size: 32px; cursor: pointer;
  flex-shrink: 0;
}
.vbar .or { color: var(--c-text-muted); font-size: var(--fs-sm); flex-shrink: 0; }
.vbar input {
  flex: 1; min-width: 120px; min-height: var(--touch-min); border: 1px solid var(--c-border);
  border-radius: var(--r-pill); padding: 0 var(--s-4); font-size: var(--fs-md);
  background: var(--c-surface); color: var(--c-text);
}

/* D-DRIVER-UNSTYLED-TOUCH-TARGETS (29 Aug 2026): #bdNote/#bdAssistanceType
   (#breakdownPanel) and #ecNetwork/#ecStationId/#ecKwh/#ecCost (#extChargePanel) carried no
   class and matched no rule anywhere — live-measured at 19-21.5px, well under --touch-min
   (48px). Both panels already have unique ids, so this needs no HTML change. Same property
   shape as .vbar input above, minus the pill radius (these are ordinary form fields in a
   card, not a search-style bar). */
#breakdownPanel input, #breakdownPanel select, #extChargePanel input {
  min-height: var(--touch-min); border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: 0 var(--s-3); font-size: var(--fs-md); background: var(--c-surface); color: var(--c-text);
}

/* Spoken-line bubble — what the app voices (TTS), shown as text too */
.spoken {
  background: var(--c-surface-2); border-radius: var(--r-lg);
  padding: var(--s-4); font-size: var(--fs-md);
}
.spoken .lbl { display: block; font-size: var(--fs-xs); color: var(--c-text-muted); margin-bottom: var(--s-1); }
.spoken .en { display: block; color: var(--c-text-muted); font-size: var(--fs-sm); margin-top: var(--s-2); }

/* Driver wellness on the Break screen (F1 + cared-for) — calm by default, amber when rest is
   advised. Never red/punitive: this is care, not a warning. Hindi line first, big and readable. */
.well-box { margin: var(--s-3) 0; padding: var(--s-3); border-radius: var(--r-md);
  border-left: 4px solid var(--c-ok); background: var(--c-surface-2); }
.well-box.rest { border-left-color: var(--c-warn); }
.well-row b { display: block; font-size: var(--fs-lg); margin-top: var(--s-1); }
.well-row .en { display: block; color: var(--c-text-muted); font-size: var(--fs-sm); margin-top: var(--s-1); }

/* Inspection checklist — C2 */
.check-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--c-border);
}
.check-item .done { color: var(--c-ok); font-weight: var(--fw-medium); }

/* Charging instruction — "Charger N" wording (never "Bay") */
.charge { border-left: 4px solid var(--c-accent); }

/* Persistent SOS — E2: always visible throughout shift */
.dbottom {
  display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4);
  background: var(--c-surface); border-top: 1px solid var(--c-border);
}
.sos {
  min-width: 110px; min-height: var(--touch-driver); border-radius: var(--r-md);
  border: 0; background: var(--c-safety); color: var(--c-on-safety); font-weight: var(--fw-medium);
  font-size: var(--fs-md); cursor: pointer;
}
.outbox { margin-left: auto; align-self: center; }

/* Phase 1 Design Language Refresh — pairs a footer action button with its own
   PreCommitClassLabel (design-system/components.css .precommit-label) directly beneath
   it, so the offline-write class reads as belonging to that one control, not floating
   loose in .dbottom's row. Only #sos/#escalate need this — #breakdownBtn/#extChargeBtn
   just open their own panel, which carries its own label next to its real submit
   button (#bdSubmit/#ecSubmit), so those two stay plain buttons, unwrapped. */
.dbottom-item { display: flex; flex-direction: column; gap: 2px; }

/* Offline Guides (on-device troubleshooting / inspection / safety / breakdown) */
.gsearch { width:100%; min-height:var(--touch-min); border:1px solid var(--c-border); border-radius:var(--r-pill); padding:0 var(--s-4); font-size:var(--fs-md); background:var(--c-surface); color:var(--c-text); }
/* Category headers (heading-hierarchy fix, 05 Jul 2026): promoted h3->h2 for a correct
   h1->h2 structure; without this rule they'd inherit the browser's larger h2 default
   instead of matching the app's own heading scale (same tokens as .card h2 elsewhere). */
#glist h2 { margin:var(--s-5) 0 var(--s-2); font-size:var(--fs-md); font-weight:var(--fw-medium); }
.guide { border-bottom:1px solid var(--c-border); }
.guide-h { width:100%; display:flex; align-items:center; gap:var(--s-3); min-height:var(--touch-min); border:0; background:transparent; color:var(--c-text); font-size:var(--fs-md); cursor:pointer; padding:var(--s-3) var(--s-2); text-align:left; }
.guide-h .nm { font-weight:var(--fw-medium); }
.guide-h .chev { margin-left:auto; color:var(--c-text-muted); }
.guide-b { padding:0 var(--s-2) var(--s-3); }
.guide-b ol { margin:0 0 var(--s-3); padding-left:var(--s-5); }
.guide-b li { padding:var(--s-1) 0; }

/* Trip-progress timeline (semantic motion: progress · forecast · expected next) */
.triptl { width:100%; height:auto; margin-top:var(--s-2); display:block; }
.triptl text.tllab { font-size:9px; fill:var(--c-text-muted); }
.triptl text.tlnext { font-size:9px; fill:var(--c-accent); font-weight:var(--fw-medium); }

/* D-LOWEND — Driver-Lite opt-in prompt. Informational tone (a suggestion), never alarming —
   distinct from .warn (the overspeed voice warning) on purpose. Shown once, in-flow above the
   header, never a modal (never blocks the trip screens underneath). */
.litePrompt { margin: 0 0 var(--s-3); padding: var(--s-4); border-radius: var(--r-lg); border-left: 4px solid var(--c-accent); background: var(--c-surface-2); }
.litePrompt p { margin: 0 0 var(--s-3); font-size: var(--fs-md); color: var(--c-text); }
.litePromptActions { display: flex; gap: var(--s-3); }
.litePromptActions button { flex: 1; }

/* D-LOWEND — list-based turn-by-turn (Lite Mode's replacement for the live map). Same
   container/position as .leafmap so switching modes never moves the layout. */
.navlist { display: flex; flex-direction: column; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.navstep { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-bottom: 1px solid var(--c-border); background: var(--c-surface); }
.navstep:last-child { border-bottom: 0; }
.navstep.done { opacity: .55; }
.navstep.current { background: var(--c-surface-2); border-left: 4px solid var(--c-brand); }
.navstep .d { min-width: 56px; font-weight: var(--fw-medium); color: var(--c-text-muted); font-size: var(--fs-sm); }
.navstep .i { font-size: var(--fs-md); }

/* Step dots */
.steps { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.steps button {
  border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text-muted);
  border-radius: var(--r-pill); min-height: var(--touch-min); padding: 0 var(--s-3); font-size: var(--fs-xs); cursor: pointer;
}
.steps button[aria-current="true"] { background: var(--c-brand); color: var(--c-on-brand); border-color: var(--c-brand); }