/* ShiftRide shared tokens (from the approved prototype, assets/sr.css) + the driver app.
   Driver: phone-first (360 px up), 48 px tap targets, WCAG AA, readable in sunlight.
   Driver rules are scoped to body:not(.office) so the office layer (office.css) never fights them. */
/* Overpass rides high (ascent .88em, descent .38em, cap height .70em: capitals sat 0.1em above the line centre). The
   overrides keep the line height (1.26em) and make ascent - descent = cap height, so text centres optically: an icon
   and its label align when both are centred. Measured in WebKit and Chromium; the audit checks it on every button. */
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/overpass-latin.woff2) format('woff2'); ascent-override: 98%; descent-override: 28%; line-gap-override: 0%; }
@font-face { font-family: 'Overpass Mono'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/overpass-mono-latin.woff2) format('woff2'); ascent-override: 98%; descent-override: 28%; line-gap-override: 0%; }
/* Overpass's middle dot (U+00B7) has zero width, so "Epping · home" rendered as "Epping ·home". The "·" comes from the
   Overpass Mono file we already ship (declared last, so it's tried first for that one character). */
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/overpass-mono-latin.woff2) format('woff2'); unicode-range: U+00B7; }

:root {
  --asphalt: #12161B; --asphalt-2: #1B2128; --tar: #29313A; --tar-2: #3A444F;
  --concrete: #E5E8E7; --paper: #F4F6F5; --white: #FFFFFF;
  --line: #CBD2D0; --line-soft: #DDE2E0; --muted: #525D67; --muted-on-dark: #A9B3BC;
  --kerb: #F2C230; --kerb-hi: #FFD95A; --kerb-wash: #FBF0C9; --kerb-ink: #2B2200;
  --go: #1D7347; --go-wash: #DCEFE3; --go-on-dark: #5FD39A;
  --stop: #B3261E; --stop-wash: #F9DEDA; --stop-on-dark: #FF8A80;
  --warn: #855600; --warn-wash: #F7EACB;
  --info: #1B3A73; --info-wash: #E3EBFA;
  --r-ctl: 8px; --r-surf: 14px;
  --ease-out: cubic-bezier(.22, 1, .36, 1); --press: cubic-bezier(.23, 1, .32, 1); --sheet: cubic-bezier(.32, .72, 0, 1);
  --shadow: 0 1px 2px rgba(18, 22, 27, .06), 0 10px 28px -14px rgba(18, 22, 27, .28);
  --font: 'Overpass', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'Overpass Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* driver aliases kept for the existing app.js class names */
  --ink: var(--asphalt); --ink-2: var(--tar); --card: var(--white); --yellow: var(--kerb); --green: var(--go); --red: var(--stop); --amber-bg: var(--warn-wash);
  --radius: 14px; --tap: 48px;
  font-family: var(--font);
  color: var(--asphalt);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}
/* Safe areas (notch, Dynamic Island, home indicator): env() in browsers and iOS; Capacitor on Android also injects
   --safe-area-inset-* (SystemBars insetsHandling: css). The larger of the two is used everywhere. */
