/* BusOps Driver display themes (docs/DECISIONS.md "Driver PWA display theme").
   Light is the route-sheet look: ink on paper. Dark is its night twin. Which
   one shows is set on <html data-theme> by src/theme/ (Auto follows sunrise
   and sunset; the driver can pin Light or Dark). Every colour in this file
   lives in these two blocks and nowhere else, so tests/driverPalette.test.js
   can measure both themes against the accessibility playbook.

   The Driver PWA deliberately uses the device's system font (Roboto on
   Android) and no brand cyan: a recorded Driver-only exception to
   docs/BRAND.md, see docs/DECISIONS.md. Nothing here is imported from the
   shared brand token file any more; the Announce sign still uses it. */

:root,
:root[data-theme="light"] {
  --font-sans:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --bg:             #EFF1ED;
  --surface:        #FFFFFF;
  --surface-2:      #E6E9E3;
  --text:           #1C2333;
  --text-muted:     #555E6B;
  --border:         #D8DCD4;
  --border-strong:  #767E8A;
  --accent:         #1C2333;
  --accent-pressed: #34405A;
  --on-accent:      #FFFFFF;
  --focus:          #1D4ED8;
  --progress-bg:    #DCE0D8;

  --on-time:        #154F3E;
  --on-time-tint:   #EAF5F0;
  --early:          #6E3B0B;
  --early-tint:     #F8EFE4;
  --late:           #961B13;
  --late-tint:      #FCEDEB;
  --on-status:      #FFFFFF;

  /* Status card colour bands (docs/DECISIONS.md "Driver status card
     colours"): border, word/figure ink, card shading. */
  --band-blue:       #1D4ED8;
  --band-blue-ink:   #1E3A8A;
  --band-blue-tint:  #E3ECFD;
  --band-green:      #15803D;
  --band-green-ink:  #14532D;
  --band-green-tint: #DDF2E4;
  --band-amber:      #A16207;
  --band-amber-ink:  #713F12;
  --band-amber-tint: #FBF0CC;
  --band-red:        #B91C1C;
  --band-red-ink:    #7F1D1D;
  --band-red-tint:   #FBE2E2;

  --scrim:          rgba(28, 35, 51, 0.6);
  --shadow:         rgba(28, 35, 51, 0.14);
  --logo-plate:     #FFFFFF; /* operator logos are drawn for white */
}

:root[data-theme="dark"] {
  --font-sans:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --bg:             #14181F;
  --surface:        #1D222C;
  --surface-2:      #262C38;
  --text:           #EDEFF2;
  --text-muted:     #9AA3B2;
  --border:         #2B313C;
  --border-strong:  #6B7483;
  --accent:         #EDEFF2;
  --accent-pressed: #C9CED6;
  --on-accent:      #14181F;
  --focus:          #8AB4FF;
  --progress-bg:    #2B313C;

  --on-time:        #6FD6B2;
  --on-time-tint:   #152B24;
  --early:          #EBB57A;
  --early-tint:     #2D2317;
  --late:           #F7A39B;
  --late-tint:      #341C1B;
  --on-status:      #14181F;

  --band-blue:       #60A5FA;
  --band-blue-ink:   #93C5FD;
  --band-blue-tint:  #172338;
  --band-green:      #4ADE80;
  --band-green-ink:  #86EFAC;
  --band-green-tint: #14291C;
  --band-amber:      #FACC15;
  --band-amber-ink:  #FDE68A;
  --band-amber-tint: #2A2410;
  --band-red:        #F87171;
  --band-red-ink:    #FCA5A5;
  --band-red-tint:   #331B1B;

  --scrim:          rgba(0, 0, 0, 0.75);
  --shadow:         rgba(0, 0, 0, 0.45);
  --logo-plate:     #FFFFFF; /* operator logos are drawn for white */
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] { display: none !important; }

/* Keyboard/switch-access focus, visible in both themes (3:1 against every
   surface, tests/driverPalette.test.js). */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

html,
body {
  height: 100%;
}

html {
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.4;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 480px;
  margin: 0 auto;
}

/* ── Footer strip ─────────────────────────────── */
/* One strip pinned to the bottom of every screen: the brand mark (BusOps
   Driver over "From PCV Technologies") on the left, the version label and
   the display-theme button on the right. It sits in the page's own
   background colour, so none of it reads as a box (owner, 2026-09-27: the
   white boxes looked heavy), yet anything scrolling behind it is still
   covered rather than drawn through the text.

   Fixed rather than in the page flow so it shows on every screen without
   scrolling, including #duty-card, which reserves a full min-height:100vh.
   #tracker is bounded to stop short of the strip and scrolls internally
   (below), so none of its content, however tall, passes underneath it (the
   bug fixed in 47b0f80). */
