/* Truck GPS (working title) — design system
   Category standard (Apple Maps / Waze / Trucker Path craft). Independent product;
   visual identity is provisional until the name is chosen. Light by day; night theme for dark cabs. */

:root {
  --font: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --blue: #0069cb;          /* primary — action, route, selection */
  --blue-press: #00569f;
  --blue-text: #005db5;     /* blue as text on light surfaces */
  --blue-tint: #e6f1fb;
  --sky: #06b4ff;           /* accent — puck, highlights */

  --ink: #0f172a;
  --ink-2: #334155;
  --ink-3: #5b6678;
  --surface: #ffffff;
  --surface-2: #f2f4f7;
  --surface-3: #e3e8ee;
  --line: rgba(15, 23, 42, .09);
  --material: rgba(255, 255, 255, .86);
  --scrim: rgba(15, 23, 42, .38);

  --ok: #15803d;   --ok-bg: #dcfce7;
  --warn: #b45309; --warn-bg: #fef3c7;
  --bad: #b91c1c;  --bad-bg: #fee2e2;
  --info: #1d4ed8; --info-bg: #dbeafe;
  --break: #f59e0b;
  --reset: #4f46e5;

  --r-sm: 10px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 14px rgba(15, 23, 42, .08);
  --shadow-2: 0 2px 8px rgba(15, 23, 42, .08), 0 16px 40px rgba(15, 23, 42, .18);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --sheet-visible: 0px;
  color-scheme: light;
}
[data-theme="night"] {
  --blue: #0a76e0;
  --blue-press: #0866c4;
  --blue-text: #5cc6ff;
  --blue-tint: rgba(6, 180, 255, .14);
  --ink: #f1f5f9;
  --ink-2: #cbd5e1;
  --ink-3: #94a3b8;
  --surface: #121821;
  --surface-2: #1b232f;
  --surface-3: #283344;
  --line: rgba(255, 255, 255, .08);
  --material: rgba(18, 24, 33, .88);
  --scrim: rgba(0, 0, 0, .5);
  --ok: #4ade80;   --ok-bg: rgba(74, 222, 128, .14);
  --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, .14);
  --bad: #f87171;  --bad-bg: rgba(248, 113, 113, .14);
  --info: #93c5fd; --info-bg: rgba(147, 197, 253, .14);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--surface-2); color: var(--ink); }
body { font: 450 15px/1.4 var(--font); -webkit-font-smoothing: antialiased; font-feature-settings: 'tnum' 1; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
::selection { background: color-mix(in srgb, var(--sky) 35%, transparent); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--sky) 70%, transparent); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
.ic { flex: none; display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Map ---------- */
#map { position: fixed; inset: 0; background: var(--surface-2); }
.maplibregl-ctrl-attrib { font: 500 10px var(--font) !important; background: var(--material) !important; }
.maplibregl-ctrl-attrib a { color: var(--ink-3) !important; }
.maplibregl-ctrl-bottom-right { bottom: var(--sheet-visible); }
body:has(.sheet.at-max) .maplibregl-ctrl-bottom-right { opacity: 0; pointer-events: none; }
.maplibregl-canvas:focus-visible { outline: none; }

.map-ctl { position: fixed; top: max(12px, calc(env(safe-area-inset-top) + 6px)); right: 12px; z-index: 20; display: grid; gap: 10px; }
.ctl-group { display: grid; background: var(--material); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-radius: var(--r-md); box-shadow: var(--shadow-1); overflow: hidden; }
.ctl-group button { width: 46px; height: 46px; border: 0; background: transparent; display: grid; place-items: center; color: var(--ink-2); }
.ctl-group button + button { border-top: 1px solid var(--line); }
.ctl-group button:active { background: var(--surface-3); }
.ctl-group button[aria-pressed="true"] { color: var(--blue-text); }
.ctl-group .txt { font: 800 13px var(--font); letter-spacing: .02em; }
body.navigating .map-ctl { display: none; }

.popover { position: fixed; top: max(12px, calc(env(safe-area-inset-top) + 6px)); right: 68px; z-index: 30; width: 272px; background: var(--material); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 14px; transform-origin: top right; animation: pop .22s var(--ease-out); }
.popover[hidden] { display: none; }
@keyframes pop { from { opacity: 0; transform: scale(.94); } }
.popover h3 { margin: 2px 4px 8px; font: 700 13px var(--font); color: var(--ink-3); }
.popover .seg { margin: 0 0 16px; position: static; }
.popover .chk { display: flex; align-items: center; gap: 10px; padding: 6px 4px; font: 600 14.5px var(--font); cursor: pointer; }
.popover .chk input { width: 18px; height: 18px; accent-color: var(--blue); margin: 0; }
.popover .chk .badge { width: 26px; height: 26px; }

/* ---------- Sheet / side panel ---------- */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 22;
  background: var(--material); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; will-change: transform; touch-action: none;
}
.sheet-handle { flex: none; height: 22px; display: grid; place-items: center; cursor: grab; touch-action: none; }
.grabber { width: 38px; height: 5px; border-radius: 3px; background: var(--surface-3); }
.sheet.dragging .sheet-handle { cursor: grabbing; }
.sheet-scroll { flex: 1; overflow: hidden; padding: 0 16px calc(20px + env(safe-area-inset-bottom)); overscroll-behavior: contain; touch-action: none; }
.sheet.at-max .sheet-scroll { overflow-y: auto; touch-action: pan-y; }
body.navigating .sheet { display: none; }
.view-enter { animation: viewIn .28s var(--ease-out); }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } }

@media (min-width: 900px) {
  .sheet { left: 16px; top: 16px; bottom: auto; right: auto; width: 392px; max-height: calc(100vh - 32px); border-radius: var(--r-lg); transform: none !important; height: auto !important; touch-action: auto; }
  .sheet-handle { display: none; }
  .sheet-scroll, .sheet.at-max .sheet-scroll { overflow-y: auto; touch-action: auto; padding-top: 16px; }
  .maplibregl-ctrl-bottom-right { bottom: 0; }
}

/* ---------- Typography ---------- */
.t-xl { font: 800 30px/1.08 var(--font); letter-spacing: -.025em; margin: 0; }
.t-l { font: 750 22px/1.18 var(--font); letter-spacing: -.018em; margin: 0; }
.t-m { font: 650 17px/1.3 var(--font); letter-spacing: -.01em; margin: 0; }
.t-s { font: 500 13.5px/1.4 var(--font); color: var(--ink-3); margin: 0; }
h2.sec { font: 700 17px/1.3 var(--font); letter-spacing: -.01em; margin: 24px 2px 6px; }
.sec-row { display: flex; align-items: baseline; justify-content: space-between; }

/* ---------- Search ---------- */
.searchbar { display: flex; gap: 10px; align-items: center; }
.search-pill { flex: 1; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: var(--r-md); background: var(--surface-2); border: 0; color: var(--ink-3); text-align: left; min-width: 0; font: 500 17px var(--font); }
.search-pill input { flex: 1; border: 0; background: transparent; outline: none; font: 500 17px var(--font); color: var(--ink); min-width: 0; height: 100%; padding: 0; }
.search-pill input::placeholder { color: var(--ink-3); }
.search-pill:focus-within { box-shadow: 0 0 0 2px var(--blue) inset; }
.truck-btn { height: 48px; padding: 0 12px; border-radius: var(--r-md); border: 0; background: var(--surface-2); display: flex; align-items: center; gap: 7px; font: 700 13.5px var(--font); color: var(--ink-2); white-space: nowrap; }
.truck-btn .ic { color: var(--blue-text); }
.truck-btn:active, .search-pill:active { background: var(--surface-3); }

