/* Kadads Safety report. The world: a roadside inspection report. Navy band, white form sheets on a gray desk,
   one-pixel blue-gray ruling, square corners, Public Sans, state colors only where they mean something. */

@font-face {
  font-family: "Public Sans";
  src: url("/static/fonts/public-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #e9edf1;
  --sheet: #ffffff;
  --ink: #14181d;
  --ink-2: #3c4651;
  --ink-3: #56606c;
  --rule: #c9d1db;
  --rule-strong: #14181d;
  --navy: #13294b;
  --navy-hi: #1d3a66;
  --on-navy: #ffffff;
  --on-navy-2: #c6d3e6;
  --focus: #1f6fd1;
  --select: #cfe0f7;
  --critical: #b3261e;
  --critical-fill: #c4392f;
  --critical-wash: #fbebea;
  --high: #7c4a00;
  --high-fill: #e8a317;
  --high-wash: #fdf2d9;
  --ok: #1d6440;
  --ok-fill: #2e8b57;
  --ok-wash: #e5f2ea;
  --none-fill: #8a94a1;
  --info-wash: #edf1f5;
  --data: #2f5d9b;
  --data-prev: #9fb6d6;
  --grid: #dde3ea;
  --track: #e6ebf1;
  --tick: rgba(20, 24, 29, 0.2);
  --tip-bg: #14181d;
  --tip-ink: #ffffff;
  --tap: 48px;
  --pad: 16px;
  --tabbar: 64px;
  color-scheme: light;
}

:root[data-scheme="dark"] {
  --ground: #0d1014;
  --sheet: #161a20;
  --ink: #e9ecf0;
  --ink-2: #c3cad3;
  --ink-3: #a3adb9;
  --rule: #2a313b;
  --rule-strong: #c3cad3;
  --navy: #10223f;
  --navy-hi: #1b355d;
  --on-navy: #ffffff;
  --on-navy-2: #b8c7dd;
  --focus: #78aefc;
  --select: #23406b;
  --critical: #ff8f86;
  --critical-fill: #e5534b;
  --critical-wash: #33191a;
  --high: #f2bd55;
  --high-fill: #d99a1e;
  --high-wash: #33280f;
  --ok: #7fd6a5;
  --ok-fill: #3fa66b;
  --ok-wash: #132a1c;
  --none-fill: #6b7582;
  --info-wash: #1d232b;
  --data: #7fa9e3;
  --data-prev: #35557f;
  --grid: #262d36;
  --track: #232a33;
  --tick: rgba(233, 236, 240, 0.2);
  --tip-bg: #e9ecf0;
  --tip-ink: #14181d;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--ink); }
body {
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--select); color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--rule); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ masthead */
.masthead { background: var(--navy); color: var(--on-navy); padding: 14px var(--pad) 16px; }
.masthead-row { display: flex; align-items: center; gap: 8px; max-width: 640px; margin: 0 auto; }
.masthead-text { flex: 1; min-width: 0; }
.title { margin: 0; font-size: 25px; line-height: 1.15; font-weight: 750; letter-spacing: -0.01em; }
.subtitle { margin: 3px 0 0; font-size: 15px; color: var(--on-navy-2); font-variant-numeric: tabular-nums; }
.mast-button {
  width: var(--tap); height: var(--tap); display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent; color: var(--on-navy); padding: 0;
}
.mast-button:active { background: var(--navy-hi); }
.mast-button.spinning svg { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ layout */
main { max-width: 640px; margin: 0 auto; padding: 0 0 calc(var(--tabbar) + 24px + env(safe-area-inset-bottom)); outline: none; }
main.refreshing { opacity: 0.6; transition: opacity 0.2s; }
.section { background: var(--sheet); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: 12px; }
.section-head { display: flex; align-items: center; gap: 10px; padding: 14px var(--pad) 10px; }
.section-head h2 { margin: 0; font-size: 15px; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; }
.section-head .count { margin-left: auto; font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.num {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 2px solid var(--rule-strong);
  font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.lede { margin: 0; padding: 0 var(--pad) 12px; font-size: 16px; color: var(--ink-2); }
.note { margin: 0; padding: 12px var(--pad) 14px; font-size: 15px; color: var(--ink-2); border-top: 1px solid var(--rule); }
.empty { padding: 18px var(--pad) 20px; color: var(--ink-2); }
.empty strong { display: block; color: var(--ink); font-size: 17px; margin-bottom: 2px; }

/* ------------------------------------------------------------------ rows */
.rows { border-top: 1px solid var(--rule); }
.row {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 64px; padding: 13px var(--pad);
  border: 0; background: none; text-align: left;
}
.row + .row { border-top: 1px solid var(--rule); }
button.row:active { background: var(--info-wash); }
.row .body { flex: 1; min-width: 0; }
.row .title-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.row .name { font-weight: 650; font-size: 17px; }
.row .name.stacked { display: block; margin-top: 7px; }
.delta { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.delta svg.icon { width: 16px; height: 16px; stroke-width: 2.2; }
.delta.better { color: var(--ok); }
.delta.worse { color: var(--critical); }
.tally { margin-top: 6px; font-size: 17px; }
.tally div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.tally div + div { border-top: 1px solid var(--grid); }
.tally b { font-weight: 750; font-variant-numeric: tabular-nums; }
.tally-empty { margin-top: 4px; color: var(--ink-2); }
.row .detail { margin-top: 2px; font-size: 15px; color: var(--ink-2); }
.row .chev { color: var(--ink-3); margin-top: 2px; }
.row .figure { margin-left: auto; min-width: 66px; text-align: right; flex: none; }
.row .figure b { display: block; font-size: 22px; line-height: 1.1; font-weight: 750; }
.row .figure span { font-size: 13px; color: var(--ink-2); }

.truck {
  display: inline-block; padding: 0 6px; border: 1px solid var(--rule-strong); font-size: 14px; font-weight: 700;
  line-height: 1.5; font-variant-numeric: tabular-nums; color: var(--ink);
}
.tag {
  display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 2px 7px; border: 1.5px solid currentColor;
  font-size: 13px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.35;
}
.tag svg.icon { width: 15px; height: 15px; stroke-width: 2.2; }
.tag.critical, .tag.RED { color: var(--critical); background: var(--critical-wash); }
.tag.high, .tag.YELLOW { color: var(--high); background: var(--high-wash); }
.tag.ok, .tag.GREEN { color: var(--ok); background: var(--ok-wash); }
.tag.info, .tag.NOT_SCORED { color: var(--ink-2); background: var(--info-wash); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }

/* ------------------------------------------------------------------ form fields */
.fields { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.field { padding: 11px var(--pad) 13px; border-bottom: 1px solid var(--rule); min-width: 0; }
.field:nth-child(odd) { border-right: 1px solid var(--rule); }
.fields.single .field { grid-column: 1 / -1; border-right: 0; }
.field .label { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.field .value { margin-top: 2px; font-size: 26px; line-height: 1.15; font-weight: 750; }
.field .value small { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-left: 3px; }
.field .hint { margin-top: 3px; font-size: 14px; color: var(--ink-2); display: flex; align-items: center; gap: 4px; }
.field .hint svg.icon { width: 16px; height: 16px; stroke-width: 2.2; }
.field .hint.better { color: var(--ok); }
.field .hint.worse { color: var(--critical); }
.fields .field:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.fields.compact { margin-top: 10px; border: 1px solid var(--rule); }
.fields.compact .field { padding: 8px 10px 9px; }
.fields.compact .field:last-child { border-bottom: 0; }
.fields.compact .value { font-size: 18px; font-weight: 700; }

/* ------------------------------------------------------------------ the threshold scale (signature) */
.scale { margin-top: 10px; display: grid; grid-template-columns: auto 1fr auto; column-gap: 8px; align-items: center; }
.scale.over { column-gap: 16px; }
.scale-end { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; line-height: 1; }
.scale-track { position: relative; height: 16px; background: var(--track); border: 1px solid var(--rule-strong); overflow: visible; }
.scale-track::before {      /* printed ruling: a tick every tenth, printed over the fill so the length can be measured */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), var(--tick) calc(10% - 1px), var(--tick) 10%);
}
.scale-track.over::after {  /* off the end of the scale: an arrowhead past the last tick */
  content: ""; position: absolute; right: -10px; top: 50%; margin-top: -6px;
  border-left: 8px solid var(--rule-strong); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.scale-track.blank { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--grid) 6px 7px), var(--track); }
.scale-note {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center start; padding-left: 8px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); line-height: 1;
}
.scale-fill { position: absolute; left: 0; top: 0; bottom: 0; transform-origin: left center; }
.scale-fill.RED, .scale-fill.critical { background: var(--critical-fill); }
.scale-fill.YELLOW, .scale-fill.high { background: var(--high-fill); }
.scale-fill.GREEN, .scale-fill.ok { background: var(--ok-fill); }
.scale-fill.data { background: var(--data); }
.scale-fill.NOT_SCORED { background: var(--none-fill); }
.scale-line { position: absolute; z-index: 2; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--rule-strong); }
.crit { display: inline-flex; align-items: center; gap: 4px; color: var(--critical); font-weight: 750; }
.crit svg.icon { width: 16px; height: 16px; stroke-width: 2.2; }
/* the evidence for an event: two fixed slots, the alert video and the map, each leaving the page */
.proofs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; max-width: 280px; }
.proof {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 1px solid var(--rule);
  background: var(--sheet); color: var(--ink); font-weight: 650; font-size: 16px; text-align: left;
}
.proof svg.icon { width: 19px; height: 19px; }
.proof .out { margin-left: auto; color: var(--ink-3); width: 14px; height: 14px; }
.proof.none { justify-content: center; border-style: dashed; color: var(--ink-3); font-weight: 500; font-size: 14px; }
.scale-marks { position: relative; height: 18px; margin-top: 4px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.scale-marks span { position: absolute; top: 0; white-space: nowrap; transform: translateX(-50%); }
.scale-marks span.start { transform: none; }
.scale-marks span.end { transform: translateX(-100%); }
/* the one authored moment: a screen's sections settle into place on its first draw, starting from visible */
.arrive .section { animation: arrive 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; }
.arrive .section:nth-of-type(2) { animation-delay: 0.05s; }
.arrive .section:nth-of-type(3) { animation-delay: 0.1s; }
.arrive .section:nth-of-type(n + 4) { animation-delay: 0.15s; }
@keyframes arrive { from { opacity: 0.55; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ controls */
.halves { display: flex; margin: 0 var(--pad) 12px; border: 2px solid var(--navy); }
:root[data-scheme="dark"] .halves { border-color: var(--rule-strong); }
.halves button { flex: 1; min-height: 44px; border: 0; background: transparent; font-weight: 700; font-size: 16px; }
.halves button[aria-pressed="true"] { background: var(--navy); color: var(--on-navy); }
:root[data-scheme="dark"] .halves button[aria-pressed="true"] { background: var(--rule-strong); color: var(--sheet); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 var(--pad) 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 13px; border: 1px solid var(--rule);
  background: var(--sheet); font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.chip[aria-pressed="true"] { border: 2px solid var(--ink); padding: 0 12px; }
.swatch { width: 12px; height: 12px; flex: none; }
.swatch.RED { background: var(--critical-fill); }
.swatch.YELLOW { background: var(--high-fill); }
.swatch.GREEN { background: var(--ok-fill); }
.swatch.NOT_SCORED { background: var(--none-fill); }
.swatch.data { background: var(--data); }
.swatch.prev { background: var(--data-prev); }
.swatch.hot { background: var(--critical-fill); }
.search-wrap { position: relative; margin: 0 var(--pad) 12px; }
.search-wrap svg.icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.search {
  width: 100%; min-height: var(--tap); padding: 0 12px 0 44px; border: 1px solid var(--rule-strong); border-radius: 0;
  background: var(--sheet); font-size: 17px; -webkit-appearance: none; appearance: none;
}
.search::placeholder { color: var(--ink-3); }
.text-button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--focus); font-weight: 700; font-size: 16px;
}
.leave { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.leave a, .leave button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule);
  background: var(--sheet); color: var(--ink); text-decoration: none; font-weight: 650; font-size: 16px;
}
.leave svg.icon { width: 20px; height: 20px; }
.leave .out { color: var(--ink-3); width: 16px; height: 16px; }
.back {
  display: flex; align-items: center; gap: 4px; width: 100%; min-height: var(--tap); padding: 0 var(--pad);
  border: 0; border-bottom: 1px solid var(--rule); background: var(--sheet); font-weight: 650; text-align: left;
}
.pager { display: flex; border-bottom: 1px solid var(--rule); background: var(--sheet); }
.pager button:disabled { cursor: default; color: var(--ink-3); background: var(--info-wash); }
.pager button:disabled small { color: var(--ink-3); }
.person + .pager { margin-top: 0; border-top: 1px solid var(--rule); }
.pager button {
  flex: 1; display: flex; align-items: center; gap: 6px; min-height: 64px; padding: 8px var(--pad); border: 0;
  background: none; text-align: left; min-width: 0;
}
.pager button + button { border-left: 1px solid var(--rule); justify-content: flex-end; text-align: right; }
.pager small { display: block; font-size: 13px; color: var(--ink-2); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.pager span { display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------------ the driver header */
.person { padding: 16px var(--pad) 14px; }
.person h2 { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 750; letter-spacing: -0.01em; }
.person .meta { margin-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--ink-2); font-size: 15px; }
.score-line { display: flex; align-items: flex-end; gap: 12px; padding: 0 var(--pad); }
.score-line .big { font-size: 52px; line-height: 1; font-weight: 800; letter-spacing: -0.02em; }
.score-line .of { font-size: 17px; color: var(--ink-2); margin-bottom: 6px; }
.score-line .tag { margin-bottom: 8px; margin-left: auto; }
.score-line.flush { padding: 0; }
.score-line.flush .big { font-size: 40px; }
.score-line.flush .of { font-size: 16px; margin-bottom: 4px; }
.step { margin: 12px var(--pad) 0; padding: 12px 14px; border: 1px solid var(--rule); background: var(--info-wash); }
.step .label { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.step b { display: block; font-size: 18px; margin-top: 2px; }
.pad { padding: 0 var(--pad) 14px; }
.facts { margin: 10px 0 0; padding: 0 var(--pad) 14px; display: grid; gap: 6px; font-size: 16px; }
.facts div { display: flex; align-items: center; gap: 8px; }
.facts svg.icon { width: 18px; height: 18px; color: var(--ink-2); stroke-width: 2.2; }

/* ------------------------------------------------------------------ charts */
.chart { padding: 4px var(--pad) 6px; }
.chart svg { display: block; width: 100%; overflow: visible; touch-action: pan-y; }
.chart svg:focus-visible { outline-offset: 4px; }
.chart .summary { margin: 0 0 8px; font-size: 16px; }
.chart .grid { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart .base { stroke: var(--rule-strong); stroke-width: 1; shape-rendering: crispEdges; }
.chart .ref { stroke: var(--rule-strong); stroke-width: 1.5; shape-rendering: crispEdges; }
.chart .tick { fill: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.chart .ref-label { fill: var(--ink); font-size: 13px; font-weight: 700; paint-order: stroke; stroke: var(--sheet); stroke-width: 5px; stroke-linejoin: round; }
.chart .col { fill: var(--data); }
.chart .col.prev { fill: var(--data-prev); }
.chart .col.hot { fill: var(--critical-fill); }
.chart .col.dim { opacity: 0.45; }
.chart .cross { stroke: var(--ink-3); stroke-width: 1; shape-rendering: crispEdges; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.table-toggle { margin: 2px var(--pad) 10px; }
.numbers { width: calc(100% - 2 * var(--pad)); margin: 0 var(--pad) 14px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.numbers th, .numbers td { padding: 7px 6px; border-bottom: 1px solid var(--rule); text-align: right; }
.numbers th:first-child, .numbers td:first-child { text-align: left; }
.numbers th { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }
.tooltip {
  position: fixed; z-index: 20; max-width: 240px; padding: 8px 10px; background: var(--tip-bg); color: var(--tip-ink);
  font-size: 14px; line-height: 1.35; pointer-events: none;
}
.tooltip b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }

/* horizontal bars (what the points / events came from) */
/* measured bars: every row on one printed scale, the numbers in their own right-aligned column */
.measured { padding: 2px var(--pad) 12px; }
.mbar {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label nums" "tracks nums";
  column-gap: 14px; align-items: center; padding: 8px 0;
}
.mbar + .mbar { border-top: 1px solid var(--grid); }
.mbar.head, .mbar.axis { padding: 0 0 4px; border-top: 0; }
.mbar.axis { grid-template-areas: "tracks nums"; padding-top: 4px; }
.mbar-label { grid-area: label; display: flex; justify-content: space-between; gap: 8px; font-size: 16px; min-width: 0; }
.mbar-label small { font-size: 14px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mbar-tracks { grid-area: tracks; display: grid; gap: 3px; margin-top: 5px; }
.mtrack { position: relative; height: 11px; background: var(--track); border: 1px solid var(--rule); }
.mtrack::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), var(--tick) calc(25% - 1px), var(--tick) 25%);
}
.mtrack i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--data); }
.mtrack i.prev { background: var(--data-prev); }
.mbar-nums { grid-area: nums; display: flex; gap: 10px; align-self: stretch; align-items: flex-end; }
.mbar-num { width: 48px; text-align: right; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mbar.head .mbar-num { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }
.mbar-axis { grid-area: tracks; display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* the band distribution (one stacked bar) */
.dist { padding: 0 var(--pad) 12px; }
.dist-bar { display: flex; gap: 2px; height: 22px; }
.dist-bar i { display: block; min-width: 4px; }
.dist-picks { padding: 12px 0 0; }
.dist-bar .RED { background: var(--critical-fill); }
.dist-bar .YELLOW { background: var(--high-fill); }
.dist-bar .GREEN { background: var(--ok-fill); }
.dist-bar .NOT_SCORED { background: var(--none-fill); }

/* week comparison table */
.compare { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.compare th, .compare td { padding: 11px var(--pad); border-top: 1px solid var(--rule); text-align: right; font-size: 16px; }
.compare th:first-child, .compare td:first-child { text-align: left; padding-right: 4px; }
.compare thead th { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }
.compare td.better { color: var(--ok); font-weight: 700; }
.compare td.worse { color: var(--critical); font-weight: 700; }

/* help */
.glossary { margin: 0; padding: 4px var(--pad) 8px; }
.glossary dt { font-weight: 750; font-size: 17px; padding-top: 12px; border-top: 1px solid var(--rule); }
.glossary dt:first-child { border-top: 0; padding-top: 4px; }
.glossary dd { margin: 4px 0 12px; color: var(--ink-2); font-size: 16px; }

/* ------------------------------------------------------------------ states */
.loading { padding: 40px var(--pad); color: var(--ink-2); text-align: center; }
.error { margin: 16px var(--pad); padding: 16px; background: var(--sheet); border: 1px solid var(--rule); }
.error strong { display: block; font-size: 17px; margin-bottom: 4px; }
.error p { margin: 0 0 12px; color: var(--ink-2); }
.primary {
  min-height: var(--tap); padding: 0 20px; border: 0; background: var(--navy); color: var(--on-navy); font-weight: 700;
}
:root[data-scheme="dark"] .primary { background: var(--rule-strong); color: var(--sheet); }

/* ------------------------------------------------------------------ tab bar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: center;
  background: var(--sheet); border-top: 1px solid var(--rule); padding-bottom: env(safe-area-inset-bottom);
}
.tabbar-inner { display: flex; width: 100%; max-width: 640px; }
.tab {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: var(--tabbar); border: 0; background: none; color: var(--ink-2); font-size: 13px; font-weight: 650;
}
.tab[aria-current="page"] { color: var(--navy); font-weight: 800; }
:root[data-scheme="dark"] .tab[aria-current="page"] { color: var(--ink); }
.tab[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 3px; background: currentColor; }
.badge {
  position: absolute; top: 7px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 5px; background: var(--critical);
  color: #ffffff; font-size: 12px; font-weight: 800; line-height: 20px; text-align: center;
}
:root[data-scheme="dark"] .badge { background: var(--critical-fill); }

@media (prefers-reduced-motion: reduce) {
  .arrive .section { animation: none; }
  .mast-button.spinning svg { animation: none; }
  main.refreshing { transition: none; }
}
@media (forced-colors: active) {
  .scale-fill, .dist-bar i, .chart .col, .swatch, .mtrack i { forced-color-adjust: none; }
}