/* ShiftRide office (owner, admin, supervisor, Spec admin). Visual language from the approved prototype:
   asphalt bar, one accent (kerb yellow, always with asphalt ink), number plates, the route strip, white panels.
   Shape rule: controls 8px, surfaces 14px, status chips are pills. Numbers in Overpass Mono, tabular. */

body.office { font-size: 16px; line-height: 1.5; background: var(--paper); }
body.office .bar, body.office .queue, body.office .awake { display: none !important; }
body.office h1, body.office h2, body.office h3 { line-height: 1.12; margin: 0; letter-spacing: -.02em; text-wrap: balance; }
body.office p { margin: 0; }
:where(body.office) :where(a) { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
:where(body.office) :where(button, input, select, textarea) { font: inherit; color: inherit; }
body.office :focus-visible { outline: 3px solid var(--kerb); outline-offset: 2px; }
body.office .panel :focus-visible, body.office dialog :focus-visible, body.office .o-main :focus-visible { outline-color: var(--asphalt); }
body.office .muted { color: var(--muted); }
body.office main { max-width: none; padding: 0; margin: 0; outline: none; }
.mono, .num { font-family: var(--mono); font-feature-settings: 'zero' 1; letter-spacing: -.01em; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- top bar ---------- */
.o-top { position: sticky; top: 0; z-index: 50; background: var(--asphalt); color: #fff; padding-top: var(--sat); }
.o-top-in { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 20px; height: 60px; padding: 0 24px; }
.o-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 850; font-size: 19px; letter-spacing: -.02em; text-decoration: none; color: #fff; white-space: nowrap; min-width: 0; }
.o-brand .mark { width: 26px; height: 26px; flex: none; }
.o-brand small { font-weight: 500; font-size: 13px; color: var(--muted-on-dark); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
.o-nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.o-nav::-webkit-scrollbar { display: none; }
.o-nav a { position: relative; display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 11px; text-decoration: none; color: var(--muted-on-dark); font-weight: 650; font-size: 15px; white-space: nowrap; transition: color .15s; }
.o-nav a .ico { width: 18px; height: 18px; opacity: .8; }
.o-nav a:hover { color: #fff; }
.o-nav a[aria-current="page"] { color: #fff; }
.o-nav a[aria-current="page"] .ico { opacity: 1; color: var(--kerb); }
.o-nav a[aria-current="page"]::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: 0; height: 4px; border-radius: 2px 2px 0 0; background: repeating-linear-gradient(90deg, var(--kerb) 0 10px, transparent 10px 16px); }
.o-nav .badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--stop-on-dark); color: var(--asphalt); font-size: 12px; font-weight: 800; display: inline-grid; place-items: center; font-family: var(--mono); }
.o-who { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted-on-dark); white-space: nowrap; }
.o-who .net { font-size: 12.5px; font-weight: 700; padding: 2px 9px 1px; border-radius: 999px; background: #1d3a2a; color: #b8f0cc; }
.o-who .net.is-off { background: #4a1d1f; color: #ffd8d9; }
.o-who .net:empty { display: none; }
.o-menu-btn { display: inline-flex; align-items: center; gap: 10px; border: 0; background: transparent; color: #fff; padding: 6px 6px 6px 10px; border-radius: 999px; cursor: pointer; min-height: 44px; }
.o-menu-btn:hover { background: var(--tar); }
.o-menu-btn b { font-weight: 650; }
.o-menu-btn small { color: var(--muted-on-dark); font-size: 13px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--kerb); color: var(--kerb-ink); display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
@media (max-width: 960px) {
  .o-top-in { flex-wrap: wrap; height: auto; gap: 0 12px; padding: 8px 16px 0; }
  .o-who .who-text { display: none; }
  .o-nav { order: 3; width: calc(100% + 32px); margin: 4px -16px 0; padding: 0 8px; }
  .o-nav a { height: 48px; }
}

/* menu sheet items */
.menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.menu-list a, .menu-list button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; border-radius: 10px; border: 0; background: transparent; text-decoration: none; font-weight: 650; cursor: pointer; text-align: left; }
.menu-list a:hover, .menu-list button:hover { background: var(--concrete); }
.menu-list a[aria-current="page"] { background: var(--kerb-wash); }
.menu-who { display: flex; gap: 12px; align-items: center; padding: 4px 4px 12px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
.menu-who b { display: block; }

/* ---------- layout ---------- */
.o-main { max-width: 1320px; margin: 0 auto; padding: 0 24px 56px; }
@media (max-width: 600px) { .o-main { padding: 0 16px 48px; } }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; padding: 28px 0 20px; }
.page-head h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 850; letter-spacing: -.03em; }
.page-head .sub { color: var(--muted); margin-top: 6px; }
.page-head .tools { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.page-head .back { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; text-decoration: none; color: var(--muted); margin-bottom: 8px; min-height: 32px; }
.page-head .back .ico { width: 18px; height: 18px; }
.page-head .back:hover { color: var(--asphalt); }
@media (max-width: 600px) { .page-head { padding: 20px 0 14px; } .page-head .tools { margin-left: 0; } }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.grid-even { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.col { display: grid; gap: 20px; min-width: 0; align-content: start; }
@media (max-width: 1060px) { .grid-2, .grid-even { grid-template-columns: minmax(0, 1fr); } }
.stack { display: grid; gap: 20px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 16px; }
.toolbar .grow { flex: 1 1 200px; }
.split { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* sub navigation (setup, fuel, admin) */
.subnav { display: grid; gap: 2px; position: sticky; top: 80px; }
.subnav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: 10px; text-decoration: none; font-weight: 650; color: var(--muted); }
.subnav a:hover { background: var(--concrete); color: var(--asphalt); }
.subnav a[aria-current="page"] { background: var(--white); color: var(--asphalt); box-shadow: inset 0 0 0 1px var(--line-soft), var(--shadow); }
.subnav a[aria-current="page"]::before { content: ''; width: 4px; align-self: stretch; border-radius: 2px; background: var(--kerb); margin: -2px 0 -2px -6px; }
.subnav small { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
@media (max-width: 900px) {
  .subnav { position: static; display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; padding-bottom: 2px; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { white-space: nowrap; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-soft); }
  .subnav a[aria-current="page"] { background: var(--asphalt); color: #fff; box-shadow: none; }
  .subnav a[aria-current="page"]::before { display: none; }
  .subnav a[aria-current="page"] small { color: var(--muted-on-dark); }
}
.tabs-row { display: flex; gap: 4px; border-bottom: 1.5px solid var(--line); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.tabs-row a { position: relative; padding: 10px 14px 12px; text-decoration: none; font-weight: 700; color: var(--muted); white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.tabs-row a[aria-current="page"] { color: var(--asphalt); }
.tabs-row a[aria-current="page"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1.5px; height: 4px; border-radius: 2px 2px 0 0; background: var(--asphalt); }

/* ---------- surfaces ---------- */
.panel { background: var(--white); border-radius: var(--r-surf); box-shadow: inset 0 0 0 1px var(--line-soft); min-width: 0; }
.panel-h { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.panel-h h2 { font-size: 19px; font-weight: 800; }
.panel-h .end { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.panel-b { padding: 16px 20px; }
.panel-note { padding: 12px 20px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line-soft); }
.panel > .tbl-wrap { border-radius: 0 0 var(--r-surf) var(--r-surf); }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 0; }
.facts > div { padding: 14px 20px; border-top: 1px solid var(--line-soft); display: grid; gap: 2px; align-content: start; }
.facts dt, .facts .k { font-size: 13px; color: var(--muted); font-weight: 650; }
.facts dd, .facts .v { margin: 0; font-weight: 700; }
.note-box { background: var(--concrete); border-radius: 10px; padding: 10px 14px; font-size: 14.5px; }
.note-box.warn { background: var(--warn-wash); color: var(--warn); font-weight: 650; }
.note-box.stop { background: var(--stop-wash); color: var(--stop); font-weight: 650; }
.note-box.go { background: var(--go-wash); color: var(--go); font-weight: 650; }
.note-box.kerb { background: var(--kerb-wash); color: var(--kerb-ink); }

/* figures: a row of numbers that belong together (not a template, a ledger line) */
/* One stat grid everywhere (figures in cards, Today's trips, the month strip, Insights tiles): the same number size,
   label size and left edge. In a card: equal columns, 3 where the labels fit on one line, 2 on a narrow card (the card
   is the size container, so a half-width card on a desktop gets the same columns as a phone). */
.office { --stat-num: 30px; --stat-lab: 13px; }
@media (max-width: 420px) { .office { --stat-num: 26px; } }
.panel:has(> .figs, > .shiftline) { container: stat / inline-size; }
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; padding: 16px 20px; align-items: start; }
@media (max-width: 440px) { .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container stat (max-width: 409px) { .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container stat (min-width: 410px) { .figs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.figs > div { display: grid; grid-template-rows: auto auto; gap: 4px; justify-items: start; align-content: start; min-width: 0; }
.figs b { font-size: var(--stat-num); font-weight: 850; line-height: 1; letter-spacing: -.02em; font-family: var(--font); font-feature-settings: 'tnum' 1; }
.figs b small { font-size: 15px; font-weight: 650; color: var(--muted); letter-spacing: 0; }
.figs span { font-size: var(--stat-lab); color: var(--muted); line-height: 1.3; }
.figs .stop b { color: var(--stop); } .figs .go b { color: var(--go); } .figs .warn b { color: var(--warn); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-ctl); border: 0; font-weight: 700; font-size: 15.5px; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .14s var(--press), background-color .18s, box-shadow .18s, opacity .18s; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.btn .ico { width: 18px; height: 18px; }
.btn-kerb { background: var(--kerb); color: var(--kerb-ink); box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); }
.btn-kerb:hover:not(:disabled) { background: var(--kerb-hi); }
.btn-dark { background: var(--asphalt); color: #fff; }
.btn-dark:hover:not(:disabled) { background: var(--tar); }
.btn-ghost { background: transparent; color: var(--asphalt); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--asphalt); background: rgba(18,22,27,.03); }
.btn-stop { background: var(--stop); color: #fff; }
.btn-stop:hover:not(:disabled) { background: #951f18; }
.btn-go { background: var(--go); color: #fff; }
.btn-link { background: none; border: 0; padding: 0; min-height: 32px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--asphalt); }
.btn-sm { min-height: 38px; padding: 0 12px; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 1px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; line-height: 1.6; background: var(--line-soft); color: var(--asphalt); }
.chip.go { background: var(--go-wash); color: var(--go); }
.chip.stop { background: var(--stop-wash); color: var(--stop); }
.chip.warn { background: var(--warn-wash); color: var(--warn); }
.chip.kerb { background: var(--kerb); color: var(--kerb-ink); }
.chip.dark { background: var(--asphalt); color: #fff; }
.chip.info { background: var(--info-wash); color: var(--info); }
.chip .ico { width: 14px; height: 14px; }
.plate { display: inline-flex; align-items: center; font-family: var(--mono); font-weight: 600; font-size: .86em; letter-spacing: .02em; padding: 1px 7px 0; border-radius: 4px; background: #fff; color: var(--asphalt); box-shadow: inset 0 0 0 1.5px var(--asphalt); white-space: nowrap; line-height: 1.6; }
.code { font-family: var(--mono); font-weight: 700; font-size: 13px; background: var(--asphalt); color: var(--kerb); padding: 2px 7px 0; border-radius: 4px; }

.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field label, .inline-field label { font-weight: 700; font-size: 14px; }
.field .req { color: var(--stop); }
.field .hint { font-weight: 500; color: var(--muted); }
.help { font-size: 13.5px; color: var(--muted); }
.input { min-height: 44px; border-radius: var(--r-ctl); border: 1.5px solid var(--line); background: #fff; padding: 8px 12px; width: 100%; color: var(--asphalt); }
textarea.input { min-height: 88px; resize: vertical; }
select.input { padding-right: 32px; }
.input:hover { border-color: #AEB7B5; }
.input:focus { border-color: var(--asphalt); outline: 3px solid var(--kerb); outline-offset: 0; }
.input[aria-invalid="true"] { border-color: var(--stop); background: #FFF8F7; }
.input::placeholder { color: #666F78; }
.inline-field { display: grid; gap: 4px; }
.input-month { width: auto; min-width: 170px; }
.check-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--line-soft); cursor: pointer; font-weight: 650; }
.check-row input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--asphalt); }
.check-row small { display: block; font-weight: 500; color: var(--muted); font-size: 13.5px; }
.check-row:has(input:checked) { box-shadow: inset 0 0 0 2px var(--asphalt); background: var(--kerb-wash); }
.days { display: flex; flex-wrap: wrap; gap: 6px; }
.days label { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 44px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 700; cursor: pointer; font-size: 14px; }
.days input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.days label:has(input:checked) { background: var(--asphalt); color: #fff; box-shadow: none; }
.days label:has(input:focus-visible) { outline: 3px solid var(--asphalt); outline-offset: 2px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.err { color: var(--stop); font-size: 14px; font-weight: 650; }
.err:empty { display: none; }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--concrete); gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font-weight: 650; font-size: 14px; cursor: pointer; min-height: 38px; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--white); color: var(--asphalt); box-shadow: var(--shadow); }
.search { position: relative; }
.search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 18px; height: 18px; pointer-events: none; }
.search .input { padding-left: 38px; }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-wrap:focus-visible { outline-offset: -3px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th { text-align: left; font-weight: 650; }
.tbl thead th { font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 10px 12px; border-bottom: 1.5px solid var(--line); white-space: nowrap; background: var(--white); }
.tbl td, .tbl tbody th { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tbl tbody tr:last-child td, .tbl tbody tr:last-child th { border-bottom: 0; }
.tbl tbody tr { transition: background-color .12s; }
.tbl tbody tr:hover { background: #FAFBFA; }
.tbl .num { text-align: right; font-family: var(--mono); font-feature-settings: 'zero' 1; white-space: nowrap; }
.tbl tfoot td { font-weight: 800; border-top: 1.5px solid var(--asphalt); padding: 11px 12px; }
.tbl a.rowlink { font-weight: 750; text-decoration: none; }
.tbl a.rowlink:hover { text-decoration: underline; }
.tbl .sub { display: block; font-size: 13px; color: var(--muted); font-weight: 500; }
.tbl tr.is-muted td, .tbl tr.is-muted th { color: var(--muted); }
.tbl tr.is-alert { background: #FFF8F7; }
.tbl .tight { width: 1%; white-space: nowrap; }
.tbl input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--asphalt); }

/* ---------- route strip (signature) ---------- */
.strip { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; padding-top: 6px; --p: 0; }
.strip::before { content: ''; position: absolute; left: 8px; right: 8px; top: 13px; height: 4px; background: var(--asphalt); border-radius: 2px; }
.strip::after { content: ''; position: absolute; left: 8px; right: 8px; top: 14.5px; height: 1px; background: repeating-linear-gradient(90deg, var(--kerb) 0 8px, transparent 8px 14px); }
.strip .stop-n { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; flex: 1; min-width: 0; text-align: center; font-size: 12.5px; font-weight: 650; line-height: 1.2; }
.strip .stop-n i { width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px var(--asphalt); }
.strip .stop-n.done i { background: var(--go); box-shadow: inset 0 0 0 4px var(--asphalt); }
.strip .stop-n.end i { background: var(--kerb); }
.strip .stop-n small { font-family: var(--mono); font-size: 12px; color: var(--muted); font-weight: 600; }
.strip .stop-n:first-child { justify-items: start; text-align: left; }
.strip .stop-n:last-child { justify-items: end; text-align: right; }
.strip .stop-n span { overflow-wrap: anywhere; }
.strip .bus { position: absolute; z-index: 2; top: 3px; left: calc(8px + (100% - 16px) * var(--p)); width: 26px; height: 24px; margin-left: -13px; border-radius: 6px; background: var(--kerb); box-shadow: 0 0 0 2px var(--asphalt), 0 6px 14px -4px rgba(0,0,0,.4); display: grid; place-items: center; transition: left 1.2s var(--ease-out); }
.strip .bus svg { width: 20px; height: 20px; }
@media (max-width: 560px) { .strip .stop-n span { display: none; } .strip .stop-n:first-child span, .strip .stop-n:last-child span { display: block; } }

.vstops { list-style: none; margin: 0; padding: 4px 0 4px 4px; position: relative; }
.vstops::before { content: ''; position: absolute; left: 11px; top: 18px; bottom: 18px; width: 4px; background: var(--asphalt); border-radius: 2px; }
.vstops li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px 0; }
.vstops li > i { width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px var(--asphalt); position: relative; z-index: 1; }
.vstops li.end > i { background: var(--kerb); }
.vstops li small { display: block; color: var(--muted); font-size: 13px; }

/* ---------- Today ---------- */
.clockpill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--asphalt); color: #fff; font-weight: 700; font-size: 14px; }
.clockpill i { width: 8px; height: 8px; border-radius: 50%; background: var(--kerb); }
@media (prefers-reduced-motion: no-preference) { .clockpill i { animation: blink 1.6s ease-in-out infinite; } }
@keyframes blink { 50% { opacity: .25; } }
.alerts { display: grid; gap: 8px; margin-bottom: 20px; }
.alert { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; padding: 12px 16px; border-radius: var(--r-surf); background: var(--white); box-shadow: inset 0 0 0 1px var(--line-soft); }
.alert.red { background: var(--stop-wash); box-shadow: inset 0 0 0 1.5px rgba(179,38,30,.35); }
.alert.amber { background: var(--warn-wash); box-shadow: inset 0 0 0 1.5px rgba(133,86,0,.25); }
.alert > .ico { width: 24px; height: 24px; margin-top: 1px; }
.alert.red > .ico { color: var(--stop); } .alert.amber > .ico { color: var(--warn); }
.alert b { font-weight: 800; }
.alert .meta { font-size: 13.5px; color: var(--tar); margin-top: 2px; }
.alert .acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .alert { grid-template-columns: 24px minmax(0, 1fr); } .alert .acts { grid-column: 1 / -1; justify-content: flex-start; } }
@media (prefers-reduced-motion: no-preference) { .alert.is-new { animation: alert-in .5s var(--ease-out) both; } }
@keyframes alert-in { from { opacity: 0; transform: translateY(-6px); } }

.shiftline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shiftline > div { padding: 16px 20px; border-left: 1px solid var(--line-soft); display: grid; gap: 4px; align-content: start; }
.shiftline > div:first-child { border-left: 0; }
.shiftline h3 { font-size: 16px; font-weight: 800; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.shiftline .big { font-size: var(--stat-num); font-weight: 850; letter-spacing: -.02em; line-height: 1; margin-top: 6px; font-feature-settings: 'tnum' 1; }
.shiftline .big small { font-size: 16px; font-weight: 650; color: var(--muted); letter-spacing: 0; }
.shiftline .k { font-size: var(--stat-lab); color: var(--muted); line-height: 1.3; }
/* Each block carries a bar and a line of text, so a narrow card stacks them (one per row) rather than squeezing 3. */
@media (max-width: 440px) { .shiftline { grid-template-columns: 1fr; } .shiftline > div { border-left: 0; border-top: 1px solid var(--line-soft); } .shiftline > div:first-child { border-top: 0; } }
@container stat (max-width: 409px) { .shiftline { grid-template-columns: 1fr; } .shiftline > div { border-left: 0; border-top: 1px solid var(--line-soft); } .shiftline > div:first-child { border-top: 0; } }
.meter { height: 8px; border-radius: 4px; background: var(--concrete); overflow: hidden; margin-top: 6px; display: flex; }
.meter i { display: block; height: 100%; width: var(--w); background: var(--go); }
@media (prefers-reduced-motion: no-preference) { .meter i { animation: grow .9s var(--ease-out) both; transform-origin: left; } }
@keyframes grow { from { transform: scaleX(0); } }
.meter i.ns { background: var(--stop); }
.meter i.road { background: repeating-linear-gradient(90deg, var(--kerb) 0 6px, #E9CD6A 6px 10px); }
.meter i.dark { background: var(--asphalt); }
.meter i.over { background: var(--stop); }

.triprow { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 4px 16px; padding: 16px 20px; border-top: 1px solid var(--line-soft); align-items: start; text-decoration: none; color: inherit; transition: background-color .15s; }
.triprow:first-child { border-top: 0; }
.triprow:hover { background: #FAFBFA; }
.triprow .when { font-family: var(--mono); font-weight: 700; font-size: 17px; padding-top: 1px; }
.triprow .when small { display: block; font-family: var(--font); font-size: 12.5px; color: var(--muted); font-weight: 650; }
.triprow h3 { font-size: 17px; font-weight: 800; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.triprow h3 a { text-decoration: none; }
.triprow h3 a:hover { text-decoration: underline; }
.triprow .meta { font-size: 14px; color: var(--muted); display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; margin-top: 3px; }
.triprow .hc { text-align: right; }
.triprow .hc b { display: block; font-size: 28px; font-weight: 850; line-height: 1; letter-spacing: -.02em; }
.triprow .hc span { font-size: 13px; color: var(--muted); white-space: nowrap; }
.triprow .strip { grid-column: 2 / -1; margin-top: 10px; }
@media (max-width: 560px) { .triprow { grid-template-columns: 52px minmax(0, 1fr) auto; padding: 14px 16px; } .triprow .strip { grid-column: 1 / -1; } }
.group-h { padding: 10px 20px; font-size: 13px; font-weight: 800; color: var(--muted); background: #F8F9F8; border-top: 1px solid var(--line-soft); display: flex; gap: 8px; align-items: center; }
.panel > .group-h:first-of-type { border-top: 0; }

.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 12px 20px; border-top: 1px solid var(--line-soft); display: grid; gap: 4px; font-size: 14.5px; }
.list > li:first-child { border-top: 0; }
.list .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.list .t { font-family: var(--mono); font-weight: 650; color: var(--muted); font-size: 13.5px; }

/* timeline */
.tl { list-style: none; margin: 0; padding: 4px 20px 16px; display: grid; }
.tl li { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; padding: 0 0 12px; font-size: 14.5px; line-height: 1.4; }
.tl li::before { content: ''; position: absolute; left: 66px; top: 8px; bottom: -4px; width: 2px; background: var(--line); }
.tl li:last-child::before { display: none; }
.tl .t { font-family: var(--mono); font-weight: 650; padding-top: 1px; color: var(--muted); }
.tl .b { padding-left: 18px; position: relative; display: grid; gap: 2px; }
.tl .b::before { content: ''; position: absolute; left: 0; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--asphalt); box-shadow: 0 0 0 3px var(--white); }
.tl li.go .b::before { background: var(--go); } .tl li.stop .b::before { background: var(--stop); } .tl li.kerb .b::before { background: var(--kerb); box-shadow: 0 0 0 3px var(--white), inset 0 0 0 1.5px var(--asphalt); }
.tl .b small { color: var(--muted); font-size: 13px; }

/* score */
.score { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.score-n { font-family: var(--mono); font-weight: 700; min-width: 2.2ch; text-align: right; }
.score-bar { display: inline-grid; grid-template-columns: 4fr 3fr 3fr; gap: 2px; width: 70px; height: 10px; }
.score-bar i { border-radius: 2px; background: var(--concrete); }
.score-bar i.on.t { background: var(--asphalt); } .score-bar i.on.g { background: var(--kerb); box-shadow: inset 0 0 0 1px #C99A12; } .score-bar i.on.r { background: var(--go); }
.signals { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13.5px; }
.signals b { font-weight: 650; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); align-items: center; }
.legend i { display: inline-block; width: 18px; height: 8px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.legend .t { background: var(--asphalt); } .legend .g { background: var(--kerb); box-shadow: inset 0 0 0 1px #C99A12; } .legend .r { background: var(--go); }

/* messages */
.bub { background: var(--concrete); border-radius: 12px 12px 12px 3px; padding: 8px 12px; font-size: 14.5px; max-width: 60ch; width: fit-content; }
.bub.in { background: #D6F5C6; border-radius: 12px 12px 3px 12px; }
.thread { display: grid; gap: 10px; padding: 16px 20px; background-color: #EFE9E1; background-image: radial-gradient(rgba(18,53,45,.06) 1px, transparent 1.2px); background-size: 14px 14px; border-radius: 0 0 var(--r-surf) var(--r-surf); }
.thread .msg { display: grid; gap: 3px; max-width: min(520px, 88%); }
.thread .msg.in { justify-self: end; justify-items: end; }
.thread .msg .bub { background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.thread .msg.in .bub { background: #D6F5C6; }
.thread .msg small { font-size: 12px; color: #54656F; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* evidence / invoices */
.doc { background: var(--white); border-radius: var(--r-surf); box-shadow: inset 0 0 0 1px var(--line-soft), var(--shadow); padding: 28px; display: grid; gap: 20px; }
@media (max-width: 600px) { .doc { padding: 18px; } }
.doc-h { display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: space-between; align-items: flex-start; }
.doc-h h2 { font-size: 28px; font-weight: 850; }
.doc-h .num-big { font-family: var(--mono); font-weight: 700; font-size: 18px; }
.doc-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; font-size: 14.5px; }
.doc-parties b { display: block; font-size: 12.5px; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.totals { margin-left: auto; display: grid; grid-template-columns: auto auto; gap: 6px 28px; font-size: 15px; min-width: min(100%, 300px); }
.totals dt { color: var(--muted); } .totals dd { margin: 0; text-align: right; font-family: var(--mono); font-weight: 650; }
.totals .grand { font-size: 19px; font-weight: 850; color: var(--asphalt); border-top: 1.5px solid var(--asphalt); padding-top: 8px; }
details.trip-acc { border-top: 1px solid var(--line-soft); }
details.trip-acc > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 4px 14px; padding: 12px 20px; align-items: center; min-height: 52px; }
details.trip-acc > summary::-webkit-details-marker { display: none; }
details.trip-acc > summary:hover { background: #FAFBFA; }
details.trip-acc > summary .ico { transition: transform .2s var(--ease-out); }
details.trip-acc[open] > summary .ico.chev { transform: rotate(90deg); }
details.trip-acc .acc-b { padding: 0 20px 16px; }
@media (max-width: 600px) { details.trip-acc > summary { grid-template-columns: minmax(0, 1fr) auto; } details.trip-acc > summary .d { grid-column: 1 / -1; } }

/* empty + skeleton */
.empty { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-radius: var(--r-surf); overflow: hidden; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-soft); }
.panel .empty { box-shadow: none; border-radius: 0 0 var(--r-surf) var(--r-surf); }
.empty-art { height: 140px; background: var(--asphalt) center / cover no-repeat; position: relative; }
.empty-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,22,27,0) 40%, rgba(18,22,27,.35)); }
.art-road .empty-art { background-image: url(img/n2-dawn-m.webp); background-position: center 60%; }
.art-night .empty-art { background-image: url(img/city-night.webp); }
.art-kombi .empty-art { background-image: url(img/kombi-dusk.webp); background-position: center 55%; }
.empty-t { padding: 20px; display: grid; gap: 8px; justify-items: start; }
.empty-t h3 { font-size: 18px; font-weight: 800; }
.empty-t p { color: var(--muted); max-width: 60ch; }
.skel { display: grid; gap: 8px; padding: 18px 20px; }
.skel i { height: 40px; border-radius: 8px; background: linear-gradient(90deg, var(--concrete) 0%, #F0F2F1 50%, var(--concrete) 100%); background-size: 200% 100%; }
@media (prefers-reduced-motion: no-preference) { .skel i { animation: sh 1.2s linear infinite; } }
/* The screen-change skeleton (shown at once while a screen draws): a title bar and rows, same rhythm as a screen. */
.view-loading .skel-head { height: 38px; width: min(60%, 340px); margin: 6px 0 22px; border-radius: 8px; background: var(--concrete); }
@keyframes sh { to { background-position: -200% 0; } }

/* ---------- dialog sheet ---------- */
dialog.sheet { border: 0; padding: 0; border-radius: 18px; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 48px); background: var(--white); color: var(--asphalt); box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); overflow: auto; }
dialog.sheet.wide { width: min(880px, calc(100vw - 24px)); }
dialog.sheet[open] { animation: sheet-in .26s var(--sheet) both; }
dialog.sheet::backdrop { background: rgba(18,22,27,.55); backdrop-filter: blur(3px); }
@keyframes sheet-in { from { transform: translateY(24px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-h { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 8px; position: sticky; top: 0; background: var(--white); z-index: 1; }
.sheet-h h2 { font-size: 23px; font-weight: 850; }
.sheet-sub { margin-top: 4px; font-size: 14.5px; }
.sheet-x { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--concrete); cursor: pointer; display: grid; place-items: center; flex: none; }
.sheet-x:hover { background: var(--line-soft); }
.sheet-b { padding: 8px 22px 22px; display: grid; gap: 14px; }
@media (max-width: 600px) {
  dialog.sheet, dialog.sheet.wide { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 18px 18px 0 0; max-height: 92dvh; padding-bottom: var(--sab); }
  dialog.sheet[open] { animation: sheet-up .3s var(--sheet) both; }
  @keyframes sheet-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
}
dialog.photo { border: 0; padding: 0; background: transparent; max-width: min(720px, 94vw); }
dialog.photo::backdrop { background: rgba(18,22,27,.88); }
dialog.photo img { border-radius: 12px; max-height: 84vh; width: auto; margin: 0 auto; background: #fff; }
dialog.photo .sheet-x { position: absolute; top: 10px; right: 10px; }
.preview { background: var(--concrete); border-radius: 12px 12px 12px 3px; padding: 12px 14px; font-size: 14.5px; }
.reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.reasons label { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: var(--r-ctl); box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; font-weight: 650; font-size: 14.5px; line-height: 1.2; }
.reasons input { accent-color: var(--asphalt); width: 18px; height: 18px; flex: none; }
.reasons label:has(input:checked) { box-shadow: inset 0 0 0 2px var(--asphalt); background: var(--kerb-wash); }
@media (max-width: 420px) { .reasons { grid-template-columns: 1fr; } }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-size: 14.5px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.copyline { display: flex; gap: 8px; align-items: center; }
.copyline .input { font-family: var(--mono); font-size: 13px; }
.diff { display: grid; gap: 4px; font-size: 13.5px; }
.diff div { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 4px 0; border-top: 1px solid var(--line-soft); }
.diff .was { color: var(--stop); text-decoration: line-through; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.diff .now { color: var(--go); overflow-wrap: anywhere; }
.diff code, .mono-sm { font-family: var(--mono); font-size: 12.5px; }

/* agreement */
.gate { max-width: 760px; margin: 0 auto; padding: 32px 0 56px; display: grid; gap: 20px; }
.gate-art { height: 200px; border-radius: var(--r-surf); background: var(--asphalt) url(img/n2-dawn.webp) center 60% / cover; position: relative; overflow: hidden; }
.gate-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,22,27,.05), rgba(18,22,27,.75)); }
.gate-art h1 { position: absolute; z-index: 1; left: 24px; bottom: 20px; color: #fff; font-size: clamp(30px, 5vw, 44px); font-weight: 900; }
.gate ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }

/* Spec admin accent: a thin kerb rule under the bar so staff always know which side they're on */
body.office.spec .o-top { box-shadow: inset 0 -3px 0 var(--kerb); }

@media print {
  .o-top, .no-print, .toast, .page-head .tools { display: none !important; }
  body.office { background: #fff; }
  .panel, .doc { box-shadow: none; }
}

/* ---------- small utilities used by the screens ---------- */
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
.lbl { font-weight: 700; font-size: 14px; display: block; margin-bottom: 4px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mb { margin-bottom: 16px; }
.small { font-size: 13px; }
.pre { white-space: pre-line; }
.center { justify-content: center; margin-top: 16px; }
.txt-stop { color: var(--stop); font-weight: 700; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pinrow { display: flex; gap: 8px; align-items: flex-end; } .pinrow .field { flex: 1; }
.input-sm { min-height: 38px; padding: 4px 10px; font-size: 14px; width: 160px; }
.bulkbar { position: sticky; top: 72px; z-index: 5; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 16px; margin-bottom: 12px; border-radius: var(--r-surf); background: var(--asphalt); color: #fff; box-shadow: var(--shadow); }
.bulkbar .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px var(--tar-2); }
.bulkbar .btn-dark { background: var(--kerb); color: var(--kerb-ink); }
.page-head.tight { padding-top: 0; }
.page-head .h1 { font-size: clamp(26px, 3vw, 34px); font-weight: 850; letter-spacing: -.03em; }
.stepper { list-style: none; display: flex; gap: 4px 16px; flex-wrap: wrap; margin: 0; padding: 0; }
.stepper li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--muted); }
.stepper li i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12.5px; background: var(--concrete); }
.stepper li i .ico { width: 14px; height: 14px; }
.stepper li[aria-current="step"] { color: var(--asphalt); }
.stepper li[aria-current="step"] i { background: var(--asphalt); color: var(--kerb); }
.stepper li.done i { background: var(--go); color: #fff; }
.diff-d summary { cursor: pointer; font-weight: 650; min-height: 32px; }
.thread .msg.out { justify-self: end; justify-items: end; }
.thread .msg.out .bub { background: #D6F5C6; }
.thread .msg.in { justify-self: start; justify-items: start; }
.thread .msg.in .bub { background: #fff; }
.view { display: block; }
body.office main.o-main { max-width: 1320px; margin: 0 auto; padding: 0 24px 56px; }
@media (max-width: 600px) { body.office main.o-main { padding: 0 16px 48px; } }
.tbl .actions { flex-wrap: nowrap; }
.subnav a { position: relative; }
.subnav a[aria-current="page"]::before { position: absolute; left: 0; top: 10px; bottom: 10px; margin: 0; }
.toast:not(.is-on) { visibility: hidden; transition: transform .4s var(--sheet), visibility 0s .4s; }
.toast.is-on { visibility: visible; }
.grid-2 > *, .grid-even > *, .split > *, .doc, .doc > * { min-width: 0; }

/* Route map (trip detail) */
.route-map { height: 340px; margin: 0 16px; border-radius: var(--r-ctl); overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.route-map .panel-b { margin: 0; }
.route-svg { width: 100%; height: 100%; display: block; }
.route-svg-bg { fill: var(--paper); }
.route-svg-label { font: 600 11px var(--font); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.route-svg-empty { font: 13px var(--font); fill: var(--muted); }
.route-legend { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; padding: 0 16px 12px; margin: 0; font-size: 13px; color: var(--muted); }
.route-legend li { display: flex; align-items: center; gap: 6px; }
.route-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.route-legend .k-line { width: 18px; height: 6px; border-radius: 3px; background: var(--kerb); box-shadow: 0 0 0 1.5px var(--asphalt); }
.route-legend .k-stop { background: #fff; border: 2px solid var(--asphalt); }
.route-legend .k-arr { background: var(--go); }
.route-legend .k-drop { background: var(--stop); }

/* Leaflet panes use z-index up to 1000; keep them inside the card so the sticky header stays on top. */
.route-map { position: relative; z-index: 0; isolation: isolate; }

/* ---------- Insights + "This month" strip ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto auto auto; gap: 0 12px; margin-bottom: 20px; }
.kpis > .kpi { margin-bottom: 12px; } /* row gap between tile rows (the grid's own row gap would split each tile's subgrid) */
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 4px; align-content: start; justify-items: start; padding: 14px 16px 13px; background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--r-surf); box-shadow: var(--shadow); text-decoration: none; color: inherit; min-width: 0; }
a.kpi { transition: border-color .15s, transform .15s var(--press); }
a.kpi:hover { border-color: var(--asphalt); }
a.kpi:active { transform: scale(.985); }
.kpi .k-l { font-size: var(--stat-lab); font-weight: 700; color: var(--muted); line-height: 1.3; }
.kpi .k-v { font-size: var(--stat-num); font-weight: 850; letter-spacing: -.02em; line-height: 1.05; font-family: var(--font); font-feature-settings: 'tnum' 1; }
.kpi .k-s { font-size: var(--stat-lab); color: var(--muted); line-height: 1.3; }
@media (max-width: 420px) { .kpis { column-gap: 8px; } .kpis > .kpi { margin-bottom: 8px; } .kpi { padding: 12px; } }
.month-strip { margin-bottom: 4px; }
.month-strip .ms-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.month-strip h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.month-strip .ms-head a { font-size: 14px; font-weight: 650; }
.insights .span-2 { grid-column: 1 / -1; }
.chart-panel .panel-h .end { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.inline-field.compact { grid-auto-flow: column; align-items: center; gap: 8px; }
.inline-field.compact .input { min-height: 38px; padding-top: 4px; padding-bottom: 4px; width: auto; max-width: 52vw; }
.chart-take { padding: 14px 20px 0; font-size: 15px; font-weight: 600; }
.chart { padding: 6px 12px 0 8px; outline: none; border-radius: 10px; touch-action: pan-y; }
.chart:focus-visible { box-shadow: inset 0 0 0 3px var(--asphalt); }
.chart svg { display: block; overflow: visible; }
.chart-readout { padding: 2px 20px 12px; min-height: 2.2em; font-size: 13.5px; color: var(--muted); font-family: var(--mono); letter-spacing: -.01em; }
.chart-table { border-top: 1px solid var(--line-soft); }
.chart-empty { padding: 18px 20px 20px; display: grid; gap: 6px; justify-items: start; }
.chart-empty .btn { margin-top: 6px; }
.chart .ax { font: 500 11.5px var(--mono); fill: var(--muted); }
.chart .vl { font: 700 11.5px var(--mono); fill: var(--asphalt); }
.chart .rl { font: 700 13px var(--font); fill: var(--asphalt); }
.chart .grid { stroke: var(--line-soft); stroke-width: 1; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .ln { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .ln.actual { stroke: var(--asphalt); }
.chart .ln.plan { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 6 5; }
.chart .ln.proj { stroke: var(--asphalt); stroke-width: 2; stroke-dasharray: 2 5; opacity: .7; }
.chart .limit { stroke: var(--stop); stroke-width: 1.5; stroke-dasharray: 8 4; }
.chart .dot.actual { fill: var(--asphalt); } .chart .dot.plan { fill: var(--muted); }
.chart .bx.go { fill: var(--go); } .chart .bx.done { fill: var(--tar); } .chart .bx.stop { fill: var(--stop); } .chart .bx.todo { fill: var(--line); }
.chart circle.dot { fill: var(--tar-2); stroke: var(--white); stroke-width: 1.5; }
.chart circle.dot.out { fill: var(--stop); stroke: var(--stop-wash); stroke-width: 3; }
.chart .avg { fill: var(--kerb); stroke: var(--asphalt); stroke-width: 1.2; }
.chart .mark circle { fill: none; stroke: var(--asphalt); stroke-width: 2.5; }
.chart .mark .guide { stroke: var(--asphalt); stroke-width: 1; stroke-dasharray: 3 3; opacity: .45; }
.key { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--asphalt); white-space: nowrap; }
.key::before { content: ''; width: 14px; height: 10px; border-radius: 2px; background: var(--tar); flex: none; }
.key.actual::before { height: 3px; background: var(--asphalt); }
.key.plan::before { height: 0; border-top: 2px dashed var(--muted); background: none; }
.key.proj::before { height: 0; border-top: 2px dotted var(--asphalt); background: none; }
.key.limit::before { height: 0; border-top: 2px dashed var(--stop); background: none; }
.key.done::before { background: var(--tar); } .key.stop::before { background: var(--stop); } .key.todo::before { background: var(--line); }
.key.avg::before { width: 4px; height: 14px; background: var(--kerb); outline: 1px solid var(--asphalt); }
.key.dot::before { width: 9px; height: 9px; border-radius: 50%; background: var(--tar-2); }
.key.out::before { width: 10px; height: 10px; border-radius: 50%; background: var(--stop); box-shadow: 0 0 0 2px var(--stop-wash); }
.stackbar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--concrete); gap: 2px; }
.stackbar i { width: var(--w); min-width: 3px; }
.stackbar .go, .legend .go { background: var(--go); } .stackbar .info, .legend .info { background: var(--info); }
.stackbar .stop, .legend .stop { background: var(--stop); } .stackbar .warn, .legend .warn { background: #C98A12; }
@media (prefers-reduced-motion: no-preference) { .stackbar i, .hbars .hb-t i { animation: grow .9s var(--ease-out) both; transform-origin: left; } }
.legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 18px; font-size: 14px; }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend li i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend li b { margin-left: auto; font-family: var(--mono); }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hbars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: end; }
.hb-l { display: grid; min-width: 0; } .hb-l b { font-weight: 700; } .hb-l span { font-size: 13px; color: var(--muted); }
.hb-t { grid-column: 1 / 2; height: 12px; background: var(--concrete); border-radius: 6px; overflow: hidden; }
.hb-t i { display: block; height: 100%; width: var(--w); background: var(--tar); border-radius: 6px; }
.hb-t i.stop { background: var(--stop); } .hb-t i.dark { background: var(--asphalt); }
.hb-v { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 700 16px var(--mono); }

/* ---------- guided setup (onboarding), share-by-WhatsApp, riders import, checklist ---------- */
@media (pointer: coarse) { .btn-sm, .seg button { min-height: 44px; } }
.wiz { max-width: 680px; margin: 0 auto; padding-bottom: calc(96px + var(--sab)); }
.wiz-h { padding: 18px 0 8px; display: grid; gap: 8px; }
.wiz-h h1 { font-size: clamp(26px, 6vw, 34px); }
.wiz-h .sub { color: var(--muted); }
.wiz-count { font: 700 13px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.wiz-prog { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; gap: 4px; }
.wiz-prog li { flex: 1; height: 6px; border-radius: 3px; background: var(--line-soft); }
.wiz-prog li.is-done { background: var(--go); }
.wiz-prog li.is-skip { background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 7px); }
.wiz-prog li.is-cur { background: var(--asphalt); }
.wiz-b { background: var(--white); border-radius: var(--r-surf); box-shadow: var(--shadow); padding: 20px; gap: 22px; }
@media (max-width: 480px) { .wiz-b { padding: 16px; margin: 0 -4px; } }
.wiz-sec { display: grid; gap: 12px; }
.wiz-sec h2 { font-size: 17px; }
details.wiz-sec > summary { cursor: pointer; font-weight: 750; min-height: 44px; display: flex; align-items: center; }
.wiz-f { position: sticky; bottom: 0; z-index: 20; display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; margin-top: 16px;
  padding: 12px 0 calc(12px + var(--sab)); background: linear-gradient(transparent, var(--paper) 18%); }
.wiz-f > .btn:last-child { justify-self: end; min-width: 0; }
@media (max-width: 480px) { .wiz-f { grid-template-columns: 1fr 1fr; } .wiz-f > :last-child { grid-column: 1 / -1; justify-self: stretch; } .wiz-f > span:empty { display: none; } }
.choice { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.choice legend { font-weight: 750; font-size: 16px; margin-bottom: 8px; padding: 0; }
.choice-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; min-height: 48px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; }
.choice-opt input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--asphalt); }
.choice-opt b { display: block; font-weight: 700; }
.choice-opt small { display: block; color: var(--muted); font-size: 13.5px; }
.choice-opt:has(input:checked) { box-shadow: inset 0 0 0 2.5px var(--asphalt); background: var(--paper); }
.choice-opt:has(input:disabled) { opacity: .6; cursor: default; }
.choice-opt:has(input:focus-visible) { outline: 3px solid var(--asphalt); outline-offset: 2px; }
fieldset.choice.yn { grid-template-columns: 1fr 1fr; }
fieldset.choice.yn legend { grid-column: 1 / -1; }
.gotlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gotlist .got { display: flex; gap: 8px; align-items: center; font-weight: 650; color: var(--go); }
.gotlist .ico { color: var(--go); }
.stoplist { margin: 0; padding-left: 26px; display: grid; gap: 8px; }
.stoplist li { display: flex; gap: 8px; align-items: center; }
.stoplist li::marker { font: 700 14px var(--mono); color: var(--muted); }
.stoplist .input { flex: 1; }
.icon-btn { width: 44px; height: 44px; flex: none; border: 0; border-radius: 8px; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.icon-btn:hover { background: var(--concrete); color: var(--asphalt); }
.panel-in { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: var(--paper); }
.share { display: grid; gap: 10px; }
.share-text { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--concrete); font: 500 13.5px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; }
.share-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-wa { background: #1E7A4C; color: #fff; }
.btn-wa:hover { background: #17633d; }
.btn-wa .ico { color: #fff; }
@media (max-width: 480px) { .share-acts > * { flex: 1 1 100%; } }
.file-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.file-btn:has(+ *) { cursor: pointer; }
input[type=file].sr-only:focus-visible + .file-btn { outline: 3px solid var(--asphalt); outline-offset: 2px; }
.imp-sample { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 10px; max-width: 100%; }
.imp-sample .tbl { font-size: 13px; }
.imp-figs { padding: 0; }
.imp-h { font-size: 16px; margin-bottom: 8px; }
.imp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.imp-rows > li { padding: 10px 12px; border-radius: 10px; background: var(--paper); font-size: 14.5px; overflow-wrap: anywhere; }
.imp-rows.bad > li { background: var(--stop-wash); }
.imp-errs { margin: 4px 0 0; padding-left: 18px; color: var(--stop); font-size: 14px; font-weight: 600; }
.imp-good summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.sticky-acts { position: sticky; bottom: 0; padding: 10px 0 calc(10px + var(--sab)); background: linear-gradient(transparent, var(--white) 20%); z-index: 2; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; }
.checklist li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.checklist li:first-child { border-top: 0; }
.checklist small { display: block; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.checklist .ck { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); display: grid; place-items: center; }
.checklist .is-done .ck { background: var(--go); box-shadow: none; color: #fff; }
.checklist .is-done .ck .ico { width: 16px; height: 16px; stroke-width: 2.6; }
.checklist .is-done b { color: var(--muted); }
.checklist-card { margin-bottom: 20px; }
.checklist-card .meter { margin: 14px 20px 4px; }
.checklist-card .checklist { padding: 0 20px 8px; }
.next-step { display: grid; gap: 10px; justify-items: start; }
details.wiz-sec > summary, .imp-good summary { list-style: none; gap: 8px; }
details.wiz-sec > summary::-webkit-details-marker, .imp-good summary::-webkit-details-marker { display: none; }
details.wiz-sec > summary::before, .imp-good summary::before { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; }
details[open].wiz-sec > summary::before, .imp-good[open] summary::before { transform: rotate(45deg); }

/* ---------- home pickups ---------- */
.pin-map { height: min(360px, 55vh); border-radius: var(--r-ctl); overflow: hidden; border: 1px solid var(--line); background: var(--paper); position: relative; z-index: 0; isolation: isolate; }
.home-pin span { display: block; width: 24px; height: 24px; margin: 2px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--kerb); border: 3px solid var(--asphalt); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.nudge { display: flex; flex-wrap: wrap; gap: 6px; }
.order-list { margin: 0; padding-left: 24px; display: grid; gap: 6px; }
.order-list small { color: var(--muted); }
.vstops li.home > i { background: var(--kerb); }
.vstops li[draggable="true"] { cursor: grab; }
.vstops li.dragging { opacity: .5; }
.pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 46vh; overflow: auto; overscroll-behavior: contain; }
.pick-list li { display: grid; gap: 6px; }
.pick-list .check-row small { display: inline; margin-left: 6px; }
.run-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.run-col { display: grid; gap: 10px; align-content: start; padding: 12px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--line-soft); background: var(--white); }
.run-col.over { box-shadow: inset 0 0 0 2px var(--stop); }
.run-riders { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.run-riders li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, 40%); gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--paper); }
.run-riders li[draggable="true"] { cursor: grab; }
.run-riders li small { display: block; color: var(--muted); font-size: 12.5px; }
.run-riders li:only-child:not(:has(select)) { grid-template-columns: 1fr; }

/* ---------- Help + Emergency (office) ---------- */
.o-help { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; border: 2px solid var(--muted-on-dark); background: transparent; color: #fff; font: 850 17px var(--font); cursor: pointer; flex: none; }
.o-help:hover { border-color: var(--kerb); color: var(--kerb); }
@media (pointer: coarse) { .o-help { width: 44px; height: 44px; min-width: 44px; } }
.em-banner { position: relative; background: var(--stop); color: #fff; padding: 8px 16px; display: grid; gap: 6px; box-shadow: 0 6px 18px -8px rgba(0,0,0,.5); }
.em-row { max-width: 1320px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 15px; }
.em-row .ico { color: #fff; }
.em-banner .em-open { background: #fff; color: var(--stop); }
@media (prefers-reduced-motion: no-preference) { .em-banner { animation: em-pulse 1.6s ease-in-out 3; } }
@keyframes em-pulse { 50% { background: #8f1c16; } }
.alert.em { box-shadow: inset 0 0 0 3px var(--stop); }
.em-facts { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 8px; font-size: 14.5px; }
.support-acts { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 480px) { .support-acts > * { flex: 1 1 100%; } }
details.howto { border-top: 1px solid var(--line-soft); padding-top: 8px; }
details.howto:first-child { border-top: 0; padding-top: 0; }
details.howto > summary { cursor: pointer; font-weight: 750; min-height: 44px; display: flex; align-items: center; }
details.howto ol { margin: 4px 0 8px; padding-left: 22px; display: grid; gap: 6px; }

/* ---------- mobile sweep (2026-10-13): 360–414 px first ---------- */
/* Grid children never grow past the screen: wide tables scroll inside their labelled container instead. */
.stack > *, .col > *, .view > *, .panel > *, .split.setup > * > * { min-width: 0; }
.o-brand { min-height: 44px; }
.page-head .back { min-height: 44px; }
@media (max-width: 600px) {
  /* One header row (brand, ?, account) above the nav strip; the company name is in the account menu. */
  .o-brand small { display: none; }
  .o-top-in { padding: 6px 12px 0; gap: 0 8px; }
  .o-nav { width: calc(100% + 24px); margin: 2px -12px 0; }
  .page-head .tools > * { flex: 1 1 auto; }
  .panel-h { flex-wrap: wrap; gap: 8px; }
}
/* Filters: two per row on a phone instead of a long column. */
.toolbar > .field, .toolbar > .inline-field { flex: 1 1 150px; min-width: 0; }
.toolbar .input { width: 100%; }
.toolbar > .inline-field:has(.seg) { flex-basis: 100%; }
@media (pointer: coarse) {
  .input, select.input, .inline-field.compact .input { min-height: 44px; }
  .month-strip .ms-head a, .chart-panel .end a, .panel-h .end a:not(.btn) { min-height: 44px; display: inline-flex; align-items: center; }
  .tbl .input { min-height: 44px; }
}
@media (max-width: 600px) { .tabs-row { flex-wrap: wrap; } }
.photo-full { display: block; width: 100%; height: auto; max-height: 75vh; object-fit: contain; border-radius: 10px; background: var(--concrete); }
.photo-grid { display: grid; gap: 10px; }
.live-map { height: min(460px, 60vh); margin: 0 16px 16px; border-radius: var(--r-ctl); overflow: hidden; border: 1px solid var(--line); position: relative; z-index: 0; isolation: isolate; background: var(--paper); }
.live-pin span { display: grid; place-items: center; width: 30px; height: 26px; border-radius: 7px; background: var(--kerb); box-shadow: 0 0 0 2px var(--asphalt), 0 4px 10px -2px rgba(0,0,0,.45); }
.live-pin span svg { width: 22px; height: 22px; }
.live-pin.stale span { background: var(--line); }
.live-card .row-between .ico { color: var(--asphalt); }
.live-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 16px; }
.live-card { background: var(--white); border-radius: var(--r-surf); box-shadow: var(--shadow); padding: 14px 16px; display: grid; gap: 6px; }
.live-card a { text-decoration: none; }
.area-pin span { display: grid; place-items: center; width: 22px; height: 22px; margin: 2px; border-radius: 6px; background: var(--stop); color: #fff; font-weight: 900; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.proof { display: grid; gap: 6px; justify-items: start; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13.5px; }
.checks li { display: flex; gap: 6px; align-items: baseline; }
.checks .ck { width: 14px; font-weight: 900; flex: none; }
.checks li.yes .ck { color: var(--go); }
.checks li.no { color: var(--muted); }

/* ---------- iPhone fixes (2026-10-13, WebKit-audited at 375/390/414): one set of global rules ---------- */
/* Safety net only: the real overflowing elements are fixed below and scripts/mobile-audit.mjs proves none remain. */
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Flex and grid children that hold text may shrink below their content (they wrap instead of pushing the page wide).
   :where() keeps this at zero specificity, so a rule that needs a minimum still wins. */
:where(body.office) :where(div, section, header, footer, article, aside, nav, li, dd, dt, label, p, span, a, h1, h2, h3, h4, b, strong, small, form, fieldset, details, summary) { min-width: 0; }
:where(body.office) :where(p, li, dd, h1, h2, h3, h4, span, b, a, small, label, td, th) { overflow-wrap: break-word; }
/* Fields never wider than their box. iOS gives date/time inputs a fixed intrinsic width and centred text: reset it. */
.input:not(.sr-only), body.office input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(.sr-only), body.office select:not(.sr-only), body.office textarea:not(.sr-only) { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
body.office input[type=date], body.office input[type=time], body.office input[type=datetime-local], body.office input[type=month] { -webkit-appearance: none; appearance: none; display: block; min-height: 44px; line-height: 1.3; background-color: #fff; }
body.office input::-webkit-date-and-time-value { text-align: left; margin: 0; }
body.office input::-webkit-datetime-edit { padding: 0; }
.input-month { width: 100%; min-width: 0; }
@media (min-width: 601px) { .input-month { width: auto; min-width: 170px; } }
/* Toolbars and filter rows: two fields per row on a phone, and nothing wider than the row. */
@media (max-width: 600px) {
  .toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; align-items: end; }
  .toolbar > * { min-width: 0; }
  .toolbar > .grow, .toolbar > .inline-field:has(.seg), .toolbar > .seg, .toolbar > .actions, .toolbar > .btn:only-child { grid-column: 1 / -1; }
  .toolbar > .btn { width: 100%; justify-content: center; }
  .seg { display: flex; width: 100%; } .seg button { flex: 1 1 auto; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .tabs-row { overflow: visible; flex-wrap: wrap; }
}

/* One responsive table: a table from 601 px, a stack of cards (label: value) on phones. Never a sideways scroll. */
@media (max-width: 600px) {
  .tbl-wrap, .imp-sample { overflow: visible; }
  .tbl, .tbl tbody, .tbl tfoot, .tbl tr, .tbl th, .tbl td { display: block; width: auto; }
  .tbl { border: 0; }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tbl tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
  .tbl tbody tr:last-child { border-bottom: 0; }
  .tbl td, .tbl tbody th, .tbl tfoot td { padding: 3px 0; border: 0; text-align: left; white-space: normal; }
  .tbl tbody th { font-size: 16px; padding-bottom: 6px; }
  .tbl td[data-label] { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 12px; align-items: baseline; justify-items: start; }
  .tbl td[data-label] > * { max-width: 100%; }
  .tbl td, .tbl th { overflow-wrap: anywhere; } /* long emails and references wrap inside the card */
  .tbl td[data-label]::before { content: attr(data-label); font: 650 13px/1.35 var(--font); letter-spacing: 0; color: var(--muted); }
  .tbl td:empty, .tbl td[data-label]:has(> :only-child:empty:not(input, select, textarea, button)) { display: none; } /* a lone checkbox is not empty */
  .tbl .num, .tbl tfoot td { text-align: left; white-space: normal; }
  .tbl .tight { width: auto; }
  .tbl .actions { flex-wrap: wrap; }
  .tbl td.actions-cell, .tbl td:has(> .actions), .tbl td:has(> .btn:only-child) { grid-template-columns: minmax(0, 1fr); }
  .tbl td:has(> .actions)::before, .tbl td:has(> .btn:only-child)::before { display: none; }
  .tbl tfoot tr { border-top: 1.5px solid var(--asphalt); background: var(--paper); }
  .tbl tfoot td { font-weight: 800; }
  .tbl tr.is-alert { box-shadow: inset 4px 0 0 var(--stop); }
}

/* Panel headers: title left, actions right on wide screens; on a phone the actions sit under the title, full width. */
.panel-h > h2, .panel-h > h3 { min-width: 0; }
@media (max-width: 600px) {
  .panel-h:has(.end .btn) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .panel-h:has(.end .btn) .end { margin-left: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .panel-h:has(.end .btn) .end > .btn, .panel-h:has(.end .btn) .end > a.btn { flex: 1 1 auto; justify-content: center; }
  .page-head { align-items: stretch; }
  .page-head .tools { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
}

/* Alerts: icon | text | actions; without an icon the text takes the first column; on a phone the actions go under. */
.alert:not(:has(> .ico)) { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 600px) {
  .alert { grid-template-columns: 24px minmax(0, 1fr); }
  .alert:not(:has(> .ico)) { grid-template-columns: minmax(0, 1fr); }
  .alert > .acts { grid-column: 1 / -1; justify-content: flex-start; }
  .alert > .acts > .btn { flex: 1 1 auto; justify-content: center; }
}

/* Legends: one grid, every swatch in an 18 px slot so the labels line up in columns. */
.legend, .route-legend { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 8px 18px; font-size: 13.5px; color: var(--muted); align-items: center; }
.route-legend { padding: 0 20px 14px; }
.legend > li, .legend > span, .route-legend > li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.legend > li > i, .legend > span > i, .route-legend > li > i { justify-self: center; margin: 0; }
.route-legend .k-stop, .route-legend .k-arr, .route-legend .k-drop { width: 12px; height: 12px; }
.legend li b { margin-left: 0; }

/* Trip facts: same grid as the stat blocks (3 across, 2 on a narrow card), one rule above, no half-width borders. */
.facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; padding: 16px 20px; border-top: 1px solid var(--line-soft); }
.facts > div { padding: 0; border-top: 0; }
@media (max-width: 440px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.panel:has(> .facts) { container: stat / inline-size; }
@container stat (max-width: 409px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The run (trip detail) on a phone: the stops go down the card with every name, and the vehicle moves down the line
   beside them, so it never covers a name. */
@media (max-width: 560px) {
  .run-strip .strip { flex-direction: column; align-items: stretch; gap: 14px; padding: 0 40px 0 0; }
  .run-strip .strip::before { left: 7px; right: auto; top: 9px; bottom: 9px; width: 4px; height: auto; }
  .run-strip .strip::after { left: 8.5px; right: auto; top: 9px; bottom: 9px; width: 1px; height: auto; background: repeating-linear-gradient(180deg, var(--kerb) 0 8px, transparent 8px 14px); }
  .run-strip .strip .stop-n, .run-strip .strip .stop-n:first-child, .run-strip .strip .stop-n:last-child { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; justify-items: start; text-align: left; align-items: center; gap: 0 12px; font-size: 14.5px; }
  .run-strip .strip .stop-n span { display: block; }
  .run-strip .strip .stop-n small { justify-self: end; }
  .run-strip .strip .bus { left: auto; right: -40px; transform: translateX(-100%); top: calc((100% - 24px) * var(--p)); margin-left: 0; }
}

/* Phone navigation: bottom bar (4 screens + More); the top strip is for tablets and desktops. */
.o-bottom { display: none; }
@media (max-width: 600px) {
  .o-nav { display: none; }
  .o-bottom { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--asphalt); padding: 0 4px var(--sab); box-shadow: 0 -8px 24px -12px rgba(0,0,0,.45); }
  .o-bottom > a, .o-bottom > button { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 58px; padding: 6px 2px; border: 0; background: transparent; color: var(--muted-on-dark); font: 650 12px var(--font); text-decoration: none; cursor: pointer; position: relative; }
  .o-bottom .ob-ico { position: relative; display: grid; place-items: center; }
  .o-bottom .ico { width: 22px; height: 22px; }
  .o-bottom .ob-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .o-bottom [aria-current="page"], .o-bottom .ob-more.on { color: #fff; }
  .o-bottom [aria-current="page"] .ico, .o-bottom .ob-more.on .ico { color: var(--kerb); }
  .o-bottom [aria-current="page"]::before, .o-bottom .ob-more.on::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 2px 2px; background: var(--kerb); }
  .o-bottom .badge { position: absolute; top: -6px; left: 14px; min-width: 18px; height: 18px; font-size: 11px; padding: 0 5px; border-radius: 999px; background: var(--stop-on-dark); color: var(--asphalt); font-weight: 800; display: inline-grid; place-items: center; font-family: var(--mono); }
  .o-bottom .badge[hidden] { display: none; }
  /* The last line of every screen clears the bottom bar (58px + home indicator) with room to spare. */
  body.office main.o-main { padding-bottom: calc(58px + var(--sab) + 32px); }
  .o-top-in { padding-bottom: 6px; }
  #toast { bottom: calc(76px + var(--sab)); }
}
@media (max-width: 600px) {
  .subnav { flex-wrap: wrap; overflow: visible; }
  .subnav a { white-space: normal; }
  .diff div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* Alert card rows (actions.js alertCard): head (title + badge) | message on its own line | details | when | actions. */
.alert .a-body { display: grid; gap: 4px; min-width: 0; align-content: start; }
.alert .a-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 24px; }
.alert .a-title { font-weight: 800; }
.alert .a-msg { margin: 0; }
.alert .a-det { font-size: 14px; color: var(--tar); }
.alert .a-det a { font-weight: 700; }
.em-row .em-text { display: grid; gap: 2px; min-width: 0; }
.em-row .em-t { letter-spacing: .04em; }
.live-title { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }

/* ---------- Desktop (1024 px and up, 2026-10-14): dark theme, left sidebar, Live-map dashboard home ---------- */
.o-side, .o-search, .o-gear { display: none; }
@media (min-width: 1024px) {
  /* Dark tokens: near-black page, dark grey cards, light text, yellow accent; green = on time / in progress, blue = scheduled. */
  body.office {
    --paper: #0D1114; --white: #161C21; --concrete: #222A31; --line: #39434C; --line-soft: #283038;
    --asphalt: #ECF0EE; --tar: #C3CCCA; --tar-2: #8E9A98; --muted: #A9B4B2;
    --go: #5FD39A; --go-wash: #12321F; --stop: #FF8A80; --stop-wash: #3D1714; --warn: #F2C46B; --warn-wash: #3A2C10;
    --info: #8FB2F7; --info-wash: #16243E; --kerb-wash: #3A3112;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.7);
    color: var(--asphalt); background: var(--paper); padding-left: 248px; color-scheme: dark;
  }
  /* Fills that were "dark ink with white text" stay readable now ink is light. */
  body.office .btn-dark { background: #ECF0EE; color: #0D1114; }
  body.office .btn-dark:hover:not(:disabled) { background: #fff; }
  body.office .btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.05); }
  body.office .btn-stop { background: #C62F25; color: #fff; } body.office .btn-go { background: #1E7A4C; color: #fff; }
  body.office .chip.dark, body.office .clockpill, body.office .days label:has(input:checked) { background: #ECF0EE; color: #0D1114; }
  body.office .subnav a[aria-current="page"] { background: #1B232A; color: #fff; box-shadow: inset 3px 0 0 var(--kerb); }
  body.office .subnav a[aria-current="page"] small { color: #C3CCCA; }
  body.office .input[aria-invalid="true"] { background: #2A1614; }
  body.office .triprow:hover, body.office details.trip-acc > summary:hover { background: #1B2228; }
  body.office .group-h { background: #12181D; }
  body.office .bub { background: #222A31; color: #ECF0EE; }
  body.office .bub.in, body.office .thread .msg.in .bub { background: #1E3A28; color: #ECF0EE; }
  body.office .thread .msg .bub { background: #222A31; box-shadow: none; }
  body.office .thread .msg.out .bub { background: #1E3A28; }
  body.office .strip .stop-n i, body.office .vstops li > i { background: #161C21; }
  body.office .skel i { background: linear-gradient(90deg, #1B2228 0%, #242C33 50%, #1B2228 100%); background-size: 200% 100%; }
  body.office .code { background: #0D1114; color: var(--kerb); box-shadow: inset 0 0 0 1px var(--line); }
  body.office .stepper li[aria-current="step"] i { background: #ECF0EE; color: #0D1114; }
  body.office .input { background: #0F1418; color: var(--asphalt); border-color: var(--line); }
  body.office input.input, body.office select.input, body.office textarea.input, body.office input[type=date], body.office input[type=time], body.office input[type=month], body.office input[type=datetime-local] { background-color: #0F1418; color: var(--asphalt); }
  body.office .input::placeholder { color: #8E9A98; }
  body.office .tbl tbody tr:hover { background: #1B2228; }
  body.office .tbl thead th { background: var(--white); }
  body.office .tbl tr.is-alert { background: #2A1614; }
  body.office .alert.red { background: #2C1513; box-shadow: inset 0 0 0 1.5px rgba(255,138,128,.45); }
  body.office .alert.amber { background: #2B2410; box-shadow: inset 0 0 0 1.5px rgba(242,196,107,.4); }
  body.office .alert .meta, body.office .alert .a-det { color: #C3CCCA; }
  body.office .note-box:not(.warn):not(.stop):not(.go):not(.kerb) { background: var(--concrete); color: var(--asphalt); } /* status note boxes keep their dark washes */
  body.office dialog.sheet { background: var(--white); color: var(--asphalt); }
  body.office .sheet-h { background: var(--white); }
  body.office .plate { background: #0D1114; color: #ECF0EE; box-shadow: inset 0 0 0 2px #ECF0EE; }
  body.office .leaflet-tile-pane { filter: brightness(.82) contrast(1.05) saturate(.85); }
  body.office .leaflet-popup-content-wrapper, body.office .leaflet-popup-tip { background: #161C21; color: #ECF0EE; box-shadow: 0 10px 30px -10px rgba(0,0,0,.7); }
  body.office .leaflet-popup-content a { color: var(--kerb); }
  body.office .leaflet-bar a { background: #161C21; color: #ECF0EE; border-color: #39434C; }
  body.office .leaflet-control-attribution { background: rgba(13,17,20,.75); color: #A9B4B2; }
  body.office .leaflet-control-attribution a { color: #C3CCCA; }
  /* Fills that pair a token with hard-coded white text: in the dark theme --asphalt/--tar are light and --stop/--go are
     the light "on dark" tints, so these get their own fills (design QA 2026-10-14, contrast in brackets). */
  body.office .toast { background: #ECF0EE; color: #0D1114; box-shadow: 0 12px 30px -12px rgba(0,0,0,.8); } /* 16.5:1 */
  body.office .em-banner { background: #C62F25; } /* white 5.5:1 */
  body.office .em-banner .em-open { color: #8F1C16; } /* 9.0:1 on white */
  body.office .area-pin span { background: #C62F25; }
  body.office .bulkbar { background: #222A31; color: #ECF0EE; box-shadow: inset 0 0 0 1px #39434C, var(--shadow); } /* 12.7:1 */
  body.office .bulkbar .btn-ghost { color: #ECF0EE; box-shadow: inset 0 0 0 1.5px #8E9A98; }
  body.office .o-menu-btn:hover { background: #161C21; }
  body.office .stepper li.done i, body.office .checklist .is-done .ck { color: #0D1114; } /* on #5FD39A: 10.2:1 */

  /* Sidebar */
  .o-side { display: flex; flex-direction: column; gap: 4px; position: fixed; left: 0; top: 0; bottom: 0; width: 248px; padding: 18px 12px 24px; background: #090C0F; border-right: 1px solid #222A31; overflow-y: auto; z-index: 70; }
  .o-side-brand { display: flex; align-items: center; gap: 12px; padding: 4px 10px 18px; color: #fff; text-decoration: none; font-weight: 850; font-size: 19px; letter-spacing: -.02em; }
  .o-side-brand .mark { width: 30px; height: 30px; flex: none; }
  .o-side-brand small { display: block; font-weight: 500; font-size: 12.5px; color: #A9B4B2; letter-spacing: 0; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .o-side-nav { display: grid; gap: 2px; }
  .o-side-nav a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 10px; color: #C3CCCA; text-decoration: none; font-weight: 650; font-size: 15px; }
  .o-side-nav a .ico { width: 20px; height: 20px; }
  .o-side-nav a:hover { background: #161C21; color: #fff; }
  .o-side-nav a[aria-current="page"] { background: #1B232A; color: #fff; box-shadow: inset 3px 0 0 var(--kerb); }
  .o-side-nav a[aria-current="page"] .ico { color: var(--kerb); }
  .o-side-nav .badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #FF8A80; color: #0D1114; font: 800 12px/20px var(--mono); text-align: center; }
  .o-side-nav .badge[hidden] { display: none; }
  .o-side-more { margin-top: 18px; padding-top: 14px; border-top: 1px solid #222A31; }
  .o-side-h { margin: 0 12px 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8E9A98; }

  /* Top bar: search, alerts bell, help, settings, account (no tab strip, no logo: they're in the sidebar) */
  .o-top { background: #0D1114; border-bottom: 1px solid #222A31; } /* no backdrop-filter: it would make the header the fixed sidebar's containing block */
  .o-top .o-nav, .o-top .o-brand { display: none; }
  .o-top-in { max-width: none; padding: 0 28px; }
  .o-search { display: flex; align-items: center; gap: 8px; position: relative; flex: 0 1 460px; color: #A9B4B2; }
  .o-search > .ico { position: absolute; left: 12px; width: 18px; height: 18px; pointer-events: none; }
  .o-search .o-search-in { padding-left: 40px; background: #161C21; border-color: #2C353D; color: #ECF0EE; min-height: 42px; border-radius: 999px; }
  .o-search-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 80; list-style: none; margin: 0; padding: 6px; background: #161C21; border: 1px solid #39434C; border-radius: 12px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.8); }
  .o-search-list[hidden] { display: none; }
  .o-search-list a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; color: #ECF0EE; text-decoration: none; }
  .o-search-list a:hover, .o-search-list a:focus-visible { background: #222A31; }
  .o-search-list small { color: #A9B4B2; }
  .o-search-list li.muted { padding: 10px 12px; }
  .o-gear { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #C3CCCA; }
  .o-gear:hover { background: #161C21; color: #fff; }
  .o-main { max-width: 1600px; padding: 0 28px 56px; }
  .page-head h1 { color: #fff; }
}

/* Dashboard (desktop home; also usable on narrower screens, stacked) */
.dash-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1180px) { .dash-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); } }
.dash-map { height: min(68vh, 640px); min-height: 360px; margin: 0 16px 16px; border-radius: var(--r-ctl); overflow: hidden; position: relative; z-index: 0; isolation: isolate; background: var(--concrete); }
.dash-legend { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.dash-legend li { display: inline-flex; align-items: center; gap: 6px; }
.dash-dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.dash-dot.st-in_progress, .dash-pin.st-in_progress span { background: #5FD39A; }
.dash-dot.st-scheduled, .dash-pin.st-scheduled span { background: #8FB2F7; }
.dash-dot.st-late, .dash-pin.st-late span { background: #FF8A80; }
.dash-pin span { display: grid; place-items: center; width: 32px; height: 28px; border-radius: 8px; box-shadow: 0 0 0 2px #0D1114, 0 6px 14px -4px rgba(0,0,0,.6); }
.dash-pin span svg { width: 22px; height: 22px; }
.dash-pop { display: grid; gap: 6px; min-width: 200px; font-size: 14px; }
.dash-pop small { color: var(--muted); }
.dash-rows { list-style: none; margin: 0; padding: 0 16px 16px; display: grid; gap: 8px; }
.dash-rows a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--concrete); text-decoration: none; color: inherit; }
.dash-rows .dash-r { display: grid; min-width: 0; } .dash-rows small { color: var(--muted); }
.chip.st-pill.go { background: var(--go-wash); color: var(--go); } .chip.st-pill.info { background: var(--info-wash); color: var(--info); } .chip.st-pill.stop { background: var(--stop-wash); color: var(--stop); }
.dash-side { display: grid; gap: 16px; }
.dash-h { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 4px; }
.dash-kpis { display: grid; gap: 8px; }
.dash-tiles { grid-template-columns: minmax(0, 1fr); margin: 0; }
@media (min-width: 600px) and (max-width: 1179px) { .dash-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dash-charts { display: grid; gap: 16px; }
.dash-chart .chart { min-height: 170px; }
.ln.fuel { stroke: var(--asphalt); } .bx.done { fill: var(--go); } .bx.todo { fill: var(--line); }
.donut-wrap { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; }
.donut { width: 120px; height: 120px; }
.donut-n { font: 850 22px var(--font); fill: var(--asphalt); }
.donut-legend { margin: 0; grid-template-columns: minmax(0, 1fr); }
.donut-legend li { grid-template-columns: 14px minmax(0, 1fr) auto; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw-0 { background: #F2C230; } .sw-1 { background: #5FD39A; } .sw-2 { background: #7FA8F5; } .sw-3 { background: #FF8A80; } .sw-4 { background: #C9A7F5; } .sw-5 { background: #9AA5A3; }

/* Reports hub */
.report-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.report-tile { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; border-radius: var(--r-surf); background: var(--white); box-shadow: var(--shadow), inset 0 0 0 1px var(--line-soft); text-decoration: none; color: inherit; }
.report-tile .ico { width: 26px; height: 26px; color: var(--kerb); }
.report-tile b { display: block; font-size: 17px; margin-bottom: 4px; } .report-tile small { color: var(--muted); font-size: 14px; }
.report-tile:hover { box-shadow: var(--shadow), inset 0 0 0 1.5px var(--kerb); }
/* The screen container takes focus on navigation (screen readers); it isn't a control, so no focus ring. */
body.office main.o-main:focus, body.office main.o-main:focus-visible { outline: none; }
.dash-side .alerts { margin: 0; }
.dash-side .alert { grid-template-columns: 24px minmax(0, 1fr); }
.dash-side .alert > .acts { grid-column: 1 / -1; justify-content: flex-start; }
/* Selects look and size like the other fields everywhere (WebKit ignores height on native selects). */
body.office select.input, body.office .field select { -webkit-appearance: none; appearance: none; min-height: 44px; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E9A98' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; }
/* The colour per meaning, as in the driver app: incidents red, messages WhatsApp green, fuel amber. */
.o-side-nav a[data-nav="incidents"] .ico, .menu-list a[href="#/incidents"] .ico { color: #E5483D; }
.o-side-nav a[data-nav="whatsapp"] .ico, .o-nav a[data-nav="whatsapp"] .ico { color: #25D366; }
.o-side-nav a[data-nav="fuel"] .ico, .o-nav a[data-nav="fuel"] .ico, .report-tile[href="#/fuel"] .ico { color: #F59E0B; }
.o-side-nav a[aria-current="page"][data-nav="incidents"] .ico { color: #E5483D; } .o-side-nav a[aria-current="page"][data-nav="whatsapp"] .ico { color: #25D366; } .o-side-nav a[aria-current="page"][data-nav="fuel"] .ico { color: #F59E0B; }

/* Phones: buttons stacked full width start their icon and label at the same inset (icons line up down the stack). */
@media (max-width: 600px) {
  .page-head .tools > .btn, .support-acts > .btn, .panel-h:has(.end .btn) .end > .btn, .panel-h:has(.end .btn) .end > a.btn, .alert > .acts > .btn, .actions > .btn { justify-content: flex-start; padding-left: 16px; }
}

/* Larger Text in the native app: buttons and the bottom-bar labels wrap rather than clip. */
html.big-text body.office .btn { white-space: normal; text-align: center; line-height: 1.2; padding-top: 6px; padding-bottom: 6px; }
html.big-text body.office .o-bottom .ob-l { white-space: normal; text-overflow: clip; line-height: 1.1; }

/* Menus (design QA 2026-10-14): More is grouped like the desktop sidebar; Account keeps Sign out apart from navigation. */
.menu-h { margin: 14px 4px 4px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.menu-h:first-child { margin-top: 0; }
.menu-signout { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.acct-more { display: none; }
@media (min-width: 601px) and (max-width: 1023px) { .acct-more { display: block; } }
@media (min-width: 1024px) { .o-side-nav a { min-height: 40px; padding-top: 6px; padding-bottom: 6px; } }
.sheet-h h2:focus { outline: none; } /* the title takes focus on open for screen readers; it isn't a control */

/* Control boundaries at 3:1 or more (design QA 2026-10-14): fields and ghost buttons get --line-ctl; dividers keep --line.
   #848E97 is 3.3:1 on white and 3.1:1 on the page; dark #6B7782 is 4.1:1 on the field fill and 3.8:1 on cards. */
body.office { --line-ctl: #848E97; }
@media (min-width: 1024px) { body.office { --line-ctl: #6B7782; } }
body.office .input, body.office input.input, body.office select.input, body.office textarea.input { border-color: var(--line-ctl); }
body.office .btn-ghost { box-shadow: inset 0 0 0 1.5px var(--line-ctl); }
@media (min-width: 1024px) { body.office .o-search .o-search-in { border-color: var(--line-ctl); } }
/* Phone tap targets: 44 pt for link buttons, disclosure summaries and the map zoom buttons. */
@media (pointer: coarse) {
  .btn-link, .diff-d summary { min-height: 44px; display: inline-flex; align-items: center; }
  .leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }
}
body.office .input:focus { border-color: var(--asphalt); }
body.office .input[aria-invalid="true"] { border-color: var(--stop); }
/* Map pins: shape as well as colour (design QA): scheduled is outlined, late carries a "!" badge. Legend matches. */
.dash-pin span { position: relative; }
.dash-pin.st-scheduled span { background: #161C21; color: #8FB2F7; box-shadow: inset 0 0 0 2px #8FB2F7, 0 0 0 2px #0D1114, 0 6px 14px -4px rgba(0,0,0,.6); }
.dash-pin .pin-late { position: absolute; top: -7px; right: -7px; width: 16px; height: 16px; border-radius: 50%; background: #C62F25; color: #fff; font: 900 11px/16px var(--font); text-align: center; box-shadow: 0 0 0 2px #0D1114; }
.dash-dot.st-scheduled { background: transparent; box-shadow: inset 0 0 0 2px #8FB2F7; }
.dash-dot.st-late { position: relative; }
.dash-dot.st-late::after { content: '!'; position: absolute; inset: 0; font: 900 10px/12px var(--font); text-align: center; color: #0D1114; }
.live-pin.stale span { background: #fff; color: #525D67; outline: 2px dashed #525D67; outline-offset: -2px; }
.o-search-list a.is-active { background: #222A31; }
/* Segmented controls: a clear selected state on the dark desktop, and one scrollable row on phones (design QA). */
@media (min-width: 1024px) {
  body.office .seg button[aria-pressed="true"] { background: #ECF0EE; color: #0D1114; box-shadow: none; }
  body.office .seg button:hover:not([aria-pressed="true"]) { color: #ECF0EE; background: rgba(255,255,255,.05); }
  body.office .note-box.kerb { color: #ECF0EE; }
}
.inline-field > .seg { justify-self: start; }
/* Phones: segmented controls wrap to a second row (never scroll sideways); the folded Trips panels take the full width. */
@media (max-width: 600px) {
  .seg { flex-wrap: wrap; max-width: 100%; }
  .page-head .tools > details.more-tools, .toolbar > details.filters { flex: 1 1 100%; width: 100%; min-width: 0; }
  details.more-tools .stack > .btn { width: 100%; justify-content: flex-start; white-space: normal; text-align: left; }
  details.filters > .toolbar { display: grid; grid-template-columns: minmax(0, 1fr); }
}
/* Increase Contrast and Reduce Transparency (design QA). */
@media (min-width: 1024px) and (prefers-contrast: more) { body.office { --muted: #C9D2D0; --line: #66727A; --line-soft: #66727A; } }
@media (prefers-reduced-transparency: reduce) { dialog.sheet::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(18,22,27,.75); } }
.input-month { width: auto; min-width: 190px; }
@media (min-width: 1024px) {
  .o-who .bell, .o-help, .o-gear { width: 40px; height: 40px; border: 0; border-radius: 50%; box-shadow: none; }
  .o-who .bell:hover, .o-help:hover, .o-gear:hover { background: #161C21; color: #fff; }
  .dash-rows a:hover { background: #283038; }
  .tabs-row a:hover { color: var(--asphalt); }
}
@media (max-width: 600px) {
  details.more-tools > summary, details.filters > summary { list-style: none; cursor: pointer; }
  details.more-tools > summary::-webkit-details-marker, details.filters > summary::-webkit-details-marker { display: none; }
  details.more-tools[open] > .stack, details.filters[open] > .toolbar { margin-top: 10px; }
  .tbl td.ph-hide { display: none; }
}
.page-head .tools > .chip, .page-head .tools > .clockpill { flex: 0 0 auto; }
.live-map.is-empty { height: 200px; min-height: 0; }
@media (min-width: 1024px) { body.office .dash-chart .chart .bx.todo { fill: #6B7781; } } /* 3.8:1 on the card */

/* Papers and service (Milestone E) */
.due-list { list-style: none; margin: 0; padding: 4px 16px 12px; display: grid; gap: 8px; }
.due-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'chip what act' 'chip when act'; gap: 2px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.due-list li > .chip { grid-area: chip; } .due-list .due-t { grid-area: what; min-width: 0; } .due-list .due-d { grid-area: when; color: var(--muted); font-size: 14.5px; } .due-list li > .btn { grid-area: act; }
.papers { list-style: none; margin: 0; padding: 4px 16px 12px; display: grid; gap: 4px; }
.papers .paper { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.papers .paper > div:first-child { display: grid; gap: 4px; min-width: 0; }
.struck { text-decoration: line-through; color: var(--muted); }

/* ---------- Motion (2026-10-15): the office is used all day, so motion stays short and quiet ---------- */
@keyframes sheet-out { to { transform: translateY(10px) scale(.99); opacity: 0; } }
dialog.sheet[open].closing { animation: sheet-out .15s ease-in both; }
dialog.sheet.closing::backdrop { opacity: 0; transition: opacity .15s ease-in; }
.o-main > .view.view-in { animation: screen-in .18s var(--ease-out) backwards; }

/* Settings sections that fold away (people.js fold()). The summary line says what is set while closed. */
details.fold > summary { cursor: pointer; list-style: none; border-bottom: 0; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold[open] > summary { border-bottom: 1px solid var(--line-soft); }
details.fold > summary h2 { flex: none; }
.fold-sum { margin-left: auto; font-size: 14.5px; color: var(--muted); text-align: right; min-width: 0; }
details.fold[open] .fold-sum { display: none; }
details.fold > summary::after { content: ''; width: 9px; height: 9px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); margin: -4px 4px 0 auto; flex: none; transition: transform .2s var(--ease-out); }
details.fold:not([open]) .fold-sum + * { margin-left: 0; }
details.fold:not([open]) > summary::after { margin-left: 12px; }
details.fold[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
details.fold > summary:hover h2 { text-decoration: underline; text-underline-offset: 4px; }
/* A rule written as a sentence, with the number box inside it. */
.rule { font-size: 16.5px; line-height: 2.1; color: var(--asphalt); }
body.office .rule input.num-in { display: inline-block; width: 84px !important; max-width: 84px !important; min-height: 40px; padding: 4px 8px; margin: 0 4px; text-align: center; font-weight: 700; vertical-align: baseline; }
body.office .rule input.num-in.wide { width: 112px !important; max-width: 112px !important; }
.rule-h { font-size: 15px; font-weight: 800; margin-top: 8px; }
.rule-example { margin-top: -4px; }

/* Address search with suggestions (homes.js placePicker). */
.pp-box { position: relative; }
.pp-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; list-style: none; margin: 0; padding: 6px; background: var(--white); border-radius: 12px; box-shadow: 0 0 0 1px var(--line), 0 18px 40px -16px rgba(18,22,27,.45); max-height: 280px; overflow: auto; }
.pp-opt { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 15.5px; }
.pp-opt:hover, .pp-opt[aria-selected="true"] { background: var(--concrete); }
.pp-opt small { color: var(--muted); font-size: 13px; flex: none; }
.pp .pin-map { margin-top: 10px; }
/* Setup: a pick-up point row is its name, "Find it on the map", and remove. */
.stoplist li.stop-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
@media (max-width: 560px) { .stoplist li.stop-row { grid-template-columns: minmax(0, 1fr) auto; } .stoplist li.stop-row > .btn { grid-column: 1 / -1; grid-row: 2; justify-self: start; } }

/* Vehicles on the maps (routemap.js movingMarkers). Live: a ring pulses out and a green dot blinks.
   No signal: no pulse, a grey dot, slightly faded; the van waits where it was last seen. */
.live-pin span, .dash-pin span { position: relative; }
.is-live span::before { content: ''; position: absolute; inset: -5px; border-radius: 11px; border: 2.5px solid var(--kerb); opacity: 0; pointer-events: none; }
.is-live span::after, .no-signal span::after { content: ''; position: absolute; top: -5px; right: -5px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.is-live span::after { background: #1FA35C; }
.no-signal span::after { background: #8E9A98; }
.no-signal span { opacity: .78; }
@media (prefers-reduced-motion: no-preference) {
  .is-live span::before { animation: van-pulse 1.8s ease-out infinite; }
  .is-live span::after { animation: van-blink 1.2s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .is-live span::before { opacity: .7; } }
@keyframes van-pulse { 0% { opacity: .9; transform: scale(.9); } 80%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes van-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Trip route map: which way it went (routemap.js). */
.route-arrow-wrap, .route-flag-wrap, .route-arr-wrap { background: none; border: 0; }
.route-arrow { display: block; width: 22px; height: 22px; border-radius: 50%; background: #12161B; box-shadow: 0 0 0 2px #F2C230; position: relative; }
.route-arrow::after { content: ''; position: absolute; left: 6px; top: 5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid #F2C230; }
.route-flag { display: inline-block; white-space: nowrap; padding: 5px 10px; border-radius: 8px; font: 800 13px/1 var(--font); color: #fff; box-shadow: 0 6px 14px -6px rgba(0,0,0,.6); position: relative; }
.route-flag::after { content: ''; position: absolute; left: 0; bottom: -10px; width: 3px; height: 12px; background: inherit; }
.route-flag.start { background: #1D7347; }
.route-flag.end { background: #12161B; }
.route-arr { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1D7347; color: #fff; font: 800 12px/1 var(--font); box-shadow: 0 0 0 2px #fff, 0 3px 8px -2px rgba(0,0,0,.5); }
.route-legend .k-start { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(90deg, #1D7347 50%, #12161B 50%); }
.route-svg-num { font: 800 11px var(--font); fill: #fff; }
.corridor-preview-wrap { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 8px; overflow: hidden; }
.corridor-map { height: 300px; width: 100%; border-radius: 8px; z-index: 0; }
.corridor-preview { display: block; width: 100%; height: auto; min-height: 120px; color: var(--kerb); }
/* People: the owner's "Can download backups" tick (2026-10-16) */
body.office .check-inline { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
body.office .check-inline input { width: 18px !important; height: 18px; margin: 0; accent-color: var(--kerb, #F2C230); }
/* Long lists: 25 rows, then Show more / Show all (core.js table). */
.tbl-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; border-top: 1px solid var(--line, rgba(127,127,127,.25)); color: var(--muted, #6B7580); font-size: 14px; }
.tbl-more-b { display: flex; gap: 8px; flex-wrap: wrap; }
.panel > .tbl-paged > .tbl-wrap { border-radius: 0; }

/* The night map (office/nightmap.js): dark city, main roads glowing kerb yellow, and the fleet glowing like headlights.
   On the road: kerb yellow with a soft glow. Late: red with a red glow. Scheduled (not moving yet): dark, blue outline.
   No signal: the glow goes out and the van fades a little, where it was last seen. */
.night-map.leaflet-container { background: #0B0F14; }
.night-map.map-raster .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.35); }
.night-map .leaflet-control-zoom a { background: #161C22; color: #E8ECEF; border-color: #2A323B; }
.night-map .leaflet-control-zoom a:hover { background: #222A32; }
.night-map .leaflet-control-attribution { background: rgba(11,15,20,.75); color: #8A949E; }
.night-map .leaflet-control-attribution a { color: #C9D1D8; }
.dash-dot.st-in_progress, .dash-pin.st-in_progress span { background: #F2C230; }
.night-map .live-pin span, .night-map .dash-pin.st-in_progress span { background: #F2C230; color: #12161B;
  box-shadow: 0 0 0 2px #0B0F14, 0 0 14px 4px rgba(242,194,48,.6), 0 0 38px 12px rgba(242,194,48,.2); }
.night-map .dash-pin.st-late span { box-shadow: 0 0 0 2px #0B0F14, 0 0 14px 4px rgba(255,110,96,.55), 0 0 36px 10px rgba(255,110,96,.18); }
.night-map .no-signal span { box-shadow: 0 0 0 2px #0B0F14 !important; opacity: .7; }
.night-map .is-live span::after, .night-map .no-signal span::after { box-shadow: 0 0 0 2px #0B0F14; }
@media (prefers-reduced-motion: no-preference) {
  .night-map .is-live span { animation: van-glow 2.4s ease-in-out infinite; }
}
@keyframes van-glow { 50% { filter: brightness(1.12) drop-shadow(0 0 6px rgba(242,194,48,.7)); } }

/* Vehicles on the live maps, Uber-style (2026-10-17): a minibus seen from above, nose first, turned to the way it's
   driving and gliding to each new position. On the road it glows kerb yellow and a soft ring pulses under it; late,
   the glow is red with a "!" badge; scheduled, it's dark with a blue edge; no signal, it's grey with no glow. */
.van-top { background: none; border: 0; }
.van-top .van-rot { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .9s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.van-top .van-rot svg { width: 25px; height: 42px; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.van-top.st-in_progress .van-rot svg, .van-top.is-live:not(.st-late):not(.st-scheduled) .van-rot svg { filter: drop-shadow(0 0 4px rgba(242,194,48,.95)) drop-shadow(0 0 12px rgba(242,194,48,.55)); }
.van-top.st-late .van-rot svg { filter: drop-shadow(0 0 4px rgba(255,110,96,.95)) drop-shadow(0 0 12px rgba(255,110,96,.5)); }
.van-top.no-signal .van-rot svg, .van-top.stale .van-rot svg { filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); opacity: .8; }
.van-top .pin-late { position: absolute; top: 0; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #C62F25; color: #fff; font: 900 11px/16px var(--font); text-align: center; box-shadow: 0 0 0 2px #0D1114; z-index: 1; }
.van-top.is-live::before { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: radial-gradient(circle, rgba(242,194,48,.35), rgba(242,194,48,0) 70%); pointer-events: none; }
.van-top.st-late.is-live::before { background: radial-gradient(circle, rgba(255,110,96,.35), rgba(255,110,96,0) 70%); }
@media (prefers-reduced-motion: no-preference) {
  .van-top.is-live::before { animation: van-ring 2s ease-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .van-top .van-rot { transition: none; } }
@keyframes van-ring { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }