/* EMR Express Driver — mobile-first PWA shell.
   Single-file CSS for v1; component splits if/when complexity warrants.

   DA-BRAND (2026-06-14): restyled onto the EMR brand design system
   (admin-dashboard/styles/emr-design-system.css). The local --bg /
   --accent / --fg vars are RE-POINTED to the EMR dark ramp (gold
   #F5A800 accent on a charcoal/navy surface) and aliased to the
   canonical --emr-* tokens where they exist, so the brand stays a
   single source of truth. The variable NAMES are preserved so every
   rule below (and every class the JS modules touch) rebrands at once
   without renaming anything. Additive / value-preserving. */

:root {
  /* ── EMR brand SSOT (mirrors emr-design-system.css dark ramp). These
        are the canonical --emr-* tokens; the local aliases below resolve
        to them so editing here keeps the driver app on-brand. ───────── */
  /* GOLD-SHARP (2026-07-25, operator: "EMR gold a little sharper, more
     towards yellow"): the driver-app gold ramp shifted yellower + brighter
     — crisper against the charcoal; dark ink on gold stays AA+. */
  --emr-gold:        #FFB70A;
  --emr-gold-hover:  #E8A400;
  --emr-gold-hi:     #FFD34D;
  --emr-gold-tint:   rgba(255, 183, 10, 0.12);
  --emr-bg:          #0D0D0D;   /* deepest brand surface */
  --emr-bg-elev:     #1A1A1A;   /* charcoal rail / header */
  --emr-card-bg:     #1E1E1E;
  --emr-text:        #F7F8FA;
  /* DRIVER-UI-CONTRAST (2026-07-24, driver: "poor contrast, poor
     readability"): the muted/subtle ramp lifted two notches — secondary
     text now clears WCAG AA on the card surface in truck-cab glare. */
  --emr-text-muted:  #D6D9DD;
  --emr-text-subtle: #B0B6BE;
  --emr-border:      #313131;
  --emr-status-green:#16A34A;
  --emr-status-yellow:#D97706;
  --emr-status-red:  #DC2626;
  --emr-status-blue: #2563EB;
  --emr-text-on-gold:#1A1A1A;

  /* ── Local shell vars — aliased to the brand tokens. Names kept
        identical to v1 so the rest of the sheet is unchanged. ──────── */
  --bg:        var(--emr-bg);
  --bg-card:   var(--emr-card-bg);
  --fg:        var(--emr-text);
  --fg-dim:    var(--emr-text-subtle);
  --accent:    var(--emr-gold);
  --accent-hi: var(--emr-gold-hi);
  --ok:        var(--emr-status-green);
  --warn:      var(--emr-status-yellow);
  --err:       var(--emr-status-red);
  --info:      var(--emr-status-blue);
  --border:    var(--emr-border);
  --radius:    8px;
  --header-h:  56px;
  --tabbar-h:  62px;
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

.drv-header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
  background: var(--emr-bg-elev);
  border-bottom: 1px solid var(--border);
  /* Thin gold brand rule along the header's bottom edge. */
  box-shadow: inset 0 -2px 0 0 var(--emr-gold-tint);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  z-index: 10;
}
/* Gold EMR wordmark in the header — the brand signature. */
.drv-brand {
  font-weight: 800; font-size: 16px; letter-spacing: 0.04em;
  color: var(--emr-gold);
  text-transform: uppercase;
}
.drv-status { color: var(--ok); font-size: 14px; }
.drv-status.offline { color: var(--err); }

/* Q33 wave 2 — offline upload-queue pending badge in the header.
   Rendered next to drv-status only when queue.getCount() > 0. */
.drv-pending-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--warn);
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.4);
  border-radius: 999px;
  padding: 3px 8px;
  margin-left: 8px;
  white-space: nowrap;
}

#drv-main {
  padding: calc(var(--header-h) + 16px) 16px calc(var(--tabbar-h) + 16px);
  min-height: 100vh;
}

.view { display: block; }
.view.hidden { display: none; }
/* Generic .hidden (2026-07-18): the app toggles INNER elements via
   classList too (#drv-login-error, #required-tasks-banner, …) — the
   .view-scoped rule alone left those permanently visible (empty red /
   amber bars, since the elements carry padding+background when bare).
   !important so display-setting component classes
   (.drv-tasks-banner{display:flex}) cannot resurrect a hidden element. */
.hidden { display: none !important; }

h1 { font-size: 22px; margin: 8px 0 16px; font-weight: 700; }
h2 { font-size: 16px; margin: 24px 0 8px; font-weight: 600; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.06em; }

.loader { text-align: center; padding: 32px 0; color: var(--fg-dim); }

#manifest-summary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
#manifest-summary .row { display: flex; justify-content: space-between; padding: 4px 0; }
#manifest-summary .row .k { color: var(--fg-dim); font-size: 13px; }
#manifest-summary .row .v { font-weight: 600; }

/* DA-PREFERRED-STAR — the ★ toggle in the summary card. Hollow ☆ =
   not preferred (dim); filled ★ = preferred (warn gold). A bare,
   touch-sized tap target so it reads as an inline glyph, not a button. */
.drv-star {
  background: none; border: none; cursor: pointer;
  font-size: 22px; line-height: 1;
  padding: 0 2px; min-width: 32px; min-height: 32px;
  color: var(--fg-dim);
  transition: color 0.12s ease, transform 0.08s ease;
}
.drv-star.is-on { color: var(--warn); }
.drv-star:active { transform: scale(0.88); }
.drv-star:disabled { opacity: 0.5; cursor: default; }