:root { --sat: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px)); --sab: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px)); }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; padding-bottom: var(--sab); font-size: 17px; line-height: 1.45; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
::selection { background: var(--kerb); color: var(--kerb-ink); }
img { max-width: 100%; display: block; }
.skip { position: absolute; left: 8px; top: -80px; z-index: 300; background: var(--kerb); color: var(--kerb-ink); padding: 10px 14px; border-radius: var(--r-ctl); font-weight: 700; }
.skip:focus { top: 8px; }
.is-hidden { display: none !important; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Toast: shared by the driver app and the office */
.toast { position: fixed; left: 50%; bottom: calc(20px + var(--sab)); transform: translate(-50%, 160%); background: var(--asphalt); color: #fff; padding: 12px 18px;
  border-radius: 12px; max-width: calc(100% - 32px); font-weight: 650; font-size: 15.5px; box-shadow: 0 14px 40px -12px rgba(0,0,0,.5); pointer-events: none;
  transition: transform .4s var(--sheet); z-index: 400; text-align: center; }
.toast.is-on { transform: translate(-50%, 0); }

/* ---------- sign-in (driver and office share it) ---------- */
.signin { display: grid; gap: 0; }
.signin-art { height: 168px; border-radius: var(--r-surf); background: var(--asphalt) url(img/n2-dawn-m.webp) center 62% / cover no-repeat; position: relative; overflow: hidden; margin-bottom: 18px; }
.signin-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,22,27,0) 35%, rgba(18,22,27,.82) 100%); }
.signin-art p { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; margin: 0; color: #fff; font-weight: 750; font-size: 19px; line-height: 1.2; letter-spacing: -.01em; }
.signin-art p span { color: var(--kerb); }
@media (min-width: 900px) {
  body:not(.office) main:has(> .signin) { max-width: 1100px; }
  .signin { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: center; min-height: calc(100dvh - 120px); }
  .signin-art { height: 100%; min-height: 560px; margin: 0; background-image: url(img/n2-dawn.webp); }
  .signin-art p { left: 28px; bottom: 28px; font-size: 30px; max-width: 18ch; }
}
@media (prefers-reduced-motion: no-preference) { .signin-art { animation: art-in 1.2s var(--ease-out) both; } }
@keyframes art-in { from { opacity: .3; background-position: center 70%; } }

/* ---------- driver app ---------- */
body:not(.office) .bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + var(--sat)) 16px 10px; background: var(--asphalt); color: #fff; }
body:not(.office) .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 850; letter-spacing: -.02em; }
body:not(.office) .net { font-size: 14px; padding: 4px 10px; border-radius: 999px; background: #213a2c; color: #c9f2d6; font-weight: 650; }
body:not(.office) .net.is-off { background: #4a1d1f; color: #ffd8d9; }
body:not(.office) main { padding: 16px 16px calc(32px + var(--sab)); max-width: 720px; margin: 0 auto; outline: none; }
body:not(.office) h1 { font-size: 26px; font-weight: 850; letter-spacing: -.02em; margin: 8px 0 12px; line-height: 1.15; }
body:not(.office) h2 { font-size: 19px; font-weight: 800; margin: 20px 0 8px; }
body:not(.office) .muted { color: var(--muted); }
body:not(.office) .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 10px 0; }
body:not(.office) .row { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
body:not(.office) .grow { flex: 1 1 auto; min-width: 0; }
body:not(.office) label { display: block; font-weight: 700; margin: 12px 0 6px; }
body:not(.office) input, body:not(.office) select, body:not(.office) textarea { width: 100%; min-height: var(--tap); font: inherit; padding: 10px 12px; border: 2px solid var(--ink-2); border-radius: 10px; background: #fff; color: var(--ink); }
body:not(.office) input:focus-visible, body:not(.office) select:focus-visible, body:not(.office) textarea:focus-visible, body:not(.office) button:focus-visible, body:not(.office) a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
body:not(.office) button { min-height: var(--tap); min-width: var(--tap); font: inherit; font-weight: 700; border-radius: 12px; border: 2px solid var(--ink); background: var(--ink); color: #fff; padding: 10px 16px; cursor: pointer;
  transition: transform .14s var(--press), background-color .18s; }
body:not(.office) button:active:not(:disabled) { transform: scale(.97); }
body:not(.office) button.alt { background: #fff; color: var(--ink); }
body:not(.office) button.go { background: var(--green); border-color: var(--green); }
body:not(.office) button.danger { background: var(--red); border-color: var(--red); }
body:not(.office) button.yellow { background: var(--yellow); color: var(--kerb-ink); border-color: var(--ink); }
body:not(.office) button.wide { width: 100%; margin-top: 12px; }
/* Selected states are fills, not a thin ring (design QA): the sign-in segment goes dark; rider buttons fill (riderRow). */
body:not(.office) .tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; }
body:not(.office) button:disabled { opacity: .55; cursor: not-allowed; }
body:not(.office) .tabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-bottom: 8px; }
body:not(.office) .trip { display: block; width: 100%; text-align: left; background: var(--card); color: var(--ink); border: 2px solid var(--line); }
body:not(.office) .trip .when { font-size: 22px; font-weight: 850; font-family: var(--mono); }
body:not(.office) .chip { display: inline-block; font-size: 14px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--concrete); color: var(--ink); }
body:not(.office) .chip.night { background: var(--ink); color: var(--yellow); }
body:not(.office) .chip.warn { background: var(--amber-bg); color: #5c4300; }
body:not(.office) .chip.ok { background: var(--go-wash); color: var(--green); }
body:not(.office) .chip.bad { background: var(--stop-wash); color: var(--red); }
body:not(.office) .stop-block { margin-top: 14px; }
body:not(.office) .stop-block h2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
body:not(.office) .rider { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
body:not(.office) .rider .acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
body:not(.office) .rider .acts button { padding: 8px 6px; font-size: 15px; }
body:not(.office) .rider .attendance-primary { margin-top: 2px; min-height: 56px; font-size: 18px; }
body:not(.office) .rider .attendance-more { border-top: 1px solid var(--line); }
body:not(.office) .rider .attendance-more > summary { min-height: 44px; display: flex; align-items: center; color: var(--muted); font-weight: 650; cursor: pointer; }
body:not(.office) .rider .attendance-more[open] > summary { margin-bottom: 6px; }
body:not(.office) .rider .attendance-more .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body:not(.office) .queue { background: var(--amber-bg); color: #5c4300; padding: 10px 16px; font-weight: 700; text-align: center; }
body:not(.office) .awake { background: var(--info-wash); color: var(--info); padding: 8px 16px; text-align: center; font-size: 15px; }
body:not(.office) .sheet { position: fixed; inset: 0; z-index: 40; background: rgba(18, 22, 27, .55); display: flex; align-items: flex-end; justify-content: center; }
body:not(.office) .sheet .panel { background: var(--paper); width: 100%; max-width: 560px; max-height: 92dvh; overflow: auto; border-radius: 18px 18px 0 0;
  padding: 18px 16px calc(18px + var(--sab)); animation: up .26s var(--sheet); }
@keyframes up { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
body:not(.office) .alert { border-left: 6px solid var(--red); }
body:not(.office) .alert.is-resolved { border-left-color: var(--green); opacity: .8; }
body:not(.office) .error { color: var(--red); font-weight: 650; }
body:not(.office) .legal { font-size: 15px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; max-height: 40dvh; overflow: auto; }
body:not(.office) .check { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; }
body:not(.office) .check input { width: 28px; min-height: 28px; height: 28px; flex: 0 0 28px; }
body:not(.office) .tabs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body:not(.office) .wrap { overflow-x: auto; margin: 8px 0 14px; }
body:not(.office) table { border-collapse: collapse; width: 100%; font-size: 15px; background: var(--card); }
body:not(.office) th, body:not(.office) td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
body:not(.office) th { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Driver stop header: "5 min away" and "I'm here" side by side. */
.stop-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
body:not(.office) .home-tools { display: grid; gap: 8px; margin-top: 16px; }
body:not(.office) .intro-list { padding-left: 20px; display: grid; gap: 10px; font-size: 17px; }
body:not(.office) .intro-acts { display: flex; gap: 10px; margin-top: 24px; position: sticky; bottom: 0; padding: 12px 0 calc(12px + var(--sab)); background: var(--paper); }
body:not(.office) .intro-count { font-weight: 700; margin-top: 8px; }
body.share-page main { padding: 20px 16px calc(32px + var(--sab)); max-width: 560px; margin: 0 auto; }
body.share-page h1 { font-size: 26px; font-weight: 850; letter-spacing: -.02em; margin: 12px 0; line-height: 1.15; }
body.share-page h2 { font-size: 17px; margin: 0 0 6px; }
body.share-page .card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin: 14px 0; }
body.share-page ul { padding-left: 20px; margin: 0; display: grid; gap: 6px; }
body.share-page button { min-height: 52px; width: 100%; border-radius: 12px; border: 0; font: 800 17px var(--font); margin: 10px 0; background: var(--asphalt); color: #fff; }
body.share-page button.yellow { background: var(--kerb); color: var(--kerb-ink); }
body.share-page textarea { width: 100%; font: inherit; padding: 12px; border-radius: 10px; border: 1.5px solid var(--line); box-sizing: border-box; }
body.share-page details { margin-top: 16px; } body.share-page summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
body.share-page .error { color: var(--stop); font-weight: 650; } body.share-page .muted { color: var(--muted); }
body:not(.office) .home-info { display: grid; gap: 8px; margin: 4px 0 10px; }
body:not(.office) .home-info .addr { font-size: 17px; font-weight: 650; margin: 0; overflow-wrap: anywhere; }
body:not(.office) .navbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border-radius: 12px; background: var(--asphalt); color: #fff; font-weight: 800; text-decoration: none; flex: 1 1 auto; }
body:not(.office) .navbtn.alt { background: var(--white); color: var(--asphalt); box-shadow: inset 0 0 0 2px var(--asphalt); }
body:not(.office) .linkish { background: none; border: 0; color: var(--asphalt); text-decoration: underline; font-weight: 650; min-height: 48px; padding: 0 8px; }
body:not(.office) .home-stop { border-left: 5px solid var(--kerb); }
body:not(.office) .stop-block.skipped { opacity: .62; background: var(--concrete); }
body:not(.office) .skip-note { font-weight: 750; margin: 4px 0 8px; }
body:not(.office) .rider.excused strong { text-decoration: line-through; text-decoration-thickness: 2px; }
body:not(.office) button.small { min-height: 48px; font-size: 15px; padding: 0 14px; }
/* Help and Emergency (driver) */
body:not(.office) .help-q { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--kerb); background: transparent; color: var(--kerb); font: 850 20px var(--font); margin-left: 8px; flex: none; }
body:not(.office) .callbtn { display: flex; flex-direction: column; justify-content: center; min-height: 64px; padding: 10px 18px; margin: 10px 0; border-radius: 14px; background: var(--asphalt); color: #fff; text-decoration: none; font-weight: 850; font-size: 20px; }
body:not(.office) .callbtn small { font: 650 15px var(--mono); opacity: .85; }
body:not(.office) .callbtn.alt { background: var(--white); color: var(--asphalt); box-shadow: inset 0 0 0 2px var(--asphalt); }
body:not(.office) .callbtn.danger { background: var(--stop); }
body:not(.office) .callbtn.danger.alt { background: var(--white); color: var(--stop); box-shadow: inset 0 0 0 2px var(--stop); }
body:not(.office) .em-wrap { margin: 18px 0 8px; }
body:not(.office) .emergency { position: relative; overflow: hidden; width: 100%; min-height: 64px; border: 0; border-radius: 14px; background: var(--stop); color: #fff; font: 850 21px var(--font); letter-spacing: .02em; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body:not(.office) .emergency .fill { position: absolute; inset: 0; background: rgba(0,0,0,.28); transform: scaleX(0); transform-origin: left; }
body:not(.office) .emergency.holding .fill { transform: scaleX(1); transition: transform 2s linear; }
body:not(.office) .emergency .em-lbl { position: relative; }
body:not(.office) .notice { font-weight: 700; padding: 10px 12px; border-radius: 10px; background: var(--warn-wash); color: var(--warn); }
body:not(.office) .em-status { font-weight: 750; font-size: 17px; }
body:not(.office) .tips { padding-left: 20px; display: grid; gap: 10px; font-size: 16px; }
body:not(.office) button.danger, body:not(.office) .wide.danger { background: var(--stop); color: #fff; }
/* Long status lines styled as chips (GPS notices) wrap on a phone instead of running off the screen. */
body:not(.office) p.chip { display: block; white-space: normal; border-radius: 10px; padding: 8px 12px; line-height: 1.35; margin: 8px 0; max-width: 100%; }
body:not(.office) .sheet .panel { box-sizing: border-box; max-width: min(560px, 100vw); overflow-wrap: anywhere; }
body:not(.office) .me-photo { display: block; width: 160px; height: 160px; object-fit: cover; border-radius: 50%; margin: 8px auto; background: var(--concrete); }
body:not(.office) .field-strip { display: grid; gap: 8px; margin: 8px 0; }
/* A fixed-height slot for the duty line from the first paint: updates never shift the page. */
body:not(.office) .field-strip { min-height: 26px; }
body:not(.office) .duty { margin: 0; min-height: 26px; line-height: 26px; font-weight: 700; color: var(--go); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } body:not(.office) .duty.bad { color: var(--stop); }
body:not(.office) .area-banner { padding: 12px 14px; border-radius: 12px; background: var(--warn-wash); color: var(--warn); font-size: 16px; border-left: 6px solid var(--kerb); }
body:not(.office) .area-btn { min-height: 56px; font-size: 18px; }
body:not(.office) .toggle-row { display: flex; gap: 12px; align-items: center; min-height: 48px; font-weight: 650; margin: 12px 0; }
body:not(.office) .toggle-row input { width: 24px; height: 24px; }

/* iPhone fixes (2026-10-13): never a sideways page; fields fit their box (iOS date/time inputs included). */
html, body { overflow-x: clip; }
:where(body:not(.office)) :where(div, section, header, li, p, span, a, label, h1, h2, h3, strong, small) { min-width: 0; }
:where(body:not(.office)) :where(p, li, span, strong, h1, h2, h3, td, th) { overflow-wrap: break-word; }
body:not(.office) input, body:not(.office) select, body:not(.office) textarea { max-width: 100%; min-width: 0; }
body:not(.office) input[type=date], body:not(.office) input[type=time], body:not(.office) input[type=datetime-local] { -webkit-appearance: none; appearance: none; display: block; background-color: #fff; }
body:not(.office) input::-webkit-date-and-time-value { text-align: left; margin: 0; }

/* No zoom on tap (2026-10-13): iOS zooms into any focused field under 16px. Every form control is 16px or more,
   everywhere (driver app, office, sheets, filters, date inputs). touch-action removes double-tap zoom and the tap
   delay; pinch-zoom stays available in the browser (the native app also locks the viewport, see platform.js). */
html { touch-action: manipulation; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea { font-size: max(16px, 1em) !important; }
/* The minibus icon on trip cards (same drawing as the office nav and maps). */
body:not(.office) .van-ico { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body:not(.office) .trip .when { display: inline-flex; align-items: center; gap: 10px; line-height: 1.2; }

/* Driver action buttons: an icon left of the always-visible label (web/icons.js), 24 px, tap targets 48 px+.
   Icon in a fixed 24x24 box, label line-height 1.2 (the font overrides centre it optically, see @font-face).
   Content starts at a fixed inset, so in any stack of buttons every icon sits at the same x. */
.ic { width: 24px; height: 24px; flex: none; display: block; }
body:not(.office) button:has(> .ic), body:not(.office) .navbtn:has(> .ic) { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding-left: 16px; padding-right: 14px; text-align: left; }
body:not(.office) button:has(> .ic) > .lbl { line-height: 1.2; margin: 0; }
body:not(.office) .trip-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
body:not(.office) .trip-actions button { width: 100%; min-height: 52px; margin: 0; }
body:not(.office) .stop-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; justify-content: stretch; min-width: 148px; }
body:not(.office) .stop-actions button { width: 100%; }
body:not(.office) .rider .acts button:has(> .ic) { flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 6px 4px; font-size: 14.5px; text-align: center; }
body:not(.office) .emergency .em-lbl { display: inline-flex; align-items: center; gap: 12px; line-height: 1.2; }
body:not(.office) .emergency .ic { width: 26px; height: 26px; }
/* Trip cards: time · route · plate and expected, status pill, chevron. */
body:not(.office) .trip { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
body:not(.office) .trip-main { display: grid; gap: 4px; min-width: 0; }
body:not(.office) .trip-main .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
body:not(.office) .trip-route { font-weight: 700; }
body:not(.office) .trip-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
body:not(.office) .trip-chev { color: var(--muted); }
body:not(.office) .chip.st-in_progress { background: var(--kerb); color: var(--kerb-ink); }
body:not(.office) .chip.st-scheduled { background: var(--concrete); color: var(--ink); }
body:not(.office) .chip.st-completed { background: var(--go-wash); color: var(--green); }
body:not(.office) .chip.st-cancelled { background: var(--stop-wash); color: var(--red); }

/* In-app notification pill (web/pill.js): an overlay below the status bar / Dynamic Island. Never moves the page. */
.npill-host { position: fixed; top: calc(var(--sat) + 8px); left: 0; right: 0; z-index: 3000; display: grid; justify-items: center; padding: 0 12px; pointer-events: none; }
.npill { pointer-events: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; width: min(520px, 100%); background: #12161B; color: #fff; border-radius: 28px; box-shadow: 0 10px 30px -8px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); touch-action: none; animation: npill-in .28s cubic-bezier(.2,.9,.3,1.2) both; }
.npill.out { animation: npill-out .22s ease-in both; }
.npill button.npill-open { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 4px 8px 16px; font: 700 15.5px/1.3 var(--font); color: #fff; cursor: pointer; min-width: 0; }
.npill button.npill-open:focus-visible, .npill button.npill-x:focus-visible { outline: 3px solid var(--kerb); outline-offset: 2px; border-radius: 22px; }
.npill .npill-text { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.npill .npill-more { flex: none; font-size: 12.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.14); }
.npill button.npill-x { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 44px; height: 44px; margin-right: 4px; border-radius: 50%; color: #c9d1cf; cursor: pointer; }
.npill .ic { width: 24px; height: 24px; flex: none; }
.npill .npill-open .ic { color: var(--kerb); }
.npill.tone-stop { background: #9E1F18; } .npill.tone-stop .npill-open .ic { color: #fff; }
.npill.tone-go .npill-open .ic { color: #5FD39A; }
@keyframes npill-in { from { transform: translateY(-140%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes npill-out { to { transform: translateY(-140%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .npill, .npill.out { animation: none; } }

/* Header bell with an unread count, and the driver's Online / Offline · n to sync / Syncing pill. */
.bell { position: relative; display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: transparent; color: #fff; cursor: pointer; padding: 0; }
.bell .ic { width: 22px; height: 22px; }
.bell .bell-n { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #FF8A80; color: #12161B; font: 800 12px/20px var(--mono); text-align: center; }
.bell .bell-n[hidden] { display: none; }
body:not(.office) .net.is-sync { background: #3a3317; color: #FFE7A0; }
body:not(.office) .net.is-off { background: #4a3a12; color: #FFE1A6; }
body:not(.office) .bar { gap: 8px; }
body:not(.office) .bar .bar-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.inbox-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.inbox-list button { all: unset; box-sizing: border-box; display: flex; gap: 12px; align-items: center; width: 100%; min-height: 52px; padding: 10px 12px; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; font-size: 16px; }
.inbox-list .ic { width: 24px; height: 24px; flex: none; }
.inbox-list small { display: block; color: var(--muted); font-size: 13.5px; }

/* Larger Text (native app follows the phone's text size, platform.js applyTextZoom): dense rows go to one column, and
   labels wrap instead of clipping (design QA 2026-10-14). */
html.big-text body:not(.office) .rider .acts, html.big-text body:not(.office) .trip-actions { grid-template-columns: minmax(0, 1fr); }
html.big-text body:not(.office) .stop-block h2 { flex-direction: column; align-items: stretch; }
html.big-text body:not(.office) .stop-actions { min-width: 0; }
html.big-text body:not(.office) .rider .acts button:has(> .ic) { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 8px 16px; text-align: left; }
html.big-text body:not(.office) .duty { white-space: normal; line-height: 1.3; }
html.big-text .npill-text { -webkit-line-clamp: 3; line-clamp: 3; }

/* Trip screen (design QA 2026-10-14): Emergency docked at the bottom, always in reach; rider states read at a glance. */
body:not(.office) .trip-dock { position: sticky; bottom: 0; z-index: 5; margin: 16px -16px calc(-32px - var(--sab)); padding: 10px 16px calc(10px + var(--sab)); background: var(--paper); box-shadow: 0 -1px 0 var(--line), 0 -10px 18px -14px rgba(0,0,0,.35); }
body:not(.office) .trip-dock .em-wrap { margin: 0; }
body:not(.office) .trip-dock .emergency { min-height: 58px; }
body:not(.office) .trip-dock #em-hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body:has(.trip-dock) .toast { bottom: calc(92px + var(--sab)); }
body:not(.office) button.noshow-on { background: var(--stop-wash); color: var(--stop); border-color: var(--stop); }
body:not(.office) .stop-count { display: block; margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--muted); }
body:not(.office) .stop-count.done { color: var(--go); }
.npill .npill-title { display: block; }

/* Stacked full-width buttons on the driver home and in App settings (Aza, 2026-10-17): icon, label, and a chevron on
   the right, like a settings list. Icons share one column, so the words start at the same point down the stack. */
body:not(.office) .home-tools { row-gap: 12px; }
body:not(.office) .home-tools > button:has(> .ic) { display: grid; grid-template-columns: 34px minmax(0, 1fr) 22px; align-items: center; gap: 16px; min-height: 64px; padding: 0 16px 0 20px; margin-top: 0; text-align: left; justify-content: stretch; border-radius: 16px; font-size: 19px; font-weight: 750; letter-spacing: -.01em; }
body:not(.office) .home-tools > button > .ic:first-child { width: 34px; height: 34px; }
body:not(.office) .home-tools .tool-chev { width: 22px; height: 22px; opacity: .6; }
body:not(.office) .home-tools > button > .lbl { font-size: 19px; font-weight: 750; }
body:not(.office) .settings-tools { margin: 4px 0 14px; }
/* Focus rings on light surfaces in the driver app: dark ink (16.7:1); the dark header keeps the yellow ring. */
body:not(.office) #main :focus-visible, body:not(.office) #sheet :focus-visible { outline-color: var(--asphalt); }
body:not(.office) ::placeholder { color: #666F78; opacity: 1; }
body:not(.office) .tabs button .ic { width: 20px; height: 20px; margin-right: 6px; vertical-align: -4px; }
@media (prefers-contrast: more) { :root { --muted: #3D464F; --line: #7E8A8F; --line-soft: #8A9499; } }
/* Room between in-vehicle buttons so a bump doesn't hit the neighbour (design QA). */
body:not(.office) .rider .acts, body:not(.office) .stop-actions, body:not(.office) .trip-actions { gap: 12px; }
body:not(.office) .bar .bar-tools { gap: 12px; }
@media (prefers-reduced-motion: reduce) { body:not(.office) .emergency.holding .fill { transition: transform 2s linear !important; } }
/* Undo bar for messages that wait 5 seconds before going (design QA): above the Emergency dock. */
.undo-bar { position: fixed; left: 16px; right: 16px; bottom: calc(92px + var(--sab)); z-index: 30; display: flex; gap: 12px; align-items: center; justify-content: space-between; min-height: 52px; padding: 8px 8px 8px 16px; border-radius: 12px; background: var(--asphalt); color: #fff; font-weight: 700; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); max-width: 688px; margin: 0 auto; }
body:not(.office) .undo-bar button { min-height: 44px; background: var(--kerb); color: var(--kerb-ink); border-color: var(--kerb); flex: none; }
body:not(.office) button.sent .lbl { font-size: 15px; }
/* Undo bar for messages that wait 5 seconds before going (design QA): above the Emergency dock. */
.undo-bar { position: fixed; left: 16px; right: 16px; bottom: calc(92px + var(--sab)); z-index: 30; display: flex; gap: 12px; align-items: center; justify-content: space-between; min-height: 52px; padding: 8px 8px 8px 16px; border-radius: 12px; background: var(--asphalt); color: #fff; font-weight: 700; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); max-width: 688px; margin: 0 auto; }
body:not(.office) .undo-bar button { min-height: 44px; background: var(--kerb); color: var(--kerb-ink); border-color: var(--kerb); flex: none; }
body:not(.office) button.sent .lbl { font-size: 15px; }
/* Offline (design QA): the waiting-taps bar is yellow as the intro says; the header pill fits on small phones. */
body:not(.office) .queue { background: var(--kerb); color: var(--kerb-ink); }
.net { white-space: nowrap; }
@media (max-width: 399px) { body.is-offline .bar .brand-text { display: none; } }
/* Driver: own papers (Milestone E) */
body:not(.office) .papers-card { margin-top: 14px; display: grid; gap: 8px; }
body:not(.office) .papers-card h2 { font-size: 19px; margin: 0; }

/* ---------- The trip map (drivemap.js): the vehicle, the stops in order, the next one ---------- */
body:not(.office) .drive-map { position: relative; height: 42vh; min-height: 240px; max-height: 420px; margin: 12px 0 4px; border-radius: 18px; overflow: hidden; background: #1B2128; box-shadow: inset 0 0 0 1px var(--line); isolation: isolate; }
body:not(.office) .drive-map .dm-canvas { position: absolute; inset: 0; }
body:not(.office) .dm-msg { position: absolute; inset: auto 12px 12px; margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(18,22,27,.86); color: #fff; font-size: 15px; z-index: 2; }
body:not(.office) .dm-tools { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; z-index: 3; }
body:not(.office) .dm-btn { min-height: 44px; padding: 0 16px; border-radius: 22px; border: 0; background: var(--asphalt); color: #fff; font: 800 15px/1 var(--font); box-shadow: 0 6px 16px -6px rgba(0,0,0,.55); }
body:not(.office) .dm-btn.dm-recentre { background: var(--kerb); color: var(--kerb-ink); }
body:not(.office) .dm-showme { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; background: var(--kerb); color: var(--kerb-ink); white-space: nowrap; }
body:not(.office) .dm-btn[hidden] { display: none; }
/* Stops: numbered, the next one in kerb yellow and larger, done ones greyed. */
.dm-stop { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #12161B; font: 800 14px/1 var(--font); box-shadow: 0 0 0 3px #12161B, 0 4px 10px rgba(0,0,0,.35); }
.dm-stop.next { width: 36px; height: 36px; font-size: 16px; background: #F2C230; box-shadow: 0 0 0 3px #12161B, 0 0 0 9px rgba(242,194,48,.35), 0 6px 14px rgba(0,0,0,.4); }
.dm-stop.done { background: #8E9A98; color: #fff; box-shadow: 0 0 0 3px #3A444F; opacity: .8; }
/* The vehicle: a yellow arrow that turns with the heading; a dot when the heading isn't known yet. */
.dm-me.van-top { width: 48px; height: 48px; }
.dm-me.van-top .van-rot { transform: none !important; } /* the map marker turns it */
/* The next-stop card: shown only in the full map, above the emergency bar. */
body:not(.office) .dm-slot { display: none; }
body:not(.office) .drive-map.full { position: fixed; inset: 0; height: auto; max-height: none; margin: 0; border-radius: 0; z-index: 60; box-shadow: none; }
body:not(.office) .drive-map.full .dm-tools { top: calc(12px + var(--sat)); }
body:not(.office) .drive-map.full .dm-slot { display: block; position: absolute; left: 10px; right: 10px; bottom: calc(96px + var(--sab)); z-index: 3; }
body:not(.office) .drive-map.full .dm-showme { bottom: calc(260px + var(--sab)); }
body:not(.office) .dm-card { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--paper); box-shadow: 0 14px 30px -10px rgba(0,0,0,.55); }
body:not(.office) .dm-next { margin: 0; display: grid; gap: 2px; }
body:not(.office) .dm-next small { color: var(--muted); font-weight: 700; font-size: 14px; }
body:not(.office) .dm-next strong { font-size: 21px; line-height: 1.2; }
body:not(.office) .dm-dist { color: var(--ink-2); font-size: 15px; }
body:not(.office) .dm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body:not(.office) .dm-actions button { margin: 0; }
body.map-full:not(.office) .trip-dock { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; z-index: 70; }
body.map-full { overflow: hidden; }

/* ---------- Motion (2026-10-15). Drivers tap fast and often: taps get under-200 ms feedback, screens and sheets a
   short settle, exits are quicker and smaller than entrances, and only rare wins (a finished trip) are noticeable.
   Transform and opacity only. Everything here is off with Reduce Motion (the rule near the top of this file). ---------- */
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes banner-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes tick-pop { from { transform: scale(.72); opacity: .35; } }
@keyframes chip-in { from { transform: scale(.92); opacity: 0; } }
@keyframes card-up { from { transform: translateY(28px); opacity: 0; } }
@keyframes check-draw { from { stroke-dashoffset: 24; } }
/* A new screen settles in. "backwards" so nothing is left transformed afterwards (fixed elements such as the full
   map would otherwise be positioned inside the screen). */
body:not(.office) main.screen-in { animation: screen-in .2s var(--ease-out) backwards; }
/* Sheets: the backdrop fades in with the panel; on close both leave in 160 ms, smaller than the way in. */
body:not(.office) .sheet { animation: fade-in .2s var(--ease-out); }
body:not(.office) .sheet.closing { background-color: rgba(18, 22, 27, 0); transition: background-color .16s ease-in; pointer-events: none; }
body:not(.office) .sheet.closing .panel { transform: translateY(14px); opacity: 0; transition: transform .16s ease-in, opacity .16s ease-in; }
/* Rider taps (the most frequent action): the pressed button's icon pops in, the state chip appears. No delays. */
body:not(.office) .rider .acts button[aria-pressed="true"] .ic { animation: tick-pop .18s var(--press); }
body:not(.office) .rider .row .chip { animation: chip-in .18s var(--ease-out); }
body:not(.office) .stop-count { transition: color .2s; }
body:not(.office) .stop-count.done { animation: tick-pop .22s var(--press); transform-origin: left center; }
/* Status bars slide down when they appear (from hidden), never when their text changes. */
body:not(.office) .awake, body:not(.office) .queue { animation: banner-in .22s var(--ease-out) backwards; }
/* The full map opens with a quick fade, its next-stop card rises after it; closing fades out in 160 ms. */
body:not(.office) .drive-map.full { animation: fade-in .22s var(--ease-out); }
body:not(.office) .drive-map.full .dm-slot { animation: card-up .32s var(--sheet) .05s backwards; }
body:not(.office) .drive-map.leaving { opacity: 0; transition: opacity .16s ease-in; }
body:not(.office) .dm-btn { transition: transform .14s var(--press); }
body:not(.office) .dm-btn:active { transform: scale(.96); }
/* Trip finished: a check draws itself in the toast. */
.toast.done { display: inline-flex; align-items: center; gap: 10px; }
.toast-check { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--kerb); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; }
.toast.is-on .toast-check { animation: check-draw .42s var(--ease-out) .18s backwards; }

/* Sign-in: the button answers at once, then a short "Opening ShiftRide" screen until the first screen is drawn. */
body:not(.office) button.busy, .signin button.busy { opacity: .85; cursor: progress; }
button.busy::after { content: ''; width: 16px; height: 16px; margin-left: 10px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; display: inline-block; vertical-align: -3px; }
@media (prefers-reduced-motion: no-preference) { button.busy::after { animation: spin .7s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }
.boot { min-height: 60vh; display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center; color: var(--muted); font-weight: 650; }
.boot-bar { width: 160px; height: 4px; border-radius: 2px; background: var(--line-soft); overflow: hidden; position: relative; }
.boot-bar::after { content: ''; position: absolute; inset: 0; width: 40%; border-radius: 2px; background: var(--kerb); }
@media (prefers-reduced-motion: no-preference) { .boot-bar::after { animation: boot-run 1s var(--ease-out) infinite; } }
@keyframes boot-run { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
body:not(.office) .speak-card { margin: 4px 0 14px; } body:not(.office) .speak-card .toggle-row { margin-top: 0; } body:not(.office) .speak-card .muted { margin: 0 0 12px; }

.traffic-tools { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; padding:.65rem; background:#1B2429; color:#F4F5F1; font-size:.8rem; }
.traffic-tools button { min-height:44px; min-width:110px; }
.drive-map > .traffic-tools { position:absolute; top:60px; left:8px; right:8px; z-index:3; border-radius:8px; }

.traffic-tools button { background:#F2C230; color:#12161B; border:0; border-radius:8px; padding:8px 14px; font:inherit; font-weight:700; cursor:pointer; }
.traffic-tools button:disabled { opacity:.55; cursor:default; }