/* ============================================================================
   livedash.css — the one place design tokens live.
   ----------------------------------------------------------------------------
   Canonical source: .claude/skills/design/references/design-tokens.md
   Shipped by:       .claude/plans/build/enhancement/ui-overhaul/foundations.md (U1)

   Linked by every telemetry page BEFORE that page's own <style>, so a page that
   still declares its own :root shadows this one and renders unchanged. Each
   page's :root is deleted by that page's own child (U2 driver, U8 the rest);
   only then does this file take over. No page is ever in a half-state.

   NOTHING PAGE-SPECIFIC GOES IN THIS FILE, EVER. If a rule only one page needs
   lands here, the next page inherits a constraint it did not ask for.

   Layout:
     1  :root tokens          5  component recipes
     2  @font-face            6  the delta rule
     3  reset                 7  motion
     4  type scale
   ========================================================================== */


/* ── 1. Tokens ─────────────────────────────────────────────────────────────
   Verbatim from design-tokens.md §1. Do not re-invent hexes per screen.      */

:root {
  /* Canvas: near-black, broadcast-dark */
  --bg:        #080808;   /* app canvas */
  --panel:     #0d0e10;   /* raised region: laplog, side rail, header */
  --surface:   #131518;   /* cells, inputs, chips, dropdowns */

  /* Boundaries: HARD & defined */
  --border:        #2a2d31;  /* default visible seam between elements */
  --border-strong: #3a3e44;  /* region boundaries: laplog | map | rail */
  --hairline:      #1e2024;  /* internal laplog row rules only */
  --radius:        4px;      /* default — tight, squarer (NOT pill) */
  --radius-lg:     6px;      /* max; outer panels only */

  /* Signature brand: livedash blue */
  --brand:        #2e80ff;   /* active tab underline, primary action */
  --brand-bright: #4d96ff;   /* hover / active-hover */
  --brand-deep:   #1e63d6;   /* pressed / solid fill */

  /* Text: BRIGHT neutral — data is never dim grey */
  --text:       #f5f7fa;  /* PRIMARY readouts: lap times, speeds, values */
  --text-2:     #c7cdd6;  /* secondary values, flat deltas */
  --label:      #9aa3b0;  /* labels: TOP SPEED, S1, DEVIATION */
  --text-dim:   #6b7280;  /* de-emphasised / inactive */
  --text-faint: #3a3f47;  /* watermark, disabled, decorative */

  /* Semantic: ONLY where it encodes meaning */
  --good:     #30c860;   /* faster / personal best / OK / go */
  --best:     #a970ff;   /* session-fastest (purple) — overall best */
  --caution:  #ffb020;   /* caution / pit window / warn */
  --alert:    #ff4d4a;   /* slower / critical / alert / stop */

  /* Focus ring — a channel of its own (U1 D9).
     Deliberately NOT --brand: blue already means "dash target" on a laplog row,
     and focus must stay orthogonal to every semantic colour (CC5). */
  --focus-ring: rgba(245, 247, 250, 0.72);

  /* ── Series palette — THE ONE CATEGORICAL EXCEPTION (U5 D2) ────────────────
     Scoped to the lap-evolution chart on the Pace and Field tabs, and to nothing
     else. Six lines on one time-series chart means "which line is this?" is the
     reader's first question, and series identity IS the meaning — the textbook
     case for a categorical palette. Law 2 forbids colour as DECORATION; a series
     key is the opposite of decoration.

     ⚠️ These values are the ones that already shipped, moved verbatim out of
     inline style="background:#…" attributes and the chart's draw code. Nothing on
     screen changed colour when they became tokens — that was the point, and
     U5 verification #4 screenshot-compares to prove it.

     ⛔ DO NOT reach for these anywhere else. Everywhere outside that chart, the
     four semantic colours and the neutral ramp still apply. A second consumer
     needs its own recorded decision, or the exception quietly becomes the rule. */
  --series-field:  #60a5fa;   /* field / class mean      — solid */
  --series-own:    #4ade80;   /* driver / own pace       — solid, thickest, on top */
  --series-comp:   #f97316;   /* comparison / competitor — solid */
  --series-temp:   #fbbf24;   /* temperature             — dashed */
  --series-humid:  #a78bfa;   /* humidity                — dashed */
  --series-precip: #22d3ee;   /* precipitation           — dashed */

  /* Type */
  --mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
  --display: 'Saira', 'Oswald', 'Archivo Narrow', system-ui, sans-serif;

  /* Motion — design-tokens.md §6 */
  --dur-flash: 120ms;  /* live value update */
  --dur-fill:  100ms;  /* sector cell fill */
  --dur-tab:   150ms;  /* tab / panel switch — ceiling, not a target */
}