#stops-list { list-style: none; padding: 0; margin: 0; }
.stop {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.stop .stop-head { display: flex; justify-content: space-between; align-items: center; }
.stop .stop-type {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-dim);
}
.stop .stop-status {
  font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; background: #1f2937; color: var(--fg-dim);
}
.stop .stop-status.en_route    { background: #1e3a8a; color: #bfdbfe; }
.stop .stop-status.on_location { background: #4c1d95; color: #ddd6fe; }
.stop .stop-status.check_in    { background: #064e3b; color: #a7f3d0; }
.stop .stop-status.completed   { background: #14532d; color: #bbf7d0; }
.stop .stop-status.canceled    { background: #7f1d1d; color: #fecaca; }
.stop .stop-status.tonu        { background: #713f12; color: #fde68a; }
.stop .stop-location { font-weight: 600; margin: 6px 0 8px; }
.stop .stop-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* T6 (Q-DRIVER-APP-DOCS-MSGS) — Load-tab stop data: facility label,
   full street address (.stop-location above doubles as the nav target),
   PU#/Delivery# reference (never blank), pickup/delivery instructions. */
.stop .stop-facility { font-size: 0.8rem; color: var(--fg-dim); margin: 6px 0 0; }
.stop .stop-ref { font-size: 0.85rem; font-weight: 600; color: var(--accent-hi); margin: 2px 0 0; }
.stop .stop-ref.stop-ref-missing { color: var(--warn); }
.stop .stop-notes {
  font-size: 0.85rem; color: var(--fg); margin: 8px 0 0;
  padding: 6px 9px; background: var(--bg); border-left: 3px solid var(--accent);
  border-radius: 4px; white-space: pre-wrap; word-break: break-word;
}

/* DA-MANIFEST-MILES — Load-tab miles card: per-leg loaded miles, the
   empty/deadhead to the first pickup, and the total, with a small muted
   "Mileage powered by Google" attribution. Reuses the .row .k/.v rhythm
   of #manifest-summary. */
.drv-miles-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.drv-miles-card .drv-miles-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-dim); margin-bottom: 6px;
}
.drv-miles-card .row { display: flex; justify-content: space-between; padding: 4px 0; }
.drv-miles-card .row .k { color: var(--fg-dim); font-size: 13px; }
.drv-miles-card .row .v { font-weight: 600; }
.drv-miles-card .row.drv-miles-total {
  border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px;
}
.drv-miles-card .row.drv-miles-total .v { color: var(--accent-hi); }
.drv-miles-card .drv-miles-gap { color: var(--warn); font-weight: 600; font-size: 13px; }
.drv-miles-card .drv-miles-attribution {
  margin-top: 10px; font-size: 11px; color: var(--fg-dim); opacity: 0.85;
}

.drv-btn {
  border: 1px solid var(--border);
  background: var(--bg-card); color: var(--fg);
  border-radius: var(--radius);
  padding: 10px 14px;
  /* DRIVER-QOL (2026-07-23): guarantee a ≥44px tap target for gloved hands. */
  min-height: 44px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, opacity 150ms ease;
}
/* Primary = gold fill, DARK text (gold is light — needs dark ink for
   contrast, per --emr-text-on-gold). */
.drv-btn-primary {
  background: var(--accent); border-color: var(--accent); color: var(--emr-text-on-gold);
  font-weight: 700;
}
.drv-btn-primary:active { background: var(--emr-gold-hover); border-color: var(--emr-gold-hover); }
.drv-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
/* DRIVER-HISTORY-FOOTER (2026-07-07) — persistent "View History" at the bottom
   of the Load view (ref EMR-000827: delivered load left the view + its POD was
   still due). */
.drv-load-history-footer {
  margin: 28px 0 12px; padding-top: 18px;
  border-top: 1px solid var(--border); text-align: center;
}
.drv-load-history-btn { width: 100%; max-width: 320px; }
.drv-load-history-hint { font-size: 0.78rem; color: var(--fg-dim); margin-top: 6px; }

.drv-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--tabbar-h);
  background: var(--emr-bg-elev); border-top: 1px solid var(--border);
  display: flex; align-items: stretch;
  z-index: 10;
  padding-bottom: env(safe-area-inset-bottom);
}
.drv-tab {
  flex: 1;
  /* DRIVER-QOL (2026-07-23): brighter inactive color + bolder weight for
     sunlight/gloved legibility. Font-size stays 12px so all 7 labels
     ("Receipts", "Settings") still fit on a 320px phone without clipping. */
  background: transparent; color: var(--emr-text-muted); border: none;
  /* Top gold rail appears on the active tab (transparent otherwise). */
  border-top: 2px solid transparent;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.drv-tab[disabled] { opacity: 0.4; cursor: not-allowed; }
.drv-tab.drv-tab-active { color: var(--emr-gold); border-top-color: var(--emr-gold); }

/* Q-DRIVER-APP-NAV — tap-to-navigate affordance on stop address rows.
   The .drv-nav-link modifier is applied by navIntent.attachNavLink()
   so we only paint the cursor/underline once a handler is bound. */
.stop-location.drv-nav-link {
  cursor: pointer;
  color: var(--accent-hi);
  text-decoration: underline;
  text-decoration-color: rgba(255, 183, 10, 0.5);
  text-underline-offset: 3px;
}
.stop-location.drv-nav-link:active { opacity: 0.7; }
.drv-nav-pin { margin-right: 2px; }

/* Bottom-sheet (mobile) / centered modal (desktop) intent picker.
   role=dialog + aria-modal handled in JS; visual layer below. */
.drv-nav-sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 100;
  padding: 0; margin: 0;
}
.drv-nav-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
  padding: 18px 16px calc(env(safe-area-inset-bottom) + 16px);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
}
.drv-nav-sheet-title {
  font-size: 14px; font-weight: 600;
  color: var(--fg-dim);
  margin-bottom: 12px;
  word-break: break-word;
}
.drv-nav-sheet-actions {
  display: flex; flex-direction: column; gap: 10px;
}
.drv-nav-sheet-btn {
  width: 100%;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  padding: 14px 16px;
}
.drv-nav-sheet-cancel {
  width: 100%;
  margin-top: 4px;
  background: transparent;
  color: var(--fg-dim);
  border-color: transparent;
}
@media (min-width: 720px) {
  /* Desktop PWA — center the sheet as a modal instead of bottom dock. */
  .drv-nav-sheet-overlay { align-items: center; }
  .drv-nav-sheet { border-radius: 14px; }
}

/* Q33 C2 — driver-app document capture UI (2026-05-20, S5).
   Per-stop attach button, existing-doc list, and the capture
   bottom-sheet modal. Mirrors the Q-DRIVER-APP-NAV sheet pattern
   so the visual language stays consistent across modals. */
.drv-doc-cap-btn {
  background: transparent;
  border-color: var(--accent-hi);
  color: var(--accent-hi);
}
.drv-doc-cap-btn:active { opacity: 0.7; }

.drv-doc-list {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.drv-doc-row {
  display: flex; align-items: center; gap: 10px;
  height: 56px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--emr-gold-tint);
}
.drv-doc-thumb {
  width: 40px; height: 40px;
  border-radius: 6px;
  background: var(--bg);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.drv-doc-thumb-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.drv-doc-thumb-pdf {
  font-size: 11px; font-weight: 700; color: var(--fg-dim);
  letter-spacing: 0.04em;
}
.drv-doc-meta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.drv-doc-name {
  font-size: 13px; font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drv-doc-pill {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--emr-text-on-gold);
  flex-shrink: 0;
}

/* Capture sheet — bottom dock on mobile, centered modal on desktop. */
.drv-doc-sheet.drv-doc-sheet__backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 100;
}
.drv-doc-sheet__panel {
  width: 100%;
  max-width: 480px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
  padding: 18px 16px calc(env(safe-area-inset-bottom) + 16px);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
}
.drv-doc-sheet__title {
  font-size: 14px; font-weight: 600;
  color: var(--fg-dim);
  margin-bottom: 12px;
  word-break: break-word;
}
.drv-doc-sheet__row {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.drv-doc-sheet__label {
  font-size: 12px; font-weight: 600;
  color: var(--fg-dim);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.drv-doc-sheet__select,
.drv-doc-sheet__notes,
.drv-doc-sheet__file-row .drv-doc-sheet__file {
  width: 100%;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 15px;
  font-family: var(--font);
}
.drv-doc-sheet__file-row .drv-doc-sheet__file {
  padding: 10px;
}
.drv-doc-sheet__status {
  min-height: 18px;
  font-size: 13px;
  color: var(--fg-dim);
  margin-bottom: 10px;
}
.drv-doc-sheet__actions {
  display: flex; gap: 10px;
}
.drv-doc-sheet__cancel,
.drv-doc-sheet__upload {
  flex: 1;
  padding: 14px 16px;
  font-size: 15px;
  text-align: center;
}
.drv-doc-sheet__cancel {
  background: transparent;
  color: var(--fg-dim);
  border-color: var(--border);
}

/* UPLOAD-UX (2026-07-07) — ONE prominent capture action + a small
   secondary "Adjust / edit scan" link underneath (enhance is preset ON).
   The block is a flex column, so children stack: primary button, hint,
   then the adjust link BELOW the primary. */
.drv-doc-sheet__capture-block {
  align-items: stretch;
  gap: 8px;
}
.drv-doc-sheet__capture {
  width: 100%;
  padding: 15px 16px;
  font-size: 16px;
}
.drv-doc-sheet__capture-hint {
  font-size: 11px;
  color: var(--fg-dim);
  text-align: center;
  opacity: 0.85;
}
/* DRIVER-DOC-CHOOSE (2026-07-23) — "Choose a photo or PDF" peer of the camera
   button, so drivers aren't forced into the live camera. Solid gold outline so
   it reads as a clear alternative action (not the dashed "add page"). */
.drv-doc-sheet__choose {
  width: 100%;
  padding: 13px 16px;
  font-size: 15px;
  background: var(--bg-card);
  border-color: var(--accent);
  color: var(--fg);
}
.drv-doc-sheet__choose:active { opacity: 0.8; }
.drv-doc-sheet__adjust {
  align-self: center;
  background: transparent;
  border-color: transparent;
  color: var(--accent-hi);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 183, 10, 0.5);
}
.drv-doc-sheet__adjust:active { opacity: 0.7; }
/* W3 multi-page: "Add another page" — a clear secondary action below the
   primary capture button, styled as a dashed outline so it reads as "add". */
.drv-doc-sheet__addpage {
  align-self: stretch;
  margin-top: 8px;
  background: transparent;
  border: 1px dashed var(--accent-hi);
  color: var(--accent-hi);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 10px;
}
.drv-doc-sheet__addpage:active { opacity: 0.7; }

@media (min-width: 720px) {
  .drv-doc-sheet.drv-doc-sheet__backdrop { align-items: center; }
  .drv-doc-sheet__panel { border-radius: 14px; }
}

/* ── Q-DRIVER-APP-DOCS-MSGS Wave 1 (T1) — scan & enhance ───────────── */
.drv-doc-scan-btn { width: 100%; }
.drv-scan-sheet.drv-scan-sheet__backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: stretch; justify-content: center;
  z-index: 110;
}
.drv-scan-sheet__panel {
  width: 100%; max-width: 520px;
  background: var(--bg-card);
  display: flex; flex-direction: column;
  padding: 16px 14px calc(env(safe-area-inset-bottom) + 14px);
}
.drv-scan-sheet__title { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; }
.drv-scan-sheet__modes { display: flex; gap: 8px; margin-bottom: 10px; }
.drv-scan-mode { flex: 1; }
.drv-scan-mode.is-active { background: var(--accent); color: var(--emr-text-on-gold); border-color: var(--accent); }
.drv-scan-sheet__status { font-size: 0.85rem; color: var(--fg-dim); min-height: 18px; margin-bottom: 8px; }
.drv-scan-sheet__thumbs {
  flex: 1; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
  overflow-y: auto; min-height: 120px; padding: 4px 0;
}
.drv-scan-thumb {
  position: relative; width: 84px; height: 110px;
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--bg);
}
.drv-scan-thumb__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drv-scan-thumb__num {
  position: absolute; left: 4px; bottom: 4px;
  font-size: 11px; font-weight: 700; color: #fff;
  background: rgba(0, 0, 0, 0.6); border-radius: 4px; padding: 1px 5px;
}
.drv-scan-thumb__del {
  position: absolute; top: 2px; right: 2px;
  width: 22px; height: 22px; line-height: 20px; text-align: center;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px;
}
.drv-scan-sheet__actions { display: flex; gap: 8px; margin-top: 12px; }
.drv-scan-capture, .drv-scan-done { flex: 1; }

