/* Fleet Desk. The desk speaks the language of the road. The page is asphalt; everything the clerk
   reads is a sign, and colour and shape carry the meaning the MUTCD gives them on a highway:
   green guides and means in order, blue is fuel (the service sign), yellow diamonds warn, orange
   is a work zone (due within thirty days), red octagons stop (lapsed, or a gap that makes the
   return wrong), and the white regulatory panel carries the figures the law cares about. The
   type is Overpass, an open cousin of the FHWA highway alphabet, with Overpass Mono for figures.
   Overpass is under the SIL Open Font License; see fonts/OFL.txt. */

@font-face { font-family: "Overpass"; src: url("fonts/overpass-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Overpass"; src: url("fonts/overpass-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Overpass"; src: url("fonts/overpass-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Overpass"; src: url("fonts/overpass-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Overpass Mono"; src: url("fonts/overpass-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Overpass Mono"; src: url("fonts/overpass-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;

  /* the road */
  --asphalt: #1b1e20;
  --shoulder: #24282b;
  --curb: #343a3f;
  --night: #0f1112;
  --lane: #ece9df;
  --lane-2: #b4b8bb;
  --lane-3: #8e959a;
  --link-line: #3fa56f;

  /* the signs (MUTCD colours) */
  --guide: #0b6b3f;
  --guide-deep: #08552f;
  --service: #1d4f9e;
  --warn: #f4c20d;
  --work: #f07c1f;
  --stop: #c8102e;
  --stop-pale: #f8e1e4;
  --warn-pale: #fdf3c9;
  --sign-white: #f3f1ea;
  --sign-ink: #141414;
  --sign-ink-2: #4b4f53;
  --sign-rule: #d3d0c6;

  /* chart series, validated on --shoulder (dataviz validator, dark mode, all checks pass) */
  --chart-miles: #b07a3c;
  --chart-fuel: #5a8fe8;

  --face: "Overpass", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Overpass Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;

  --r-sign: 10px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--asphalt); color: var(--lane); font-family: var(--face); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }

a { color: var(--lane); text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--lane); }
a, button, select, input { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
.skip { position: absolute; left: 12px; top: -60px; padding: 8px 12px; background: var(--warn); color: var(--sign-ink); z-index: 10; font-weight: 800; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: anywhere; }
td { overflow-wrap: anywhere; }
th { white-space: nowrap; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--lane-3); }
.bad { color: #ff8a8a; font-weight: 600; }
.rule { font-family: var(--mono); font-size: 0.78rem; color: var(--lane-3); overflow-wrap: anywhere; }
.fine { font-size: 0.82rem; color: var(--lane-3); margin: 6px 0 0; }
.empty { margin: 0; padding: 18px; border: 2px dashed var(--curb); border-radius: var(--r-sign); color: var(--lane-2); display: flex; align-items: center; gap: 8px; }

/* ---- glyphs: the shape is the meaning ---- */
.glyph { flex: 0 0 auto; vertical-align: -3px; }
.s-guide { fill: var(--guide); stroke: var(--sign-white); }
.s-work { fill: var(--work); stroke: var(--sign-ink); }
.s-warn { fill: var(--warn); stroke: var(--sign-ink); }
.s-stop { fill: var(--stop); stroke: var(--sign-white); }
.s-missing { fill: none; stroke: var(--stop); }
.s-service { fill: var(--service); stroke: var(--sign-white); }
.s-pump { fill: none; stroke: var(--sign-white); }
.s-bar { fill: var(--sign-white); }
.glyph-space { display: inline-block; width: 18px; }

/* ---- the gantry ---- */
.gantry { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 12px 24px; padding: 14px 24px 0; background: var(--night); border-bottom: 6px solid #2b3034; position: relative; }
.gantry::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: repeating-linear-gradient(90deg, #4a5157 0 18px, transparent 18px 26px); }
.gantry-id { padding-bottom: 14px; display: flex; flex-direction: column; gap: 2px; }
.brand { text-decoration: none; }
.brand-name { font-weight: 800; font-size: 1.35rem; letter-spacing: 0.01em; line-height: 1; }
.brand-carrier { color: var(--lane-3); font-size: 0.82rem; }
.gantry-signs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.guide-sign { position: relative; display: flex; flex-direction: column; min-width: 150px; padding: 9px 18px 11px; margin-bottom: 14px; background: var(--guide); color: #fff; text-decoration: none; border-radius: 8px; box-shadow: inset 0 0 0 3px var(--guide), inset 0 0 0 5px var(--sign-white); opacity: 0.72; transition: opacity 150ms var(--ease), transform 150ms var(--ease); }
.guide-sign:hover { opacity: 1; }
.guide-sign:active { transform: translateY(1px); }
.guide-sign.is-here { opacity: 1; }
.guide-sign.is-here::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -14px; height: 8px; background: var(--warn); border-radius: 0 0 3px 3px; }
.guide-sub { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.guide-legend { font-weight: 800; font-size: 1.12rem; line-height: 1.15; white-space: nowrap; }
.gantry-clock { margin: 0 0 18px; color: var(--lane-3); font-size: 0.82rem; font-family: var(--mono); white-space: nowrap; }

main { max-width: 1240px; margin: 0 auto; padding: 26px 24px 56px; }
main:focus { outline: none; }
.crumbs { font-size: 0.85rem; margin: 0 0 6px; color: var(--lane-3); }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.page-title { font-weight: 800; font-size: 2.1rem; line-height: 1.08; margin: 0 0 6px; letter-spacing: -0.005em; }
.page-meta { margin: 0 0 4px; color: var(--lane-2); max-width: 78ch; }
.section-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lane-2); margin: 34px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--curb); }
.section-count { font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--lane-3); font-size: 0.85rem; }
.section-stop { color: #ff9c9c; border-bottom-color: var(--stop); }
.section-fuel { color: #a9c4f5; border-bottom-color: var(--service); align-items: center; }

.note { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 10px 14px; border-radius: 8px; font-weight: 600; }
.note-ok { background: var(--guide); color: #fff; box-shadow: inset 0 0 0 2px var(--guide), inset 0 0 0 3px var(--sign-white); }
.note-bad { background: var(--sign-white); color: var(--sign-ink); box-shadow: inset 0 0 0 3px var(--stop); }

/* ---- the regulatory sign: white, black border, the figure the law cares about ---- */
.reg-sign { background: var(--sign-white); color: var(--sign-ink); border-radius: var(--r-sign); padding: 20px 24px 18px; box-shadow: inset 0 0 0 5px var(--sign-white), inset 0 0 0 8px var(--sign-ink); text-align: center; }
.reg-sign a { color: var(--sign-ink); text-decoration-color: var(--guide); }
.reg-eyebrow { margin: 0 0 6px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sign-ink-2); }
.reg-legend { margin: 0; font-weight: 800; font-size: 1.6rem; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; }
.tax-figure { margin: 4px 0 2px; font-weight: 800; font-size: clamp(3rem, 7vw, 4.6rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
.reg-plate { display: inline-block; margin: 6px 0 10px; padding: 3px 12px 1px; border: 2px solid var(--sign-ink); border-radius: 4px; font-weight: 800; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; }
.reg-small { margin: 0; font-size: 0.86rem; color: var(--sign-ink-2); }

/* ---- the return's status sign ---- */
.status-sign { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 18px; border-radius: var(--r-sign); min-width: 210px; }
.status-sign .dne { grid-row: 1 / span 2; }
.status-word { font-weight: 800; font-size: 1.3rem; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.03em; }
.status-sub { font-size: 0.82rem; }
.status-hold { background: var(--sign-white); color: var(--stop); box-shadow: inset 0 0 0 4px var(--sign-white), inset 0 0 0 7px var(--stop); }
.status-hold .status-sub { color: var(--sign-ink); }
.status-ready, .status-filed { grid-template-columns: 1fr; background: var(--guide); color: #fff; box-shadow: inset 0 0 0 3px var(--guide), inset 0 0 0 5px var(--sign-white); }
.status-filed { background: var(--guide-deep); }

/* ---- the dashboard ---- */
.dash-top { display: grid; grid-template-columns: minmax(300px, 1.15fr) minmax(220px, 0.7fr) minmax(300px, 1fr); gap: 18px; align-items: stretch; }
.dash-status { display: flex; flex-direction: column; gap: 12px; justify-content: flex-start; }
.status-note { margin: 0; color: var(--lane-2); font-size: 0.9rem; display: flex; gap: 8px; align-items: flex-start; }
.dash-mid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; align-items: start; }

/* the signature: a distance sign, with days where the miles would be */
.guide-board { background: var(--guide); color: #fff; border-radius: var(--r-sign); padding: 16px 20px 14px; box-shadow: inset 0 0 0 4px var(--guide), inset 0 0 0 6px var(--sign-white); display: flex; flex-direction: column; }
.guide-board-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 6px; border-bottom: 2px solid rgb(255 255 255 / 0.55); margin-bottom: 4px; }
.guide-board-head h2 { margin: 0; font-weight: 800; font-size: 1.3rem; }
.guide-board-unit { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.distance-list { list-style: none; margin: 0; padding: 0; }
.distance a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 2px; color: #fff; text-decoration: none; border-radius: 4px; }
.distance a:hover { background: rgb(255 255 255 / 0.1); }
.distance-dest { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; min-width: 0; }
.distance-name { font-weight: 800; font-size: 1.12rem; }
.distance-doc { font-size: 0.95rem; opacity: 0.9; }
.distance-num { font-weight: 800; font-size: 1.45rem; line-height: 1; font-variant-numeric: tabular-nums; }
.distance-near .distance-name::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; background: var(--work); border: 1px solid var(--sign-ink); transform: rotate(45deg) translateY(-2px); }
.guide-board-empty { margin: 8px 2px; }
.guide-board-foot { margin: auto 0 0; padding-top: 8px; font-size: 0.82rem; opacity: 0.9; }
.guide-board-foot a { color: #fff; text-decoration-color: rgb(255 255 255 / 0.6); }

.oos-sign { background: var(--sign-white); color: var(--sign-ink); border-radius: var(--r-sign); padding: 0 0 12px; box-shadow: inset 0 0 0 4px var(--stop); overflow: hidden; }
.oos-sign a { color: var(--sign-ink); text-decoration-color: var(--stop); }
.oos-legend { margin: 0 0 8px; padding: 8px 18px 6px; background: var(--stop); color: #fff; font-weight: 800; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.06em; }
.oos-list { list-style: none; margin: 0; padding: 0 18px; }
.oos-list li + li { border-top: 1px solid var(--sign-rule); margin-top: 8px; padding-top: 8px; }
.oos-who { margin: 0; font-weight: 800; font-size: 1.05rem; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.oos-truck { font-weight: 400; font-size: 0.88rem; color: var(--sign-ink-2); }
.oos-why { margin: 2px 0 0; font-size: 0.9rem; }
.oos-sign .rule { color: var(--sign-ink-2); }
.oos-compact { min-width: 240px; max-width: 360px; padding-bottom: 10px; }
.oos-compact .oos-why { padding: 0 16px; }
.guide-small { background: var(--shoulder); border-radius: var(--r-sign); padding: 12px 16px; }
.guide-small p { margin: 0; display: flex; gap: 8px; align-items: center; }

.plain-sign { background: var(--sign-white); color: var(--sign-ink); border-radius: var(--r-sign); padding: 14px 18px; box-shadow: inset 0 0 0 4px var(--sign-white), inset 0 0 0 6px var(--sign-ink); }
.plain-sign a { color: var(--sign-ink); text-decoration-color: var(--sign-ink-2); font-weight: 800; }
.plain-legend { margin: 0; font-weight: 800; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.06em; }
.plain-sub { margin: 2px 0 8px; font-size: 0.86rem; color: var(--sign-ink-2); }
.past-list { list-style: none; margin: 0; padding: 0; }
.past-list li { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: center; padding: 4px 0; border-top: 1px solid var(--sign-rule); }
.past-doc { color: var(--sign-ink-2); }
.past-when { font-family: var(--mono); font-size: 0.85rem; color: var(--stop); font-weight: 600; }

/* the yard: one stall per truck, painted lines and a stencilled unit number */
/* every stall is painted on both sides; the -4px margin lays each line over its neighbour's */
.yard { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0; border-top: 4px solid var(--lane); }
.stall { display: flex; flex-direction: column; border-left: 4px solid var(--lane); border-right: 4px solid var(--lane); margin-right: -4px; border-bottom: 1px dashed var(--curb); min-height: 200px; min-width: 0; }
.stall-link { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 8px; text-decoration: none; color: var(--lane); }
.stall-link:hover { background: var(--shoulder); }
.stall-unit { font-weight: 800; font-size: 2.4rem; line-height: 1; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.stall-make { font-size: 0.82rem; color: var(--lane-2); }
.stall-figs { font-family: var(--mono); font-size: 0.8rem; color: var(--lane-3); margin-top: 4px; }
.stall-driver { margin-top: auto; padding-top: 8px; font-weight: 600; font-size: 0.92rem; }
.stall-tags { display: flex; flex-direction: column; gap: 4px; padding: 0 12px 12px; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; }
.tag-stop { color: #ffb0b0; }
.tag-ok { color: #9fe0bb; }
.stall-held .stall-unit { color: var(--lane-2); }

/* ---- gaps and findings ---- */
.gaps, .findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gap { display: grid; grid-template-columns: 74px 1fr; border-radius: var(--r-sign); overflow: hidden; }
.gap-mark { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 14px 6px; }
.gap-mark .glyph { width: 34px; height: 34px; }
.gap-kind { font-weight: 800; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.gap-body { padding: 12px 18px 14px; }
.gap-blocks { background: var(--sign-white); color: var(--sign-ink); box-shadow: inset 0 0 0 3px var(--stop); }
.gap-blocks .gap-mark { background: var(--stop); color: #fff; }
.gap-review { background: var(--warn); color: var(--sign-ink); box-shadow: inset 0 0 0 3px var(--sign-ink); }
.gap-review .gap-mark { background: var(--sign-ink); color: var(--warn); }
.gap a { color: var(--sign-ink); text-decoration-color: currentColor; }
.gap-title { margin: 0 0 6px; font-weight: 800; font-size: 1.12rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.gap-where { font-family: var(--mono); font-size: 0.86rem; font-weight: 600; }
.gap-detail { margin: 0 0 8px; }
.gap-fix { margin: 0; }
.fix-label { display: inline-block; margin-right: 6px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.gap-blocks .fix-label { color: var(--stop); }

.finding { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 12px 16px; background: var(--shoulder); border-radius: var(--r-sign); border-left: 6px solid var(--curb); }
.finding > .glyph { width: 22px; height: 22px; margin-top: 2px; }
.finding-lapsed, .finding-missing { border-left-color: var(--stop); }
.finding-due30 { border-left-color: var(--work); }
.finding-due { border-left-color: var(--warn); }
.finding-head { margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.finding-status { margin-left: auto; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lane-2); }
.finding-lapsed .finding-status, .finding-missing .finding-status { color: #ff9c9c; }
.finding-due30 .finding-status { color: var(--work); }
.finding-due .finding-status { color: var(--warn); }
.finding-detail { margin: 0 0 6px; }
.finding-bars { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 6px; padding: 8px 10px; background: var(--sign-white); color: var(--sign-ink); border-radius: 6px; box-shadow: inset 0 0 0 2px var(--stop); font-weight: 600; font-size: 0.9rem; }
.finding-fix { margin: 0; color: var(--lane-2); }
.finding .fix-label { color: var(--lane); }

.log { list-style: none; margin: 0; padding: 0; }
.log li { padding: 8px 0; border-bottom: 1px solid var(--curb); color: var(--lane-2); }
.log .mono { color: var(--lane); margin-right: 8px; }

/* ---- the return ---- */
.odometer { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 0 0 14px; }
.odometer div { background: var(--night); border: 1px solid var(--curb); border-radius: 8px; padding: 10px 14px 8px; }
.odometer dt { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lane-3); }
.odometer dd { margin: 2px 0 0; font-family: var(--mono); font-size: 1.55rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.rate-note { display: flex; gap: 8px; align-items: center; margin: 0; color: var(--lane-2); font-size: 0.88rem; }

.action { margin-top: 18px; padding: 16px 18px; border-radius: var(--r-sign); background: var(--shoulder); }
.action p { margin: 0 0 12px; display: flex; gap: 8px; align-items: flex-start; }
.action-hold { background: var(--sign-white); color: var(--sign-ink); box-shadow: inset 0 0 0 3px var(--stop); }
.action-hold p, .action-done p { margin: 0; }
.action-done { background: var(--guide); color: #fff; }
.action-drift { background: var(--warn); color: var(--sign-ink); box-shadow: inset 0 0 0 3px var(--sign-ink); }
.action-drift p { margin: 0; }
.status-note.drift { color: var(--warn); }
.btn { display: inline-block; padding: 11px 20px 9px; border: 0; border-radius: 8px; font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; transition: transform 120ms var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-go { background: var(--guide); color: #fff; box-shadow: inset 0 0 0 2px var(--guide), inset 0 0 0 4px var(--sign-white); }
.btn-go:hover { background: #0e7d4a; }

.dvf { margin-top: 8px; }
.dvf-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 4px; color: var(--lane-2); font-size: 0.88rem; }
.key { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.key-fuel { margin-left: 10px; }
.key-miles { background: var(--chart-miles); }
.key-fuel { background: var(--chart-fuel); }
.dvf-lede { margin: 0 0 12px; color: var(--lane-3); font-size: 0.86rem; max-width: 80ch; }
.dvf-rows { list-style: none; margin: 0; padding: 14px 16px; background: var(--shoulder); border-radius: var(--r-sign); display: grid; gap: 10px; }
.dvf-row { display: grid; grid-template-columns: 48px 1fr 74px 104px; gap: 12px; align-items: center; }
.dvf-label .juris { font-family: var(--mono); font-weight: 600; }
.dvf-bars { display: grid; gap: 2px; }
.dvf-bar { display: block; width: 100%; height: 12px; }
.dvf-miles { fill: var(--chart-miles); }
.dvf-fuel { fill: var(--chart-fuel); }
.dvf-vals { display: grid; gap: 0; font-family: var(--mono); font-size: 0.78rem; line-height: 14px; text-align: right; color: var(--lane-2); }
.dvf-lean { font-size: 0.78rem; font-weight: 600; color: var(--lane-3); }
.lean-credit, .lean-owe { color: var(--lane); }

/* the service sign: blue, for fuel */
.service-sign { margin-top: 18px; padding: 14px 20px 12px; background: var(--service); color: #fff; border-radius: var(--r-sign); box-shadow: inset 0 0 0 3px var(--service), inset 0 0 0 5px var(--sign-white); }
.service-legend { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 800; font-size: 1.15rem; }
.service-sub { margin: 4px 0 8px; font-size: 0.88rem; opacity: 0.92; max-width: 80ch; }
.service-list { list-style: none; margin: 0; padding: 0; }
.service-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 6px 0; border-top: 1px solid rgb(255 255 255 / 0.35); }
.service-fig { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.receipt-off th, .receipt-off td { color: var(--sign-ink-2); background: #e8edf6; }

.reg-panel { background: var(--sign-white); color: var(--sign-ink); border-radius: var(--r-sign); padding: 6px; box-shadow: inset 0 0 0 2px var(--sign-ink); }
.reg-panel a { color: var(--sign-ink); text-decoration-color: var(--guide); }
/* relative so the visually hidden labels inside cells are clipped here and do not widen the page */
.table-wrap { overflow-x: auto; position: relative; }
.ledger { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.ledger th, .ledger td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--sign-rule); vertical-align: middle; }
.ledger thead th { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sign-ink-2); border-bottom: 2px solid var(--sign-ink); white-space: normal; vertical-align: bottom; }
.ledger thead th:not(:first-child) { text-align: right; }
.ledger tbody th { font-weight: 400; display: flex; align-items: center; gap: 8px; }
.ledger .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger .credit { color: var(--guide); font-weight: 600; }
.ledger tfoot th, .ledger tfoot td { font-weight: 800; border-top: 2px solid var(--sign-ink); border-bottom: 0; }
.ledger tfoot th { display: flex; align-items: center; gap: 8px; }
.juris { font-family: var(--mono); font-weight: 600; }
.juris-name { color: var(--sign-ink-2); font-size: 0.86rem; }
.exempt-note { display: block; font-size: 0.74rem; color: var(--guide); font-weight: 600; }
.line-surcharge th, .line-surcharge td { font-size: 0.86rem; border-top: 0; }
.surcharge-label { font-weight: 600; }
.surcharge-note { color: var(--sign-ink-2); font-size: 0.8rem; text-align: right; }
.claim-off td, .claim-off th { color: var(--sign-ink-2); }
.line-stop th, .line-stop td { background: var(--stop-pale); }
.line-warn th, .line-warn td { background: var(--warn-pale); }
.ledger .zero { color: var(--sign-ink-2); }
.ledger .zero-stop { color: var(--stop); }
.row-fuel th, .row-fuel td { color: var(--service); font-weight: 600; }
.ledger-trucks thead th:nth-child(n+5) { text-align: left; }
.ledger-receipts .mono { font-weight: 400; }

/* jurisdiction and truck pages */
.route-head, .unit-head { display: flex; gap: 18px; align-items: center; }
.route-plate { display: grid; place-items: center; width: 84px; height: 74px; flex: 0 0 auto; background: var(--sign-white); color: var(--sign-ink); border-radius: 8px; box-shadow: inset 0 0 0 4px var(--sign-white), inset 0 0 0 7px var(--sign-ink); font-weight: 800; font-size: 2rem; letter-spacing: 0.02em; }
.unit-door { display: grid; place-items: center; min-width: 110px; height: 80px; padding: 0 16px; flex: 0 0 auto; background: var(--night); color: var(--lane); border: 3px solid #8f989e; border-radius: 10px; font-weight: 800; font-size: 2.6rem; letter-spacing: 0.08em; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }

/* ---- the driver board ---- */
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; padding: 0; font-size: 0.86rem; color: var(--lane-2); }
.legend li { display: inline-flex; gap: 6px; align-items: center; }
.board-panel { padding: 4px; }
.board { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 0.88rem; }
.board th, .board td { padding: 9px 8px; border-bottom: 1px solid var(--sign-rule); text-align: left; vertical-align: middle; }
.board thead th { vertical-align: bottom; border-bottom: 2px solid var(--sign-ink); white-space: normal; }
.col-doc { display: block; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; }
.col-cite { display: block; font-family: var(--mono); font-size: 0.7rem; color: var(--sign-ink-2); font-weight: 400; }
.board tbody th { white-space: normal; min-width: 170px; }
.board-name { font-weight: 800; font-size: 1rem; }
.board-meta { display: block; font-family: var(--mono); font-size: 0.74rem; color: var(--sign-ink-2); }
.board-oos { display: inline-flex; gap: 5px; align-items: center; margin-top: 3px; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--stop); }
.row-oos th, .row-oos td { background: var(--stop-pale); }
.cell { white-space: nowrap; }
.cell .glyph { margin-right: 6px; }
.cell-text { font-family: var(--mono); font-size: 0.8rem; }
.cell-lapsed .cell-text, .cell-missing .cell-text { color: var(--stop); font-weight: 600; }
.cell-due30 .cell-text { color: #9a4a06; font-weight: 600; }
.cell-due .cell-text { color: #6b5300; font-weight: 600; }
.cell-ok .cell-text { color: var(--sign-ink-2); }

.standing-sign { display: flex; flex-direction: column; padding: 12px 18px; border-radius: var(--r-sign); min-width: 220px; }
.standing-word { font-weight: 800; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.04em; }
.standing-sub { font-size: 0.85rem; }
.standing-good { background: var(--guide); color: #fff; box-shadow: inset 0 0 0 3px var(--guide), inset 0 0 0 5px var(--sign-white); }
.standing-warn { background: var(--warn); color: var(--sign-ink); box-shadow: inset 0 0 0 3px var(--warn), inset 0 0 0 5px var(--sign-ink); }

.onfile { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.onfile li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; background: var(--shoulder); border-radius: 8px; }
.onfile-body { display: flex; flex-direction: column; }
.doc-name { font-weight: 600; }
.doc-when { color: var(--lane-2); font-size: 0.9rem; }

.file-form { padding: 18px 20px 20px; box-shadow: inset 0 0 0 2px var(--sign-ink); }
.form-help { margin: 0 0 10px; color: var(--sign-ink-2); }
.field-label { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sign-ink-2); margin: 14px 0 6px; }
.file-form select, .file-form input[type="date"] { width: 100%; max-width: 440px; font: inherit; padding: 9px 10px; border: 2px solid var(--sign-ink); border-radius: 6px; background-color: #fff; color: var(--sign-ink); color-scheme: light; }
.form-actions { margin-top: 18px; }

.foot { max-width: 1240px; margin: 0 auto; padding: 18px 24px 40px; color: var(--lane-3); font-size: 0.84rem; border-top: 2px dashed var(--curb); }
.foot p { margin: 6px 0; max-width: 100ch; }

/* ---- smaller screens ---- */
@media (max-width: 1080px) {
  .dash-top { grid-template-columns: 1fr 1fr; }
  .dash-top .guide-board { grid-column: 1 / -1; }
  .gantry { grid-template-columns: 1fr auto; }
  .gantry-signs { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .gantry-clock { grid-row: 1; grid-column: 2; align-self: start; margin: 4px 0 0; }
}
@media (max-width: 760px) {
  main { padding: 18px 16px 48px; }
  .foot { padding-left: 16px; padding-right: 16px; }
  .gantry { padding: 12px 16px 0; }
  .gantry-signs { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 2px; }
  .guide-sign { min-width: 0; padding: 7px 12px 9px; }
  .guide-legend { font-size: 0.98rem; }
  .gantry-clock { display: none; }
  .dash-top, .dash-mid, .split { grid-template-columns: minmax(0, 1fr); }
  .page-head { flex-direction: column; }
  .page-title { font-size: 1.6rem; }
  .gap { grid-template-columns: 56px 1fr; }
  .dvf-row { grid-template-columns: 40px 1fr 64px; }
  .dvf-lean { grid-column: 2 / -1; margin-top: -6px; }
  .yard { grid-template-columns: repeat(2, 1fr); }
  .stall { min-height: 170px; }
  .stall-unit { font-size: 2rem; }
  .route-plate { width: 64px; height: 58px; font-size: 1.5rem; }
  .unit-door { min-width: 84px; height: 62px; font-size: 1.9rem; }
  .oos-compact { max-width: none; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- the showcase: the tour card and its launch button, appended to styles.css at build ---- */

.tour-launch { position: fixed; right: 20px; bottom: 20px; z-index: 39; background: #f2c400; color: #1b1e20; box-shadow: 0 10px 30px rgb(0 0 0 / 0.45), inset 0 0 0 2px #f2c400, inset 0 0 0 4px #1b1e20; }
.tour-launch:hover { background: #ffd83a; }
body.touring .tour-launch { display: none; }

.tour { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: min(420px, calc(100vw - 32px)); padding: 16px 20px 16px; background: #f3efe4; color: #1b1e20; border-top: 8px solid #f2c400; border-radius: 8px; box-shadow: 0 14px 44px rgb(0 0 0 / 0.5); }
.tour[data-side="left"] { right: auto; left: 20px; }
.tour-count { margin: 0 0 6px; font-family: "Overpass Mono", ui-monospace, monospace; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: #5b5f63; }
.tour-title { margin: 0 0 8px; font-size: 1.3rem; line-height: 1.15; font-weight: 800; color: #1b1e20; }
.tour-body { margin: 0 0 14px; font-size: 0.97rem; line-height: 1.5; color: #2a2e31; }
.tour-nav { display: flex; align-items: center; gap: 10px; }
.tour .tour-next { background: #0b7a46; color: #fff; box-shadow: inset 0 0 0 2px #0b7a46, inset 0 0 0 4px #f3efe4; }
.tour .tour-next:hover { background: #0e7d4a; }
.tour .tour-back { background: transparent; color: #1b1e20; box-shadow: inset 0 0 0 2px #9a9ea2; }
.tour .tour-back:disabled { opacity: 0.45; cursor: default; }
.tour-close { margin-left: auto; border: 0; background: none; color: #5b5f63; font: inherit; font-size: 0.9rem; text-decoration: underline; cursor: pointer; padding: 6px 2px; }
.tour :focus-visible { outline: 3px solid #1b1e20; outline-offset: 2px; }
.tour-target { outline: 4px solid #f2c400 !important; outline-offset: 8px !important; border-radius: 8px; }
body.touring main { padding-bottom: 300px; }

@media (max-width: 640px) {
  .tour { right: 12px; left: 12px; bottom: 12px; width: auto; }
  .tour[data-side="left"] { right: 12px; left: 12px; }
}