#app-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
}

#app-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  pointer-events: none;
}

.footer-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Bounded to the viewport minus the footer strip (1rem body top padding +
   5rem for the strip and a margin) so #tracker scrolls internally and none
   of its content, including #stop-list, lands under the strip. dvh falls
   back to vh where unsupported. */
#tracker {
  max-height: calc(100vh - 6rem);
  max-height: calc(100dvh - 6rem);
  overflow-y: auto;
  padding-bottom: 1rem;
}

.bo-wordmark {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.bo-app {
  color: var(--late);
}

.cm-attribution {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.3rem;
}

.cm-powered-by {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cm-wordmark {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ── Display theme button ─────────────────────── */
/* One tap cycles Auto -> Light -> Dark (src/theme/themeController.js). An
   outline, not a filled box: its border is --border-strong, >= 3:1 against
   the page in both themes (tests/driverPalette.test.js), so it still reads
   as a button (WCAG 1.4.11). */
#theme-toggle {
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

#theme-toggle:active {
  background: var(--surface-2);
}

/* Version label, beside the theme button. scripts/release.mjs rewrites its
   text on each release. */
#app-version {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-muted);
  pointer-events: none;
}

/* ── Wake-lock warning ───────────────────────── */

#wakelock-warning,
#device-key-warning {
  background: var(--late);
  color: var(--on-status);
  font-weight: 600;
  padding: 0.6rem 1rem;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  border-radius: 6px;
}

/* ── Top toggle bars ──────────────────────────── */
/* Shared slim collapsed-bar look for the three top-of-screen toggles:
   Report Incident, Diversion Alert, and Announcements. Each reveals its
   own content below it on tap rather than acting immediately (except
   Report Incident, whose "content" is the existing incident modal). */
.top-toggle-btn {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.top-toggle-btn--incident {
  color: var(--early);
  border-color: var(--early);
}

.top-toggle-btn--diversion {
  color: var(--late);
  border-color: var(--late);
}

.top-toggle-btn--diversion.active {
  background: var(--late);
  color: var(--on-status);
}

#diversion-panel {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

#diversion-panel button {
  flex: 1;
  padding: 0.6rem;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
}

#diversion-confirm-btn {
  background: var(--late);
  color: var(--on-status);
  border: none;
}

#diversion-cancel-btn {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}

/* ── PSVAIR announcement banner ──────────────── */
/* Live next-stop / destination announcement for PSVAIR-in-scope local bus
   services — audio via Web Speech API (announcements.js), visual here. */

#psvair-banner {
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
}

#psvair-text {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

#psvair-mute-btn {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
}

/* ── Early wait banner ───────────────────────── */

/* After the last stop (terminusHold.js): stays up until the hold ends. */
#terminus-hold {
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--accent);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  text-align: center;
}

#terminus-hold .th-title {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

#terminus-hold .th-msg {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  margin-top: 0.25rem;
}

#btn-end-trip {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 10px;
  padding: 1rem;
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 700;
  width: 100%;
  min-height: 48px;
  cursor: pointer;
  margin-top: 0.75rem;
}

#btn-end-trip:active {
  background: var(--accent-pressed);
}

#early-wait-banner {
  background: var(--early);
  color: var(--on-status);
  text-align: center;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  animation: ewb-flash 1s ease-in-out infinite;
}

.ewb-title {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.ewb-msg {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  margin-top: 0.2rem;
}

@keyframes ewb-flash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* ── Route header ────────────────────────────── */

#route-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  /* No underline: it sat on the status card's rounded top (owner, 2026-10-08). */
  padding: 0.5rem 0.25rem;
}

#header-service {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  background: var(--surface);
  padding: 0.25rem 0.7rem 0.25rem 0;
  border-radius: 4px;
  flex-shrink: 0;
}

#header-service-code {
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

#route-lines {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

#header-line1 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

/* ── No duty card screen ─────────────────────── */

#no-duty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 100vh;
  padding: 2rem 2rem 6rem; /* bottom: clear of the footer strip */
  text-align: center;
}

.ndc-brand {
  font-family: var(--font-sans);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}

.ndc-icon {
  font-size: 3rem;
  line-height: 1;
}

.ndc-title {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
}

.ndc-body {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 300px;
  line-height: 1.6;
}

.ndc-auto-note {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  max-width: 300px;
  line-height: 1.5;
}

.ndc-or {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
}