/* ── Q-DRIVER-APP-DOCS-MSGS Wave 7 — Add to Home Screen banner ──────── */
.drv-a2hs {
  position: fixed;
  left: 8px; right: 8px;
  bottom: calc(var(--tabbar-h) + 8px + env(safe-area-inset-bottom));
  z-index: 120;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.drv-a2hs__icon { width: 40px; height: 40px; border-radius: 9px; flex: 0 0 auto; }
.drv-a2hs__text { flex: 1; min-width: 0; }
.drv-a2hs__title { font-weight: 700; font-size: 0.92rem; }
.drv-a2hs__sub { font-size: 0.8rem; color: var(--fg-dim); margin-top: 2px; }
.drv-a2hs__actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.drv-a2hs__install { padding: 8px 14px; }
.drv-a2hs__dismiss {
  border: none; background: transparent; color: var(--fg-dim);
  font-size: 16px; cursor: pointer; padding: 4px 6px; line-height: 1;
}

/* Sprint 19 Arc 8 — detention timer per stop card. */
.drv-detention {
  margin: 8px 0;
  padding: 8px 10px;
  /* Neutral elevated card — the tier color (yellow/orange/red) carries
     urgency below, so the container stays brand-neutral. */
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}
.drv-detention-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  margin-bottom: 6px;
}
.drv-detention-tier {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 10px;
}
.drv-detention-tier[data-tier="2h"] { color: #eab308; }
.drv-detention-tier[data-tier="4h"] { color: #f97316; }
.drv-detention-tier[data-tier="6h"] { color: #ef4444; }
.drv-detention-elapsed {
  font-variant-numeric: tabular-nums;
  color: #cbd5e1;
}
.drv-detention-bar {
  height: 4px;
  background: rgba(255, 255, 255, .08);
  border-radius: 2px;
  overflow: hidden;
}
.drv-detention-bar-fill {
  height: 100%;
  transition: width .4s ease, background .4s ease;
}

/* Sprint 19 Arc 10 — HOS advisory card removed (Q-DRIVER-APP-DOCS-MSGS
   Wave 6, 2026-06-13): the driver-app HOS tab was dropped — Samsara owns
   HOS (D4). The operator Safety tab keeps its own HOS surface. */

/* Sprint 19 Arc 9 — messages tab. */
.drv-messages {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 60vh;
  padding: 0;
}
/* DRIVER-MSG-TABS-V1 (2026-07-07) — department TABS (was a scrollable chip
   slider). Underline-active tab row; the unread bubble rides as a small red
   superscript on each tab. Stays overflow-x:auto so ultra-narrow phones can
   still reach every department, but on a normal phone all five read as tabs. */
.drv-msg-depts {
  display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 0; border-bottom: 1px solid var(--border); flex: 0 0 auto;
  background: var(--bg-card);
}
.drv-msg-dept {
  position: relative; flex: 1 0 auto; min-width: 62px;
  padding: 10px 10px 8px; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--fg-dim);
  font-size: 0.8rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.drv-msg-dept.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.drv-msg-dept-label { line-height: 1.1; }
/* Per-department unread bubble (red). */
.drv-msg-dept-badge {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--emr-status-red, #DC2626); color: #fff;
  font-size: 0.62rem; font-weight: 800; line-height: 16px;
  text-align: center; box-sizing: border-box;
}
.drv-msg-feed {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.drv-msg {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  word-wrap: break-word;
}
.drv-msg--driver {
  align-self: flex-end;
  background: var(--accent);
  color: var(--emr-text-on-gold);
  border-bottom-right-radius: 4px;
}
.drv-msg--dispatcher {
  align-self: flex-start;
  background: rgba(255,255,255,.08);
  color: var(--fg, #e2e8f0);
  border-bottom-left-radius: 4px;
}
.drv-msg__meta {
  font-size: 10px;
  margin-top: 4px;
  opacity: .65;
  text-align: right;
}
.drv-msg-compose {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border, #2a3142);
}
.drv-msg-compose input {
  flex: 1;
  background: var(--bg-card, #1a1f2e);
  color: var(--fg, #e2e8f0);
  border: 1px solid var(--border, #2a3142);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
}
.drv-msg-compose button {
  background: var(--accent);
  color: var(--emr-text-on-gold);
  border: none;
  border-radius: 6px;
  padding: 0 16px;
  font-weight: 700;
  cursor: pointer;
}
.drv-msg-empty {
  color: var(--fg-dim, #94a3b8);
  text-align: center;
  padding: 24px;
  font-style: italic;
}

/* Sprint 19 Arc 11 — load offer banner. */
.drv-offer-banner {
  margin: 12px 0;
  padding: 14px;
  background: rgba(234, 179, 8, .08);
  border: 1px solid rgba(234, 179, 8, .35);
  border-radius: 8px;
}
.drv-offer-banner__title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #eab308;
  margin-bottom: 8px;
}
.drv-offer-banner__actions {
  display: flex;
  gap: 8px;
}
.drv-offer-banner__actions button {
  flex: 1;
}
.drv-offer-banner__accept {
  background: #16a34a;
  color: white;
  border: none;
}
.drv-offer-banner__decline {
  background: transparent;
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.5);
}

/* ─── DRIVER-DOC-MOBILE-PWA-V1 — Documents tab styles (2026-05-26) ───
   PWA stays quiet: no pulses, no animations. Pulses live on the
   desktop op dashboard via expirationWidget. Tap targets ≥44px so
   the row + Upload button satisfy iOS HIG accessibility guidance. */
.drv-doc-tab-header {
  font-size: 13px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 12px 0 10px;
}
/* Truck / Trailer group label under the "Truck & Trailer Documents" header. */
.drv-doc-tab-subheader {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg);
  margin: 10px 0 6px;
}
.drv-doc-tab-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.drv-doc-tab-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 56px;       /* ≥44pt tap target */
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.drv-doc-tab-row--viewable {
  cursor: pointer;
}
.drv-doc-tab-row--viewable:active {
  background: var(--emr-gold-tint);
}
.drv-doc-tab-meta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: 2px;
}
.drv-doc-tab-title {
  font-size: 14px; font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drv-doc-tab-sub {
  font-size: 12px;
  color: var(--fg-dim);
}
/* DRIVER-DOC-VIEW-V2 (2026-07-23) — per-row thumbnail (image preview or icon
   tile) + an "Uploaded <date>" line so the Docs tab is scannable, not a wall
   of filenames. */
.drv-doc-tab-thumb {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg);
  border: 1px solid var(--border);
}
.drv-doc-tab-thumb--icon {
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
}
.drv-doc-tab-date {
  font-size: 11px;
  color: var(--fg-dim);
  opacity: 0.85;
}
.drv-doc-tab-status {
  flex-shrink: 0;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}
/* Current = green pill (subtle, no glow). */
.drv-doc-tab-status--current {
  background: rgba(34, 197, 94, 0.12);
  color: var(--ok);
  border-color: rgba(34, 197, 94, 0.30);
}
/* Expiring = amber pill — single tier; the row's sub-label carries
   the day count (in/N days, today, etc.) so the badge stays clean. */
.drv-doc-tab-status--expiring {
  background: rgba(234, 179, 8, 0.12);
  color: var(--warn);
  border-color: rgba(234, 179, 8, 0.40);
}
/* Expired = red pill. */
.drv-doc-tab-status--expired {
  background: rgba(239, 68, 68, 0.14);
  color: var(--err);
  border-color: rgba(239, 68, 68, 0.40);
}
/* Missing = neutral gray. */
.drv-doc-tab-status--missing {
  background: rgba(148, 163, 184, 0.12);
  color: var(--fg-dim);
  border-color: rgba(148, 163, 184, 0.30);
}
.drv-doc-tab-upload {
  flex-shrink: 0;
  min-height: 44px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--accent-hi);
  color: var(--accent-hi);
  border-radius: var(--radius);
  font-size: 13px; font-weight: 600;
}
.drv-doc-tab-upload:active { opacity: 0.7; }
.drv-doc-tab-empty {
  padding: 14px;
  text-align: center;
  color: var(--fg-dim);
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* ── DRIVER-APP-COMPLETED-MANIFESTS (2026-06-26) ─────────────────
   Required-doc banner (manifest view), Tasks-tab count badge, and the
   per-load task rows + Upload buttons on the Tasks tab. Reuses the
   doc-tab row/badge vocabulary above for visual consistency. */
.drv-tasks-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--radius);
  /* Amber alert tint — same palette as the "expiring" doc badge. */
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.40);
  color: var(--fg);
  cursor: pointer;
  min-height: 48px;
}
.drv-tasks-banner:active { opacity: 0.85; }
.drv-tasks-banner__icon { font-size: 16px; flex-shrink: 0; }
.drv-tasks-banner__text {
  flex: 1; min-width: 0;
  font-size: 14px; font-weight: 600;
}
.drv-tasks-banner__cta {
  flex-shrink: 0;
  font-size: 13px; font-weight: 700;
  color: var(--warn);
}
/* Tab count badge — small amber pill appended to the Tasks tab label. */
.drv-tab-badge {
  display: inline-block;
  margin-left: 4px;
  min-width: 16px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--emr-status-yellow, #eab308);
  color: #0D0D0D;
  font-size: 10px; font-weight: 800;
  line-height: 14px;
  text-align: center;
  vertical-align: middle;
}
/* DRIVER-MSG-UNREAD-V1 / LOAD-BADGE (2026-07-07) — red nav badge for unread
   messages (Msgs) + a red dot for an active/next load (Load). The base badge
   above stays yellow for the Tasks paperwork count (different semantic). */
.drv-tab-badge--red { background: var(--emr-status-red, #DC2626); color: #fff; }
.drv-tab-badge--dot {
  min-width: 0; width: 9px; height: 9px; padding: 0; margin-left: 3px;
  background: var(--emr-status-red, #DC2626); border-radius: 999px;
  vertical-align: top;
}
/* Per-load Upload buttons sit on their own row under the load (so multiple
   missing docs each get a full-width tap target without crowding the badge). */
.drv-task-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: -2px 0 4px;
  padding: 0 2px;
}
.drv-task-upload {
  flex: 1 1 auto;
  min-height: 44px;
  font-size: 13px; font-weight: 600;
}

/* ── DVIR-DRIVER-APP-TASK (2026-06-29) ──────────────────────────
   The DVIR open-task block sits at the TOP of the Tasks tab, above the
   completed-loads list. Reuses the doc-tab row vocabulary; an accent
   left-edge marks it as safety-critical (red for a missing inspection,
   amber for an open defect). Tokens only — no opaque white. */
.drv-dvir-list { margin-bottom: 14px; }
/* Missing DVIR — red accent edge; the whole row is tappable (→ Samsara). */
.drv-dvir-task {
  border-left: 3px solid var(--err);
  cursor: pointer;
}
.drv-dvir-task:active { opacity: 0.85; }
.drv-dvir-task .drv-doc-tab-title { color: var(--err); }
/* Open defect — amber accent edge; informational. */
.drv-dvir-defect {
  border-left: 3px solid var(--warn);
}
.drv-dvir-defect .drv-doc-tab-title { color: var(--warn); }

.drv-doc-tab-viewer-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10001;
  display: flex; align-items: stretch; justify-content: center;
}
.drv-doc-tab-viewer-host {
  flex: 1;
  position: relative;
  /* documentViewer renders its own modal-mode chrome; this host just
     provides a mount point. */
}

/* DRIVER-DOC-VIEW-TASK (2026-07-23) — "View BOL/POD" for docs already sent reads
   as a calm secondary next to the gold "Upload X" (still-missing). The viewer's
   "Upload new version" (replace) floats above the full-screen document. */
.drv-task-view {
  flex: 1 1 auto;
  min-height: 44px;
  font-size: 13px; font-weight: 700;
  background: var(--bg-card);
  border-color: var(--accent);
  color: var(--fg);
}
.drv-doc-view-replace {
  position: fixed; left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 16px);
  transform: translateX(-50%);
  z-index: 10002;
  min-width: 220px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

/* ─────────────────────────────────────────────────────────────────
   DRIVER-APP-SETTLEMENTS-V1 — "Pay" tab. Mirrors the .drv-doc-tab-*
   list vocabulary so the Pay surface visually matches Docs/Receipts.
   ───────────────────────────────────────────────────────────────── */
.drv-pay-header {
  font-size: 13px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 12px 0 10px;
}
.drv-pay-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.drv-pay-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 56px;       /* ≥44pt tap target */
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.drv-pay-row--viewable { cursor: pointer; }
.drv-pay-row--viewable:active { background: rgba(31, 111, 235, 0.10); }
.drv-pay-meta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: 2px;
}
.drv-pay-title {
  font-size: 14px; font-weight: 600;
  color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drv-pay-sub {
  font-size: 12px;
  color: var(--fg-dim);
}
.drv-pay-right {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px;
}
.drv-pay-net {
  font-size: 15px; font-weight: 700;
  color: var(--ok);
}
.drv-pay-status {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}
/* Paid = green pill. */
.drv-pay-status--paid {
  background: rgba(34, 197, 94, 0.12);
  color: var(--ok);
  border-color: rgba(34, 197, 94, 0.30);
}
/* Sent (not yet paid) = neutral blue pill. */
.drv-pay-status--sent {
  background: rgba(31, 111, 235, 0.12);
  color: var(--accent-hi);
  border-color: rgba(31, 111, 235, 0.30);
}
.drv-pay-empty {
  padding: 14px;
  text-align: center;
  color: var(--fg-dim);
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* Detail overlay (tap-in breakdown). Bottom-sheet style above tabbar. */
.drv-pay-detail-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10001;
  display: flex; align-items: flex-end; justify-content: center;
}
.drv-pay-detail-sheet {
  width: 100%;
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border-top-left-radius: 16px; border-top-right-radius: 16px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.drv-pay-detail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.drv-pay-detail-title {
  font-size: 15px; font-weight: 700;
  color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drv-pay-detail-close {
  flex-shrink: 0;
  min-height: 44px;
  padding: 8px 14px;
}
.drv-pay-detail-body {
  padding: 14px 16px;
  overflow-y: auto;
}
.drv-pay-detail-net {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.drv-pay-detail-net-k {
  font-size: 13px; color: var(--fg-dim);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.drv-pay-detail-net-v {
  font-size: 20px; font-weight: 800;
  color: var(--ok);
}
.drv-pay-detail-paid {
  margin: 8px 0 4px;
  font-size: 12px; color: var(--fg-dim);
}
.drv-pay-detail-lines-head {
  margin: 18px 0 8px;
  font-size: 12px; color: var(--fg-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.drv-pay-line-list {
  display: flex; flex-direction: column;
  gap: 6px;
}
.drv-pay-line-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.drv-pay-line-meta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.drv-pay-line-title {
  font-size: 13px; font-weight: 600; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drv-pay-line-sub {
  font-size: 11px; color: var(--fg-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drv-pay-line-amount {
  flex-shrink: 0;
  font-size: 14px; font-weight: 700; color: var(--fg);
}

/* ── Q-DRIVER-LOGIN-CREDS (2026-06-23) — username/password front screen ── */
#view-login { max-width: 420px; margin: 0 auto; padding-top: 12px; }
.drv-login-sub { color: var(--fg-dim); font-size: 0.9rem; margin: 4px 0 18px; }
.drv-login-form { display: flex; flex-direction: column; gap: 6px; }
.drv-login-label {
  font-size: 11px; font-weight: 700; color: var(--fg-dim);
  text-transform: uppercase; letter-spacing: 0.05em; margin-top: 10px;
}
.drv-login-input {
  border: 1px solid var(--border); background: var(--bg-card); color: var(--fg);
  border-radius: var(--radius); padding: 12px 13px; font-size: 16px;
  transition: border-color 150ms ease;
}
.drv-login-input:focus { outline: none; border-color: var(--accent); }
.drv-login-btn { margin-top: 20px; width: 100%; padding: 13px; font-size: 16px; }
.drv-login-btn:disabled { opacity: 0.6; cursor: default; }
.drv-login-err {
  margin-top: 14px; padding: 10px 12px; border-radius: var(--radius);
  background: rgba(239, 68, 68, 0.12); color: var(--err);
  font-size: 0.85rem; border: 1px solid rgba(239, 68, 68, 0.3);
}
.drv-login-alt { color: var(--fg-dim); font-size: 0.8rem; margin: 20px 0 0; text-align: center; }

/* ═══ UI-MODERN-V1 (2026-07-03) — motion + loading polish ═══════
   Additive layer: view entrance animation, button micro-interactions,
   shimmer skeleton utility. Reduced-motion aware. */
@keyframes drvViewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.view:not(.hidden) { animation: drvViewIn .24s cubic-bezier(.2, .8, .25, 1); }

.drv-btn, .drv-tab { transition: transform .12s ease, filter .12s ease, background-color .15s ease; }
.drv-btn:not([disabled]):active { transform: scale(.96); }

@keyframes drvSkelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.drv-skel {
  display: block; border-radius: 6px; height: 12px; margin: 8px 0;
  background: linear-gradient(90deg, rgba(148,163,184,.12) 25%, rgba(148,163,184,.3) 45%, rgba(148,163,184,.12) 65%);
  background-size: 200% 100%;
  animation: drvSkelShimmer 1.4s ease-in-out infinite;
}

/* ═══ UI-POLISH-V2 (2026-07-12) — uniform motion vocabulary ════════
   Same easings/durations as the admin dashboard's ui-modern.css so the
   two apps feel like one product. Additive only: no layout metrics, no
   palette changes. */

/* Rows and cards glide instead of snapping (touch + hover) */
.drv-doc-row, .drv-doc-tab-row, .drv-stop, .drv-load-history-btn,
.ofc-act-row, .ofc-card, .ofc-chat-chan {
  transition: background-color .15s ease, border-color .15s ease,
              transform .12s ease, box-shadow .15s ease;
}
.drv-doc-row:active, .drv-doc-tab-row:active, .ofc-act-row:active,
.ofc-chat-chan:active { transform: scale(.985); }

/* Tab bar: active tab icon nudges up, label follows the gold accent */
.drv-tab { transition: color 150ms ease, border-color 150ms ease, transform .18s cubic-bezier(.2, .8, .25, 1); }
.drv-tab-active { transform: translateY(-1px); }

/* Sheets / viewers / overlays fade in like admin modals */
@keyframes drvFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes drvSheetUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.drv-doc-sheet { animation: drvSheetUp .22s cubic-bezier(.2, .8, .25, 1); }
.drv-doc-tab-viewer-overlay { animation: drvFadeIn .16s ease-out; }

/* Inputs: brand-gold focus ring (matches admin :focus-visible ring) */
:where(input, select, textarea):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 183, 10, .25);
}

/* Progress bars ease width the same way everywhere */
.drv-detention-bar-fill { transition: width .4s cubic-bezier(.2, .8, .25, 1), background .4s ease; }

/* Brand-gold selection, same as admin */
::selection { background: rgba(255, 183, 10, .28); }

@media (prefers-reduced-motion: reduce) {
  .view:not(.hidden) { animation: none; }
  .drv-btn, .drv-tab { transition: none; }
  .drv-btn:not([disabled]):active { transform: none; }
  .drv-skel { animation-duration: 3.2s; }
  /* V2 surfaces */
  .drv-doc-row, .drv-doc-tab-row, .drv-stop, .drv-load-history-btn,
  .ofc-act-row, .ofc-card, .ofc-chat-chan,
  .drv-detention-bar-fill, :where(input, select, textarea) { transition: none; }
  .drv-doc-row:active, .drv-doc-tab-row:active, .ofc-act-row:active,
  .ofc-chat-chan:active, .drv-tab-active { transform: none; }
  .drv-doc-sheet, .drv-doc-tab-viewer-overlay { animation: none; }
}

/* ── CROSS-BROWSER-INSTALL (2026-07-07) — persistent install entry + help
   sheet. The entry lives at the top of the Settings tab so the driver can
   add the home-screen icon on ANY browser at any time (not just the auto
   banner). Uses the existing --accent/--fg brand tokens. ──────────────── */
.drv-a2hs-entry {
  display: flex; align-items: center; gap: 10px;
  min-height: 56px;              /* ≥44pt tap target */
  padding: 10px 12px;
  margin: 0 0 10px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.drv-a2hs-entry__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.drv-a2hs-entry__title { font-size: 14px; font-weight: 700; color: var(--fg); }
.drv-a2hs-entry__sub { font-size: 12px; color: var(--fg-dim); }
.drv-a2hs-entry__btn { flex: 0 0 auto; padding: 8px 14px; }
.drv-a2hs-entry__btn[disabled] { opacity: 0.6; cursor: default; }

/* Full-screen dimmed backdrop with a centered card. */
.drv-a2hs-sheet {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
}
.drv-a2hs-sheet__card {
  width: 100%; max-width: 360px;
  padding: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.drv-a2hs-sheet__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.drv-a2hs-sheet__title { font-size: 1.05rem; font-weight: 700; color: var(--fg); }
.drv-a2hs-sheet__body { display: flex; flex-direction: column; gap: 12px; }
.drv-a2hs-sheet__line { font-size: 0.9rem; line-height: 1.4; color: var(--fg); }
.drv-a2hs-sheet__action { align-self: flex-start; padding: 10px 18px; }
.drv-a2hs-sheet__url {
  font-size: 0.78rem; color: var(--fg-dim); word-break: break-all;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg);
}
.drv-a2hs-sheet__close {
  margin-top: 16px; width: 100%;
  border: 1px solid var(--border); background: transparent; color: var(--fg-dim);
  border-radius: var(--radius); padding: 10px 14px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}

/* ── PORTAL LOGIN (2026-07-18) — phone-scaled port of the dashboard
   portal: brand speed-line field + gold orbit swoosh + glass panel +
   SVG logo emergence + warp-through on sign-in. Decorative layers only
   (pointer-events:none, hidden with the view); every login control, id
   and handler is unchanged. */
#view-login{position:relative;isolation:isolate}
.portal-stars-pwa{position:fixed;inset:0;pointer-events:none;z-index:-2}
.portal-orbit-pwa{
  position:fixed;left:50%;top:44%;width:430px;height:430px;margin:-215px 0 0 -215px;
  transform:rotate(-14deg) scaleY(.58);border-radius:50%;pointer-events:none;z-index:-1;
  border:2px solid rgba(255,183,10,.24);
  box-shadow:0 0 50px rgba(255,183,10,.12), inset 0 0 70px rgba(255,183,10,.05);
  animation:portalBreathePwa 7s ease-in-out infinite;
}
.portal-orbit-pwa::before{
  content:'';position:absolute;inset:-3px;border-radius:50%;border:3px solid transparent;
  border-top-color:#FFB70A;filter:drop-shadow(0 0 10px rgba(255,183,10,.8));
  animation:portalSweepPwa 6s linear infinite;
}
@keyframes portalSweepPwa{to{transform:rotate(360deg)}}
@keyframes portalBreathePwa{0%,100%{opacity:.9}50%{opacity:.55}}
.portal-logo-pwa{width:200px;margin:2px auto 10px;display:block;overflow:visible}
#view-login h1,#view-login .drv-login-sub{text-align:center}
#view-login .drv-login-form{
  background:rgba(19,19,20,.82);border:1px solid rgba(255,183,10,.28);border-radius:14px;
  padding:18px 16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 18px 60px rgba(0,0,0,.5), 0 0 34px rgba(255,183,10,.08);
}
.lg-all{transform-origin:150px 84px;animation:lgEmerge 1.15s cubic-bezier(.22,1.2,.36,1) both}
@keyframes lgEmerge{0%{opacity:0;transform:translateY(110px) scale(.1);filter:blur(9px)}45%{opacity:1}78%{transform:translateY(0) scale(1.05);filter:blur(0)}100%{opacity:1;transform:translateY(0) scale(1)}}
.lg-letter{transform-origin:center;transform-box:fill-box;animation:lgLetter .5s cubic-bezier(.3,1.6,.4,1) both}
.lg-e{animation-delay:.42s}.lg-m{animation-delay:.5s}.lg-r{animation-delay:.58s}
@keyframes lgLetter{0%{opacity:0;transform:scale(.4) rotate(-6deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.lg-dash{animation:lgDash .45s cubic-bezier(.2,.9,.3,1) both}
@keyframes lgDash{0%{opacity:0;transform:translateX(-60px)}100%{opacity:1;transform:translateX(0)}}
.lg-swoosh{stroke-dasharray:1;stroke-dashoffset:1;animation:lgDraw .7s cubic-bezier(.4,0,.3,1) forwards}
.lg-swoosh-back{animation-delay:.55s}.lg-swoosh-front{animation-delay:.8s}
@keyframes lgDraw{to{stroke-dashoffset:0}}
.lg-glint{animation:lgGlint .5s ease-out 1.15s both}
@keyframes lgGlint{0%{transform:translateX(-130px);opacity:0}30%{opacity:.85}100%{transform:translateX(190px);opacity:0}}
.lg-sub{animation:lgSub .4s ease-out 1.05s both}
@keyframes lgSub{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
.portal-warp-pwa{animation:portalWarpPwa .65s cubic-bezier(.7,0,.9,.4) forwards}
@keyframes portalWarpPwa{0%{opacity:1;transform:scale(1)}55%{opacity:1}100%{opacity:0;transform:scale(1.35);filter:blur(5px)}}
@media (prefers-reduced-motion: reduce){
  .portal-orbit-pwa,.portal-orbit-pwa::before,.lg-all,.lg-letter,.lg-dash,.lg-glint,.lg-sub{animation:none}
  .lg-swoosh{animation:none;stroke-dashoffset:0}
  .portal-warp-pwa{animation:portalFadePwa .25s ease forwards}
}
@keyframes portalFadePwa{to{opacity:0}}

.portal-logo-slot{position:relative;width:max-content;margin:2px auto 12px}

/* ── IDENTICAL-LOGO ANIMATION (operator 2026-07-19: "make the logo look
   identical — but animate it"): the REAL artwork (logo.png embedded as a
   data URI — unbreakable on any entry path) on its white brand plate.
   Sequence: plate rises out of the portal (lgEmerge, shared) → the logo
   STREAKS IN left-to-right behind a clip-wipe (the speed-lines direction)
   while three gold dashes fly past → glint sweep → settle. */
.logo-plate-real{
  position:relative;background:#fff;border-radius:14px;padding:8px 14px;
  overflow:hidden;width:max-content;margin:0 auto;
  box-shadow:0 12px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(255,183,10,.4), 0 0 34px rgba(255,183,10,.25);
  animation:lgEmerge 1.05s cubic-bezier(.22,1.2,.36,1) both;
}
.logo-real-img{display:block;width:170px;height:auto;clip-path:inset(0 100% 0 0);animation:lgReveal .55s cubic-bezier(.3,.7,.2,1) .55s forwards}
@keyframes lgReveal{to{clip-path:inset(0 0 0 0)}}
.logo-plate-real::after{
  content:'';position:absolute;top:-6px;bottom:-6px;left:-60px;width:44px;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.95),transparent);
  transform:skewX(-18deg);opacity:0;animation:lgGlintSweep .55s ease-out 1.18s both;
}
@keyframes lgGlintSweep{0%{left:-60px;opacity:0}25%{opacity:.95}100%{left:110%;opacity:0}}
.logo-fly{position:absolute;height:5px;border-radius:3px;background:#FFB70A;opacity:0;pointer-events:none;z-index:3}
.logo-fly-1{top:22%;left:-70px;width:40px;animation:lgFly .5s ease-out .58s both}
.logo-fly-2{top:46%;left:-95px;width:62px;background:#e8eaee;animation:lgFly .55s ease-out .66s both}
.logo-fly-3{top:68%;left:-60px;width:34px;animation:lgFly .5s ease-out .74s both}
@keyframes lgFly{0%{opacity:0;transform:translateX(0)}15%{opacity:.9}100%{opacity:0;transform:translateX(360px)}}
@media (prefers-reduced-motion: reduce){
  .logo-plate-real,.logo-real-img,.logo-plate-real::after,.logo-fly{animation:none}
  .logo-real-img{clip-path:none}
  .logo-fly{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   DRIVER-ALERTS-V1 (2026-07-23) — in-app toast, new-load nudge banner,
   and the Settings "Load & message alerts" opt-in row. Bottom snackbar
   sits above the tab bar; system push handles the backgrounded case.
   ═══════════════════════════════════════════════════════════════ */
.drv-toast-host {
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
  z-index: 10000;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; padding: 0 12px;
}
.drv-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  max-width: 520px; width: 100%;
  padding: 12px 14px;
  background: var(--emr-card-bg); color: var(--fg);
  border: 1px solid var(--border); border-left-width: 4px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  font-size: 14px; font-weight: 600; line-height: 1.3;
  opacity: 0; transform: translateY(14px);
  transition: opacity .2s ease, transform .2s ease;
}
.drv-toast--in  { opacity: 1; transform: translateY(0); }
.drv-toast--out { opacity: 0; transform: translateY(14px); }
.drv-toast__icon { font-size: 18px; line-height: 1; flex: 0 0 auto; }
.drv-toast__msg  { flex: 1 1 auto; min-width: 0; }
.drv-toast--success { border-left-color: var(--ok); }
.drv-toast--error   { border-left-color: var(--err); }
.drv-toast--info    { border-left-color: var(--info); }
.drv-toast--load    { border-left-color: var(--accent); background: var(--emr-gold-tint); }

/* One-time nudge banner on the Load view. */
.drv-alert-nudge {
  display: flex; flex-direction: column; gap: 10px;
  margin: 12px 0 16px; padding: 14px;
  background: var(--emr-gold-tint); border: 1px solid var(--accent);
  border-radius: var(--radius);
}
.drv-alert-nudge__txt { font-size: 14px; font-weight: 600; color: var(--fg); line-height: 1.35; }
.drv-alert-nudge__actions { display: flex; gap: 10px; }
.drv-alert-nudge__actions .drv-btn { flex: 1; }
.drv-alert-nudge__dismiss { background: transparent; }

/* Settings tab "Load & message alerts" row (always shown, like Install). */
.drv-alert-entry {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; margin-bottom: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.drv-alert-entry--on  { border-color: rgba(22,163,74,0.5); }
.drv-alert-entry--off { border-color: var(--accent); }
.drv-alert-entry__meta { flex: 1 1 auto; min-width: 0; }
.drv-alert-entry__title { font-size: 15px; font-weight: 700; color: var(--fg); }
.drv-alert-entry__sub { font-size: 12.5px; color: var(--fg-dim); margin-top: 3px; line-height: 1.3; }
.drv-alert-entry__btn { flex: 0 0 auto; min-height: 44px; padding: 10px 18px; }

@media (prefers-reduced-motion: reduce) {
  .drv-toast { transition: none; }
}

/* DRIVER-QOL (2026-07-23) — visible offline state. The header dot was easy to
   miss in a truck; this full-width bar (below the header) makes "you're offline,
   we'll sync later" unmissable, so a driver trusts that updates aren't lost. */
.drv-offline-bar {
  display: none;
  position: fixed; top: var(--header-h); left: 0; right: 0;
  z-index: 9;
  padding: 8px 14px;
  background: var(--emr-status-yellow); color: #1a1a1a;
  font-size: 13px; font-weight: 700; text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

/* ═══════════════════════════════════════════════════════════════
   DRIVER-DOC-FULLSCREEN (2026-07-24) — the one premium full-screen
   document viewer (.drv-fsv), used by every uploaded-doc surface.
   Fit-to-screen pages, pinch/double-tap zoom, swipe between pages,
   a big ✕, and a bottom action bar (Delete / Upload new version).
   ═══════════════════════════════════════════════════════════════ */
@keyframes drvFsvIn { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }
.drv-fsv {
  position: fixed; inset: 0; z-index: 10010;
  display: flex; flex-direction: column;
  background: rgba(5, 6, 8, 0.985);
  animation: drvFsvIn .2s cubic-bezier(.2, .8, .25, 1);
}
.drv-fsv__bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 10px) 14px 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,0));
  z-index: 2;
}
.drv-fsv__title {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #fff; font-size: 15px; font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.drv-fsv__close {
  flex: 0 0 auto;
  width: 48px; height: 48px; border-radius: 999px;
  background: rgba(255,255,255,.10); color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  font-size: 22px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, transform .12s ease;
}
.drv-fsv__close:active { background: var(--accent); color: var(--emr-text-on-gold); transform: scale(.92); }
.drv-fsv__stage {
  flex: 1 1 auto; min-height: 0;
  position: relative; overflow: hidden;
  touch-action: none;
}
.drv-fsv__track {
  display: flex; height: 100%; width: 100%;
  will-change: transform;
}
.drv-fsv__slide {
  flex: 0 0 100%; width: 100%; height: 100%;
  position: relative; overflow: hidden;
}
.drv-fsv__img {
  position: absolute; left: 0; top: 0;
  max-width: 100%; max-height: 100%;
  transform-origin: 0 0;
  will-change: transform;
  user-select: none; -webkit-user-drag: none;
  border-radius: 2px;
  box-shadow: 0 4px 30px rgba(0,0,0,.55);
}
.drv-fsv__frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; background: #fff;
}
@keyframes drvFsvSpin { to { transform: rotate(360deg); } }
.drv-fsv__spinner {
  position: absolute; left: 50%; top: 50%;
  width: 42px; height: 42px; margin: -21px 0 0 -21px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.18);
  border-top-color: var(--accent);
  animation: drvFsvSpin .8s linear infinite;
}
.drv-fsv__msg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: 82%;
  color: #e6e8ec; font-size: 14px; font-weight: 600; text-align: center;
  padding: 14px 18px; border-radius: 12px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
}
.drv-fsv__foot {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 10px 14px calc(env(safe-area-inset-bottom) + 14px);
  background: linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0));
  z-index: 2;
}
.drv-fsv__pageind {
  min-height: 18px;
  color: #fff; font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 12px; border-radius: 999px;
  background: rgba(13,13,13,.66);
  border: 1px solid rgba(255,255,255,.18);
}
.drv-fsv__pageind:empty { display: none; }
.drv-fsv__actions { display: flex; gap: 10px; width: 100%; max-width: 460px; }
.drv-fsv__actions:empty { display: none; }
.drv-fsv__act { flex: 1 1 auto; font-size: 14px; padding: 12px 14px; }
.drv-fsv__act--primary {
  background: var(--accent); border-color: var(--accent);
  color: var(--emr-text-on-gold); font-weight: 700;
}
.drv-fsv__act--danger {
  background: rgba(220, 38, 38, .14);
  border-color: rgba(220, 38, 38, .55);
  color: #fca5a5; font-weight: 700;
}
.drv-fsv__act--danger:active { background: rgba(220, 38, 38, .3); }
.drv-fsv__hint {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 92px);
  z-index: 3; padding: 7px 14px; border-radius: 999px;
  background: rgba(13,13,13,.72); color: #e5e7eb; font-size: 12px;
  pointer-events: none; transition: opacity .5s ease;
}
.drv-fsv__hint--out { opacity: 0; }
/* In-viewer confirm (Delete) — never window.confirm. */
.drv-fsv__confirm {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); padding: 24px;
  animation: drvFadeIn .15s ease-out;
}
.drv-fsv__confirm-panel {
  width: 100%; max-width: 340px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  animation: drvSheetUp .2s cubic-bezier(.2, .8, .25, 1);
}
.drv-fsv__confirm-text { color: var(--fg); font-size: 15px; font-weight: 600; line-height: 1.45; margin-bottom: 16px; }
.drv-fsv__confirm-row { display: flex; gap: 10px; }
.drv-fsv__confirm-keep { flex: 1; background: transparent; color: var(--fg); }
.drv-fsv__confirm-del {
  flex: 1;
  background: var(--emr-status-red); border-color: var(--emr-status-red);
  color: #fff; font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .drv-fsv, .drv-fsv__confirm, .drv-fsv__confirm-panel { animation: none; }
  .drv-fsv__close { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   SEQUENTIAL-FLOW-V1 (2026-07-24) — capture sheet as three calm
   steps: ① Type (big chips) ② Pages (capture → crop → strip)
   ③ Send (one bright button). Manifest/stop/notes fold behind a
   Details row. New vocabulary only — every legacy class stays.
   ═══════════════════════════════════════════════════════════════ */
.drv-doc-steps {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  margin: 2px 0 14px;
}
.drv-doc-step {
  display: flex; align-items: center; gap: 6px;
  color: var(--fg-dim);
}
.drv-doc-step__dot {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  font-size: 12px; font-weight: 800;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.drv-doc-step__label {
  font-size: 12px; font-weight: 700;
  letter-spacing: .02em;
  transition: color .25s ease;
}
.drv-doc-step--active { color: var(--fg); }
.drv-doc-step--active .drv-doc-step__dot {
  background: var(--accent); border-color: var(--accent);
  color: var(--emr-text-on-gold);
  transform: scale(1.12);
  box-shadow: 0 0 0 4px var(--emr-gold-tint);
}
.drv-doc-step--done { color: var(--emr-text-muted); }
.drv-doc-step--done .drv-doc-step__dot {
  background: rgba(22, 163, 74, .18);
  border-color: rgba(22, 163, 74, .55);
  color: var(--ok);
}
.drv-doc-step__line {
  width: 26px; height: 1.5px;
  background: var(--border);
  border-radius: 1px;
}

/* Big glove-friendly doc-type chips (drive the hidden select). */
.drv-doc-typechips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 14px;
}
.drv-doc-typechip {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--emr-text-muted);
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.drv-doc-typechip:active { transform: scale(.95); }
.drv-doc-typechip--on {
  background: var(--accent); border-color: var(--accent);
  color: var(--emr-text-on-gold);
  box-shadow: 0 2px 12px rgba(255, 183, 10, .3);
}

/* Collapsed Details row (load / stop / notes live behind it). */
.drv-doc-details-toggle {
  display: block; width: 100%;
  margin: 0 0 12px;
  padding: 11px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--emr-text-muted);
  font-size: 13px; font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.drv-doc-details-toggle:active { border-color: var(--accent); color: var(--fg); }

/* Page strip — one tile per captured page, ✕ to pull a bad one. */
.drv-doc-pagestrip {
  display: flex; gap: 10px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 4px 2px 8px;
  margin-bottom: 4px;
}
@keyframes drvPageTileIn { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
.drv-doc-pagetile {
  position: relative;
  flex: 0 0 auto;
  width: 74px; height: 96px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  overflow: hidden;
  animation: drvPageTileIn .25s cubic-bezier(.2, .8, .25, 1);
}
.drv-doc-pagetile__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.drv-doc-pagetile__num {
  position: absolute; left: 5px; bottom: 5px;
  min-width: 18px; height: 18px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .68);
  color: #fff; font-size: 11px; font-weight: 800;
  line-height: 18px; text-align: center;
  padding: 0 4px;
}
.drv-doc-pagetile__del {
  position: absolute; top: 4px; right: 4px;
  width: 26px; height: 26px;
  border: none; border-radius: 999px;
  background: rgba(0, 0, 0, .7);
  color: #fff; font-size: 13px; font-weight: 700;
  line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.drv-doc-pagetile__del:active { background: var(--emr-status-red); }

/* Capture-sheet preview reads as tappable ("see it big"). */
.drv-doc-sheet__preview:not(:empty),
.drv-receipt-sheet__preview:not(:empty) {
  cursor: zoom-in;
  border: 1px solid var(--border);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}

/* Send button lights up when pages are ready. */
@keyframes drvSendGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 183, 10, .0); }
  50% { box-shadow: 0 0 18px 2px rgba(255, 183, 10, .35); }
}
.drv-doc-sheet__upload--ready { animation: drvSendGlow 2.2s ease-in-out infinite; }
.drv-doc-sheet__upload[disabled] { opacity: .45; cursor: default; }

/* Indeterminate send progress. */
.drv-doc-progress {
  height: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
  margin: 0 0 10px;
}
@keyframes drvProgressSlide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(260%); }
}
.drv-doc-progress__bar {
  width: 45%; height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  animation: drvProgressSlide 1.1s ease-in-out infinite;
}

/* Animated success tick over the sheet. */
@keyframes drvTickPop {
  0% { opacity: 0; transform: scale(.4); }
  60% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
.drv-doc-success {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  background: rgba(20, 20, 20, .88);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border-radius: inherit;
  z-index: 3;
}
.drv-doc-success__ring {
  width: 76px; height: 76px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22, 163, 74, .16);
  border: 2.5px solid var(--ok);
  color: var(--ok);
  font-size: 38px; font-weight: 800;
  animation: drvTickPop .45s cubic-bezier(.2, .9, .3, 1.4) both;
}
.drv-doc-success__label {
  color: var(--fg); font-size: 16px; font-weight: 800;
  letter-spacing: .02em;
  animation: drvViewIn .3s ease-out .15s both;
}
/* The success overlay is positioned against the sheet panel. */
.drv-doc-sheet__panel { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .drv-doc-step__dot, .drv-doc-step__label, .drv-doc-typechip,
  .drv-doc-details-toggle { transition: none; }
  .drv-doc-pagetile, .drv-doc-sheet__upload--ready,
  .drv-doc-progress__bar, .drv-doc-success__ring, .drv-doc-success__label { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   DRIVER-UI-WOW-V1 (2026-07-24) — the readability + polish layer.
   Additive overrides only: no legacy rule is edited, every pinned
   class keeps its name. Larger secondary text, card depth, glass
   header/tabbar, staggered list entrances, skeleton rows.
   ═══════════════════════════════════════════════════════════════ */

/* Readability: secondary text one size up across the list surfaces. */
.drv-doc-tab-title { font-size: 15px; }
.drv-doc-tab-sub, .drv-pay-sub { font-size: 13px; }
.drv-doc-tab-date { font-size: 12px; opacity: 1; }
.drv-doc-name { font-size: 14px; }
.drv-doc-sheet__status { font-size: 14px; color: var(--emr-text-muted); }
.drv-doc-sheet__title { font-size: 15px; color: var(--fg); }
.drv-nav-sheet-title { color: var(--fg); }
.stop .stop-facility { font-size: 0.85rem; }
.drv-doc-status-category { font-size: 14px; font-weight: 700; }
.drv-doc-status-submitted, .drv-doc-status-amount { font-size: 12.5px; color: var(--emr-text-muted); }

/* Card depth: a whisper of top-light + soft shadow so surfaces separate
   from the page without going grey. */
.stop, #manifest-summary, .drv-miles-card,
.drv-doc-tab-row, .drv-pay-row, .drv-doc-row,
.drv-alert-entry, .drv-a2hs-entry {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, 0) 46%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 2px 10px rgba(0, 0, 0, .28);
}

/* Glass header + tab bar (blur degrades gracefully where unsupported). */
.drv-header {
  background: rgba(20, 20, 20, .88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.drv-tabbar {
  background: rgba(20, 20, 20, .92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .35);
}
.drv-tab.drv-tab-active { text-shadow: 0 0 14px rgba(255, 183, 10, .45); }

/* Section headers slightly brighter than the old dim uppercase. */
h2, .drv-doc-tab-header, .drv-pay-header { color: var(--emr-text-muted); }

/* Staggered entrance on list rows — the "app feels alive" beat without
   getting in the way (caps at 6 rows, then instant). */
.drv-doc-tab-list .drv-doc-tab-row,
.drv-pay-list .drv-pay-row,
.drv-doc-status-list .drv-doc-status-row {
  animation: drvViewIn .3s cubic-bezier(.2, .8, .25, 1) both;
}
.drv-doc-tab-list .drv-doc-tab-row:nth-child(1), .drv-pay-list .drv-pay-row:nth-child(1), .drv-doc-status-list .drv-doc-status-row:nth-child(1) { animation-delay: .02s; }
.drv-doc-tab-list .drv-doc-tab-row:nth-child(2), .drv-pay-list .drv-pay-row:nth-child(2), .drv-doc-status-list .drv-doc-status-row:nth-child(2) { animation-delay: .06s; }
.drv-doc-tab-list .drv-doc-tab-row:nth-child(3), .drv-pay-list .drv-pay-row:nth-child(3), .drv-doc-status-list .drv-doc-status-row:nth-child(3) { animation-delay: .10s; }
.drv-doc-tab-list .drv-doc-tab-row:nth-child(4), .drv-pay-list .drv-pay-row:nth-child(4), .drv-doc-status-list .drv-doc-status-row:nth-child(4) { animation-delay: .14s; }
.drv-doc-tab-list .drv-doc-tab-row:nth-child(5), .drv-pay-list .drv-pay-row:nth-child(5), .drv-doc-status-list .drv-doc-status-row:nth-child(5) { animation-delay: .18s; }
.drv-doc-tab-list .drv-doc-tab-row:nth-child(6), .drv-pay-list .drv-pay-row:nth-child(6), .drv-doc-status-list .drv-doc-status-row:nth-child(6) { animation-delay: .22s; }

/* Skeleton loading rows (mounted by the tab modules while fetching). */
.drv-skel-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.drv-skel-row .drv-skel { margin: 0; }
.drv-skel--thumb { width: 48px; height: 48px; border-radius: 8px; flex: 0 0 auto; }
.drv-skel--line { flex: 1 1 auto; height: 12px; }
.drv-skel--line-short { flex: 0 0 34%; height: 12px; }
.drv-skel--pill { flex: 0 0 64px; height: 22px; border-radius: 999px; }

/* Stop cards: status pill pops a little more; primary action row breathes. */
.stop .stop-status { font-size: 12px; padding: 3px 10px; }
.stop .stop-location { font-size: 16.5px; }

@media (prefers-reduced-motion: reduce) {
  .drv-doc-tab-list .drv-doc-tab-row,
  .drv-pay-list .drv-pay-row,
  .drv-doc-status-list .drv-doc-status-row { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   FLOATING-TABBAR-V1 (2026-07-24, operator: "nicer floating bar,
   selected tab highlighted yellow, every transition subtly
   animated") — the bottom nav becomes a floating glass pill inset
   from the edges; the ACTIVE tab is a solid gold pill (dark ink)
   that pops softly on change. Overrides only — class names, the
   wireTabBar() contract and the badge API are untouched.
   ═══════════════════════════════════════════════════════════════ */
@keyframes drvBarIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes drvTabPop { 0% { transform: scale(.88); } 60% { transform: scale(1.06); } 100% { transform: none; } }
.drv-tabbar {
  left: 10px; right: 10px;
  bottom: calc(env(safe-area-inset-bottom) + 10px);
  height: var(--tabbar-h);
  padding: 6px;
  gap: 4px;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, .10);
  border-top: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  background: rgba(17, 17, 18, .88);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .4),
              inset 0 1px 0 rgba(255, 255, 255, .05);
  animation: drvBarIn .45s cubic-bezier(.2, .8, .25, 1) both;
}
.drv-tab {
  border-top: 0;
  border-radius: 16px;
  padding: 0 2px;
  transition: color .2s ease, background-color .25s ease,
              box-shadow .25s ease, transform .2s cubic-bezier(.2, .8, .25, 1);
}
.drv-tab.drv-tab-active {
  background: var(--accent);
  color: var(--emr-text-on-gold);
  border-top-color: transparent;
  transform: none;
  text-shadow: none;
  box-shadow: 0 4px 16px rgba(255, 183, 10, .38);
  animation: drvTabPop .3s cubic-bezier(.2, .9, .3, 1.35);
}
/* Badges must stay legible on the gold pill. */
.drv-tab-active .drv-tab-badge { background: #1A1A1A; color: var(--accent); }
.drv-tab-active .drv-tab-badge--red { background: var(--emr-status-red); color: #fff; }
.drv-tab-active .drv-tab-badge--dot { background: #1A1A1A; }
/* Content + floating surfaces clear the floating bar. */
#drv-main { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 36px); }
.drv-toast-host { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 26px); }
.drv-a2hs { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px); }
.drv-fsv__hint { bottom: calc(env(safe-area-inset-bottom) + 96px); }
/* The required-tasks banner glides in like the rest of the app. */
.drv-tasks-banner { animation: drvViewIn .3s cubic-bezier(.2, .8, .25, 1); }

/* ═══════════════════════════════════════════════════════════════
   LOAD-HISTORY-DOCS-V1 (2026-07-24, driver: "view history … must be
   able to view what was submitted") — each completed load expands
   to the full list of submitted documents (incl. receipts/other
   that match no required slot); every row is tap-to-view.
   ═══════════════════════════════════════════════════════════════ */
.drv-task-row--expandable { cursor: pointer; }
.drv-task-row--expandable:active { background: var(--emr-gold-tint); }
.drv-history-count {
  font-size: 12.5px; font-weight: 700;
  color: var(--accent-hi);
  margin-top: 2px;
}
/* HISTORY-MANIFEST-DETAIL-V1 — the drill-in sheet: one completed load
   presented like the ACTIVE Load view (summary card + stop cards + the
   same renderDocs rows). Slides up over the tab bar; body scrolls. */
.drv-mfst-detail-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9990;
  display: flex; align-items: flex-end; justify-content: center;
  animation: drvFadeIn .16s ease-out;
}
.drv-mfst-detail-sheet {
  width: 100%; max-width: 640px;
  height: 92vh; height: 92dvh;
  display: flex; flex-direction: column;
  background: var(--bg);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  border: 1px solid var(--border); border-bottom: 0;
  box-shadow: 0 -14px 44px rgba(0, 0, 0, .55);
  overflow: hidden;
  animation: drvSheetUp .26s cubic-bezier(.2, .8, .25, 1);
}
.drv-mfst-detail-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: var(--emr-bg-elev);
  border-bottom: 1px solid var(--border);
}
.drv-mfst-detail-title {
  flex: 1 1 auto; min-width: 0;
  font-size: 16px; font-weight: 800; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drv-mfst-detail-close {
  flex: 0 0 auto;
  width: 44px; height: 44px; min-height: 44px;
  padding: 0;
  border-radius: 999px;
  font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.drv-mfst-detail-body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding: 14px 16px calc(env(safe-area-inset-bottom) + 20px);
}
.drv-mfst-summary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, 0) 46%);
}
.drv-mfst-summary .row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; }
.drv-mfst-summary .row .k { color: var(--fg-dim); font-size: 13px; }
.drv-mfst-summary .row .v { font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.drv-mfst-detail-add { width: 100%; margin-bottom: 6px; }
.drv-mfst-detail-stops { list-style: none; padding: 0; margin: 0; }
.drv-mfst-detail-stops .stop { margin-bottom: 10px; }
.drv-mfst-detail-loose { padding: 12px 14px; }

/* DOC-ROW-VIEW-V2 — the clean "View" button on Load-tab doc rows
   (replaces the tiny blue hint; thumbnails never render broken). */
.drv-doc-view-btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 12px;
  font-size: 12.5px; font-weight: 700;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent-hi);
  border-radius: 999px;
}
.drv-doc-view-btn:active { background: var(--emr-gold-tint); }

@media (prefers-reduced-motion: reduce) {
  .drv-tabbar, .drv-tab.drv-tab-active, .drv-tasks-banner { animation: none; }
  .drv-tab { transition: none; }
  .drv-mfst-detail-overlay, .drv-mfst-detail-sheet { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   LOAD-MAP-V1 (2026-07-25, operator: "on top edge to edge show the
   manifest map … show pickup, route, destination … progress bar,
   his ETA") — the live map strip above Current Load. Bleeds to the
   screen edges, glass frame, gold route, pulsing next-stop pin and
   driver dot, progress bar + est. ETA underneath.
   ═══════════════════════════════════════════════════════════════ */
.drv-load-map-wrap {
  position: relative;
  margin: -16px -16px 16px;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-top: 0;
  background: var(--emr-bg-elev);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .5), inset 0 -1px 0 rgba(255, 255, 255, .05);
  animation: drvViewIn .3s cubic-bezier(.2, .8, .25, 1);
}
.drv-load-map {
  height: 205px;
  background: #101114;
}
.drv-load-map .leaflet-container {
  background: #101114;
  font-family: var(--font);
}
.drv-load-map .leaflet-control-attribution {
  background: rgba(13, 13, 13, .55);
  color: #8d929a;
  font-size: 9px;
}
.drv-load-map .leaflet-control-attribution a { color: #a5abb4; }
.drv-load-map__foot {
  display: flex; flex-direction: column; gap: 8px;
  padding: 11px 16px 13px;
  background: linear-gradient(180deg, rgba(19, 19, 20, .92), rgba(16, 16, 17, .98));
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.drv-load-map__route {
  font-size: 13.5px; font-weight: 800;
  color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: .01em;
}
.drv-load-map__bar {
  height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}
.drv-load-map__fill {
  height: 100%; width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  box-shadow: 0 0 12px rgba(255, 183, 10, .55);
  transition: width .7s cubic-bezier(.2, .8, .25, 1);
}
.drv-load-map__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12.5px; font-weight: 700;
  color: var(--emr-text-muted);
}
.drv-load-map__eta { color: var(--accent-hi); font-weight: 800; white-space: nowrap; }
/* Stop pins (Leaflet divIcons — classnames only, no user HTML). */
.drv-map-pin {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: #1A1A1A;
  border: 2px solid #9CA0A6;
  color: #fff; font-size: 11px; font-weight: 800;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.drv-map-pin span { line-height: 1; }
.drv-map-pin--pickup   { border-color: var(--accent); color: var(--accent-hi); }
.drv-map-pin--delivery { border-color: var(--ok); color: #7ee2a8; }
.drv-map-pin--start    { border-color: #8d929a; color: #c9cdd3; }
.drv-map-pin--done     { opacity: .5; }
@keyframes drvPinPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 183, 10, .55); }
  70% { box-shadow: 0 0 0 12px rgba(255, 183, 10, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 183, 10, 0); }
}
.drv-map-pin--next { animation: drvPinPulse 1.8s ease-out infinite; border-width: 2.5px; }
/* Driver dot — blue core, breathing ring. */
.drv-map-me span {
  display: block; width: 14px; height: 14px; margin: 2px;
  border-radius: 999px;
  background: #4da3ff;
  border: 2.5px solid #fff;
  box-shadow: 0 0 10px rgba(77, 163, 255, .8);
}
@keyframes drvMePulse {
  0% { box-shadow: 0 0 0 0 rgba(77, 163, 255, .5); }
  70% { box-shadow: 0 0 0 14px rgba(77, 163, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(77, 163, 255, 0); }
}
.drv-map-me { border-radius: 999px; animation: drvMePulse 2s ease-out infinite; }

/* ═══════════════════════════════════════════════════════════════
   GLASS-STOPS (2026-07-25, operator: "make the empty origin /
   pickup / delivery like glass too with 3d effect") — the floating
   tab bar's glass language on every stop card + the summary card.
   ═══════════════════════════════════════════════════════════════ */
.stop, .drv-mfst-summary {
  background: linear-gradient(158deg, rgba(44, 44, 48, .62), rgba(24, 24, 26, .55));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .09);
  border-top-color: rgba(255, 255, 255, .17);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .42),
              0 2px 6px rgba(0, 0, 0, .3),
              inset 0 1px 0 rgba(255, 255, 255, .08);
}
#manifest-summary {
  background: linear-gradient(158deg, rgba(44, 44, 48, .62), rgba(24, 24, 26, .55));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .09);
  border-top-color: rgba(255, 255, 255, .17);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.stop { transition: transform .15s cubic-bezier(.2, .8, .25, 1), box-shadow .2s ease; }
.stop:active {
  transform: translateY(1px) scale(.995);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTON-SYMMETRY (2026-07-25, operator: "buttons to have symmetry
   throughout so it looks cleaner") — ONE button system: standard
   buttons share radius 12 / ≥46px / weight 700; compact inline
   actions stay round pills. Re-assertions below keep the pills.
   ═══════════════════════════════════════════════════════════════ */
.drv-btn {
  border-radius: 12px;
  min-height: 46px;
  font-weight: 700;
}
.drv-doc-tab-upload, .drv-task-upload, .drv-task-view,
.drv-nav-sheet-btn, .drv-a2hs-entry__btn, .drv-alert-entry__btn,
.drv-a2hs__install { border-radius: 12px; }
.drv-doc-sheet__cancel, .drv-doc-sheet__upload,
.drv-receipt-sheet__submit { min-height: 50px; border-radius: 12px; }
.drv-doc-sheet__capture { min-height: 52px; }
/* Pills stay pills (compact inline actions + chips). */
.drv-doc-view-btn, .drv-history-doc__view { border-radius: 999px; min-height: 36px; }
.drv-doc-typechip { border-radius: 999px; }
.drv-fsv__close, .drv-mfst-detail-close, .drv-doc-pagetile__del { border-radius: 999px; }
.drv-mfst-detail-close { min-height: 44px; }

/* LOGIN-SUCCESS-MORPH — the Login button's green "✓ Welcome!" beat. */
.drv-login-btn--ok {
  background: var(--ok) !important;
  border-color: var(--ok) !important;
  color: #fff !important;
  animation: drvTickPop .35s cubic-bezier(.2, .9, .3, 1.4);
}

@media (prefers-reduced-motion: reduce) {
  .drv-load-map-wrap { animation: none; }
  .drv-load-map__fill { transition: none; }
  .drv-map-pin--next, .drv-map-me { animation: none; }
  .stop { transition: none; }
  .stop:active { transform: none; }
  .drv-login-btn--ok { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Z-LADDER FIX (2026-07-25, driver: "Add document from the history
   drill-in popped UNDER it"): the capture/receipt sheet kept its
   original z-index 100, below the drill-in overlay (9990) — so a
   sheet opened FROM the drill-in was invisible behind it. The whole
   ladder, bottom → top:
     9990 history drill-in · 9995 capture/receipt sheet · 9996 scan
     sheet · 10000 toasts · 10010 full-screen viewer · 10050 crop
     stage. Toasts stay above every sheet; viewer + crop above all.
   ═══════════════════════════════════════════════════════════════ */
.drv-doc-sheet.drv-doc-sheet__backdrop { z-index: 9995; }
.drv-scan-sheet.drv-scan-sheet__backdrop { z-index: 9996; }

/* SCAN-OR-UPLOAD-V2 (2026-07-25, operator: "push one button 'scan or
   upload', it disappears and TWO proper buttons appear — Scan and
   Upload") — both path buttons are full-size, unmistakable buttons:
   Scan = solid gold, Upload = strong gold outline. Overrides the earlier
   quiet-link styling on .drv-doc-sheet__adjust via the paired class. */
.drv-doc-choose .drv-doc-choose__primary {
  align-self: stretch;
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  background: var(--accent);
  border: 1.5px solid var(--accent);
  color: var(--emr-text-on-gold);
  font-size: 15.5px; font-weight: 800;
  border-radius: 12px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(255, 183, 10, .32);
  animation: drvViewIn .18s ease-out;
}
.drv-doc-choose .drv-doc-choose__primary:active { background: var(--emr-gold-hover); border-color: var(--emr-gold-hover); }
.drv-doc-choose .drv-doc-choose__secondary {
  align-self: stretch;
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  background: var(--bg);
  border: 2px solid var(--accent);
  color: var(--fg);
  font-size: 15.5px; font-weight: 800;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  animation: drvViewIn .18s ease-out .05s both;
}
.drv-doc-choose .drv-doc-choose__secondary:active { background: var(--emr-gold-tint); }
@media (prefers-reduced-motion: reduce) {
  .drv-doc-choose .drv-doc-choose__primary,
  .drv-doc-choose .drv-doc-choose__secondary { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ONE-BUTTON-FLOW + SHEET-SYMMETRY (2026-07-24 eve, driver: "one
   button scan-or-upload then choose the path; too many buttons;
   text symmetric, more contrast, cleaner flow") — the capture sheet
   shows ONE primary action; the two paths (+ advanced scan) slide
   open under it. Typography centered/symmetric, brighter ink.
   ═══════════════════════════════════════════════════════════════ */
/* The path chooser — collapsed until the primary button opens it. */
.drv-doc-choose {
  overflow: hidden;
  max-height: 0; opacity: 0;
  display: flex; flex-direction: column; gap: 8px;
  transition: max-height .28s cubic-bezier(.2, .8, .25, 1), opacity .2s ease, margin .2s ease;
  margin: 0;
}
.drv-doc-choose--open { max-height: 240px; opacity: 1; margin: 2px 0 4px; }
.drv-doc-sheet__cam,
.drv-doc-choose .drv-doc-sheet__choose {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font-size: 15px; font-weight: 700;
  background: var(--bg);
  border: 1.5px solid var(--accent);
  color: var(--fg);
  border-radius: 12px;
  text-align: center;
}
.drv-doc-sheet__cam:active,
.drv-doc-choose .drv-doc-sheet__choose:active { background: var(--emr-gold-tint); }
/* Advanced scan — quiet third row inside the SAME chooser. */
.drv-doc-choose .drv-doc-sheet__adjust {
  align-self: center;
  background: transparent; border: none;
  color: var(--emr-text-muted);
  font-size: 13px; font-weight: 600;
  padding: 6px 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 183, 10, .45);
  cursor: pointer;
}
.drv-doc-choose .drv-doc-sheet__adjust:active { color: var(--accent-hi); }

/* Sheet symmetry + contrast: centered title/status/hints, brighter ink,
   even vertical rhythm. */
.drv-doc-sheet__title {
  text-align: center;
  font-size: 16px; font-weight: 800;
  color: var(--fg);
  margin-bottom: 14px;
}
.drv-doc-sheet__status {
  text-align: center;
  font-size: 14px; font-weight: 600;
  color: #DFE2E6;
  min-height: 20px;
}
.drv-doc-sheet__capture-hint {
  text-align: center;
  font-size: 12px;
  color: var(--emr-text-muted);
  opacity: 1;
}
.drv-doc-sheet__label { color: var(--emr-text-muted); }
.drv-doc-typechips { justify-content: center; }
.drv-doc-details-toggle { text-align: center; }
.drv-doc-sheet__capture { border-radius: 12px; }
.drv-doc-sheet__addpage { border-radius: 12px; }
.drv-doc-sheet__panel { padding: 20px 18px calc(env(safe-area-inset-bottom) + 18px); }

@media (prefers-reduced-motion: reduce) {
  .drv-doc-choose { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   FLOAT-3D BUTTONS (2026-07-25, operator: "3d effect for all
   buttons so they look like they float in space") — every .drv-btn
   lifts off the surface: layered drop + ambient shadows, a top
   edge-light, and a physical press-DOWN on tap. Primaries float on
   a gold glow. Disabled buttons sit flat.
   ═══════════════════════════════════════════════════════════════ */
.drv-btn {
  box-shadow: 0 6px 14px rgba(0, 0, 0, .42),
              0 2px 4px rgba(0, 0, 0, .3),
              inset 0 1px 0 rgba(255, 255, 255, .08);
  transform: translateY(-1px);
}
.drv-btn:not([disabled]):active {
  transform: translateY(1px) scale(.97);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35),
              inset 0 1px 0 rgba(255, 255, 255, .04);
}
.drv-btn-primary {
  box-shadow: 0 8px 20px rgba(255, 183, 10, .3),
              0 3px 7px rgba(0, 0, 0, .35),
              inset 0 1px 0 rgba(255, 255, 255, .28);
}
.drv-btn-primary:not([disabled]):active {
  box-shadow: 0 3px 8px rgba(255, 183, 10, .22),
              inset 0 1px 0 rgba(255, 255, 255, .12);
}
.drv-btn[disabled] { box-shadow: none; transform: none; }

/* ═══════════════════════════════════════════════════════════════
   SHEET-FIELDS (2026-07-25, operator: "Category / Manifest / Amount /
   Receipt date / Notes — improve these too") — ONE generic rule for
   every input/select inside either sheet panel, covering the receipt
   fields that previously rendered as unstyled UA defaults. Dark
   surface, roomy 48px touch height, gold focus ring; the date picker
   inherits the dark color-scheme from :root.
   ═══════════════════════════════════════════════════════════════ */
.drv-doc-sheet__panel input:not([type="file"]),
.drv-doc-sheet__panel select {
  width: 100%;
  min-height: 48px;
  background: var(--bg);
  color: var(--fg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 13px;
  font-size: 16px;
  font-family: var(--font);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.drv-doc-sheet__panel input:not([type="file"]):focus,
.drv-doc-sheet__panel select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .25), 0 0 0 3px rgba(255, 183, 10, .22);
}
.drv-doc-sheet__panel select { appearance: none; -webkit-appearance: none; }
.drv-doc-sheet__label { margin-bottom: 2px; }

@media (prefers-reduced-motion: reduce) {
  .drv-btn { transform: none; }
  .drv-btn:not([disabled]):active { transform: none; }
  .drv-doc-sheet__panel input:not([type="file"]),
  .drv-doc-sheet__panel select { transition: none; }
}

/* SHEET-SCROLL (2026-07-25, driver: "submit receipt — the top of the form
   not visible"): the bottom-docked sheet panel had no height cap, so a
   form taller than the phone screen clipped its TOP off-screen with no way
   to reach it. Cap the panel to the visual viewport and let it scroll. */
.drv-doc-sheet__panel {
  max-height: calc(100vh - 20px);
  max-height: calc(100dvh - 20px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}