/* ── 2. Fonts — self-hosted (CC2 / D2) ─────────────────────────────────────
   The offline Electron app has no guaranteed connection and is the PRIMARY
   footage-review surface. Served same-origin from /fonts/, so a font cannot
   fail independently of this stylesheet.

   These are VARIABLE faces spanning weight 400–800 in a single file per subset
   (U1 D7) — four files, ~101 KB total, no synthesised weights.               */

@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/saira-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/saira-var-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-var-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ── 3. Reset ──────────────────────────────────────────────────────────────
   Byte-identical to the reset all ten pages already declare, so linking this
   file changes nothing (U1 verification step 2). The body rule is restricted
   to the three properties EVERY page already sets on body — anything more
   would leak through to an unmigrated page and alter it.                     */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--display);
}


/* ── 4. Type scale ─────────────────────────────────────────────────────────
   Every class in sections 4–7 is prefixed `ld-` (U1 D10). The plan's original
   bare names (.btn/.chip/.tile/.pop/.cell) collide with classes already live
   on ten pages; since this file loads FIRST, any property a page did not itself
   declare would leak and change it. The prefix removes the collision class by
   construction and marks the rule as design-system, not page-local.

   Exceptions, both deliberate:
     .vt-btn*      — fixed by the injection contract (video-tab.js:79)
     .delta-*      — canonical in design-tokens.md §3, already correct on
                     kart-tracker.html                                        */

/* Labels & headers — the condensed display face. */
.ld-display {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.ld-label {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--label);
}

/* Data — always mono, always tabular. */
.ld-mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.ld-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.ld-value-lg {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--text);
}


/* ── 5. Component recipes ──────────────────────────────────────────────────
   The vocabulary U2–U8 build from. design-tokens.md §4–§5.                   */

/* 5.1 Tab bar — active is a --brand underline, never a filled pill (§5).
   ⚠️ `.vt-btn` is NOT a naming choice: the offline adapter creates its Video
   button with className='vt-btn' and toggles .active (video-tab.js:79,:157).
   Style the tab bar by THIS class — never by [data-mode] or aria-selected —
   or the injected Video tab is unstyled and never reads active.
   U1 confined this to the properties driver.html's own `.vt-btn` already declared,
   so the rule stayed inert until that copy was deleted. U2 deleted it — the recipe
   is now complete, and `white-space: nowrap` is part of that: without it a two-word
   tab ("Dash Control") wraps onto two lines and breaks the bar's baseline.        */
.vt-btn {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 6px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--label);
  cursor: pointer;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: color var(--dur-tab), border-color var(--dur-tab);
}
.vt-btn:hover        { color: var(--text-2); border-bottom-color: var(--border-strong); }
.vt-btn.active       { color: var(--text);   border-bottom-color: var(--brand); }
.vt-btn.active:hover { color: var(--text);   border-bottom-color: var(--brand-bright); }
/* opacity + cursor ONLY. driver.html's own `.vt-btn:disabled` declares exactly those two, so a
   third property here (it was `color`) leaks straight through to the live page and breaks U1's
   inertness. Found by the with/without-livedash.css computed-style diff (U1 D12). */
.vt-btn:disabled     { opacity: 0.3; cursor: not-allowed; }

/* 5.2 Laplog row — separators are rules, not card boxes (§4). */
.ld-lap-row {
  border-bottom: 1px solid var(--hairline);
  transition: background-color var(--dur-fill);
}
/* background-COLOR, never the `background` shorthand: the target accent bar below is a
   background-IMAGE on the same row, and the shorthand would wipe it out. */
.ld-lap-row:hover { background-color: var(--surface); }

.ld-cell {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);          /* Law 1 — data is bright */
  padding: 5px 8px;
  text-align: right;
  white-space: nowrap;
}
.ld-cell--label  { font-family: var(--display); color: var(--label); text-align: left; }
.ld-cell--time   { font-weight: 700; }
.ld-cell--dim    { color: var(--text-dim); }

/* 5.2a Lap identity — four identities on four ORTHOGONAL channels (CC5).
   fill = fastest · left bar = target(s) · ring = selected.
   A lap routinely holds three or four at once; only orthogonal channels let
   them all be read simultaneously. Applied by U3, defined here.              */

/* Fastest — row FILL, locked purple. background-color, so it composes with the bar. */
.ld-lap-row.is-fastest        { background-color: rgba(169, 112, 255, 0.14); }
.ld-lap-row.is-fastest:hover  { background-color: rgba(169, 112, 255, 0.20); }
.ld-lap-row.is-fastest .ld-cell--time { color: var(--best); font-weight: 700; }

/* Targets — a 3px left accent BAR, drawn as a background-image.
   ⚠️ NOT an absolutely-positioned ::before. A laplog row is a <tr>, and a <tr> is not a reliable
   containing block: the pseudo-element gets laid out as an anonymous table cell and shunts the
   first column sideways. Caught by rendering the recipe gallery (U1 D13). A background-image
   needs no containing block, costs no box, and layers cleanly over the .is-fastest fill — which
   is what keeps the fill and bar channels genuinely orthogonal. */
.ld-lap-row.is-web-target,
.ld-lap-row.is-dash-target {
  background-repeat: no-repeat;
  background-size: 3px 100%;
}
.ld-lap-row.is-web-target  { background-image: linear-gradient(var(--good), var(--good)); }
.ld-lap-row.is-dash-target { background-image: linear-gradient(var(--brand), var(--brand)); }

/* Both targets on one lap — the bar splits in a FIXED web-then-dash order, top to bottom, so the
   reading never depends on which was set first. */
.ld-lap-row.is-web-target.is-dash-target {
  background-image: linear-gradient(to bottom,
                    var(--good) 0 50%, var(--brand) 50% 100%);
}

/* Selected / focus — an outline ring, a channel nothing else uses. */
.ld-lap-row.is-selected {
  outline: 1px solid var(--focus-ring);
  outline-offset: -1px;
}

/* 5.3 Stat tile — TOP SPEED, PEAK FWD G … (§4).
   The value stays BRIGHT NEUTRAL. Tint it only when the number means something
   right now (a new session best → .is-best); otherwise --text.               */
.ld-tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.ld-tile-label {
  display: block;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--label);
  margin-bottom: 4px;
}
.ld-tile-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--text);
}
.ld-tile-value.is-best { color: var(--best); }
.ld-tile-unit {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  margin-left: 4px;
}

/* 5.4 Top lap metrics — Fastest L / S1 / S2 / S3 + AVG + DEVIATION (§4). */
.ld-metric-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
}
.ld-metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ld-metric-label {
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--label);
}
.ld-metric-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.ld-metric-value.is-best { color: var(--best); font-weight: 700; }
.ld-metric-value.is-avg  { color: var(--text-2); }
/* σ is legible, not buried — --text-dim, with the sigma itself in --label. */
.ld-metric-value.is-dev  { color: var(--text-dim); }
.ld-metric-value.is-dev::before { content: 'σ'; color: var(--label); margin-right: 3px; }

/* 5.5 Lap comparison table (WEB vs SELECTED) — the Δ column is the star (§4). */
.ld-cmp-table {
  width: 100%;
  border-collapse: collapse;
}
.ld-cmp-table th {
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--label);
  text-align: right;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}
.ld-cmp-table th:first-child { text-align: left; }
/* The active target's column header carries the brand underline. */
.ld-cmp-table th.is-active {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--brand);
}
.ld-cmp-table td {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--text);
  text-align: right;
  padding: 4px 8px;
  border-bottom: 1px solid var(--hairline);
}
.ld-cmp-table td:first-child {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--label);
  text-align: left;
}

/* 5.6 Segmented control. */
.ld-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.ld-seg-opt {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--label);
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  padding: 5px 12px;
  cursor: pointer;
  transition: color var(--dur-tab), background var(--dur-tab);
}
.ld-seg-opt:last-child { border-right: none; }
.ld-seg-opt:hover      { color: var(--text-2); }
.ld-seg-opt.active     { color: var(--text); background: var(--surface); box-shadow: inset 0 -2px 0 var(--brand); }

/* 5.7 Dropdown — matches the shipped `LDR / AHD / BHD ▾` idiom. */
.ld-select {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 24px 5px 10px;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--label) 50%),
                    linear-gradient(135deg, var(--label) 50%, transparent 50%);
  background-position: right 11px center, right 7px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.ld-select:hover  { border-color: var(--border-strong); color: var(--text); }
.ld-select:focus  { outline: 1px solid var(--brand); outline-offset: -1px; }
.ld-select option { background: var(--surface); color: var(--text); }

/* 5.8 Chip — semantic variants only. A chip with no meaning is neutral. */
.ld-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px 8px;
  white-space: nowrap;
}
.ld-chip--good    { color: var(--good);    border-color: rgba(48, 200, 96, 0.42); }
.ld-chip--caution { color: var(--caution); border-color: rgba(255, 176, 32, 0.42); }
.ld-chip--alert   { color: var(--alert);   border-color: rgba(255, 77, 74, 0.42); }
.ld-chip--best    { color: var(--best);    border-color: rgba(169, 112, 255, 0.42); }
.ld-chip--brand   { color: var(--brand);   border-color: rgba(46, 128, 255, 0.42); }

/* 5.9 Buttons. */
.ld-btn {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 14px;
  cursor: pointer;
  transition: color var(--dur-tab), border-color var(--dur-tab), background var(--dur-tab);
}
.ld-btn:hover     { color: var(--text); border-color: var(--border-strong); }
.ld-btn:active    { background: var(--bg); }
.ld-btn:disabled  { color: var(--text-faint); border-color: var(--border); cursor: not-allowed; }

.ld-btn--brand         { color: #05070a; background: var(--brand); border-color: var(--brand); }
.ld-btn--brand:hover   { color: #05070a; background: var(--brand-bright); border-color: var(--brand-bright); }
.ld-btn--brand:active  { background: var(--brand-deep); border-color: var(--brand-deep); }

.ld-btn--alert-outline        { color: var(--alert); border-color: rgba(255, 77, 74, 0.55); background: transparent; }
.ld-btn--alert-outline:hover  { color: var(--alert); border-color: var(--alert); background: rgba(255, 77, 74, 0.10); }

/* 5.10 Popover — the lap context menu and the condition picker. */
.ld-pop {
  position: absolute;
  z-index: 60;
  min-width: 168px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 4px;
  /* Hard edges: a defined seam, not a soft drop-shadow halo (Law 4). */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.62);
}
.ld-pop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-2);
  background: transparent;
  border: none;
  border-radius: 2px;
  padding: 6px 9px;
  cursor: pointer;
  text-align: left;
}
.ld-pop-item:hover     { background: var(--surface); color: var(--text); }
.ld-pop-item:disabled  { color: var(--text-faint); cursor: not-allowed; background: transparent; }
.ld-pop-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 2px;
}
/* The ring that ties an open popover back to the row that opened it. */
.ld-pop-ring {
  outline: 1px solid var(--focus-ring);
  outline-offset: -1px;
}

/* 5.11 Overlay readout panel — the system's answer to "a readout floating over
   live imagery" (U1d, ratified 2026-08-04). Consumed by U7 via video-tab.css;
   any future surface over video or a map inherits it rather than re-deriving. */
.ld-ov-panel {
  background: rgba(8, 8, 8, 0.86);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  padding: 7px 10px;
}
.ld-ov-cap {
  display: block;
  font-family: var(--display);
  font-size: 8.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--label);
}
.ld-ov-val {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
}
.ld-ov-rule {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}
/* Sector chip: filled semantic, dark text — reads at a glance over imagery. */
.ld-ov-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #0a0a0a;
  border-radius: 2px;
  padding: 2px 6px;
}
.ld-ov-chip .ld-ov-cap { color: rgba(0, 0, 0, 0.62); }
.ld-ov-chip--best    { background: var(--best); }
.ld-ov-chip--good    { background: var(--good); }
.ld-ov-chip--caution { background: var(--caution); }
/* Not set — unfilled, labelled. */
.ld-ov-chip--empty {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
}


/* ── 6. The delta rule ─────────────────────────────────────────────────────
   design-tokens.md §3 — the most important legibility law. Any signed
   time/gap/speed delta is coloured BY SIGN, always, everywhere. The eye reads
   red/green before it reads digits. Never render a delta in neutral grey.

   These three keep their canonical bare names: they are named verbatim in the
   tokens file and kart-tracker.html already uses them with these exact values. */

.delta-faster { color: var(--good);   }  /* negative — gained  */
.delta-slower { color: var(--alert);  }  /* positive — lost    */
.delta-flat   { color: var(--text-2); }  /* zero / baseline    */


/* ── 7. Motion ─────────────────────────────────────────────────────────────
   Refined-premium = restrained. No page-load stagger on an operational
   screen — this is an instrument, not a landing page (design-tokens.md §6).  */

/* Live value update: a short flash toward --brand, settling to --text. */
@keyframes ld-flash {
  from { color: var(--brand); }
  to   { color: var(--text); }
}
.ld-flash { animation: ld-flash var(--dur-flash) ease-out 1; }

/* Playback scrubber is a clock: linear, no easing. */
.ld-scrub { transition: transform var(--dur-fill) linear; }

@media (prefers-reduced-motion: reduce) {
  .ld-flash { animation: none; }
  .ld-scrub,
  .ld-lap-row,
  .vt-btn,
  .ld-seg-opt,
  .ld-btn { transition: none; }
}