/* ---------- Chips ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 14px -16px 0; padding: 0 16px 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 8px; border-radius: var(--r-pill); border: 0; background: var(--surface-2); font: 650 14px var(--font); color: var(--ink); transition: background .15s, transform .1s; }
.chip:active { transform: scale(.97); }
.chip .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.chip .count { font-weight: 700; color: var(--ink-3); }
.chip[aria-pressed="true"] .count { color: inherit; opacity: .7; }

/* ---------- Lists ---------- */
.list { display: grid; }
.row { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 10px 2px; border: 0; background: none; text-align: left; border-bottom: 1px solid var(--line); min-height: 62px; width: 100%; }
.row:last-child { border-bottom: 0; }
.row:active { background: var(--surface-2); }
.row .main { min-width: 0; display: block; }
.row .title, .row .sub { display: block; }
.row .side small { display: block; }
.row .title { font: 650 16px/1.25 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .title .tag { margin-left: 6px; }
.row .sub { font: 500 13.5px/1.35 var(--font); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.row .side { text-align: right; font: 700 15px var(--font); white-space: nowrap; }
.row .side small { display: block; font: 500 12.5px var(--font); color: var(--ink-3); margin-top: 2px; }
.row.dim .badge, .row.dim .title { opacity: .55; }
.badge { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.badge.soft { background: var(--surface-2); color: var(--ink-2); }
.badge.logo { background: #fff; box-shadow: inset 0 0 0 2px var(--brand); }
.badge.logo img { width: 66%; height: 66%; object-fit: contain; }

.tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font: 700 11.5px var(--font); letter-spacing: .01em; white-space: nowrap; vertical-align: middle; }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.bad { background: var(--bad-bg); color: var(--bad); }
.tag.info { background: var(--info-bg); color: var(--info); }
.tag.neutral { background: var(--surface-3); color: var(--ink-2); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 22px; border-radius: var(--r-pill); border: 0; font: 700 17px var(--font); letter-spacing: -.005em; transition: transform .1s, background .15s, opacity .15s; text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--blue); color: #fff; }
.btn.primary:active { background: var(--blue-press); }
.btn.secondary { background: var(--surface-2); color: var(--ink); }
.btn.tinted { background: var(--blue-tint); color: var(--blue-text); }
.btn.danger { background: #dc2626; color: #fff; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface-2); display: grid; place-items: center; color: var(--ink-2); flex: none; }
.icon-btn:active { background: var(--surface-3); }
.text-btn { border: 0; background: none; color: var(--blue-text); font: 650 15px var(--font); padding: 6px 2px; display: inline-flex; align-items: center; gap: 5px; }

.actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-top: 16px; }
.action { display: grid; justify-items: center; gap: 5px; padding: 11px 4px 10px; border-radius: var(--r-md); border: 0; background: var(--surface-2); color: var(--blue-text); font: 650 13px var(--font); text-decoration: none; transition: transform .1s; }
.action.primary { background: var(--blue); color: #fff; }
.action:active { transform: scale(.97); }

/* ---------- Headers ---------- */
.head { display: flex; align-items: flex-start; gap: 12px; }
.head .grow { flex: 1; min-width: 0; }
.head .t-l { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.from-row { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; border: 0; background: none; padding: 0; font: 500 14px var(--font); color: var(--ink-3); max-width: 100%; }
.from-row b { color: var(--blue-text); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Route options ---------- */
.opts { display: flex; gap: 10px; overflow-x: auto; margin: 14px -16px 0; padding: 2px 16px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.opts::-webkit-scrollbar { display: none; }
.opt { flex: 1 0 150px; max-width: 200px; scroll-snap-align: start; text-align: left; border: 0; border-radius: var(--r-md); background: var(--surface-2); padding: 12px 14px; transition: box-shadow .15s, background .15s; }
.opt[aria-pressed="true"] { background: var(--blue-tint); box-shadow: 0 0 0 2px var(--blue) inset; }
.opt .t { font: 800 21px/1.1 var(--font); letter-spacing: -.02em; }
.opt .m { font: 600 13.5px var(--font); color: var(--ink-3); margin-top: 5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ---------- HOS signature card ---------- */
.hos-card { margin-top: 12px; border-radius: var(--r-md); background: var(--surface-2); padding: 14px; border: 0; width: 100%; text-align: left; display: block; }
.hos-card .lbl { display: flex; align-items: center; gap: 6px; font: 650 13px var(--font); color: var(--ok); }
.hos-card .lbl.warn { color: var(--warn); }
.hos-card .arrive { font: 800 27px/1.1 var(--font); letter-spacing: -.022em; margin-top: 4px; }
.hos-card .why { font: 550 14px/1.4 var(--font); color: var(--ink-2); margin-top: 3px; }
.hos-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; margin-top: 12px; gap: 2px; }
.hos-bar span { display: block; height: 100%; min-width: 3px; }
.hos-bar .d { background: var(--blue); }
.hos-bar .b { background: var(--break); }
.hos-bar .r { background: var(--reset); }
.hos-bar .x { background: #a855f7; }
.hos-legend { display: flex; gap: 14px; margin-top: 8px; font: 600 12px var(--font); color: var(--ink-3); flex-wrap: wrap; }
.hos-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }

.go-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 14px; }

/* ---------- Segmented control ---------- */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface-2); border-radius: 11px; padding: 3px; margin-top: 22px; }
.seg button { height: 34px; border: 0; background: transparent; border-radius: 8px; font: 650 14px var(--font); color: var(--ink-2); transition: background .18s, color .18s, box-shadow .18s; }
.seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .14); }
[data-theme="night"] .seg button[aria-selected="true"] { background: var(--surface-3); }

/* ---------- Banners ---------- */
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: var(--r-md); margin-top: 12px; font: 550 13.5px/1.4 var(--font); }
.banner.warn { background: var(--warn-bg); color: var(--warn); }
.banner.bad { background: var(--bad-bg); color: var(--bad); }
.banner.info { background: var(--info-bg); color: var(--info); }
.banner b { display: block; font-weight: 750; }
.banner .t { color: var(--ink-2); }

/* ---------- Timeline (HOS) ---------- */
.tl { position: relative; margin: 12px 0 4px; padding: 0; list-style: none; }
.tl::before { content: ""; position: absolute; left: 15px; top: 18px; bottom: 18px; width: 2px; background: var(--surface-3); }
.tl li { position: relative; display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; padding: 9px 0; align-items: start; }
.tl .node { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--ink-3); position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--surface); }
.tl .k-break .node { background: var(--break); }
.tl .k-reset .node { background: var(--reset); }
.tl .k-restart .node { background: #a855f7; }
.tl .k-arrive .node { background: var(--ok); }
.tl .k-depart .node { background: var(--ink-2); }
.tl .what { font: 650 15.5px/1.3 var(--font); }
.tl .where { font: 500 13.5px/1.4 var(--font); color: var(--ink-3); margin-top: 2px; }
.tl .where button { border: 0; background: none; padding: 0; color: var(--blue-text); font: inherit; font-weight: 650; text-align: left; }
.tl .when { font: 700 14px var(--font); text-align: right; white-space: nowrap; }
.tl .when small { display: block; font: 500 12px var(--font); color: var(--ink-3); }

/* ---------- Grouped forms ---------- */
.group { background: var(--surface-2); border-radius: var(--r-md); overflow: hidden; margin-top: 8px; }
.field { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 7px 14px; border-bottom: 1px solid var(--line); }
.field:last-child { border-bottom: 0; }
.field > label, .field > .lab { flex: 1; font: 550 16px var(--font); }
.field small { display: block; font: 500 12.5px var(--font); color: var(--ink-3); margin-top: 1px; }
.field input.box { width: 96px; height: 40px; border: 0; border-radius: 10px; background: var(--surface); padding: 0 10px; text-align: right; font: 650 16px var(--font); font-variant-numeric: tabular-nums; }
.field input.box.dt { width: auto; text-align: left; font-size: 15px; }
.field input.box.wide { width: 100%; text-align: left; font-weight: 500; font-size: 14px; }
[data-theme="night"] .field input.box { background: var(--surface-3); }
.field input.box:focus { outline: 2px solid var(--blue); }
.unit { font: 600 14px var(--font); color: var(--ink-3); }
.ftin { display: flex; align-items: center; gap: 6px; }
.ftin input.box { width: 56px; }
.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 16px; background: var(--surface-3); transition: background .2s; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .22s var(--ease-out); }
.switch input:checked + span { background: #34c759; }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--sky) 70%, transparent); outline-offset: 2px; }
.stepper { display: flex; align-items: center; background: var(--surface); border-radius: 10px; }
[data-theme="night"] .stepper { background: var(--surface-3); }
.stepper button { width: 40px; height: 40px; border: 0; background: none; display: grid; place-items: center; color: var(--ink-2); }
.stepper output { min-width: 26px; text-align: center; font: 700 16px var(--font); }
.note { font: 500 12.5px/1.5 var(--font); color: var(--ink-3); margin: 10px 4px 0; }

/* ---------- Modal sheet ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; align-items: end; }
.modal[hidden] { display: none; }
.modal .scrim { position: absolute; inset: 0; background: var(--scrim); animation: fade .2s; }
.modal .dialog:focus { outline: none; }
.modal .dialog { position: relative; background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92vh; overflow-y: auto; padding: 4px 16px calc(20px + env(safe-area-inset-bottom)); animation: rise .34s var(--ease-out); box-shadow: var(--shadow-2); overscroll-behavior: contain; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 8px; position: sticky; top: 0; background: var(--surface); z-index: 1; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(48px); opacity: .3; } }
@media (min-width: 900px) {
  .modal { place-items: center; }
  .modal .dialog { width: 440px; border-radius: var(--r-lg); max-height: 86vh; }
}

/* ---------- Place detail ---------- */
.amen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.amen span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--r-pill); background: var(--surface-2); font: 600 13.5px var(--font); color: var(--ink-2); }
.report { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.report button { height: 50px; border-radius: var(--r-md); border: 0; background: var(--surface-2); font: 700 15px var(--font); color: var(--ink); transition: transform .1s; }
.report button:active { transform: scale(.97); }
.report button[aria-pressed="true"].ok { background: var(--ok-bg); color: var(--ok); box-shadow: 0 0 0 2px var(--ok) inset; }
.report button[aria-pressed="true"].warn { background: var(--warn-bg); color: var(--warn); box-shadow: 0 0 0 2px var(--warn) inset; }
.report button[aria-pressed="true"].bad { background: var(--bad-bg); color: var(--bad); box-shadow: 0 0 0 2px var(--bad) inset; }
.report button[aria-pressed="true"].info { background: var(--info-bg); color: var(--info); box-shadow: 0 0 0 2px var(--info) inset; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 10px 2px 0; font: 500 14.5px var(--font); }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; }