.ndc-secondary-btn {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 10px;
  padding: 0.85rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 0.5rem;
}

.ndc-secondary-btn:active {
  background: var(--surface-2);
}

/* ── Operator logo (src/brandLogo.js) ────────────
   Replaces the company name in .picker-brand / .ndc-brand. The plate is
   about the width of the text and buttons below it, and the logo on it is
   capped in height so a tall logo can't push the screen down. */

.picker-brand.has-logo,
.ndc-brand.has-logo {
  display: flex;
  justify-content: center;
  line-height: 0;
}

.brand-plate {
  display: inline-flex;
  background: var(--logo-plate);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  max-width: 100%;
}

.picker-brand.has-logo + .picker-subtitle {
  margin-top: 0.75rem;
}

.brand-logo {
  display: block;
  width: min(18rem, 100%);
  height: auto;
  max-height: 6rem;
  object-fit: contain;
}

/* ── Picker screen ───────────────────────────── */

#picker,
#manual-picker,
#vehicle-setup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  min-height: 100vh;
  padding: 2rem 2rem 6rem; /* bottom: clear of the footer strip */
}

.picker-brand {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  text-align: center;
  line-height: 1.1;
}

.picker-subtitle {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  margin-top: 0.25rem;
}

.picker-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.picker-field label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.select-wrap {
  position: relative;
}

.select-wrap::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--text-muted);
  pointer-events: none;
}

.picker-field select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  font-size: 1.1rem;
  width: 100%;
  appearance: none;
}

.picker-field select:focus {
  border-color: var(--focus);
}

.testing-time-field {
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  gap: 0.5rem;
}

.testing-departure-label {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.picker-field label.testing-time-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
}

#start-btn,
#manual-start-btn,
#vehicle-setup-btn {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 10px;
  padding: 1rem;
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: 100%;
  cursor: pointer;
  margin-top: 0.5rem;
}

#start-btn:active,
#manual-start-btn:active,
#vehicle-setup-btn:active {
  background: var(--accent-pressed);
}

/* ── Status card ─────────────────────────────── */

#status-card {
  background: var(--surface);
  border: 6px solid var(--band, var(--border));
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Colour bands (owner, 2026-10-08, docs/DECISIONS.md "Driver status card
   colours"; chosen by src/tracking/statusBand.js): blue early, green on time,
   amber +2 to +3 min, red +4 min and later (BODS; ±2 min routes have no
   amber). The border always shows the band; the shading and the coloured
   word and figure only while the card shows the status (card-tinted) — at a
   stop or approaching the rest of the card stays as it was. The label still
   says the status in words (never colour alone). */
#status-card.band-blue  { --band: var(--band-blue);  --band-ink: var(--band-blue-ink);  --band-tint: var(--band-blue-tint); }
#status-card.band-green { --band: var(--band-green); --band-ink: var(--band-green-ink); --band-tint: var(--band-green-tint); }
#status-card.band-amber { --band: var(--band-amber); --band-ink: var(--band-amber-ink); --band-tint: var(--band-amber-tint); }
#status-card.band-red   { --band: var(--band-red);   --band-ink: var(--band-red-ink);   --band-tint: var(--band-red-tint); }
#status-card.card-tinted { background: var(--band-tint); }

/* Status label left, the time now right (owner, 2026-10-05). */
.status-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

#clock {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

#status-label {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.card-tinted       #status-label { color: var(--band-ink); }
.status-at-stop    #status-label { color: var(--text); }
.status-approaching #status-label { color: var(--text); }

#next-stop {
  font-size: 1.75rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Time row ─────────────────────────────────── */

/* Scheduled | Arrived, with the +/- minutes to the right (owner, 2026-10-08:
   ETA and Departed are no longer shown; departures are still recorded). */
.time-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 0.5rem 1rem;
  align-items: baseline;
}

.time-group {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.time-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.time-value {
  font-size: 1.3rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#delta {
  grid-column: 3;
  grid-row: 1;
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  align-self: center;
}

.card-tinted       #delta { color: var(--band-ink); }
.status-at-stop    #delta { color: var(--text); }
.status-approaching #delta { color: var(--text); }

/* Which stop Arrived/Departed belong to — the one the bus is at, or last left. */
.time-caption {
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Metrics row ──────────────────────────────── */

.metrics-row {
  display: flex;
  gap: 1.5rem;
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.metric-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.metric-value {
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Progress section ─────────────────────────── */

.progress-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stop-labels {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.stop-label-prefix {
  font-size: 0.75rem;
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#next-stop-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.progress-track {
  background: var(--progress-bg);
  border-radius: 4px;
  height: 8px;
  width: 100%;
  overflow: hidden;
}

#progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 1s linear;
}

/* ── View toggle ──────────────────────────────── */

.view-toggle {
  display: flex;
  gap: 4px;
}

.toggle-btn {
  flex: 1;
  padding: 0.5rem;
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.toggle-btn.toggle-active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* ── Map view ─────────────────────────────────── */

#map-view {
  height: 40vh;
  min-height: 240px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

/* ── Stop list ────────────────────────────────── */

#stop-list {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-y: auto;
  max-height: 40vh;
}

.stop-row {
  display: grid;
  /* Two lines per stop (owner, 2026-10-05): the name (and the jump button)
     on top, then Sched | Arr under the header's labels (ETA and Dep removed
     2026-10-08). */
  grid-template-columns: repeat(2, minmax(0, 1fr)) 1.9em;
  column-gap: 0.5rem;
  row-gap: 0.15rem;
  align-items: center;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}

.stop-row:last-child {
  border-bottom: none;
}

.sl-name {
  grid-column: 1 / 3;
  grid-row: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-sched,
.sl-actual {
  grid-row: 2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sl-jump-cell {
  grid-column: 3;
  grid-row: 1;
}

/* Column labels — the times are never told apart by colour or position alone. */
.stop-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.stop-head span {
  grid-row: 1;
}

.sl-sched {
  color: var(--text-muted);
}

/* Past stops step back by colour, not opacity: opacity took their text below
   4.5:1, and a past stop's arrival time is still worth reading. It keeps the
   status card's colour band, judged on the departure (tracking/stopTimes.js);
   the row's aria-label says it in words. */
.stop-past .sl-name,
.stop-past .sl-sched {
  color: var(--text-muted);
}

.stop-row .sl-band-blue  { color: var(--band-blue-ink); }
.stop-row .sl-band-green { color: var(--band-green-ink); }
.stop-row .sl-band-amber { color: var(--band-amber-ink); }
.stop-row .sl-band-red   { color: var(--band-red-ink); }

.stop-past .sl-missed {
  color: var(--early);
}

.stop-current {
  background: var(--surface-2);
  font-weight: 700;
}

.stop-current .sl-actual {
  color: var(--text-muted);
}

.stop-approaching {
  border-left: 4px solid var(--accent);
}

.sl-jump {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 0.15rem 0.35rem;
  cursor: pointer;
  line-height: 1;
}

.sl-jump:active {
  color: var(--text);
  border-color: var(--accent);
}

/* ── Directions view ──────────────────────────── */

#directions-view {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-y: auto;
  max-height: 40vh;
}

.dir-select-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
}

.dir-select-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}

.dir-from-select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  font-size: 0.9rem;
  flex: 1;
  min-width: 0;
  appearance: none;
}

.dir-from-select:focus {
  border-color: var(--focus);
}

.dir-destination {
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
}

.dir-destination strong {
  color: var(--text);
}

.dir-steps {
  display: flex;
  flex-direction: column;
}

.dir-step {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}

.dir-step:last-child {
  border-bottom: none;
}

.dir-icon {
  font-size: 1.15rem;
  text-align: center;
  color: var(--text);
}

.dir-road {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dir-dist {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.dir-empty,
.dir-loading {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ── Log view ─────────────────────────────────── */

#log-view {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-y: auto;
  max-height: 40vh;
  font-family: monospace;
  font-size: 0.8rem;
}

.log-empty {
  padding: 1rem;
  color: var(--text-muted);
  text-align: center;
}

.log-row {
  display: flex;
  gap: 0.75rem;
  padding: 0.35rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.log-row:last-child { border-bottom: none; }

.log-time {
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.log-gps    .log-msg { color: var(--text-muted); }
.log-arrive .log-msg { color: var(--on-time); }
.log-miss   .log-msg { color: var(--early); }
.log-error  .log-msg { color: var(--late); }
.log-info   .log-msg { color: var(--text); }

/* ── Duty card ────────────────────────────────── */

#duty-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100vh;
  padding: 2rem 0 5.5rem;
}

.dc-header {
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--accent);
}

.dc-greeting {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

#dc-driver-name {
  color: var(--text);
  font-weight: 600;
}

.dc-date {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

#dc-routes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dc-route-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dc-route-in_progress {
  border: 2px solid var(--accent);
}

/* Completed duties sink into the page background instead of fading, so the
   text stays readable (see .stop-past). */
.dc-route-completed {
  background: var(--bg);
}

.dc-route-completed .dc-route-label,
.dc-route-completed .dc-route-stops {
  color: var(--text-muted);
}

.dc-route-completed .dc-service-badge {
  background: var(--text-muted);
  color: var(--surface);
}

.dc-route-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.dc-service-badge {
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.dc-route-label {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.dc-route-stops {
  font-size: 0.95rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dc-route-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.dc-route-notes {
  font-size: 0.9rem;
  color: var(--text);
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
}

.dc-action-btn {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 6px;
  padding: 0.7rem 1rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  margin-top: 0.25rem;
}

.dc-action-btn:active { background: var(--accent-pressed); }

.dc-resume-btn {
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--accent);
}
.dc-resume-btn:active { background: var(--surface-2); }

.dc-done-badge {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--on-time);
  text-align: center;
  padding: 0.4rem;
}

/* ── Incident overlay ─────────────────────────── */

#incident-overlay {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  padding: 0 1rem 1rem;
}

#incident-modal {
  background: var(--surface);
  border: 1px solid var(--early);
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
}

.incident-title {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--early);
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.incident-body {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.incident-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.incident-optional {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.incident-select,
.incident-textarea {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 0.65rem 0.75rem;
  font-size: 1rem;
  width: 100%;
  font-family: var(--font-sans);
  appearance: none;
}

.incident-select:focus,
.incident-textarea:focus {
  border-color: var(--focus);
}

.incident-textarea {
  resize: none;
  line-height: 1.4;
}

.incident-footer {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem 1rem;
  border-top: 1px solid var(--border);
}

.incident-btn-cancel,
.incident-btn-submit {
  flex: 1;
  padding: 0.8rem;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
}

.incident-btn-cancel {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
}

.incident-btn-cancel:active {
  color: var(--text);
}

.incident-btn-submit {
  background: var(--early);
  color: var(--on-status);
}

.incident-btn-submit:active {
  opacity: 0.85;
}

/* Back button shown in picker when launched from duty card */
#picker-back-btn,
#manual-back-btn,
#vehicle-setup-back-btn {
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  align-self: flex-start;
}

#picker-back-btn:active,
#manual-back-btn:active,
#vehicle-setup-back-btn:active {
  background: var(--surface-2);
}

/* Vehicle line + "Change" link on the no-duty-card screen */
.ndc-vehicle-info {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-top: 1.5rem;
}

.ndc-vehicle-info #ndc-vehicle-label {
  color: var(--text);
  font-weight: 600;
}

.ndc-link-btn {
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.95rem;
  font-family: var(--font-sans);
  text-decoration: underline;
  cursor: pointer;
  margin-left: 0.5rem;
  padding: 0;
}

/* ── Manual trip-complete fallback ─────────────── */
/* Doubles as the only way to leave a trip once tracking has started, so it
   needs to read as a real, tappable button — not just a GPS-failure
   fallback — even though completing automatically on arrival is still the
   normal path. The confirm() prompt in main.js is the safety net against
   accidental taps, not understated styling. */
.manual-complete-link {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* ── Trip-complete overlay ─────────────────────── */

#trip-complete-overlay {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

#trip-complete-modal {
  background: var(--surface);
  border: 2px solid var(--on-time);
  border-radius: 12px;
  width: 100%;
  max-width: 380px;
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: center;
}

.tc-icon {
  font-size: 2.5rem;
  color: var(--on-time);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.tc-title {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
}

.tc-body {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

.tc-ok-btn {
  margin-top: 1.25rem;
  width: 100%;
  padding: 0.8rem;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}

.tc-ok-btn:active {
  opacity: 0.85;
}

/* ── Automatic start ───────────────────────────── */
/* Countdown panel for automatic mode (src/autostart/). Same overlay pattern
   as the trip-complete panel; large buttons so the driver can stop or
   change it with one tap. */

#autostart-overlay {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

#autostart-modal {
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: 12px;
  width: 100%;
  max-width: 420px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.as-title {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.as-service {
  font-family: var(--font-sans);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

.as-detail {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text-muted);
}

.as-countdown {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  margin: 0.4rem 0;
}

.as-message {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--late);
  background: var(--late-tint);
  border-radius: 8px;
  padding: 0.75rem;
}

.as-btn {
  min-height: 3rem;
  padding: 0.75rem 1rem;
  background: transparent;
  color: var(--text);
  border: 2px solid var(--border-strong);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.as-btn:active {
  background: var(--surface-2);
}

.as-btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.as-btn-primary:active {
  background: var(--accent-pressed);
}

.as-btn:disabled {
  cursor: default;
  color: var(--text-muted);
}

.as-btn-primary:disabled {
  color: var(--on-accent);
}