/* ---------- Empty & loading ---------- */
.empty { text-align: center; padding: 28px 12px; color: var(--ink-3); font: 500 14.5px/1.5 var(--font); }
.empty .ic { margin: 0 auto 10px; }
.empty b { display: block; color: var(--ink); font-weight: 700; font-size: 16px; margin-bottom: 2px; }
.skeleton { height: 62px; border-radius: var(--r-md); background: linear-gradient(90deg, var(--surface-2) 20%, var(--surface-3) 50%, var(--surface-2) 80%); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; margin-top: 10px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

/* ---------- Map markers ---------- */
.puck { width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, .35); display: grid; place-items: center; }
.puck::after { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--sky); }
.puck.nav { width: 46px; height: 46px; background: none; box-shadow: none; }
.puck.nav::after { display: none; }
.pin-end { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); border: 5px solid #fff; box-shadow: var(--shadow-1); }
[data-theme="night"] .pin-end { background: #fff; border-color: #0f172a; }
.pin-start { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 5px solid #0f172a; box-shadow: var(--shadow-1); }
.hos-pin { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-1); font: 750 12.5px var(--font); color: var(--ink); white-space: nowrap; cursor: pointer; border: 0; }
.hos-pin i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; }

/* ---------- Navigation ---------- */
#nav[hidden] { display: none; }
.nb { position: fixed; top: max(10px, calc(env(safe-area-inset-top) + 6px)); left: 10px; right: 10px; z-index: 30; max-width: 520px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2); }
.nb-main { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; background: #0b4f96; color: #fff; }
.nb-ic { width: 58px; height: 58px; display: grid; place-items: center; flex: none; }
.nb-dist { font: 800 36px/1 var(--font); letter-spacing: -.025em; }
.nb-street { font: 650 19px/1.25 var(--font); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nb-then { display: flex; align-items: center; gap: 8px; padding: 8px 18px; background: #083c73; color: #dbeafe; font: 650 14.5px var(--font); }
.nb-then[hidden] { display: none; }
@media (min-width: 900px) { .nb { left: 16px; right: auto; width: 440px; } }

.ahead { position: fixed; left: 10px; bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 25; display: grid; gap: 6px; width: min(340px, calc(100vw - 96px)); }
.ahead button { width: 100%; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 0; border-radius: var(--r-pill); background: var(--material); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: var(--shadow-1); font: 650 14px var(--font); color: var(--ink); text-align: left; }
body.navigating .maplibregl-ctrl-bottom-right { bottom: calc(84px + env(safe-area-inset-bottom)); opacity: .7; }
.ahead .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ahead b { font-weight: 800; white-space: nowrap; }
.ahead .badge { width: 32px; height: 32px; }

.speed { position: fixed; right: 12px; bottom: calc(174px + env(safe-area-inset-bottom)); z-index: 25; width: 66px; height: 66px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1); display: grid; place-content: center; text-align: center; border: 3px solid var(--surface-3); }
.speed b { font: 800 25px/1 var(--font); }
.speed span { font: 700 10px var(--font); color: var(--ink-3); letter-spacing: .05em; }
.fab { position: fixed; right: 12px; z-index: 25; width: 58px; height: 58px; border-radius: 50%; border: 0; display: grid; place-items: center; box-shadow: var(--shadow-2); }
.fab.report-btn { bottom: calc(100px + env(safe-area-inset-bottom)); background: var(--blue); color: #fff; }
/* Speed limit: a US sign above the speed bubble (truck-only limits read TRUCKS); the bubble turns red at 5+ mph over */
.limit-sign { position: fixed; right: 19px; bottom: calc(250px + env(safe-area-inset-bottom)); z-index: 25; width: 52px; height: 64px;
  border-radius: 9px; background: #fff; color: #111; border: 2.5px solid #111; box-shadow: 0 0 0 2px #fff, var(--shadow-1);
  display: grid; align-content: center; justify-items: center; gap: 3px; text-align: center; }
.limit-sign[hidden] { display: none; }
.limit-sign small { font: 800 8.5px/1.05 var(--font); letter-spacing: .04em; }
.limit-sign.truck small { font-size: 9.5px; letter-spacing: .06em; }
.limit-sign.work small { align-self: stretch; margin: -2px 3px 0; padding: 2px 0; border-radius: 3px; background: #f97316; color: #111; }
.limit-sign b { font: 800 25px/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
[data-theme="night"] .limit-sign { filter: brightness(.9); }
.speed { transition: background-color .2s ease, color .2s ease; }
.speed.over { background: var(--ring-bad); color: #fff; }
.speed.over span { color: rgba(255, 255, 255, .85); }
.recenter { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 26; box-shadow: var(--shadow-2); }
.recenter[hidden] { display: none; }

.nbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); box-shadow: var(--shadow-2); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; }
.nbar .eta { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; justify-content: start; gap: 0 18px; }
.nbar .eta div { display: grid; }
.nbar .eta b { font: 800 21px/1.15 var(--font); letter-spacing: -.02em; white-space: nowrap; }
.nbar .eta b.arr { color: var(--ok); }
.nbar .eta span { font: 600 12px var(--font); color: var(--ink-3); }
@media (max-width: 420px) { .nbar .eta div:nth-child(3) { display: none; } }
.nbar .btn { height: 48px; padding: 0 18px; }
@media (min-width: 900px) { .nbar { left: 16px; right: auto; bottom: 16px; width: 520px; border-radius: var(--r-lg); } .ahead { bottom: 112px; left: 16px; } .fab.report-btn, .speed { right: 16px; } .limit-sign { right: 23px; } }


/* ---------- Brand badges ---------- */
.badge.sq { border-radius: 30%; }
.badge.mono b { font: 850 15px/1 var(--font); letter-spacing: -.02em; }
.badge.mono.m3 b { font-size: 11.5px; letter-spacing: -.03em; }
.chips .chip .badge, .tile .badge { width: 34px; height: 34px; }

/* ---------- Filter entry points ---------- */
.filter-chip { padding: 0 14px 0 12px; background: var(--blue-tint); color: var(--blue-text); }
.filter-chip .fcount { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--blue); color: #fff; font: 800 12px/20px var(--font); text-align: center; }
.on-chip { background: var(--ink); color: var(--surface); padding: 0 10px 0 12px; }
.help-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; border-radius: var(--r-md); background: var(--surface-2); padding: 12px 14px; color: var(--ink); font: 650 15px/1.3 var(--font); margin-top: 8px; }
.help-row > .ic:first-child { color: var(--blue-text); }
.help-row span { flex: 1; min-width: 0; }
.help-row small { display: block; font: 500 13px/1.35 var(--font); color: var(--ink-3); margin-top: 2px; }
.help-row:active { background: var(--surface-3); }
.wim-h { display: flex; align-items: center; gap: 7px; }
.wim-h .ic { color: #be185d; }
[data-theme="night"] .wim-h .ic { color: #f472b6; }

/* ---------- Filters dialog ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile { position: relative; display: grid; justify-items: center; align-content: start; gap: 7px; min-height: 96px; padding: 12px 6px 10px; border: 0; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink); font: 650 13px/1.25 var(--font); text-align: center; transition: background .15s, box-shadow .15s, transform .1s; }
.tile small { font: 500 10.5px/1.2 var(--font); color: var(--ink-3); margin-top: -3px; }
.tile:active { transform: scale(.97); }
.tile[aria-pressed="true"] { background: var(--blue-tint); box-shadow: 0 0 0 2px var(--blue) inset; }
.tile .tick { position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .2s var(--ease-out); }
.tile[aria-pressed="true"] .tick { opacity: 1; transform: none; }
.tile[aria-pressed="false"] .badge { filter: saturate(.85); }
.achips { display: flex; flex-wrap: wrap; gap: 8px; }
.achip { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 11px; border-radius: var(--r-pill); border: 0; background: var(--surface-2); color: var(--ink); font: 650 14px var(--font); transition: background .15s, color .15s, transform .1s; }
.achip .ic { color: var(--ink-3); }
.achip:active { transform: scale(.97); }
.achip[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.achip[aria-pressed="true"] .ic { color: inherit; }
.dialog-foot { position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom)); margin: 20px -16px calc(-20px - env(safe-area-inset-bottom)); padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, color-mix(in srgb, var(--surface) 0%, transparent), var(--surface) 30%); }
.dialog-head .text-btn { padding: 8px 4px; }

/* ---------- Amenity states ---------- */
.amen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.am { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.am-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--surface); color: var(--ink-2); }
[data-theme="night"] .am-ic { background: var(--surface-3); }
.am-t { font: 650 13.5px/1.25 var(--font); min-width: 0; }
.am-t small { display: block; font: 600 12px/1.3 var(--font); color: var(--ink-3); margin-top: 1px; }
.am.yes .am-ic, .am.reported .am-ic { background: var(--ok-bg); color: var(--ok); }
.am.yes small, .am.reported small { color: var(--ok); }
.am.usually .am-ic { background: var(--info-bg); color: var(--info); }
.am.no { opacity: .6; }
.am.no .am-t { text-decoration: line-through; text-decoration-color: var(--ink-3); }
.tri { display: inline-grid; grid-auto-flow: column; background: var(--surface); border-radius: 10px; padding: 3px; gap: 2px; flex: none; }
[data-theme="night"] .tri { background: var(--surface-3); }
.tri button { min-width: 44px; height: 34px; border: 0; border-radius: 8px; background: none; font: 700 13.5px var(--font); color: var(--ink-3); }
.tri button[aria-checked="true"][data-v="true"] { background: var(--ok); color: #fff; }
.tri button[aria-checked="true"][data-v="false"] { background: var(--bad); color: #fff; }
.tri button[aria-checked="true"][data-v="null"] { background: var(--surface-3); color: var(--ink); }
[data-theme="night"] .tri button[aria-checked="true"][data-v="null"] { background: var(--surface-2); }
.field .lab small { font-weight: 500; }

/* ---------- Diesel prices ---------- */
.price-card { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 14px; border: 0; border-radius: var(--r-md); background: var(--surface-2); text-align: left; color: var(--ink); }
.pc-l { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pc-k { display: flex; align-items: center; gap: 6px; font: 650 13px var(--font); color: var(--ink-3); }
.pc-v { display: flex; align-items: baseline; gap: 4px; font: 800 28px/1.1 var(--font); letter-spacing: -.02em; }
.pc-v small { font: 650 14px var(--font); color: var(--ink-3); letter-spacing: 0; }
.pc-s { font: 500 12.5px/1.35 var(--font); color: var(--ink-3); }
.pc-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: var(--r-pill); background: var(--blue-tint); color: var(--blue-text); font: 700 14px var(--font); white-space: nowrap; }
.trend { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; font: 700 12.5px var(--font); letter-spacing: 0; align-self: center; }
.trend.up { color: var(--bad); }
.trend.down { color: var(--ok); }
.fuel-card { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 8px; padding: 12px 14px; border: 0; border-radius: var(--r-md); background: var(--surface-2); text-align: left; color: var(--ink); }
.fuel-card > .ic:first-child { color: var(--ink-2); }
.fuel-card span { flex: 1; min-width: 0; }
.fuel-card b { display: block; font: 750 16px var(--font); }
.fuel-card small { display: block; font: 500 13px var(--font); color: var(--ink-3); margin-top: 1px; }
.toll-card > .ic:first-child { color: #0f766e; }
.hours-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); }
.hours-card > .ic { color: var(--ink-2); margin-top: 2px; flex: none; }
.hours-card b { display: block; font: 700 15px var(--font); font-variant-numeric: tabular-nums; }
.hours-card small { display: block; font: 500 13px var(--font); color: var(--ink-3); margin-top: 2px; }
.hours-card.unknown { outline: 1.5px dashed var(--line); outline-offset: -1.5px; background: transparent; }
.hours-card.unknown b { color: var(--ink-2); }
/* ---- tools ---- */
.pf input.box { width: 100%; height: 44px; border: 0; border-radius: 10px; background: var(--surface); padding: 0 12px; font: 500 16px var(--font); color: var(--ink); }
.pf input.box:focus, .field select.box:focus, .field textarea.box:focus { outline: 2px solid var(--blue); }
.field select.box, .field textarea.box { border: 0; border-radius: 10px; background: var(--surface); padding: 0 10px; height: 40px; font: 600 15px var(--font); color: var(--ink); }
.field textarea.box { height: auto; padding: 10px 12px; width: 100%; font-weight: 500; }
.form .field input.box:not([type=number]) { width: 170px; text-align: left; font-weight: 500; font-size: 15px; }
.form .field input.box[type=date], .form .field input.box[type=datetime-local] { width: auto; min-width: 150px; }
.form .field textarea { min-height: 64px; resize: vertical; font: inherit; padding: 10px 12px; }
.form .field.col { flex-direction: column; align-items: stretch; gap: 8px; }
.form select.box { min-width: 120px; }
.money-in { display: inline-flex; align-items: center; gap: 6px; font: 600 16px var(--font); color: var(--ink-2); }
.money-in .box { width: 110px; }
.pf { padding: 12px 14px; border-bottom: 1px solid var(--line); position: relative; }
.pf label { display: block; font: 600 13px var(--font); color: var(--ink-3); margin-bottom: 6px; }
.pf-list { position: absolute; left: 10px; right: 10px; top: calc(100% - 4px); z-index: 5; background: var(--surface); border-radius: 14px; box-shadow: 0 12px 32px rgba(15, 23, 42, .22); overflow: hidden; }
.pf-list button { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 48px; padding: 8px 14px; border: 0; background: none; text-align: left; font: 500 15px var(--font); color: var(--ink); border-top: 1px solid var(--line); }
.pf-list button:first-child { border-top: 0; }
.pf-list button:hover, .pf-list button:focus-visible { background: var(--surface-2); }
details.more { margin-top: 10px; }
details.more summary { cursor: pointer; font: 650 15px var(--font); color: var(--blue); padding: 10px 2px; list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: ' ›'; }
details.more[open] summary::after { content: ' ⌄'; }
.lc-verdict { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-md); }
.lc-verdict b { display: block; font: 800 20px var(--font); }
.lc-verdict span { font: 600 15px var(--font); }
.lc-verdict.ok { background: #dcfce7; color: #14532d; }
.lc-verdict.warn { background: #fef3c7; color: #78350f; }
.lc-verdict.bad { background: #fee2e2; color: #7f1d1d; }
[data-theme="night"] .lc-verdict.ok { background: #14532d; color: #dcfce7; }
[data-theme="night"] .lc-verdict.warn { background: #78350f; color: #fef3c7; }
[data-theme="night"] .lc-verdict.bad { background: #7f1d1d; color: #fee2e2; }
.lc-sheet { margin-top: 10px; border-radius: var(--r-md); background: var(--surface-2); padding: 4px 14px; }
.lc-line { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font: 600 15px var(--font); color: var(--ink); }
.lc-line:first-child { border-top: 0; }
.lc-line small { display: block; font: 500 12.5px var(--font); color: var(--ink-3); margin-top: 2px; }
.lc-line b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-line.total { border-top: 2px solid var(--ink); font: 800 17px var(--font); }
.lc-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.lc-facts > div { background: var(--surface-2); border-radius: 12px; padding: 10px 8px; text-align: center; }
.lc-facts b { display: block; font: 800 17px var(--font); font-variant-numeric: tabular-nums; }
.lc-facts span { font: 500 12px var(--font); color: var(--ink-3); }
.pos { color: #15803d; } .neg { color: #b91c1c; }
[data-theme="night"] .pos { color: #4ade80; } [data-theme="night"] .neg { color: #f87171; }
.side.pos, .side.neg { font-weight: 750; }
.qswitch { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qswitch b { font: 750 16px var(--font); }
.tbl-wrap { overflow-x: auto; margin-top: 12px; }
.tbl { width: 100%; border-collapse: collapse; font: 500 14px var(--font); font-variant-numeric: tabular-nums; }
.tbl th { text-align: right; font: 650 12px var(--font); color: var(--ink-3); padding: 6px 6px; border-bottom: 2px solid var(--line); }
.tbl td { text-align: right; padding: 8px 6px; border-bottom: 1px solid var(--line); color: var(--ink); }
.tbl th:first-child, .tbl td:first-child { text-align: left; font-weight: 700; }
.tbl tfoot td { font-weight: 800; border-top: 2px solid var(--ink); border-bottom: 0; }
.rthumb { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; background: var(--surface-2); }
.rphoto { display: block; width: 100%; max-height: 220px; object-fit: contain; border-radius: var(--r-md); background: var(--surface-2); margin-bottom: 10px; }
.ocr { display: flex; gap: 8px; align-items: center; margin: 0 2px 10px; }
.ocr.ok { color: #15803d; } .ocr.warn { color: #b45309; }
.timer-chip { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 10px 14px; border: 0; border-radius: var(--r-md); background: #fff7ed; color: #9a3412; text-align: left; font: 500 14px var(--font); }
.timer-chip span { flex: 1; min-width: 0; }
.timer-chip b { font: 800 16px var(--font); font-variant-numeric: tabular-nums; }
.timer-chip.bill { background: #dcfce7; color: #14532d; }
[data-theme="night"] .timer-chip { background: #431407; color: #fed7aa; }
[data-theme="night"] .timer-chip.bill { background: #14532d; color: #dcfce7; }
.det-big { text-align: center; padding: 18px; border-radius: var(--r-md); background: var(--surface-2); margin-bottom: 12px; }
.det-big b { display: block; font: 800 44px var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.det-big span { font: 600 15px var(--font); color: var(--ink-2); }
.det-big.bill b { color: #15803d; }
.fac-card { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 8px; padding: 12px 14px; border: 0; border-radius: var(--r-md); background: var(--surface-2); text-align: left; color: var(--ink); }
.fac-card > .ic:first-child { color: var(--ink-2); }
.fac-card span { flex: 1; min-width: 0; }
.fac-card b { display: block; font: 700 15px var(--font); }
.fac-card small { display: block; font: 500 13px var(--font); color: var(--ink-3); margin-top: 1px; }
.nb-sign { margin-top: 8px; font: 700 15px var(--font); color: #fde68a; }
.nb-lanes { display: flex; gap: 4px; margin-top: 10px; }
.nb-lanes span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .38); }
.nb-lanes span.on { background: rgba(255, 255, 255, .95); color: #0f172a; }
.nav-offer { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 16px; background: var(--surface); }
.nav-offer .no-txt { flex: 1; min-width: 0; }
.nav-offer[hidden], .nb-lanes[hidden], .nb-sign[hidden], .pf-list[hidden] { display: none; }
.nav-offer b { display: block; font: 750 16px var(--font); color: var(--ink); }
.nav-offer span { display: block; font: 500 13px var(--font); color: var(--ink-3); }
.nav-offer .btn { height: 44px; padding: 0 14px; font-size: 15px; }
.daypick { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.daypick button { height: 44px; border: 0; border-radius: 12px; background: var(--surface-2); font: 700 15px var(--font); color: var(--ink-2); }
.daypick button[aria-pressed="true"] { background: var(--blue); color: #fff; }
input[type="time"].box { width: 140px; padding: 0 8px; }
.fuel-big { display: grid; gap: 2px; padding: 4px 2px 0; }
.fuel-big b { font: 800 34px/1.1 var(--font); letter-spacing: -.025em; }
.fuel-big span { font: 500 14px var(--font); color: var(--ink-3); }
.price-input { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 18px; padding: 18px; border-radius: var(--r-md); background: var(--surface-2); font: 800 40px var(--font); }
.price-input input { width: 5.2ch; border: 0; background: none; outline: none; font: 800 44px var(--font); letter-spacing: -.02em; text-align: center; color: var(--ink); padding: 0; }
.price-input .u { font: 650 16px var(--font); color: var(--ink-3); }
.price-input:focus-within { box-shadow: 0 0 0 2px var(--blue) inset; }


/* ---------- Multi-stop trip editor ---------- */
:root { --stop: #64748b; }
.trip { position: relative; margin-top: 12px; border-radius: var(--r-md); background: var(--surface-2); padding: 4px 0; }
.trip::before { content: ""; position: absolute; left: 25px; top: 26px; bottom: 26px; border-left: 2px dotted var(--ink-3); opacity: .5; }
.tp { position: relative; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 6px 12px 6px 16px; border: 0; background: none; width: 100%; text-align: left; color: var(--ink); font: inherit; }
.tp[role=button] { cursor: pointer; }
.tp[role=button]:active, .tp.add:active { background: var(--surface-3); }
.tp + .tp { border-top: 1px solid var(--line); }
.tp > .ic:last-child { color: var(--ink-3); }
.tp-l { flex: 1; min-width: 0; font: 650 15.5px/1.25 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-l small { display: block; font: 600 11.5px var(--font); color: var(--ink-3); letter-spacing: .02em; text-transform: uppercase; margin-bottom: 1px; }
.tdot { position: relative; z-index: 1; flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 800 11px var(--font); font-style: normal; }
.tdot.start { background: var(--surface); border: 5px solid var(--ink); }
.tdot.end { background: var(--ink); border: 5px solid var(--surface); box-shadow: 0 0 0 1.5px var(--ink); }
.tdot.num { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 2px var(--ink) inset; }
.tdot.plus { background: var(--blue); color: #fff; }
.tp.add .tp-l { color: var(--blue-text); }
.dwell { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: var(--r-pill); border: 0; background: var(--surface); color: var(--ink-2); font: 700 12.5px var(--font); white-space: nowrap; }
[data-theme="night"] .dwell { background: var(--surface-3); }
.icon-btn.sm { width: 30px; height: 30px; background: transparent; }
.pin-via { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #0f172a; border: 3px solid #0f172a; display: grid; place-items: center; font: 800 12px var(--font); box-shadow: var(--shadow-1); }
.hos-bar .s { background: var(--stop); }
.tl .k-stop .node { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 2px var(--ink) inset, 0 0 0 5px var(--surface); font: 800 13px var(--font); }
.field-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; font: 600 15px var(--font); }
.field-inline .seg { width: 220px; }

/* ---------- Toast ---------- */
#toast { position: fixed; left: 50%; top: max(14px, calc(env(safe-area-inset-top) + 6px)); z-index: 60; transform: translate(-50%, -20px); opacity: 0; pointer-events: none; transition: transform .35s var(--ease-out), opacity .2s; background: var(--ink); color: var(--surface); padding: 11px 18px; border-radius: var(--r-pill); font: 650 14px var(--font); box-shadow: var(--shadow-2); max-width: calc(100vw - 32px); text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .sheet, .ctl-group, .popover, .ahead button { background: var(--surface); backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --line: rgba(15, 23, 42, .3); --ink-3: #334155; }
}

/* ================= App shell: tabs, pages, profile, onboarding ================= */
:root { --tabs-h: calc(64px + env(safe-area-inset-bottom)); }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; grid-template-columns: repeat(3, 1fr);
  height: var(--tabs-h); padding-bottom: env(safe-area-inset-bottom); background: var(--material);
  backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border-top: 1px solid var(--line); }
body.has-tabs .tabs { display: grid; }
body.has-tabs .sheet { bottom: var(--tabs-h); }
body.has-tabs .maplibregl-ctrl-bottom-right { bottom: calc(var(--sheet-visible) + var(--tabs-h)); }
.tabs button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font: 650 11.5px var(--font); color: var(--ink-3); -webkit-tap-highlight-color: transparent; }
.tabs button[aria-current="page"] { color: var(--blue-text); }
.tabs button:active .ic { transform: scale(.9); }
.tabs .ic { transition: transform .1s; }
body.page-open .sheet, body.page-open .map-ctl { visibility: hidden; }
.page { position: fixed; inset: 0 0 var(--tabs-h) 0; z-index: 25; overflow-y: auto; background: var(--surface); overscroll-behavior: contain;
  padding: max(16px, calc(env(safe-area-inset-top) + 6px)) 16px 28px; }
.page[hidden] { display: none; }
.page-in { max-width: 560px; margin: 0 auto; animation: viewIn .28s var(--ease-out); }
.page-head { margin: 8px 2px 4px; }
.page-head .t-s { margin-top: 4px; }
@media (min-width: 900px) {
  .tabs { left: 16px; right: auto; bottom: 16px; width: 392px; height: 64px; padding: 0; border-radius: var(--r-lg); border: 0; box-shadow: var(--shadow-2); }
  body.has-tabs .sheet { bottom: auto; max-height: calc(100vh - 32px - 76px); }
  body.has-tabs .maplibregl-ctrl-bottom-right { bottom: 0; }
  .page { left: 16px; top: 16px; right: auto; bottom: 92px; width: 392px; border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 16px; }
  body.page-open .map-ctl { visibility: visible; }
}

/* home teaser */
.tools-teaser { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 18px; padding: 12px 14px; border: 0; border-radius: var(--r-md); background: var(--surface-2); text-align: left; color: var(--ink); }
.tools-teaser .tt-icons { display: flex; }
.tools-teaser .tt-icons span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 2px solid var(--surface-2); margin-left: -8px; }
.tools-teaser .tt-icons span:first-child { margin-left: 0; }
.tools-teaser b { display: block; font: 700 15px var(--font); }
.tools-teaser small { font: 500 13px var(--font); color: var(--ink-3); }
.grow { flex: 1; min-width: 0; }
.icon-btn { position: relative; }
.icon-btn .fcount { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--blue); color: #fff; font: 700 11px/18px var(--font); }

/* tools page */
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tool-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 128px; padding: 14px; border: 0; border-radius: var(--r-md);
  background: var(--surface-2); text-align: left; color: var(--ink); transition: transform .1s; }
.tool-tile:active { transform: scale(.98); background: var(--surface-3); }
.tool-tile.wide { grid-column: 1 / -1; min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.tool-tile.wide .tt-t { flex: 1; }
.tool-tile.wide .tt-s { flex-basis: 100%; padding-left: 54px; margin-top: -6px; }
.tt-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; margin-bottom: 6px; }
.tool-tile.wide .tt-ic { margin: 0; }
.tt-t { font: 700 16px/1.25 var(--font); }
.tt-s { font: 500 13px/1.35 var(--font); color: var(--ink-3); }
.live-card { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 14px; border: 0; border-radius: var(--r-md); background: #fff7ed; color: #9a3412; text-align: left; }
.live-card span { flex: 1; } .live-card b { display: block; font: 750 16px var(--font); } .live-card small { font: 500 13px var(--font); }
[data-theme="night"] .live-card { background: #431407; color: #fed7aa; }

/* profile */
.avatar { display: grid; place-items: center; flex: none; border-radius: 50%; background: linear-gradient(135deg, #0069cb, #06b4ff); color: #fff;
  font-weight: 800; letter-spacing: -.02em; box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--ring, #64748b); }
.prof-head { display: flex; gap: 18px; align-items: center; margin: 14px 2px 18px; }
.prof-head .t-s { margin-top: 3px; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tier-badge { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 13px; font: 700 12.5px var(--font);
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.tier-badge.founding { --c: #b45309; }
[data-theme="night"] .tier-badge { color: color-mix(in srgb, var(--c) 55%, white); }
.tier-card { border-radius: var(--r-md); padding: 16px; background: var(--surface-2); }
.tc-top { display: flex; justify-content: space-between; align-items: baseline; font: 600 14px var(--font); color: var(--ink-3); }
.tc-top b { font: 800 28px var(--font); color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tier-card .bar { height: 10px; border-radius: 5px; background: var(--surface-3); margin: 12px 0 10px; overflow: hidden; }
.tier-card .bar i { display: block; height: 100%; border-radius: 5px; background: var(--c); transition: width .6s var(--ease-out); }
.tc-tiers { display: flex; justify-content: space-between; font: 650 11px var(--font); color: var(--ink-3); }
.tc-tiers .on { color: var(--c); }
.streak-card { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 14px; border-radius: var(--r-md); background: var(--surface-2); }
.streak-card .flame { color: #ea580c; display: grid; }
.streak-card b { display: block; font: 750 16px var(--font); } .streak-card small { font: 500 12.5px var(--font); color: var(--ink-3); }
.week { display: flex; gap: 4px; }
.week span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 10px var(--font); color: var(--ink-3); background: var(--surface-3); }
.week span.on { background: #ea580c; color: #fff; }
.invite-card { padding: 16px; border-radius: var(--r-md); background: linear-gradient(135deg, rgba(0, 105, 203, .1), rgba(6, 180, 255, .12)); }
.invite-card .ic-top { display: flex; gap: 12px; align-items: flex-start; color: var(--blue-text); }
.invite-card b { display: block; font: 750 17px var(--font); color: var(--ink); }
.invite-card small { display: block; font: 500 13px/1.4 var(--font); color: var(--ink-2); margin-top: 2px; }
.invite-card code { font: 600 12px ui-monospace, monospace; background: var(--surface); padding: 2px 6px; border-radius: 6px; }
.tasks { margin-top: 10px; }
.tasks .tick { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--surface-3); display: grid; place-items: center; color: #fff; }
.tasks .done .tick { background: var(--ok); border-color: var(--ok); }
.tasks .done .title { color: var(--ink-3); text-decoration: line-through; }
.tasks .side { font: 700 13px var(--font); color: var(--blue-text); }
.contrib { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.contrib > div { background: var(--surface-2); border-radius: 12px; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.contrib .ci { color: var(--blue-text); display: grid; }
.contrib b { font: 800 22px var(--font); font-variant-numeric: tabular-nums; margin-top: 4px; }
.contrib span { font: 600 12px/1.25 var(--font); color: var(--ink-2); }
.contrib small { font: 600 11px var(--font); color: var(--ink-3); }
.tiers-list { display: grid; gap: 8px; }
.tl-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); }
.tl-row.cur { box-shadow: inset 0 0 0 2px var(--c); }
.tl-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--c); flex: none; }
.tl-row b { font: 750 15px var(--font); } .tl-row small { display: block; font: 500 12.5px var(--font); color: var(--ink-3); }
.tl-row ul { margin: 6px 0 0; padding-left: 18px; } .tl-row li { font: 500 13px/1.4 var(--font); color: var(--ink-2); }
.tl-row .you { font: 700 11px var(--font); color: #fff; background: var(--c); padding: 3px 8px; border-radius: 10px; }

/* xp pill + tier-up */
.xp-pill { position: fixed; left: 50%; top: max(14px, calc(env(safe-area-inset-top) + 6px)); z-index: 65; display: flex; align-items: center; gap: 8px;
  transform: translate(-50%, -24px); opacity: 0; pointer-events: none; transition: transform .4s var(--ease-out), opacity .2s;
  padding: 10px 16px; border-radius: 999px; background: #0f172a; color: #fff; font: 600 14px var(--font); box-shadow: var(--shadow-2); white-space: nowrap; }
.xp-pill.show { opacity: 1; transform: translate(-50%, 0); }
.xp-pill .ic { color: #fbbf24; }
.tierup { text-align: center; padding: 22px 6px 6px; }
.tu-ic { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--c);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--c) 18%, transparent); animation: pop .5s var(--ease-out); }
.tierup .kick { font: 700 13px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.tierup ul { list-style: none; padding: 0; margin: 16px 0 20px; text-align: left; }
.tierup li { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font: 550 15px var(--font); }
.tierup li .ic { color: var(--ok); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

/* onboarding */
.onboard { position: fixed; inset: 0; z-index: 70; background: var(--surface); overflow-y: auto; }
.onboard[hidden] { display: none; }
body.onboarding .sheet, body.onboarding .map-ctl { visibility: hidden; }
.ob { min-height: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column;
  padding: max(14px, calc(env(safe-area-inset-top) + 6px)) 22px calc(18px + env(safe-area-inset-bottom)); }
.ob-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.ob-prog { display: flex; gap: 6px; }
.ob-prog i { width: 26px; height: 5px; border-radius: 3px; background: var(--surface-3); transition: background .3s; }
.ob-prog i.on { background: var(--blue); }
.ob-body { flex: 1; padding-top: 18px; animation: viewIn .32s var(--ease-out); }
.ob-hero { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; color: #fff; background: var(--c); margin-bottom: 22px;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--c) 35%, transparent); }
.ob .kick { font: 700 13px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--blue-text); margin-bottom: 6px; }
.ob .t-xl { font-size: 32px; }
.ob-p { font: 500 16.5px/1.45 var(--font); color: var(--ink-2); margin: 12px 0 20px; }
.ob-small { font: 500 14px/1.45 var(--font); color: var(--ink-3); margin-top: 18px; }
.ob-lab { font: 650 14px var(--font); color: var(--ink-2); margin: 18px 2px 8px; display: block; }
.ob-code { width: 100%; height: 60px; border: 2px solid var(--surface-3); border-radius: var(--r-md); background: var(--surface-2); color: var(--ink);
  font: 700 22px ui-monospace, 'SFMono-Regular', monospace; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.ob-code:focus { outline: none; border-color: var(--blue); }
.ob-err { min-height: 20px; margin: 8px 2px 0; font: 600 14px var(--font); color: var(--bad); }
.ob-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 18px; }
.ob-list li { display: flex; gap: 14px; align-items: flex-start; }
.ob-list li > .ic { flex: none; color: var(--blue-text); margin-top: 2px; }
.ob-list b { display: block; font: 700 16.5px var(--font); color: var(--ink); margin-bottom: 2px; }
.ob-list span { font: 500 15px/1.45 var(--font); color: var(--ink-2); }
.ob-list.small span { font-size: 14px; color: var(--ink-3); }
.ob-foot { display: grid; gap: 8px; padding-top: 18px; }
.ob-foot .btn { width: 100%; height: 56px; font-size: 17px; }
.btn.plain { background: none; color: var(--blue-text); }
.role-grid, .preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.role-grid button, .preset-grid button { min-height: 52px; padding: 10px 12px; border-radius: var(--r-md); border: 2px solid transparent; background: var(--surface-2);
  font: 650 15px var(--font); color: var(--ink); text-align: left; }
.preset-grid button { display: flex; flex-direction: column; gap: 2px; }
.preset-grid small { font: 500 12.5px var(--font); color: var(--ink-3); }
.role-grid button[aria-pressed="true"], .preset-grid button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-tint); }
.ob-search { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 14px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-3); }
.ob-search input { flex: 1; border: 0; background: none; font: 500 17px var(--font); color: var(--ink); outline: none; min-width: 0; }
.ob-res { margin-top: 8px; }
.ob-ok { display: flex; gap: 8px; align-items: center; font: 650 15px var(--font); color: var(--ok); margin: 10px 2px; }
@media (prefers-reduced-motion: reduce) { .ob-body, .page-in, .tu-ic { animation: none; } .xp-pill { transition: opacity .2s; } }
.money-in select.box { width: 64px; min-width: 0; padding: 0 6px; text-align: left; }

/* trip reorder */
.trip .tp { position: relative; transition: transform .18s var(--ease-out); }
.trip .tp.dragging { transition: none; z-index: 3; background: var(--surface); box-shadow: var(--shadow-2); border-radius: var(--r-md); }
body.reordering, body.reordering * { cursor: grabbing !important; user-select: none; }
.grip { flex: none; width: 44px; height: 44px; margin: -6px -10px -6px 2px; border: 0; background: none; border-radius: 12px; display: grid; place-items: center;
  color: var(--ink-3); cursor: grab; touch-action: none; }
.grip .ic { stroke-width: 3.2; }
.grip:focus-visible { outline: 2px solid var(--blue); }
.tag.ok { background: var(--ok-bg); color: var(--ok); }

/* ---- audit fixes: hours pill, safety lock, Trips, in-cab targets & type ---- */
.hos-pill { position: fixed; top: max(12px, calc(env(safe-area-inset-top) + 6px)); left: 12px; z-index: 20; display: inline-flex; align-items: center; gap: 7px;
  height: 46px; padding: 0 14px; border: 0; border-radius: 23px; background: var(--material); backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: var(--shadow-1); font: 700 14.5px var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.hos-pill[hidden] { display: none; }
.hos-pill .ic { color: var(--ok); }
.hos-pill.warn .ic { color: var(--warn); } .hos-pill.bad { background: var(--bad); color: #fff; } .hos-pill.bad .ic { color: #fff; }
.hos-pill.muted { color: var(--ink-2); } .hos-pill.muted .ic { color: var(--blue-text); }
.hos-pill .brk { font: 800 11.5px var(--font); text-transform: uppercase; letter-spacing: .04em; background: var(--warn-bg); color: var(--warn); padding: 3px 7px; border-radius: 8px; }
body.page-open .hos-pill, body.onboarding .hos-pill, body.navigating .hos-pill { display: none; }
@media (min-width: 900px) { .hos-pill { left: 424px; top: 16px; } }
/* Hours of service: ELD-style rings on Trips (arc = share of the limit left; blue, amber at 1 h, red at 30 min) and,
   while the truck moves, one big ring for how long you can keep driving. Rings fill once when shown, then update in place. */
:root { --ring: #0a6fd6; --ring-go: #16a34a; --ring-warn: #f59e0b; --ring-bad: #ef4444; --ring-trk: rgba(15, 23, 42, .08); --rest-bg: rgba(79, 70, 229, .1); }
[data-theme="night"] { --ring: #4da3ff; --ring-go: #4ade80; --ring-warn: #fbbf24; --ring-bad: #f87171; --ring-trk: rgba(255, 255, 255, .1); --rest-bg: rgba(129, 140, 248, .16); }
.ring { display: block; width: 100%; height: auto; }
.ring circle { fill: none; }
.ring .trk { stroke: var(--ring-trk); }
.ring .arc { stroke: var(--ring); stroke-linecap: round; stroke-dasharray: 0 100; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center;
  transition: stroke-dasharray 700ms var(--ease-out), stroke .2s ease; }
.ring .arc.warn { stroke: var(--ring-warn); } .ring .arc.bad { stroke: var(--ring-bad); }
.hos-box { background: var(--surface-2); border-radius: var(--r-lg); padding: 12px 12px 14px; }
.hos-status { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding: 12px 14px 13px;
  border-radius: var(--r-md); background: var(--ok-bg); --tone: var(--ok); margin-bottom: 14px; }
.hos-status.warn { background: var(--warn-bg); --tone: var(--warn); } .hos-status.bad { background: var(--bad-bg); --tone: var(--bad); }
.hos-status.rest { background: var(--rest-bg); --tone: var(--reset); }
.hos-status.none { background: var(--surface); --tone: var(--blue-text); }
[data-theme="night"] .hos-status.rest { --tone: #a5b4fc; }
.hos-status .k { grid-column: 1; display: flex; align-items: center; gap: 6px; font: 700 13px/1.2 var(--font); color: var(--tone); }
.hos-status .n { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 800 30px/1 var(--font); font-variant-numeric: tabular-nums;
  letter-spacing: -.03em; color: var(--tone); }
.hos-status .v { grid-column: 1; font: 700 clamp(16px, 4.6vw, 18px)/1.2 var(--font); letter-spacing: -.012em; color: var(--ink); }
.hos-status .s { grid-column: 1 / -1; font: 600 13.5px/1.35 var(--font); color: var(--ink-2); margin-top: 2px; }
.hos-status.none .v { grid-column: 1 / -1; }
.hos-status .bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--ring-trk); margin: 8px 0 4px; overflow: hidden; }
.hos-status .bar i { display: block; height: 100%; border-radius: 3px; background: var(--tone); transition: width 1s linear; }
.hos-status .text-btn { grid-column: 2; justify-self: end; align-self: center; }
.hos-status.rest .s { grid-column: 1; }
.hos-rings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.hos-rings .hr { display: grid; justify-items: center; gap: 7px; }
.hr-ring { position: relative; width: 88%; max-width: 104px; container-type: inline-size; }
.hr-t { position: absolute; inset: 0; display: grid; place-items: center; font: 800 25cqi/1 var(--font); font-variant-numeric: tabular-nums;
  letter-spacing: -.035em; color: var(--ink); }
.hr.warn .hr-t { color: var(--warn); } .hr.bad .hr-t { color: var(--bad); } .hr.none .hr-t { color: var(--ink-3); }
.hr-l { font: 700 11.5px/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.hos-rings.after .arc { stroke: var(--reset); }
.hos-rings.after .hr-t, .hos-rings.stale .hr-t { color: var(--ink-2); }
.hos-rings.stale { opacity: .6; }
/* in motion (lock sheet) */
.lock-sheet.with-hero { padding-top: 4px; }
.hos-hero { --hero: var(--ring-go); display: grid; justify-items: center; padding: 14px 4px 6px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--hero) 22%, transparent), color-mix(in srgb, var(--hero) 0%, transparent) 78%); }
.hos-hero.warn { --hero: var(--ring-warn); } .hos-hero.bad { --hero: var(--ring-bad); }
.hh-pill { justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin-left: 8px; padding: 6px 12px 6px 9px; border-radius: var(--r-pill);
  background: var(--surface); box-shadow: var(--shadow-1); font: 700 13.5px var(--font); color: var(--ink); }
.hh-pill i { width: 10px; height: 10px; border-radius: 50%; background: var(--ring-go); }
.hh-ring { position: relative; width: min(56vw, 230px); margin-top: 6px; container-type: inline-size; }
.hh-ring .arc { stroke: var(--hero); transition: none; }
.hh-t { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 3cqi; }
.hh-t b { font: 800 27cqi/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.04em; color: var(--ink); }
.hh-t span { font: 800 9.5cqi/1 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--hero); }
.hos-hero.ok .hh-t span { color: var(--ok); } .hos-hero.warn .hh-t span { color: var(--warn); } .hos-hero.bad .hh-t span { color: var(--bad); }
.hh-then { margin: 10px 0 14px; font: 650 15.5px/1.35 var(--font); color: var(--ink-2); }
.hh-bars { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; }
.hb { background: var(--surface); border-radius: var(--r-md); padding: 10px 12px 12px; box-shadow: var(--shadow-1); }
.hb span { font: 700 11.5px/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.hb b { display: block; margin: 5px 0 9px; font: 800 23px/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.hb i { display: block; height: 6px; border-radius: 3px; background: var(--ring-trk); overflow: hidden; }
.hb i s { display: block; height: 100%; border-radius: 3px; background: var(--ring); }
.hb.warn i s { background: var(--ring-warn); } .hb.bad i s { background: var(--ring-bad); }
.hb.warn b { color: var(--warn); } .hb.bad b { color: var(--bad); }
.lock-sheet.with-hero h2 { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .ring .arc, .hos-status .bar i { transition: none; } }
.tabs { grid-template-columns: repeat(4, 1fr); }
.tabs button { position: relative; font-size: 12px; }
.tabs .lock-dot { display: none; position: absolute; top: 8px; left: calc(50% + 8px); width: 18px; height: 18px; border-radius: 50%; background: var(--ink-3); color: #fff; place-items: center; }
body.moving .tabs button:not([data-tab="map"]) { color: var(--surface-3); }
body.moving .tabs button:not([data-tab="map"]) .lock-dot { display: grid; }
.lock-sheet { text-align: center; padding: 18px 4px 4px; display: grid; gap: 10px; }
.lock-sheet .ls-ic { width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.lock-sheet .t-s { font-size: 15px; line-height: 1.45; margin-bottom: 8px; }
.btn.big { height: 60px; font-size: 18px; }
/* in-cab targets (48px for primary controls, 44px minimum) */
.chip { height: 44px; }
.icon-btn { min-width: 44px; min-height: 44px; }
.icon-btn.sm { min-width: 40px; min-height: 40px; }
.text-btn { min-height: 44px; padding: 0 6px; }
.ctl-group button { width: 48px; height: 48px; }
.ahead .row, .ahead button { min-height: 48px; }
/* small type: nothing glanceable under 12px */
.speed span { font-size: 12px; }
.contrib small, .tc-tiers, .tl-row .you, .tabs button { font-size: 12px; }
.week span { width: 26px; height: 26px; font-size: 11.5px; }
.tier-badge { color: color-mix(in srgb, var(--c) 78%, #000); }
[data-theme="night"] .tier-badge { color: color-mix(in srgb, var(--c) 45%, #fff); }
[data-theme="night"] .maplibregl-ctrl-attrib { background: rgba(15, 23, 42, .72); }
[data-theme="night"] .maplibregl-ctrl-attrib, [data-theme="night"] .maplibregl-ctrl-attrib a { color: #cbd5e1; }
.trend { font: 650 12.5px var(--font); margin-left: 8px; }
.trend.up { color: var(--bad); } .trend.down { color: var(--ok); }

/* toasts sit below the top row of map controls (hours pill, layers) */
#toast, .xp-pill { top: calc(max(12px, calc(env(safe-area-inset-top) + 6px)) + 58px); }
body.navigating #toast, body.navigating .xp-pill { top: max(14px, calc(env(safe-area-inset-top) + 6px)); }
.streak-card { flex-wrap: wrap; }
.streak-card .week { flex-basis: 100%; justify-content: space-between; padding-left: 38px; margin-top: 4px; }

/* Two-finger pinch zooms the MAP, never the whole app (the map canvas handles its own gestures). */
html, body { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#map, #map canvas { touch-action: none; }

/* Android app: no printing from a WebView (CSV goes to the share sheet instead) */
html.native #ifPrint { display: none; }

/* ---- round 3: per diem calendar, document scanner, rests, grades ---- */
.pd-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.pd-sum > div { background: var(--surface-2); border-radius: var(--r-md); padding: 12px 14px; }
.pd-sum b { display: block; font: 800 24px var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pd-sum span { font: 600 13px var(--font); color: var(--ink-3); }
.pd-week, .pd-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.pd-week { margin-top: 8px; }
.pd-week span { text-align: center; font: 700 12px var(--font); color: var(--ink-3); padding: 4px 0; }
.pd-cell { position: relative; aspect-ratio: 1; min-height: 40px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--ink);
  font: 700 15px var(--font); font-variant-numeric: tabular-nums; }
.pd-cell.pad { background: none; }
.pd-cell.full { background: var(--blue); color: #fff; }
.pd-cell.partial { background: var(--blue-tint); color: var(--blue-text); }
.pd-cell.future { background: none; color: var(--ink-3); opacity: .55; }
.pd-cell.today { box-shadow: inset 0 0 0 2px var(--ink); }
.pd-cell.marked::after { content: ''; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pd-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 2px 0; font: 600 13px var(--font); color: var(--ink-2); }
.pd-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.pd-legend i.full { background: var(--blue); } .pd-legend i.partial { background: var(--blue-tint); }
.pd-legend i.mk { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); margin: 0 6px 2px 3px; vertical-align: middle; }
.pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pg { position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow-1); }
.pg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg figcaption { position: absolute; left: 6px; bottom: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: rgba(15, 23, 42, .75);
  color: #fff; font: 700 12px/22px var(--font); text-align: center; }
.pg-x { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(15, 23, 42, .72); color: #fff;
  display: grid; place-items: center; }
.pg.add { border: 2px dashed var(--line); background: none; box-shadow: none; display: grid; place-content: center; justify-items: center; gap: 6px;
  color: var(--blue-text); font: 700 14px var(--font); }
.doc-row .icon-btn { flex: none; }
.saved-sheet { text-align: center; padding: 18px 4px 4px; display: grid; gap: 10px; }
.saved-sheet .ss-ic { width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok); }
.saved-sheet .t-s { font-size: 14px; word-break: break-all; margin-bottom: 6px; }
.rest-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.rest-btns .btn { height: 48px; font-size: 15px; white-space: nowrap; padding-inline: 10px; }
@media (max-width: 374px) { .rest-btns .btn { font-size: 14px; gap: 6px; } }
.hos-grid.resting b { color: var(--ink-2); }
.rest-back { margin: 14px 2px; }
.rest-back b { display: block; font: 800 20px var(--font); font-variant-numeric: tabular-nums; }
.rest-back span { font: 600 14px var(--font); color: var(--ink-2); }
.grade-card > .ic:first-child { color: var(--warn); }
.work-card > .ic:first-child { color: #ea580c; }
.cam-card > .ic:first-child { color: #0369a1; }
[data-theme="night"] .cam-card > .ic:first-child { color: #38bdf8; }
/* live DOT camera image (place sheet); hidden while the truck moves */
.cam-view { position: relative; margin: 4px 0 12px; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.cam-view img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-3); }
.cam-view figcaption { padding: 8px 12px; font: 600 12.5px/1.3 var(--font); color: var(--ink-3); }
.cam-view.err img { visibility: hidden; }
.cam-view.err::after { content: 'Camera image unavailable right now'; position: absolute; inset: 0 0 34px; display: grid; place-items: center; font: 600 14px var(--font); color: var(--ink-3); }
.cam-view.locked { display: flex; align-items: center; gap: 10px; padding: 16px; font: 600 14.5px var(--font); color: var(--ink-2); }
.row.cam-row { grid-template-columns: 84px minmax(0, 1fr) auto; }
.cam-row .cam-thumb { width: 84px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--surface-3); flex: none; }

.row.doc-row { grid-template-columns: 40px 1fr auto auto; gap: 6px 10px; }
.form .field.col .money-in { align-self: flex-start; }

/* Brand logos: files are pre-fitted inside a circle (tools/make_brand_logos.py), so they fill the badge inside its ring. */
.badge.logo img { width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain; }
.badge.logo.disc { background: var(--brand); box-shadow: none; }
.badge.logo.disc img { width: 100%; height: 100%; }

/* Home categories: a fixed grid, 5 across (nothing scrolls sideways), with More/Less as the last tile. More is a
   disclosure: its chevron turns and the rest unfold in place below, in the same grid, while the sheet springs to fit;
   tiles rise row by row on the way in and leave at once on the way out. */
.qgrid, .mc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px 0; }
.qgrid { margin: 12px -6px 0; }
.more-wrap { margin: 0 -6px; }      /* same tile width as the home grid, inside the panel's clip box (more-inner) */
.mc-tile > span:last-child { max-width: 100%; }
.mc-tile { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 6px 0 5px; border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--ink-2); font: 600 12px/1.2 var(--font); letter-spacing: -.005em; text-align: center; text-wrap: balance;
  transition: transform 120ms var(--ease-out), background-color .15s; }
.mc-tile .badge { width: 44px; height: 44px; }
.mc-tile .badge.mono b { font-size: 15px; }
.mc-tile .badge.mono.m3 b { font-size: 12px; }
.qgrid .mc-tile:active { transform: scale(.95); background: var(--surface-2); }
.more-tile .badge { background: var(--blue-tint); color: var(--blue-text); }
.more-tile .mc-label { color: var(--blue-text); }
.more-tile .ic { transition: transform 260ms var(--ease-out); }
.more-tile[aria-expanded="true"] .ic { transform: rotate(180deg); }
.more-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 340ms cubic-bezier(.32, .72, 0, 1); }
.more-wrap[data-open="true"] { grid-template-rows: 1fr; }
.more-inner { min-height: 0; overflow: hidden; padding-bottom: 4px; }
.mc-h { margin: 14px 8px 4px; font: 650 12px/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.mc-h:first-child { margin-top: 12px; }
.more-wrap .mc-tile, .more-wrap .mc-h { opacity: 0; transform: translateY(8px);
  transition: opacity 110ms ease-out, transform 110ms ease-out, background-color .15s; }
.more-wrap[data-open="true"] .mc-tile, .more-wrap[data-open="true"] .mc-h { opacity: 1; transform: none;
  transition: opacity 220ms ease-out, transform 360ms var(--ease-out), background-color .15s; transition-delay: calc(var(--r, 0) * 24ms); }
.more-wrap[data-open="true"] .mc-tile:active { transform: scale(.95); background: var(--surface-2); transition-delay: 0ms; transition-duration: 120ms; }
@media (prefers-reduced-motion: reduce) {
  .more-wrap { transition: none; }
  .more-wrap .mc-tile, .more-wrap .mc-h, .more-wrap[data-open="true"] .mc-tile, .more-wrap[data-open="true"] .mc-h {
    transform: none; transition: opacity 150ms ease; transition-delay: 0ms; }
  .more-tile .ic { transition: none; }
}

/* Truck logo: on the truck button, the Me tab and the truck sheet. Logo files are pre-fitted inside the circle. */
.tmark { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; }
.tmark::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--brand, rgba(15, 23, 42, .16)); pointer-events: none; }
.tmark img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.tmark.photo img { padding: 0; object-fit: cover; }
.tmark.none, .tmark.add { background: var(--surface-3); color: var(--ink-2); }
.tmark.none::after, .tmark.add::after { box-shadow: none; }
.tmark.lg { width: 56px; height: 56px; }
.tmark.row-mark { width: 40px; height: 40px; }
.truck-btn:has(.tmark) { gap: 8px; padding-left: 9px; }
.tl-head { display: flex; align-items: center; gap: 12px; margin: 8px 2px 0; }
.tl-txt { flex: 1; display: grid; gap: 3px; min-width: 0; }
.tl-txt b { font: 700 16px/1.2 var(--font); color: var(--ink); }
.tl-txt small { font: 500 13px/1.3 var(--font); color: var(--ink-3); }
.tl-row { display: flex; gap: 4px; overflow-x: auto; margin: 8px -16px 0; padding: 6px 16px 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.tl-row::-webkit-scrollbar { display: none; }
.tl-opt { flex: none; width: 78px; display: grid; justify-items: center; gap: 7px; padding: 4px 2px; border: 0; border-radius: var(--r-md);
  background: none; font: 600 12px/1.2 var(--font); color: var(--ink-2); scroll-snap-align: start; transition: transform 120ms var(--ease-out); }
.tl-opt .tmark { width: 56px; height: 56px; transition: box-shadow 200ms var(--ease-out); }
.tl-opt[aria-pressed="true"] { color: var(--ink); }
.tl-opt[aria-pressed="true"] .tmark { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5.5px var(--blue); }
.tl-opt:active { transform: scale(.95); }