/* ===========================================================================
   Drive mode's chrome in the garage language (UI audit 2026-09, wave 2)
   ===========================================================================

   DRIVE-ONLY. tracks/drive_v3.html.erb is the one page that links this sheet
   (and its Google Fonts); layouts/_stylesheets leaves it out of the site
   bundle, and every selector below starts at `.rt-drive`, the class on drive
   mode's <body> (drive_garage_css_test.rb fails on one that doesn't). The
   flythrough console on the track page and /billing runs the same engine but
   has its own chrome and is NOT styled here (Wave 3, the Pit wall direction).

   It replaces the ~200 lines of inline <style> drive_v3.html.erb carried and
   the stylesheets race_day_ui.js and event_day/player.js used to inject: one
   sheet for drive's nav, HUD, start lights, lap banner, replay bar, controls
   card, Race Day (setup, tower, spectate bar, results) and Event Day (player,
   report, film). The shared trailer overlay (venue_trailer_ui.js) keeps its
   inline styles on purpose — it is shared with the track page and waiting on
   a founder decision — and nothing burned into an exported video is drawn by
   CSS at all.

   THE LANGUAGE — the studio's (app/assets/stylesheets/studio_garage.css,
   docs/concepts/editor-garage/): dark neutral greys; ONE signal orange per
   view for the go action; a chosen option is a solid bone block; labels in
   Barlow Condensed caps, text in Inter Tight, every changing number in
   JetBrains Mono tabular figures; moulded buttons (lit top edge, real
   shadow, 1 px press-in); hazard tape only on the launch panels (Race setup,
   Event Day opening) and the one blocking failure. F1 red, amber and rose
   are retired as button colours; red stays for what is genuinely red — the
   start lights, REC, a lockup, a wrong way. The phase hues are telemetry:
   sectors, pedals, shift lights, the delta.

   STATES: on / off / disabled read differently. A toggle carries
   aria-pressed and a lamp (lit bone vs a hollow ring) at full contrast; a
   disabled control is dimmed, dashed and not-allowed and says why in its
   title. A mode that is running (End race, End event) is the bone block.
   ------------------------------------------------------------------------- */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
.rt-drive {
  --g-asphalt: #0d0d0f;
  --g-black: #141416;
  --g-carbon: #1c1c1f;
  --g-steel: #27272b;
  --g-slate: #3d3d43;
  --g-smoke: #9a9aa0;
  --g-mist: #b1b1b6;
  --g-bone: #f4f2ee;
  --g-brake: #fb7185;
  --g-corner: #fbbf24;
  --g-power: #34d399;
  --g-flat: #60a5fa;
  --g-best: #b79cff;
  --g-signal: #ff7a1a;
  --g-signal-deep: #e2620a;
  --g-on-signal: #170a00;
  --g-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --g-text: "Inter Tight", system-ui, -apple-system, sans-serif;
  --g-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --g-mould: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 55%);
  --g-mould-go: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 60%);
  --g-lift: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06));
  --g-lift-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 4px rgba(0, 0, 0, 0.35);
  --g-press: 120ms ease-out;
  --g-focus: 0 0 0 2px var(--g-black), 0 0 0 4px var(--g-signal);
  --g-hazard: repeating-linear-gradient(-45deg, var(--g-corner) 0 7px, var(--g-black) 7px 14px);
  --g-glass: rgba(20, 20, 22, 0.88);
  --g-panel-edge: rgba(255, 255, 255, 0.09);

  position: fixed;
  inset: 0;
  margin: 0;
  overflow: hidden;
  background: var(--g-asphalt);
  color: var(--g-bone);
  font-family: var(--g-text);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}
.rt-drive *, .rt-drive *::before, .rt-drive *::after { box-sizing: border-box; }
/* `hidden` wins over every display rule below (Replay lap before a lap). */
.rt-drive [hidden] { display: none !important; }
.rt-drive button, .rt-drive select, .rt-drive input, .rt-drive textarea { font: inherit; color: inherit; }
/* Every clickable thing shows a pointer — bare buttons do not by default. */
.rt-drive button:not(:disabled), .rt-drive select:not(:disabled), .rt-drive [role="button"], .rt-drive summary, .rt-drive a[href] { cursor: pointer; }
.rt-drive :focus-visible { outline: none; box-shadow: var(--g-focus); }
.rt-drive #drive-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rt-drive kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border: 1px solid var(--g-slate);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--g-black);
  color: var(--g-bone);
  font: 500 10px/1.4 var(--g-mono);
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
}

/* ── The moulded button: every button drive draws ───────────────────────── */
.rt-drive .nav a,
.rt-drive .nav button,
.rt-drive .nav select,
.rt-drive #replay-bar button,
.rt-drive #race-spectate button,
.rt-drive #race-setup button,
.rt-drive #race-results button,
.rt-drive #event-day button,
.rt-drive #event-day a.go,
.rt-drive .drive-dialog button,
.rt-drive #controls-card button,
.rt-drive #start-skip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--g-slate);
  border-radius: 7px;
  background: var(--g-mould), var(--g-steel);
  box-shadow: var(--g-lift-shadow);
  color: var(--g-mist);
  font-family: var(--g-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform var(--g-press), box-shadow var(--g-press);
}
/* The moulded button's lift shadow outranked `.rt-drive :focus-visible` on
   specificity, so keyboard focus drew nothing on these (SPEC event-day-ux
   §16, audit C1): the ring rides on top of the lift, for every one of them. */
.rt-drive .nav :is(a, button, select):focus-visible,
.rt-drive :is(#replay-bar, #race-spectate, #race-setup, #race-results, .drive-dialog, #controls-card) button:focus-visible,
.rt-drive #start-skip:focus-visible { outline: none; box-shadow: var(--g-focus), var(--g-lift-shadow); }
.rt-drive .nav a:hover,
.rt-drive .nav button:hover:not(:disabled),
.rt-drive .nav select:hover:not(:disabled),
.rt-drive #replay-bar button:hover:not(:disabled),
.rt-drive #race-spectate button:hover:not(:disabled),
.rt-drive #race-setup button:hover:not(:disabled),
.rt-drive #race-results button:hover:not(:disabled),
.rt-drive #event-day button:hover:not(:disabled),
.rt-drive .drive-dialog button:hover:not(:disabled),
.rt-drive #start-skip:hover { background: var(--g-lift), var(--g-mould), var(--g-steel); color: var(--g-bone); }
.rt-drive .nav a:active,
.rt-drive .nav button:active:not(:disabled),
.rt-drive #replay-bar button:active:not(:disabled),
.rt-drive #race-spectate button:active:not(:disabled),
.rt-drive #race-setup button:active:not(:disabled),
.rt-drive #race-results button:active:not(:disabled),
.rt-drive #event-day button:active:not(:disabled),
.rt-drive .drive-dialog button:active:not(:disabled),
.rt-drive #controls-card button:active,
.rt-drive #start-skip:active { transform: translateY(1px) scale(0.975); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45); }
.rt-drive .nav select { appearance: none; padding-right: 26px; background: var(--g-mould), var(--g-steel); background-image: var(--g-mould), linear-gradient(45deg, transparent 50%, var(--g-mist) 50%), linear-gradient(-45deg, transparent 50%, var(--g-mist) 50%); background-position: 0 0, right 13px center, right 9px center; background-size: auto, 4px 4px, 4px 4px; background-repeat: no-repeat; background-color: var(--g-steel); }
.rt-drive .nav select option { background: var(--g-carbon); color: var(--g-bone); text-transform: none; }

/* The ONE go action in a view: orange. */
.rt-drive #replay-bar .primary,
.rt-drive .go,
.rt-drive #controls-card .go,
.rt-drive #replay-bar #save-video,
.rt-drive #race-setup .go,
.rt-drive #race-results .go,
.rt-drive #event-day .go,
.rt-drive #event-day a.go,
.rt-drive .drive-dialog .go {
  border-color: var(--g-signal-deep);
  background: var(--g-mould-go), var(--g-signal);
  color: var(--g-on-signal);
}
.rt-drive #replay-bar .primary:hover:not(:disabled),
.rt-drive .go:hover:not(:disabled),
.rt-drive #replay-bar #save-video:hover:not(:disabled),
.rt-drive #race-setup .go:hover,
.rt-drive #race-results .go:hover,
.rt-drive #event-day .go:hover,
.rt-drive #event-day a.go:hover,
.rt-drive .drive-dialog .go:hover { background: var(--g-lift), var(--g-mould-go), var(--g-signal); color: var(--g-on-signal); }

/* Disabled: dimmed, dashed, not-allowed — never mistaken for "off". */
.rt-drive button:disabled,
.rt-drive select:disabled,
.rt-drive #replay-bar button:disabled,
.rt-drive #replay-bar #save-video:disabled,
.rt-drive #race-spectate button:disabled,
.rt-drive #race-setup button:disabled,
.rt-drive #event-day button:disabled {
  opacity: 0.4;
  border-style: dashed;
  background: var(--g-steel);
  box-shadow: none;
  color: var(--g-smoke);
  cursor: not-allowed;
}

/* Toggles: the lamp. On = lit bone, off = a hollow ring; both full contrast. */
.rt-drive .nav button[aria-pressed]::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--g-bone);
  box-shadow: 0 0 6px rgba(244, 242, 238, 0.7);
}
.rt-drive .nav button[aria-pressed="false"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--g-smoke); }
.rt-drive .nav button[aria-pressed="false"] { color: var(--g-mist); }
/* A running mode (End race, End event): the bone block. */
.rt-drive .nav button.on {
  border-color: var(--g-bone);
  background: var(--g-bone);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  color: var(--g-black);
}
.rt-drive .nav button.on::before { display: none; }
.rt-drive .nav button.on:hover:not(:disabled) { background: #fff; color: var(--g-black); }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
/* Stops short of the HUD panel (276 px + its inset + a gap) and wraps. */
.rt-drive .nav { position: absolute; top: 12px; left: 12px; right: 302px; z-index: 10; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.rt-drive .nav a, .rt-drive .nav button, .rt-drive .nav select { padding: 0 9px; font-size: 12px; }
.rt-drive .nav select { padding-right: 24px; }
.rt-drive #replay-lap .lbl { display: none; }
.rt-drive .nav-primary, .rt-drive .nav-more, .rt-drive .nav-launch { display: contents; }
.rt-drive #drive-exit { padding-left: 10px; color: var(--g-bone); }
.rt-drive .nav .promo {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 7px;
  background: rgba(20, 20, 22, 0.82);
  color: var(--g-corner);
  font: 600 12px/1 var(--g-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rt-drive .nav .promo--sheet, .rt-drive #drive-more { display: none; }
.rt-drive #show-controls { min-width: 32px; padding: 0 10px; }

/* ── HUD panel ───────────────────────────────────────────────────────────── */
.rt-drive .hud {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 10;
  width: 276px;
  overflow: hidden;
  border: 1px solid var(--g-panel-edge);
  border-radius: 10px;
  background: var(--g-glass);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  font-variant-numeric: tabular-nums;
}
.rt-drive .shift-lights { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; padding: 9px 12px 4px; }
.rt-drive .shift-lights i { height: 6px; border-radius: 2px; background: rgba(255, 255, 255, 0.07); transition: background 0.06s; }
.rt-drive .shift-lights i.on.g { background: var(--g-power); box-shadow: 0 0 6px rgba(52, 211, 153, 0.7); }
.rt-drive .shift-lights i.on.r { background: var(--g-brake); box-shadow: 0 0 6px rgba(251, 113, 133, 0.7); }
.rt-drive .shift-lights i.on.b { background: var(--g-flat); box-shadow: 0 0 6px rgba(96, 165, 250, 0.8); }
.rt-drive .shift-lights.shift i { background: var(--g-flat); animation: rt-drive-shift-flash 0.16s steps(2) infinite; }
@keyframes rt-drive-shift-flash { 50% { background: rgba(96, 165, 250, 0.15); } }
.rt-drive .hud-main { display: flex; align-items: flex-end; justify-content: space-between; padding: 2px 14px 8px; }
.rt-drive .speed { display: block; color: var(--g-bone); font: 600 60px/0.9 var(--g-display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.rt-drive .unit { color: var(--g-smoke); font: 600 11px/1 var(--g-display); letter-spacing: 0.14em; }
.rt-drive .gear-box { display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid var(--g-slate); border-radius: 9px; background: var(--g-black); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }
.rt-drive .gear { color: var(--g-bone); font: 600 40px/1 var(--g-display); font-variant-numeric: tabular-nums; }
.rt-drive .gear-box .unit { margin-top: -2px; font-size: 9px; }
.rt-drive .hud-pedals { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 6px; align-items: center; padding: 0 14px 10px; }
.rt-drive .pedal { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.rt-drive .pedal span { display: block; height: 100%; width: 0; border-radius: inherit; }
.rt-drive #pedal-throttle span { background: var(--g-power); }
.rt-drive #pedal-brake span { background: var(--g-brake); }
.rt-drive .aid { padding: 2px 6px; border: 1px solid var(--g-slate); border-radius: 4px; color: var(--g-smoke); font: 600 10px/1.2 var(--g-display); letter-spacing: 0.1em; }
.rt-drive .aid.on { border-color: var(--g-corner); background: rgba(251, 191, 36, 0.16); color: var(--g-corner); }
.rt-drive .aid.slip { border-color: var(--g-brake); background: rgba(251, 113, 133, 0.22); color: var(--g-brake); }
.rt-drive .hud-times { border-top: 1px solid var(--g-panel-edge); padding: 8px 14px 6px; }
.rt-drive .hud-row { display: flex; align-items: baseline; justify-content: space-between; margin: 2px 0; color: var(--g-bone); font: 500 15px/1.3 var(--g-mono); font-variant-numeric: tabular-nums; }
.rt-drive .hud-row label { color: var(--g-smoke); font: 600 11px/1 var(--g-display); letter-spacing: 0.14em; }
.rt-drive .hud-row.lap { font-size: 20px; font-weight: 600; }
.rt-drive #medal { margin-left: 6px; font-size: 14px; }
.rt-drive .hud-sectors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px 14px 10px; }
.rt-drive .sector-box { padding: 4px 6px 5px; border: 1px solid transparent; border-radius: 6px; background: rgba(255, 255, 255, 0.05); text-align: center; transition: background 0.2s; }
.rt-drive .sector-box label { display: block; color: var(--g-smoke); font: 600 10px/1.2 var(--g-display); letter-spacing: 0.14em; }
.rt-drive .sector { display: block; color: var(--g-mist); font: 500 13px/1.3 var(--g-mono); font-variant-numeric: tabular-nums; }
.rt-drive .sector-box.live { border-color: rgba(244, 242, 238, 0.3); }
.rt-drive .sector-box.prev { opacity: 0.5; }
.rt-drive .sector-box[data-colour="purple"] { background: rgba(183, 156, 255, 0.85); }
.rt-drive .sector-box[data-colour="green"] { background: rgba(52, 211, 153, 0.8); }
.rt-drive .sector-box[data-colour="yellow"] { background: rgba(251, 191, 36, 0.85); }
.rt-drive .sector-box[data-colour] .sector, .rt-drive .sector-box[data-colour] label { color: var(--g-black); }
.rt-drive .sector-box[data-colour="invalid"] { background: rgba(61, 61, 67, 0.8); }
.rt-drive .sector-box[data-colour="invalid"] .sector { color: var(--g-mist); text-decoration: line-through; }
.rt-drive .hud-foot { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 7px 14px 9px; border-top: 1px solid var(--g-panel-edge); color: var(--g-smoke); font: 600 11px/1.3 var(--g-display); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.rt-drive .hud-foot .surface { color: var(--g-corner); }
.rt-drive .invalid { color: var(--g-brake); }
.rt-drive .out-lap { color: var(--g-corner); }
/* A race keeps only what a race has: the time-trial fields go (target,
   medal, pace car gap, ghost, the delta bar). */
.rt-drive.race-on .tt-only { display: none !important; }

/* ── Delta bar ───────────────────────────────────────────────────────────── */
.rt-drive #delta-bar { position: absolute; top: 60px; left: 50%; z-index: 10; transform: translateX(-50%); width: 300px; padding: 6px 10px 7px; border: 1px solid var(--g-panel-edge); border-radius: 8px; background: var(--g-glass); backdrop-filter: blur(8px); text-align: center; transition: opacity 0.2s; }
.rt-drive #delta-bar.idle { opacity: 0; pointer-events: none; }
.rt-drive #delta-bar .delta-head { display: flex; justify-content: space-between; align-items: baseline; color: var(--g-smoke); font: 600 10px/1 var(--g-display); letter-spacing: 0.14em; }
.rt-drive #ghost-delta { color: var(--g-bone); font: 600 17px/1.2 var(--g-mono); font-variant-numeric: tabular-nums; }
.rt-drive .delta-track { position: relative; height: 5px; margin-top: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.rt-drive .delta-track::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: rgba(244, 242, 238, 0.55); }
.rt-drive #delta-fill { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-radius: 999px; transition: width 0.1s, left 0.1s, background 0.2s; }

/* ── Start lights (the red is real) ──────────────────────────────────────── */
.rt-drive #start-lights { position: absolute; top: 15%; left: 50%; z-index: 13; transform: translateX(-50%); display: none; text-align: center; }
.rt-drive #start-lights.show { display: block; }
.rt-drive .gantry { display: flex; gap: 10px; padding: 12px 16px; border: 1px solid var(--g-slate); border-radius: 10px; background: var(--g-black); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); }
.rt-drive .gantry .pod { display: grid; gap: 8px; padding: 8px; border-radius: 7px; background: var(--g-carbon); }
.rt-drive .gantry .pod i { width: 34px; height: 34px; border-radius: 50%; background: #242428; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6); }
.rt-drive .gantry .pod.lit i { background: radial-gradient(circle at 40% 35%, #fecaca, #ef4444 45%, #7f1d1d); box-shadow: 0 0 22px rgba(239, 68, 68, 0.85), inset 0 -2px 6px rgba(0, 0, 0, 0.4); }
.rt-drive #start-caption { margin-top: 10px; color: var(--g-bone); font: 600 18px/1 var(--g-display); letter-spacing: 0.24em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); }
.rt-drive #start-lights.go #start-caption { color: var(--g-power); font-size: 30px; }
.rt-drive #start-lights.jump #start-caption { color: var(--g-brake); font-size: 26px; }
.rt-drive #start-skip { margin-top: 10px; }
.rt-drive #start-lights.go #start-skip, .rt-drive #start-lights.jump #start-skip { visibility: hidden; }
/* Desktop: a broadcast graphic, not a second gantry. At 15% the box sat
   exactly over the 3D start gantry the chase camera frames on the grid (the
   known "HTML gantry floats over the 3D one" gap). One row of five lamps and
   one line of caption, docked under the bar and above where the 3D gantry's
   beam sits (~26% of the frame); clear of a two-row bar, the race tower and
   the HUD at 1000 px. Phones keep the gantry (the media query below). */
@media (min-width: 721px) {
  .rt-drive #start-lights { top: 92px; }
  .rt-drive #start-lights.show { display: flex; flex-direction: column; align-items: center; }
  .rt-drive .gantry { gap: 6px; padding: 7px 10px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
  .rt-drive .gantry .pod { padding: 4px; border-radius: 6px; }
  .rt-drive .gantry .pod i { width: 20px; height: 20px; }
  .rt-drive .gantry .pod i + i { display: none; }
  .rt-drive #start-caption { margin-top: 7px; font-size: 14px; }
  .rt-drive #start-lights.go #start-caption { font-size: 22px; }
  .rt-drive #start-lights.jump #start-caption { font-size: 20px; }
  .rt-drive #start-skip { margin-top: 6px; }
}

/* ── Lap banner ──────────────────────────────────────────────────────────── */
.rt-drive #lap-banner { position: absolute; top: 24%; left: 50%; z-index: 14; transform: translate(-50%, -12px); min-width: 300px; padding: 14px 22px 16px; border: 1px solid var(--g-panel-edge); border-radius: 12px; background: var(--g-glass); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; }
.rt-drive #lap-banner.show { opacity: 1; transform: translate(-50%, 0); }
.rt-drive #lap-banner.pb { border-color: rgba(183, 156, 255, 0.7); box-shadow: 0 0 0 1px rgba(183, 156, 255, 0.35), 0 18px 50px rgba(0, 0, 0, 0.5); }
.rt-drive #lap-banner .lb-head { color: var(--g-smoke); font: 600 12px/1 var(--g-display); letter-spacing: 0.2em; }
.rt-drive #lap-banner .lb-time { margin: 4px 0 8px; color: var(--g-bone); font: 600 44px/1 var(--g-display); font-variant-numeric: tabular-nums; }
.rt-drive #lap-banner .lb-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; align-items: center; color: var(--g-mist); font: 600 13px/1.2 var(--g-display); letter-spacing: 0.06em; text-transform: uppercase; }
.rt-drive #lap-banner .lb-medal { padding: 3px 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); }
.rt-drive #lap-banner .lb-medal.gold { background: rgba(251, 191, 36, 0.22); color: var(--g-corner); }
.rt-drive #lap-banner .lb-medal.silver { background: rgba(244, 242, 238, 0.14); color: var(--g-bone); }
.rt-drive #lap-banner .lb-medal.bronze { background: rgba(180, 83, 9, 0.3); color: #fed7aa; }
.rt-drive #lap-banner .lb-pb { padding: 3px 10px; border-radius: 5px; background: var(--g-best); color: var(--g-black); letter-spacing: 0.12em; }
.rt-drive #lap-banner .lb-sectors { display: flex; justify-content: center; gap: 4px; margin-top: 10px; }
.rt-drive #lap-banner .lb-sectors span { min-width: 70px; padding: 3px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); font: 500 12px/1.3 var(--g-mono); font-variant-numeric: tabular-nums; }
.rt-drive #lap-banner .lb-sectors [data-colour="purple"] { background: var(--g-best); color: var(--g-black); }
.rt-drive #lap-banner .lb-sectors [data-colour="green"] { background: var(--g-power); color: var(--g-black); }
.rt-drive #lap-banner .lb-sectors [data-colour="yellow"] { background: var(--g-corner); color: var(--g-black); }

/* ── Dialogs: the controls card, Mark Issue, Race setup/results, Event Day ── */
.rt-drive #controls-card,
.rt-drive .drive-dialog,
.rt-drive #race-setup,
.rt-drive #race-results,
.rt-drive #event-day .ed-dialog {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(13, 13, 15, 0.64);
  backdrop-filter: blur(3px);
}
.rt-drive #controls-card { z-index: 24; }
.rt-drive #controls-card.show, .rt-drive .drive-dialog.show, .rt-drive #race-setup.show, .rt-drive #race-results.show, .rt-drive #event-day .ed-dialog { display: flex; }
.rt-drive #controls-card .card,
.rt-drive .drive-dialog .card,
.rt-drive #race-results .card,
.rt-drive #event-day .ed-dialog .report,
.rt-drive #event-day .ed-dialog .card {
  width: min(460px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 18px 20px 20px;
  border: 1px solid var(--g-slate);
  border-radius: 12px;
  background: var(--g-carbon);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  color: var(--g-bone);
}
.rt-drive #controls-card h2,
.rt-drive .drive-dialog h2,
.rt-drive #race-results h2,
.rt-drive #event-day .report-head h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 6px;
  color: var(--g-bone);
  font: 600 22px/1.1 var(--g-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rt-drive #controls-card h2::before,
.rt-drive .drive-dialog h2::before,
.rt-drive #race-results h2::before,
.rt-drive #event-day .report-head h2::before { content: ""; flex: none; width: 3px; height: 20px; background: var(--g-signal); }
.rt-drive .lead, .rt-drive #controls-card p.lead { margin: 0 0 14px; color: var(--g-smoke); font-size: 13px; }
.rt-drive .kicker { color: var(--g-smoke); font: 600 12px/1 var(--g-display); letter-spacing: 0.14em; text-transform: uppercase; }
.rt-drive .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.rt-drive .drive-dialog .actions, .rt-drive #race-results .actions { justify-content: flex-end; }

/* Controls card */
.rt-drive #controls-card .card { width: min(820px, 100%); }
.rt-drive #controls-card .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rt-drive #controls-card .col { padding: 12px 14px; border: 1px solid var(--g-slate); border-radius: 10px; background: var(--g-black); }
.rt-drive #controls-card .col.here { border-color: var(--g-bone); }
.rt-drive #controls-card h3 { margin: 0 0 10px; color: var(--g-mist); font: 600 14px/1 var(--g-display); letter-spacing: 0.1em; text-transform: uppercase; }
.rt-drive #controls-card .col.here h3 { color: var(--g-bone); }
.rt-drive #controls-card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 0; font-size: 12px; }
.rt-drive #controls-card dt { color: var(--g-bone); white-space: nowrap; }
.rt-drive #controls-card dd { margin: 0; color: var(--g-mist); }
.rt-drive #controls-card .tip { margin: 12px 0 0; color: var(--g-smoke); font-size: 12px; }
.rt-drive #controls-card .go { display: flex; min-height: 44px; margin: 16px 0 0 auto; padding: 0 22px; font-size: 17px; border-radius: 9px; }
.rt-drive #controls-card .needs-lap-note { display: none; color: var(--g-smoke); }
.rt-drive #controls-card dd.unavailable .needs-lap-note { display: inline; }
.rt-drive [data-needs-lap].unavailable { opacity: 0.45; }

/* Mark Issue */
.rt-drive .drive-dialog textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--g-slate); border-radius: 8px; background: var(--g-black); color: var(--g-bone); font: 400 14px/1.4 var(--g-text); resize: vertical; }
.rt-drive .drive-dialog .fine { margin: 6px 0 0; color: var(--g-smoke); font-size: 11px; }

/* Quality settings (fidelity P2b): presets, then every control as a
   segmented row. The chosen value is the bone block, like Race setup's
   cards; "Custom" is a tag, not a button — it is what the rows make. */
.rt-drive #quality-open .gear { font-size: 14px; line-height: 1; }
.rt-drive #quality-open .lbl { display: none; }
.rt-drive .quality-card { width: min(640px, 100%); max-height: calc(100vh - 40px); overflow: auto; }
.rt-drive .quality-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rt-drive .quality-presets button { min-width: 72px; }
.rt-drive .quality-presets .custom-tag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px dashed var(--g-bone); border-radius: 7px; color: var(--g-bone); font: 600 13px/1 var(--g-display); letter-spacing: 0.05em; text-transform: uppercase; }
.rt-drive .quality-presets .custom-tag[hidden] { display: none; }
.rt-drive .drive-dialog .quality-presets button[aria-pressed="true"],
.rt-drive .drive-dialog .segmented button[aria-pressed="true"] { border-color: var(--g-bone); background: var(--g-bone); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); color: var(--g-black); }
.rt-drive .quality-warning { margin: 10px 0 0; padding: 8px 10px; border: 1px solid rgba(251, 191, 36, 0.45); border-radius: 8px; background: rgba(251, 191, 36, 0.08); color: var(--g-corner); font-size: 12px; }
.rt-drive .quality-controls { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--g-slate); }
.rt-drive .quality-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 10px; }
.rt-drive .quality-row-label { color: var(--g-mist); font: 600 12px/1.2 var(--g-display); letter-spacing: 0.1em; text-transform: uppercase; }
.rt-drive .segmented { display: flex; flex-wrap: wrap; gap: 4px; }
.rt-drive .drive-dialog .segmented button { min-height: 30px; padding: 0 10px; font-family: var(--g-mono); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.rt-drive #quality-veil { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(13, 13, 15, 0.92); color: var(--g-bone); font: 600 22px/1 var(--g-display); letter-spacing: 0.12em; text-transform: uppercase; }
.rt-drive #quality-veil[hidden] { display: none; }

/* ── Hint bar, toast, wrong way, minimap ─────────────────────────────────── */
.rt-drive .hint { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; max-width: calc(100vw - 32px); padding: 8px 14px; border: 1px solid var(--g-panel-edge); border-radius: 8px; background: var(--g-glass); backdrop-filter: blur(8px); color: var(--g-smoke); font: 600 12px/1.3 var(--g-display); letter-spacing: 0.06em; text-transform: uppercase; }
.rt-drive .hint > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.rt-drive .hint [data-race-only] { display: none; }
.rt-drive.race-watching .hint [data-race-only] { display: inline-flex; }
.rt-drive #drive-toast { position: absolute; left: 50%; bottom: 70px; z-index: 45; transform: translate(-50%, 10px); max-width: calc(100vw - 32px); padding: 9px 16px; border: 1px solid var(--g-slate); border-radius: 8px; background: var(--g-carbon); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); color: var(--g-bone); font-weight: 500; opacity: 0; pointer-events: none; transition: 0.2s; }
.rt-drive #drive-toast.show { opacity: 1; transform: translate(-50%, 0); }
.rt-drive #drive-toast.error { border-color: var(--g-brake); color: #fecdd3; }
.rt-drive #wrong-way { position: absolute; top: 22%; left: 50%; z-index: 12; transform: translateX(-50%); padding: 10px 22px; border: 2px solid var(--g-brake); border-radius: 8px; background: rgba(136, 19, 55, 0.85); color: #fecdd3; font: 600 26px/1 var(--g-display); letter-spacing: 0.16em; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.rt-drive #wrong-way.show { opacity: 1; animation: rt-drive-wrong-way 0.9s ease-in-out infinite; }
@keyframes rt-drive-wrong-way { 50% { transform: translateX(-50%) scale(1.06); } }
/* Below the broadcast panel on the right; the panel is ~330 px tall. */
.rt-drive #drive-minimap { position: absolute; right: 14px; top: 356px; z-index: 9; width: 150px; height: 150px; opacity: 0.92; pointer-events: none; }

/* ── Boot: loading, and the one failure that deserves hazard tape ────────── */
.rt-drive #drive-loading { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 30%, var(--g-carbon), var(--g-asphalt) 70%); transition: opacity 0.35s; }
.rt-drive #drive-loading.hide { opacity: 0; pointer-events: none; }
.rt-drive #drive-loading .box { width: min(380px, 100%); }
.rt-drive #drive-loading strong { display: block; margin: 6px 0 14px; color: var(--g-bone); font: 600 26px/1.1 var(--g-display); letter-spacing: 0.03em; text-transform: uppercase; }
.rt-drive #drive-loading .bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.rt-drive #drive-loading .bar span { display: block; height: 100%; width: 0; background: var(--g-bone); transition: width 0.25s; }
.rt-drive #drive-loading ol { margin: 16px 0 0; padding: 0; list-style: none; }
.rt-drive #drive-loading li { display: flex; align-items: center; gap: 10px; margin: 8px 0; color: var(--g-slate); font-size: 13px; font-weight: 500; }
.rt-drive #drive-loading li::before { content: ""; flex: none; width: 14px; height: 14px; border: 2px solid var(--g-slate); border-radius: 50%; }
.rt-drive #drive-loading li.active { color: var(--g-bone); }
.rt-drive #drive-loading li.active::before { border-color: rgba(244, 242, 238, 0.2); border-top-color: var(--g-bone); animation: rt-drive-spin 0.8s linear infinite; }
.rt-drive #drive-loading li.done { color: var(--g-mist); }
.rt-drive #drive-loading li.done::before { border-color: var(--g-mist); background: var(--g-mist); box-shadow: inset 0 0 0 3px var(--g-carbon); }
.rt-drive #drive-loading li small { margin-left: auto; color: var(--g-smoke); font: 400 11px/1 var(--g-mono); font-variant-numeric: tabular-nums; }
.rt-drive #drive-loading-detail { display: block; margin-top: 12px; color: var(--g-smoke); font-size: 12px; }
@keyframes rt-drive-spin { to { transform: rotate(360deg); } }
.rt-drive #drive-error { position: absolute; inset: 0; z-index: 30; display: none; place-items: center; padding: 24px; background: var(--g-asphalt); text-align: center; }
.rt-drive #drive-error.show { display: grid; }
.rt-drive #drive-error > div { max-width: 420px; padding: 22px 24px; border: 1px solid var(--g-slate); border-radius: 12px; background: var(--g-carbon); position: relative; overflow: hidden; }
.rt-drive #drive-error > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--g-hazard); }
.rt-drive #drive-error strong { display: block; margin: 6px 0 8px; color: var(--g-bone); font: 600 24px/1.1 var(--g-display); letter-spacing: 0.03em; text-transform: uppercase; }
.rt-drive #drive-error span { color: var(--g-smoke); font-size: 13px; }

/* ── Replay bar ──────────────────────────────────────────────────────────── */
.rt-drive #replay-bar { position: absolute; left: 50%; bottom: 20px; z-index: 22; transform: translateX(-50%); display: none; width: min(720px, calc(100vw - 32px)); padding: 10px 14px 12px; border: 1px solid var(--g-slate); border-radius: 12px; background: var(--g-glass); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); color: var(--g-bone); }
.rt-drive.replaying #replay-bar { display: block; }
.rt-drive.replaying .hud, .rt-drive.replaying .hint, .rt-drive.replaying #drive-minimap, .rt-drive.replaying .mobile-drive-stick, .rt-drive.replaying .mobile-actions, .rt-drive.replaying .nav > :not(a), .rt-drive.replaying #delta-bar, .rt-drive.replaying #start-lights, .rt-drive.replaying #lap-banner, .rt-drive.replaying #controls-card { display: none !important; }
.rt-drive #replay-bar .top { display: flex; align-items: center; gap: 10px; }
.rt-drive #replay-bar .tag, .rt-drive #race-spectate .tag, .rt-drive #event-day .tag { padding: 4px 8px; border-radius: 4px; background: var(--g-bone); color: var(--g-black); font: 600 11px/1 var(--g-display); letter-spacing: 0.14em; }
.rt-drive #replay-bar .cam { color: var(--g-mist); font: 600 13px/1 var(--g-display); letter-spacing: 0.1em; text-transform: uppercase; }
.rt-drive #replay-bar .time { margin-left: auto; color: var(--g-mist); font: 500 13px/1 var(--g-mono); font-variant-numeric: tabular-nums; }
.rt-drive #replay-bar .rec { display: none; color: #ef4444; font: 600 13px/1 var(--g-display); letter-spacing: 0.12em; }
.rt-drive.recording #replay-bar .rec { display: inline; }
.rt-drive #replay-bar .actions { margin-top: 4px; }
.rt-drive #replay-bar .exit { margin-left: auto; }
/* A 44 px strip to press and drag; the bar drawn inside it is 6 px. */
.rt-drive #replay-scrub { position: relative; height: 44px; margin-top: 2px; cursor: pointer; touch-action: none; border-radius: 6px; }
.rt-drive #replay-scrub::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.rt-drive #replay-scrub span { position: absolute; left: 0; top: 19px; height: 6px; border-radius: 999px; background: var(--g-bone); }
.rt-drive #replay-scrub span::after { content: ""; position: absolute; right: -7px; top: -5px; width: 14px; height: 16px; border-radius: 4px; background: var(--g-bone); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.rt-drive.recording #drive-canvas { object-fit: contain; background: #000; }
.rt-drive.recording #replay-scrub { pointer-events: none; opacity: 0.5; }
.rt-drive .save-video { position: relative; }
.rt-drive #save-video::after { content: ""; width: 0; height: 0; margin-left: 2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.rt-drive #save-video-menu { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 2; display: grid; gap: 2px; min-width: 250px; padding: 6px; border: 1px solid var(--g-slate); border-radius: 10px; background: var(--g-carbon); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); }
.rt-drive #save-video-menu[hidden] { display: none; }
.rt-drive #save-video-menu button { justify-content: space-between; min-height: 40px; border-color: transparent; background: transparent; box-shadow: none; color: var(--g-bone); text-align: left; }
.rt-drive #save-video-menu button:hover:not(:disabled), .rt-drive #save-video-menu button:focus-visible { background: var(--g-steel); }
.rt-drive #save-video-menu small { color: var(--g-smoke); font: 400 11px/1 var(--g-text); letter-spacing: 0; text-transform: none; }
/* "Cinema quality (slower)" — a switch among the formats (fidelity P6). */
.rt-drive #save-video-menu [role="menuitemcheckbox"] { justify-content: flex-start; gap: 8px; border-top: 1px solid var(--g-steel); border-radius: 0 0 6px 6px; }
.rt-drive #save-video-menu [role="menuitemcheckbox"][hidden] { display: none; }
.rt-drive #save-video-menu [role="menuitemcheckbox"]::before { content: ""; flex: none; width: 14px; height: 14px; border: 1px solid var(--g-smoke); border-radius: 3px; }
.rt-drive #save-video-menu [role="menuitemcheckbox"][aria-checked="true"]::before { border-color: var(--g-signal); background: var(--g-signal); box-shadow: inset 0 0 0 3px var(--g-carbon); }
.rt-drive #save-video-menu [role="menuitemcheckbox"] small { margin-left: auto; }

/* ── Touch controls ──────────────────────────────────────────────────────── */
.rt-drive .mobile-drive-stick { display: none; position: absolute; left: 24px; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 15; width: 132px; height: 132px; border: 2px solid rgba(244, 242, 238, 0.18); border-radius: 50%; background: rgba(13, 13, 15, 0.38); box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.25); backdrop-filter: blur(5px); touch-action: none; user-select: none; -webkit-user-select: none; }
.rt-drive .mobile-drive-stick::before, .rt-drive .mobile-drive-stick::after { content: ""; position: absolute; background: rgba(255, 255, 255, 0.08); pointer-events: none; }
.rt-drive .mobile-drive-stick::before { left: 50%; top: 15px; bottom: 15px; width: 1px; }
.rt-drive .mobile-drive-stick::after { top: 50%; left: 15px; right: 15px; height: 1px; }
.rt-drive .mobile-drive-stick-knob { position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; transform: translate(-50%, -50%); border: 2px solid rgba(244, 242, 238, 0.42); border-radius: 50%; background: rgba(244, 242, 238, 0.24); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); pointer-events: none; transition: background 0.1s; }
.rt-drive .mobile-drive-stick.active .mobile-drive-stick-knob { background: rgba(244, 242, 238, 0.7); }
.rt-drive .mobile-drive-stick-label { position: absolute; left: 50%; width: max-content; transform: translateX(-50%); color: rgba(244, 242, 238, 0.42); font: 600 10px/1 var(--g-display); letter-spacing: 0.14em; text-transform: uppercase; pointer-events: none; }
.rt-drive .mobile-drive-stick-label.gas { top: 7px; }
.rt-drive .mobile-drive-stick-label.brake { bottom: 7px; }
.rt-drive .mobile-actions { display: none; position: absolute; right: 16px; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 15; flex-direction: column; gap: 10px; }
.rt-drive .mobile-actions button { width: 60px; height: 60px; border: 1px solid var(--g-slate); border-radius: 50%; background: var(--g-mould), rgba(39, 39, 43, 0.82); box-shadow: var(--g-lift-shadow); color: var(--g-bone); font: 600 12px/1 var(--g-display); letter-spacing: 0.08em; text-transform: uppercase; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.rt-drive .mobile-actions button:active { transform: translateY(1px) scale(0.96); background: var(--g-bone); color: var(--g-black); }

/* ── Race Day: the setup is a launch panel ───────────────────────────────── */
.rt-drive #race-setup .panel {
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border: 1px solid var(--g-slate);
  border-radius: 12px;
  background: rgba(12, 12, 13, 0.96);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  color: var(--g-bone);
}
.rt-drive #race-setup .tape { height: 8px; background: var(--g-hazard); }
.rt-drive #race-setup .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 4px; }
.rt-drive #race-setup h2 { display: flex; align-items: center; gap: 9px; margin: 0; font: 600 24px/1 var(--g-display); letter-spacing: 0.04em; text-transform: uppercase; }
.rt-drive #race-setup h2::before { content: ""; width: 3px; height: 22px; background: var(--g-signal); }
.rt-drive #race-setup .panel-meta { color: var(--g-smoke); font: 500 11px/1.2 var(--g-display); letter-spacing: 0.1em; text-transform: uppercase; }
.rt-drive #race-setup .panel-body { padding: 8px 16px 16px; }
.rt-drive #race-setup .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rt-drive #race-setup .cards button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 5px;
  min-height: 76px;
  padding: 11px 12px 12px;
  border: 1px solid var(--g-slate);
  border-radius: 10px;
  background: rgba(20, 20, 22, 0.86);
  box-shadow: none;
  color: var(--g-bone);
  font: inherit;
  text-align: left;
  text-transform: none;
  white-space: normal;
  letter-spacing: 0;
}
.rt-drive #race-setup .cards button b { font: 600 19px/1 var(--g-display); letter-spacing: 0.04em; text-transform: uppercase; }
.rt-drive #race-setup .cards button small { color: var(--g-smoke); font-size: 12px; line-height: 1.3; }
.rt-drive #race-setup .cards button:hover { border-color: var(--g-mist); background: rgba(20, 20, 22, 0.86); }
.rt-drive #race-setup .cards button[aria-pressed="true"] { border-color: var(--g-bone); background: var(--g-bone); color: var(--g-black); }
.rt-drive #race-setup .cards button[aria-pressed="true"] small { color: #44444a; }
.rt-drive #race-setup .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 12px; }
.rt-drive #race-setup .field { display: flex; flex-direction: column; gap: 6px; }
.rt-drive #race-setup .field.wide { grid-column: 1 / -1; }
.rt-drive #race-setup .field[hidden] { display: none; }
.rt-drive #race-setup .field > span { display: flex; justify-content: space-between; color: var(--g-mist); font: 600 12px/1 var(--g-display); letter-spacing: 0.12em; text-transform: uppercase; }
.rt-drive #race-setup .field b { color: var(--g-bone); font: 600 13px/1 var(--g-mono); font-variant-numeric: tabular-nums; }
.rt-drive #race-setup select {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--g-slate);
  border-radius: 7px;
  background: var(--g-black);
  color: var(--g-bone);
  font: 500 13px/1 var(--g-text);
}
.rt-drive #race-setup input[type=range] { width: 100%; height: 28px; margin: 0; accent-color: var(--g-bone); background: transparent; appearance: none; }
.rt-drive #race-setup input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--g-slate); }
.rt-drive #race-setup input[type=range]::-webkit-slider-thumb { appearance: none; width: 18px; height: 22px; margin-top: -8px; border: 1px solid var(--g-black); border-radius: 5px; background: var(--g-bone); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.rt-drive #race-setup input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--g-slate); }
.rt-drive #race-setup input[type=range]::-moz-range-thumb { width: 18px; height: 22px; border: 1px solid var(--g-black); border-radius: 5px; background: var(--g-bone); }
.rt-drive #race-setup .note { margin: 8px 0 0; color: var(--g-smoke); font-size: 12px; }
.rt-drive #race-setup .actions { justify-content: space-between; margin-top: 16px; }
.rt-drive #race-setup .go { min-height: 46px; padding: 0 22px; border-radius: 9px; font-size: 19px; }

/* Tower */
.rt-drive #race-tower { position: absolute; top: 64px; left: 12px; z-index: 11; display: none; width: 176px; padding: 6px 0; border: 1px solid var(--g-panel-edge); border-radius: 10px; background: var(--g-glass); backdrop-filter: blur(8px); color: var(--g-bone); font: 500 12px/1.2 var(--g-mono); font-variant-numeric: tabular-nums; }
.rt-drive.race-on #race-tower { display: block; }
.rt-drive #race-tower .head { display: flex; justify-content: space-between; padding: 2px 10px 6px; border-bottom: 1px solid var(--g-panel-edge); font: 600 13px/1 var(--g-display); letter-spacing: 0.12em; }
.rt-drive #race-tower .head .clock { color: var(--g-mist); font: 500 12px/1 var(--g-mono); letter-spacing: 0; }
.rt-drive #race-tower .row { display: grid; grid-template-columns: 18px 4px 38px 1fr; align-items: center; gap: 6px; padding: 3px 10px; }
.rt-drive #race-tower .row .pos { color: var(--g-smoke); text-align: right; }
.rt-drive #race-tower .row i { width: 4px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28); }
.rt-drive #race-tower .row .code { font: 600 13px/1 var(--g-display); letter-spacing: 0.06em; }
.rt-drive #race-tower .row .gap { color: var(--g-mist); text-align: right; }
.rt-drive #race-tower .row.you { background: rgba(244, 242, 238, 0.14); box-shadow: inset 3px 0 0 var(--g-bone); }
.rt-drive #race-tower .row.watching { background: rgba(244, 242, 238, 0.1); box-shadow: inset 3px 0 0 var(--g-mist); }
.rt-drive #race-tower .row.done .gap { color: var(--g-power); }

/* Spectate bar */
.rt-drive #race-spectate { position: absolute; left: 50%; bottom: 20px; z-index: 21; transform: translateX(-50%); display: none; width: min(660px, calc(100vw - 32px)); padding: 10px 12px; border: 1px solid var(--g-slate); border-radius: 12px; background: var(--g-glass); backdrop-filter: blur(10px); color: var(--g-bone); }
.rt-drive.race-spectating #race-spectate { display: block; }
/* Race control's desk (docked right, ≤ 640 px) owns the right of the
   screen: the camera bar, the radio and the flag banner move to the left
   of it on a desktop. Under 900 px the desk is full width and folds to a
   header strip ("Hide desk") to show them. */
@media (min-width: 901px) {
  .rt-drive.race-control-on #race-spectate { left: 16px; transform: none; width: min(660px, calc(100vw - 688px)); }
  .rt-drive.race-control-on #race-banner { left: calc((100vw - 656px) / 2); }
  .rt-drive.race-control-on #race-radio { left: 12px; right: auto; }
}
.rt-drive.replaying #race-spectate, .rt-drive.replaying #race-tower { display: none; }
.rt-drive #race-spectate .top { display: flex; align-items: center; gap: 10px; font: 600 14px/1 var(--g-display); letter-spacing: 0.08em; }
.rt-drive #race-spectate .actions { margin-top: 10px; }
.rt-drive #race-spectate .exit { margin-left: auto; }
.rt-drive.race-spectating .hud, .rt-drive.race-spectating #delta-bar, .rt-drive.race-spectating .hint, .rt-drive.race-spectating .mobile-drive-stick, .rt-drive.race-spectating .mobile-actions, .rt-drive.race-spectating #wrong-way, .rt-drive.race-spectating #lap-banner { display: none !important; }

/* Results */
.rt-drive #race-results .card { width: min(480px, 100%); }
.rt-drive #race-results table { width: 100%; border-collapse: collapse; font: 500 12px/1.3 var(--g-mono); font-variant-numeric: tabular-nums; }
.rt-drive #race-results th { padding: 4px 6px; border-bottom: 1px solid var(--g-slate); color: var(--g-smoke); font: 600 11px/1 var(--g-display); letter-spacing: 0.12em; text-align: left; text-transform: uppercase; }
.rt-drive #race-results td { padding: 5px 6px; }
.rt-drive #race-results td i { display: inline-block; width: 4px; height: 12px; margin-right: 8px; border-radius: 2px; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28); }
.rt-drive #race-results tr.you td { background: rgba(244, 242, 238, 0.14); }

/* Race realism (drive fidelity P5): the setup's rule toggles, the tower's
   GAP/INT switch, penalty/pit/blue badges and the fastest-lap flash (the
   tower's purple is the sector-best purple), race control's banner and the
   radio. Flags keep their flag colours; buttons keep the garage's. */
.rt-drive #race-setup .toggles { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.rt-drive #race-setup .toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--g-bone); font: 600 13px/1 var(--g-display); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.rt-drive #race-setup .toggle[hidden] { display: none; }
.rt-drive #race-setup .toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--g-bone); cursor: pointer; }
/* Race setup, mockup 2 (idealised state): two columns — the grid, format
   and its params on the left; conditions, You, the rules on the right —
   chips for every short choice (a chosen one a bone block, like the cards),
   and Lifetime depth's lock drawn on the chip it gates. The ONE orange stays
   "Go to the grid"; "Unlock" is a plain button with the lock. */
.rt-drive #race-setup .panel.wide-setup { width: min(900px, 100%); }
.rt-drive #race-setup .setup-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.rt-drive #race-setup .setup-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rt-drive #race-setup .setup-col .fields, .rt-drive #race-setup .setup-col .toggles { margin-top: 0; }
.rt-drive #race-setup .group { display: flex; flex-direction: column; gap: 8px; }
.rt-drive #race-setup .group-label { color: var(--g-mist); font: 600 12px/1 var(--g-display); letter-spacing: 0.12em; text-transform: uppercase; }
.rt-drive #race-setup .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-drive #race-setup .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--g-slate);
  border-radius: 7px;
  background: rgba(20, 20, 22, 0.86);
  box-shadow: none;
  color: var(--g-bone);
  font: 600 13px/1 var(--g-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rt-drive #race-setup .chip[aria-pressed="true"] { border-color: var(--g-bone); background: var(--g-bone); color: var(--g-black); }
.rt-drive #race-setup .chip.locked { color: var(--g-smoke); }
.rt-drive #race-setup .chip.locked .lock, .rt-drive #race-setup .lock-tag .lock, .rt-drive #race-setup .unlock .lock { color: var(--g-signal); }
.rt-drive #race-setup .chip .lock-word { color: var(--g-signal); font-size: 10px; letter-spacing: 0.1em; }
.rt-drive #race-setup .grid-field b.over { color: var(--g-signal); }
.rt-drive #race-setup .grid-field b { font-size: 22px; }
.rt-drive #race-setup .grid-scale { display: flex; justify-content: space-between; color: var(--g-smoke); font: 500 11px/1 var(--g-mono); }
.rt-drive #race-setup .grid-scale i { font-style: normal; }
.rt-drive #race-setup .grid-scale .free { color: var(--g-bone); }
.rt-drive #race-setup .gated input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--g-bone) 0 var(--free), var(--g-slate) var(--free) 100%); }
.rt-drive #race-setup .gated input[type=range]::-moz-range-track { background: linear-gradient(to right, var(--g-bone) 0 var(--free), var(--g-slate) var(--free) 100%); }
.rt-drive #race-setup .span-bar { display: flex; justify-content: space-between; align-items: flex-end; min-height: 44px; padding: 8px 10px; border-radius: 8px; background: linear-gradient(90deg, #f0c07a 0%, #e8844a 45%, #3a2a55 80%, #15151c 100%); color: #fff; font: 600 13px/1 var(--g-display); letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.rt-drive #race-setup .span-note { color: var(--g-smoke); font-size: 12px; }
.rt-drive #race-setup .lock-line { display: flex; align-items: center; gap: 10px; }
.rt-drive #race-setup .lock-tag { display: inline-flex; align-items: center; gap: 5px; color: var(--g-signal); font: 600 11px/1 var(--g-display); letter-spacing: 0.1em; text-transform: uppercase; }
.rt-drive #race-setup .actions .unlock { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; }
.rt-drive #race-setup .field.toggle { flex-direction: row; }
@media (max-width: 900px) {
  .rt-drive #race-setup .setup-cols { grid-template-columns: 1fr; }
  .rt-drive #race-setup .chip { min-height: 44px; }
  .rt-drive #race-setup .actions { flex-wrap: wrap; }
}
.rt-drive #race-tower { width: 212px; }
.rt-drive #race-tower .head { align-items: center; gap: 6px; }
.rt-drive #race-tower .head .mode { margin-left: auto; padding: 2px 6px; border: 1px solid var(--g-slate); border-radius: 4px; background: transparent; color: var(--g-mist); font: 600 10px/1 var(--g-display); letter-spacing: 0.12em; cursor: pointer; }
.rt-drive #race-tower .head .mode:hover { color: var(--g-bone); border-color: var(--g-mist); }
.rt-drive #race-tower .row { grid-template-columns: 18px 4px 38px 1fr auto; }
.rt-drive #race-tower .row .badges { display: inline-flex; gap: 3px; }
.rt-drive #race-tower .row .badges b { padding: 1px 4px; border-radius: 3px; font: 600 10px/1.2 var(--g-display); letter-spacing: 0.06em; }
.rt-drive #race-tower .row .badges .pen { background: rgba(251, 113, 133, 0.22); color: var(--g-brake); }
.rt-drive #race-tower .row .badges .pit { background: rgba(244, 242, 238, 0.16); color: var(--g-bone); }
.rt-drive #race-tower .row .badges .blue { background: rgba(96, 165, 250, 0.3); color: var(--g-flat); }
.rt-drive #race-tower .row.fastest .code { color: var(--g-best); }
.rt-drive #race-tower .row.flash { background: rgba(183, 156, 255, 0.22); box-shadow: inset 3px 0 0 var(--g-best); }

.rt-drive #race-banner { position: absolute; top: 72px; left: 50%; z-index: 13; display: none; transform: translateX(-50%); padding: 8px 16px; border: 1px solid var(--g-panel-edge); border-radius: 8px; background: var(--g-glass); backdrop-filter: blur(8px); color: var(--g-bone); font: 600 18px/1 var(--g-display); letter-spacing: 0.16em; white-space: nowrap; pointer-events: none; }
.rt-drive.race-on #race-banner.show { display: block; }
.rt-drive.replaying #race-banner, .rt-drive.replaying #race-radio { display: none; }
.rt-drive #race-banner.warn { border-color: rgba(251, 191, 36, 0.8); background: rgba(251, 191, 36, 0.92); color: var(--g-black); }
.rt-drive #race-banner.blue { border-color: rgba(96, 165, 250, 0.8); background: rgba(37, 99, 235, 0.9); color: var(--g-bone); }
.rt-drive #race-banner.best { border-color: rgba(183, 156, 255, 0.8); color: var(--g-best); }

.rt-drive #race-radio { position: absolute; right: 12px; bottom: 132px; z-index: 12; display: none; width: min(340px, calc(100vw - 24px)); pointer-events: none; }
.rt-drive.race-on #race-radio { display: flex; flex-direction: column; gap: 6px; }
.rt-drive.race-spectating #race-radio { bottom: 150px; }
.rt-drive #race-radio .line { padding: 7px 10px; border: 1px solid var(--g-panel-edge); border-left: 3px solid var(--g-mist); border-radius: 6px; background: var(--g-glass); backdrop-filter: blur(8px); color: var(--g-bone); font: 500 13px/1.3 var(--g-text); }
.rt-drive #race-radio .line.engineer::before { content: "RADIO  "; color: var(--g-smoke); font: 600 11px/1 var(--g-display); letter-spacing: 0.14em; }
.rt-drive #race-radio .line.warn { border-left-color: var(--g-corner); }
.rt-drive #race-radio .line.good { border-left-color: var(--g-power); }

.rt-drive #race-results .card { width: min(580px, 100%); }
.rt-drive #race-results td.fastest { color: var(--g-best); }
.rt-drive #race-results td.gained.up { color: var(--g-power); }
.rt-drive #race-results td.gained.down { color: var(--g-brake); }

/* ══ Event Day (Labs :event_day) ══════════════════════════════════════════
   One block per build stream (docs/concepts/event-day-ux/SPEC.md §9): a
   stream edits ONLY its own block, and its touch overrides sit at the end of
   that block. Blocks keep the cascade order they had in one list — a rule
   that must beat another stream's rule wins on specificity, never on
   position. Every selector stays under .rt-drive (drive_garage_css_test).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Event Day · SHARED (lead): the panel, card primitives, status chips ── */
/* World Feed tokens (SPEC §7). Declared once here; every stream styles with
   these, never with raw values. Unused until the streams land — declaring a
   custom property draws nothing. */
.rt-drive #event-day {
  /* Greys, ONE warning amber (reduced / short — chip and text alike), red
     for cancelled / missing, the signal orange for actions. "OK" is bone,
     not a fifth hue; purple survives only on timing digits (broadcast
     convention). Review: the debrief summary alone used five hues. */
  --ed-ok: var(--g-bone);
  --ed-reduced: var(--g-corner);
  --ed-cancelled: var(--g-brake);
  --ed-action: var(--g-signal);
  --ed-on-action: var(--g-on-signal);
  --ed-rec: var(--g-brake);
  --ed-ink: var(--g-bone);
  --ed-ink-2: var(--g-mist);
  --ed-ink-3: var(--g-smoke);
  --ed-surface: var(--g-glass);
  --ed-surface-solid: var(--g-carbon);
  --ed-edge-line: var(--g-slate);
  --ed-type-clock: 600 28px/1 var(--g-mono);
  --ed-type-title: 600 20px/1.1 var(--g-display);
  --ed-type-label: 600 13px/1.2 var(--g-display);
  --ed-type-body: 400 13px/1.45 var(--g-text);
  --ed-type-micro: 600 11px/1.2 var(--g-display);
  --ed-type-num: 500 13px/1.3 var(--g-mono);
  --ed-track-label: 0.06em;
  --ed-track-micro: 0.12em;
  --ed-t-fast: 120ms;
  --ed-t-base: 180ms;
  --ed-t-slow: 320ms;
  --ed-t-card: 2400ms;
  /* Loops: every spinner turns at one speed and every live/REC light
     breathes at one rate, whichever stream drew it (integration). */
  --ed-t-spin: 800ms;
  --ed-t-throb: 1600ms;
  --ed-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ed-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ed-edge: 16px;
  --ed-bug-h: 44px;
  --ed-rail-w: 300px;
  --ed-rail-min: 76px;
  --ed-strip-h: 72px;
  --ed-sheet-peek: 72px;
  --ed-target: 44px;
}
.rt-drive #event-day { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 22; display: none; width: min(740px, calc(100vw - 24px)); margin: 0 auto; color: var(--g-bone); }
.rt-drive #event-day.show { display: block; }
.rt-drive #event-day .bar-card, .rt-drive #event-day > .card { padding: 10px 12px 12px; border: 1px solid var(--g-slate); border-radius: 12px; background: var(--g-glass); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); }
.rt-drive #event-day.building .bar-card { overflow: hidden; padding-top: 18px; position: relative; }
.rt-drive #event-day.building .bar-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--g-hazard); }
.rt-drive #event-day .bar-card[inert] { opacity: 0.45; }
.rt-drive #event-day .title { margin: 6px 0 10px; font: 600 22px/1 var(--g-display); letter-spacing: 0.04em; text-transform: uppercase; }
.rt-drive #event-day .lead { margin: 6px 0; color: var(--g-mist); }
.rt-drive #event-day .progress { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.rt-drive #event-day .progress i { display: block; height: 100%; width: 0; background: var(--g-bone); }
.rt-drive #event-day .actions { margin-top: 8px; }
.rt-drive #event-day .actions .spacer { flex: 1; }
.rt-drive #event-day .actions .cinema { display: inline-flex; align-items: center; gap: 6px; color: var(--g-mist); font: 500 12px/1 var(--g-text); cursor: pointer; }
.rt-drive #event-day .actions .cinema input { accent-color: var(--g-signal); cursor: pointer; }
.rt-drive #event-day .note { margin-top: 6px; color: var(--g-mist); }
.rt-drive #event-day .fine { margin: 8px 0 0; color: var(--g-smoke); font-size: 11px; }
.rt-drive #event-day .ed-chip { justify-self: end; padding: 3px 6px; border-radius: 4px; background: var(--g-steel); color: var(--g-mist); font: 600 10px/1 var(--g-display); letter-spacing: 0.12em; text-transform: uppercase; }
.rt-drive #event-day .ed-chip[data-status="cancelled"], .rt-drive #event-day .ed-chip[data-status="missing"] { background: rgba(251, 113, 133, 0.18); color: var(--g-brake); }
.rt-drive #event-day .ed-chip[data-status="reduced"], .rt-drive #event-day .ed-chip[data-status="short"] { background: rgba(251, 191, 36, 0.16); color: var(--g-corner); }
.rt-drive #event-day .ed-chip[data-status="ok"] { color: var(--ed-ok); }
.rt-drive #event-day .ed-hint { margin-top: 2px; color: var(--g-smoke); font: 500 11px/1.3 var(--g-text); }
.rt-drive #event-day .ed-fix { color: var(--g-signal); font: 600 12px/1.2 var(--g-display); letter-spacing: 0.06em; text-transform: uppercase; }
@media (hover: none), (pointer: coarse) {
  .rt-drive #event-day button, .rt-drive #event-day a.go { min-height: 44px; padding: 0 14px; }
  .rt-drive #event-day a.ed-fix { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── Event Day · S1 timeline & playback: the bar, clock, scrub, shell ───── */
/* THE WORLD FEED SHELL (SPEC §4). The panel is a full-viewport overlay that
   takes no pointer events; every region sits at an edge of the picture and
   takes them itself. Selectors carry [data-layout="feed"] so they win over
   the SHARED column layout on specificity, never on position. */
.rt-drive #event-day[data-layout="feed"] { position: fixed; inset: 0; bottom: 0; width: auto; margin: 0; pointer-events: none; }
.rt-drive #event-day[data-layout="feed"] > * { pointer-events: auto; }
.rt-drive #event-day[data-layout="feed"] > [data-ed-region] { position: absolute; pointer-events: none; }
.rt-drive #event-day[data-layout="feed"] > [data-ed-region][data-ed-interactive] > * { pointer-events: auto; }
.rt-drive #event-day[data-layout="feed"] > [data-ed-region="bug"] { top: var(--ed-edge); left: var(--ed-edge); right: var(--ed-edge); display: flex; align-items: flex-start; gap: 8px; animation: ed-fade-in var(--ed-t-slow) var(--ed-ease-out) both; }
.rt-drive #event-day[data-layout="feed"] > [data-ed-region="rail"] { top: calc(var(--ed-edge) + var(--ed-bug-h) + 8px); left: var(--ed-edge); bottom: calc(var(--ed-edge) + var(--ed-strip-live, 100px) + 8px); width: var(--ed-rail-w); display: flex; flex-direction: column; }
/* No entrance on the REGION: a transform animation (even filled at `none`)
   makes it the containing block of S2's position: fixed rail and sheet,
   which then sat 16 px in from their own inset (desktop) and collapsed into
   the region on a phone. The rail carries its own entrance (ed-rail-in). */
/* The rail sizes itself (S2's max-height, and the strip-live rule below):
   a `max-height: 100%` here outranked the phone sheet's own cap — 100 % of a
   region with no height is no cap, and the raised sheet ran off the top. */
.rt-drive #event-day[data-layout="feed"] > [data-ed-region="rail"] > .ed-weekend { flex: 0 1 auto; min-height: 0; margin: 0; }
.rt-drive #event-day[data-layout="feed"] > [data-ed-region="strip"] { left: var(--ed-edge); right: var(--ed-edge); bottom: var(--ed-edge); animation: ed-rise var(--ed-t-slow) var(--ed-ease-out) both; }
.rt-drive #event-day[data-layout="feed"] > [data-ed-region="caption"] { left: var(--ed-edge); bottom: calc(var(--ed-edge) + var(--ed-strip-live, 100px) + 12px); max-width: min(640px, calc(100vw - 2 * var(--ed-edge))); }
.rt-drive #event-day[data-layout="feed"].ed-has-rail > [data-ed-region="caption"] { left: calc(var(--ed-edge) + var(--ed-rail-w) + 16px); }
.rt-drive #event-day[data-layout="feed"] > [data-ed-region="chapter"] { left: 50%; bottom: 26%; width: min(560px, calc(100vw - 2 * var(--ed-edge))); transform: translateX(-50%); }
.rt-drive #event-day[data-layout="feed"] > [data-ed-region="world"] { inset: 0; overflow: hidden; }
.rt-drive #event-day[data-layout="feed"] > [data-ed-region="tower"] { top: calc(var(--ed-edge) + var(--ed-bug-h) + 8px); left: var(--ed-edge); width: 240px; }
.rt-drive #event-day[data-layout="feed"] > [data-ed-region][hidden] { display: none !important; }
/* While watching, the timing tower (S5) takes the rail's place. */
.rt-drive #event-day[data-layout="feed"] > [data-ed-region="strip"][data-mode="watching"] ~ [data-ed-region="tower"]:not(:empty) { display: block; }
/* The drive chrome steps aside: nav (inert too), HUD, minimap. The weekend's
   bug carries the one way out. The toast clears the strip. */
.rt-drive.event-day-on #start-lights, .rt-drive.event-day-on .hud, .rt-drive.event-day-on #delta-bar, .rt-drive.event-day-on .hint, .rt-drive.event-day-on .mobile-drive-stick, .rt-drive.event-day-on .mobile-actions, .rt-drive.event-day-on #lap-banner, .rt-drive.event-day-on #replay-bar, .rt-drive.event-day-on .nav, .rt-drive.event-day-on #drive-minimap, .rt-drive.event-day-on #wrong-way, .rt-drive.event-day-on #controls-card { display: none !important; }
.rt-drive.event-day-on #drive-toast { bottom: 136px; }

/* ── The bug (SPEC §4.1): venue · day · kind · on site · LABS ── */
.rt-drive #event-day .ed-bug { display: flex; align-items: center; gap: 8px; min-width: 0; height: var(--ed-bug-h); padding: 0 12px 0 0; overflow: hidden; border: 1px solid var(--g-panel-edge); border-radius: 8px; background: var(--ed-surface); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42); backdrop-filter: blur(10px); color: var(--ed-ink-2); font: var(--ed-type-label); letter-spacing: var(--ed-track-label); text-transform: uppercase; white-space: nowrap; }
.rt-drive #event-day .ed-bug-mark { position: relative; flex: none; align-self: stretch; display: flex; align-items: center; justify-content: center; width: 42px; margin-right: 4px; background: var(--g-bone); }
.rt-drive #event-day .ed-bug-mark::before { content: "R"; color: var(--g-black); font: 600 24px/1 var(--g-display); letter-spacing: 0; }
.rt-drive #event-day .ed-bug-mark::after { content: ""; position: absolute; left: 8px; width: 12px; top: 58%; height: 3px; background: var(--ed-action); }
.rt-drive #event-day .ed-bug-venue { min-width: 0; overflow: hidden; color: var(--ed-ink); text-overflow: ellipsis; font-size: 15px; letter-spacing: 0.04em; }
.rt-drive #event-day .ed-bug-sep { color: var(--ed-ink-3); }
.rt-drive #event-day .ed-bug-fans { display: inline-flex; align-items: baseline; gap: 6px; }
.rt-drive #event-day .ed-bug-fans .ed-bug-sep { margin-right: 2px; }
.rt-drive #event-day .ed-bug-fans b { color: var(--ed-ink); font: var(--ed-type-num); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.rt-drive #event-day .ed-bug-labs { margin-left: 6px; padding: 3px 6px; border: 1px solid var(--g-slate); border-radius: 4px; color: var(--ed-ink-2); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); }
.rt-drive #event-day .ed-bug-extra:empty { display: none; }
.rt-drive #event-day .ed-bug-extra { position: relative; display: flex; align-items: center; height: var(--ed-bug-h); }
.rt-drive #event-day .ed-bug-extra summary { display: inline-flex; align-items: center; height: var(--ed-bug-h); padding: 0 12px; border: 1px solid var(--g-panel-edge); border-radius: 8px; background: var(--ed-surface); backdrop-filter: blur(10px); color: var(--ed-ink-2); font: var(--ed-type-label); letter-spacing: var(--ed-track-label); text-transform: uppercase; list-style: none; }
.rt-drive #event-day .ed-bug-extra summary::-webkit-details-marker { display: none; }
/* The slot holds S4's own "On site" chip (a <details> with its popover):
   no second card round it, and the popover drops DOWN from the bug. */
.rt-drive #event-day .ed-bug-extra [data-ed-legend] { display: flex; align-items: center; gap: 8px; }
.rt-drive #event-day .ed-bug-extra [data-ed-legend]:empty { display: none; }
.rt-drive #event-day .ed-bug-extra .ed-onsite { position: relative; margin: 0; }
.rt-drive #event-day .ed-bug-extra .ed-onsite[data-empty] { display: none; }
.rt-drive #event-day .ed-bug-extra .ed-onsite-pop { top: calc(100% + 8px); bottom: auto; }
/* In the bug the chip is glass like the bug itself: S4's see-through chip
   (made for a panel background) washed out over a bright sky. */
.rt-drive #event-day .ed-bug-extra .ed-onsite > summary { min-height: var(--ed-bug-h); border-radius: 8px; background: var(--ed-surface); backdrop-filter: blur(10px); }
.rt-drive #event-day .ed-bug-extra .ed-onsite > summary:hover { background: var(--g-lift), var(--ed-surface); }
.rt-drive #event-day .ed-bug-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; height: var(--ed-bug-h); }
.rt-drive #event-day .ed-bug-actions > * { height: 36px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); }
.rt-drive #event-day .ed-bug-link { display: inline-flex; align-items: center; padding: 0 12px; border-radius: 7px; background: var(--ed-surface); color: var(--ed-ink-2); font: var(--ed-type-label); letter-spacing: var(--ed-track-label); text-decoration: none; text-transform: uppercase; }
.rt-drive #event-day .ed-bug-link:hover { color: var(--ed-ink); }
.rt-drive #event-day .ed-icon { min-width: 36px; padding: 0 10px; }
.rt-drive #event-day .ed-icon svg { width: 16px; height: 16px; }
.rt-drive #event-day button.ed-leave { gap: 8px; background: var(--g-bone); border-color: var(--g-bone); color: var(--g-black); }
.rt-drive #event-day button.ed-leave:hover:not(:disabled) { background: #fff; color: var(--g-black); }
.rt-drive #event-day .ed-x { font-size: 12px; }
/* Visually hidden, read aloud (the one polite status region). */
.rt-drive #event-day .ed-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── The timing strip (SPEC §4.1, §7): clock · rundown · transport ── */
.rt-drive #event-day[data-layout="feed"] .bar-card[data-ed-region="strip"] { padding: 8px 12px 10px; border: 1px solid var(--g-panel-edge); border-radius: 12px; background: var(--ed-surface); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5); backdrop-filter: blur(12px); }
.rt-drive #event-day[data-layout="feed"].building .bar-card::before { display: none; }
/* Two rows on a desktop: the clock, the commentary line and the actions
   over the transport and the full-width rundown. */
.rt-drive #event-day .ed-strip-grid { display: grid; grid-template-columns: minmax(148px, max-content) minmax(0, 1fr) auto; grid-template-areas: "now ticker controls" "transport rundown rundown"; align-items: center; gap: 6px 16px; }
.rt-drive #event-day .ed-strip-grid > .ed-now { grid-area: now; }
.rt-drive #event-day .ed-strip-grid > .ed-ticker { grid-area: ticker; min-width: 0; min-height: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-drive #event-day .ed-strip-grid > .ed-ticker .ed-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-drive #event-day .ed-strip-grid > .ed-transport { grid-area: transport; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rt-drive #event-day .ed-strip-grid > .ed-rundown { grid-area: rundown; }
.rt-drive #event-day .ed-strip-grid > .ed-controls { grid-area: controls; }
.rt-drive #event-day button.ed-play { width: 44px; height: 44px; min-height: 44px; padding: 0; border-color: var(--g-bone); border-radius: 50%; background: var(--g-bone); color: var(--g-black); }
.rt-drive #event-day button.ed-play:hover:not(:disabled) { background: #fff; color: var(--g-black); }
.rt-drive #event-day button.ed-play svg { width: 18px; height: 18px; }
.rt-drive #event-day .ed-now { display: flex; align-items: baseline; gap: 10px; min-width: 0; max-width: 320px; white-space: nowrap; }
.rt-drive #event-day .ed-now .clock { font: var(--ed-type-clock); color: var(--ed-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.rt-drive #event-day .ed-now-session { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.rt-drive #event-day .ed-now .session { overflow: hidden; color: var(--ed-ink-2); font: var(--ed-type-label); letter-spacing: var(--ed-track-label); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.rt-drive #event-day .ed-star { color: var(--ed-action); font-size: 12px; }
.rt-drive #event-day .ed-rundown { position: relative; min-width: 0; }
.rt-drive #event-day .ed-ticks { position: absolute; left: 0; right: 0; top: 3px; z-index: 1; height: 10px; pointer-events: none; }
.rt-drive #event-day .ed-ticks span { position: absolute; padding-left: 4px; color: var(--ed-ink-3); font: 500 10px/1 var(--g-mono); font-variant-numeric: tabular-nums; }
/* The rundown: hatched where the sim hasn't reached, plain where it has. */
.rt-drive #event-day[data-layout="feed"] .scrub { position: relative; height: 40px; margin: 0; border-radius: 6px; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 3px, transparent 3px 7px), rgba(255, 255, 255, 0.025); cursor: pointer; touch-action: none; }
.rt-drive #event-day[data-layout="feed"] .scrub:focus-visible { box-shadow: var(--g-focus); }
.rt-drive #event-day[data-layout="feed"] .scrub .simmed { position: absolute; inset: 0 auto 0 0; border-radius: 6px 0 0 6px; background: rgba(20, 20, 22, 0.92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); transition: width 400ms linear; }
.rt-drive #event-day[data-layout="feed"] .scrub.building .simmed::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 60px; background: linear-gradient(90deg, transparent, rgba(244, 242, 238, 0.12)); animation: ed-sheen var(--ed-t-throb) ease-in-out infinite; }
.rt-drive #event-day .ed-curve { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rt-drive #event-day .ed-curve path { fill: rgba(244, 242, 238, 0.07); stroke: rgba(244, 242, 238, 0.34); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.rt-drive #event-day .ed-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.07); }
/* Three fills only (SPEC §7): on track bone, off track slate, cancelled
   hatched. The headline gets the signal outline and ★. */
.rt-drive #event-day[data-layout="feed"] .scrub .mark { position: absolute; top: auto; bottom: auto; display: flex; align-items: center; min-width: 2px; overflow: hidden; border-radius: 3px; transition: background var(--ed-t-fast), box-shadow var(--ed-t-fast); }
.rt-drive #event-day[data-layout="feed"] .scrub .mark[data-lane="0"] { top: 14px; height: 15px; }
.rt-drive #event-day[data-layout="feed"] .scrub .mark[data-lane="1"] { top: 32px; height: 5px; }
.rt-drive #event-day[data-layout="feed"] .scrub .mark[data-fill="on"] { background: rgba(244, 242, 238, 0.45); }
.rt-drive #event-day[data-layout="feed"] .scrub .mark[data-fill="off"] { background: rgba(154, 154, 160, 0.5); }
.rt-drive #event-day[data-layout="feed"] .scrub .mark[data-fill="cancelled"] { background: repeating-linear-gradient(-45deg, rgba(251, 113, 133, 0.6) 0 3px, rgba(251, 113, 133, 0.12) 3px 6px); opacity: 1; }
.rt-drive #event-day[data-layout="feed"] .scrub .mark[data-status="reduced"][data-fill="on"] { background: rgba(244, 242, 238, 0.3); }
.rt-drive #event-day[data-layout="feed"] .scrub .mark[data-headline] { box-shadow: 0 0 0 1.5px var(--ed-action); }
.rt-drive #event-day[data-layout="feed"] .scrub .mark.hover[data-fill="on"] { background: rgba(244, 242, 238, 0.72); }
.rt-drive #event-day[data-layout="feed"] .scrub .mark.hover[data-fill="off"] { background: var(--g-smoke); }
.rt-drive #event-day .ed-block-label { display: none; padding: 0 5px; overflow: hidden; color: var(--g-black); font: 600 10px/1 var(--g-display); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.rt-drive #event-day .mark[data-labelled] .ed-block-label { display: block; }
.rt-drive #event-day .mark[data-fill="cancelled"] .ed-block-label { color: var(--ed-ink); text-decoration: line-through; }
.rt-drive #event-day .ed-pips { position: absolute; left: 0; right: 0; bottom: -7px; height: 7px; }
.rt-drive #event-day .ed-pip { position: absolute; bottom: 0; width: 0; height: 0; margin-left: -5px; border: 5px solid transparent; border-bottom-color: var(--g-bone); border-top: 0; }
.rt-drive #event-day .ed-pip[data-phase="egress"] { border-bottom-color: var(--ed-ink-2); }
.rt-drive #event-day[data-layout="feed"] .scrub .head { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--g-bone); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); }
.rt-drive #event-day[data-layout="feed"] .scrub .head::before { content: ""; position: absolute; top: -4px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--g-bone); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); transition: transform var(--ed-t-fast) var(--ed-ease-out); }
.rt-drive #event-day[data-layout="feed"] .scrub:hover .head::before, .rt-drive #event-day[data-layout="feed"] .scrub.dragging .head::before { transform: scale(1.3); }
.rt-drive #event-day .ed-hover-line { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(244, 242, 238, 0.5); pointer-events: none; }
.rt-drive #event-day .ed-bubble { position: absolute; bottom: calc(100% + 22px); z-index: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; max-width: 240px; padding: 7px 10px; transform: translateX(-50%); border: 1px solid var(--g-slate); border-radius: 8px; background: var(--g-carbon); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); pointer-events: none; white-space: nowrap; }
.rt-drive #event-day .ed-bubble[data-edge="start"] { transform: translateX(-8px); }
.rt-drive #event-day .ed-bubble[data-edge="end"] { transform: translateX(calc(-100% + 8px)); }
.rt-drive #event-day .ed-bubble b { color: var(--ed-ink); font: var(--ed-type-num); font-variant-numeric: tabular-nums; }
.rt-drive #event-day .ed-bubble span { color: var(--ed-ink-2); font: var(--ed-type-label); letter-spacing: var(--ed-track-label); text-transform: uppercase; }
.rt-drive #event-day .ed-bubble em { flex-basis: 100%; color: var(--ed-reduced); font: var(--ed-type-body); font-size: 12px; font-style: normal; }
.rt-drive #event-day .ed-controls { display: flex; align-items: center; gap: 6px; }
/* The day's end: the label says so, and Debrief is the go action. */
.rt-drive #event-day .ed-now .session[data-done] { color: var(--ed-ink); }
/* The report landing: Debrief and Film light once. */
.rt-drive #event-day .ed-controls .ed-ready-flash { animation: ed-ready 1.2s var(--ed-ease-out) 1; }
@keyframes ed-ready { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px rgba(244, 242, 238, 0.55); } }
/* How far the simulation has got, written on the hatch it hasn't reached. */
.rt-drive #event-day[data-layout="feed"] .scrub .ed-simming { position: absolute; right: 6px; top: 50%; z-index: 2; padding: 3px 7px; border-radius: 4px; background: rgba(13, 13, 15, 0.85); color: var(--ed-ink-2); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); text-transform: uppercase; white-space: nowrap; transform: translateY(-50%); pointer-events: none; }
.rt-drive #event-day[data-layout="feed"] .scrub .ed-simming[hidden] { display: none; }
/* Speed: one menu button (Auto / Live / 6 / 24 min/s). */
.rt-drive #event-day .ed-speed-wrap { position: relative; }
.rt-drive #event-day button.ed-speed { min-width: 104px; justify-content: space-between; font-variant-numeric: tabular-nums; }
.rt-drive #event-day .ed-speed-short { display: none; }
.rt-drive #event-day .ed-caret { width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; }
.rt-drive #event-day .ed-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 3; display: grid; min-width: 230px; padding: 6px; border: 1px solid var(--g-slate); border-radius: 12px; background: var(--g-carbon); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); animation: ed-rise var(--ed-t-base) var(--ed-ease-out) both; }
.rt-drive #event-day .ed-menu button { justify-content: flex-start; min-height: 44px; padding: 6px 12px; border: 0; background: transparent; box-shadow: none; text-align: left; }
.rt-drive #event-day .ed-menu button[role="menuitemradio"] { display: grid; grid-template-columns: 14px 1fr; justify-items: start; gap: 2px 8px; padding: 6px 10px; }
.rt-drive #event-day .ed-menu button[role="menuitemradio"]::before { content: ""; grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--g-slate); }
.rt-drive #event-day .ed-menu button[aria-checked="true"]::before { background: var(--g-bone); box-shadow: none; }
.rt-drive #event-day .ed-menu button[aria-checked="true"] { color: var(--ed-ink); }
.rt-drive #event-day .ed-menu-hint { grid-column: 2; color: var(--ed-ink-3); font: var(--ed-type-body); font-size: 12px; letter-spacing: 0; text-transform: none; white-space: normal; }
.rt-drive #event-day button[data-ed-film][data-locked] svg { width: 12px; height: 12px; }
/* Watch live: the strip's one go action while a session is on track. */
/* Watch: one secondary style for every session; the filled signal is the
   headline race's alone (★ — data-headline). */
.rt-drive #event-day button.ed-live { animation: ed-fade-in var(--ed-t-base) var(--ed-ease-out) both; }
.rt-drive #event-day button.ed-live .ed-live-dot { background: var(--ed-rec); }
.rt-drive #event-day button.ed-live[data-headline] { border-color: var(--g-signal-deep); background: var(--g-mould-go), var(--ed-action); color: var(--ed-on-action); }
.rt-drive #event-day button.ed-live[data-headline] .ed-live-dot { background: var(--ed-on-action); }
.rt-drive #event-day button.ed-live[data-headline]:hover:not(:disabled) { background: var(--g-lift), var(--g-mould-go), var(--ed-action); color: var(--ed-on-action); }
/* One ask on screen: while the headline card asks "Watch it live", the card
   owns it — the strip's Watch and the phone sheet's peek Watch stand down
   until the card is answered or dismissed (review: three layers asked the
   same question over ~45 % of a phone). */
.rt-drive #event-day:has(.ed-chapter[data-tone="headline"].in) button.ed-live { display: none; }
.rt-drive #event-day:has(.ed-chapter[data-tone="headline"].in) .ed-rail .ed-session:is([data-peek], [data-headline]) .ed-watch { visibility: hidden; }
.rt-drive #event-day .ed-live-short { display: none; }
.rt-drive #event-day .ed-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ed-on-action); animation: ed-pulse var(--ed-t-throb) ease-in-out infinite; }
.rt-drive #event-day[data-layout="feed"] .bar-card > .ed-ticker { min-height: 0; margin: 0 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-drive #event-day[data-layout="feed"] .bar-card > .ed-ticker:empty { display: none; }
.rt-drive #event-day .ed-phone { display: none; }
.rt-drive #event-day .ed-more-menu { right: 8px; }
.rt-drive #event-day .ed-more-menu button { min-height: 48px; }
/* The watch view's bar in the strip (S5 owns what it says; these are the
   strip's generic line and label, as before the shell). */
.rt-drive #event-day .top { display: flex; align-items: baseline; gap: 10px; }
.rt-drive #event-day .session { color: var(--g-mist); font: 600 14px/1 var(--g-display); letter-spacing: 0.08em; text-transform: uppercase; }
.rt-drive #event-day[data-layout="feed"] .bar-card[data-mode="watching"] .top { align-items: center; }
.rt-drive #event-day[data-layout="feed"] .bar-card[data-mode="watching"] .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* ── Opening (SPEC §4.3): the launch card, bottom-centre, hazard tape ── */
.rt-drive #event-day[data-layout="feed"] > .bar-card[data-mode="opening"] { left: 50%; right: auto; width: min(560px, calc(100vw - 2 * var(--ed-edge))); padding: 0; overflow: hidden; transform: translateX(-50%); animation: ed-rise-centred var(--ed-t-slow) var(--ed-ease-out) both; }
.rt-drive #event-day .ed-hazard { height: 8px; background: var(--g-hazard); }
.rt-drive #event-day .ed-opening-card { padding: 14px 18px 16px; }
.rt-drive #event-day .ed-opening-head { display: flex; flex-direction: column; gap: 4px; }
.rt-drive #event-day .ed-opening-head .kicker, .rt-drive #event-day .ed-refusal .kicker { color: var(--ed-ink-3); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); text-transform: uppercase; }
.rt-drive #event-day .ed-opening-head .title { margin: 0; font: var(--ed-type-title); letter-spacing: 0.04em; text-transform: uppercase; }
.rt-drive #event-day .ed-checklist { display: grid; gap: 2px; margin: 12px 0 0; padding: 0; list-style: none; }
.rt-drive #event-day .ed-check { display: grid; grid-template-columns: 18px auto 1fr; align-items: center; gap: 4px 10px; min-height: 26px; color: var(--ed-ink-3); transition: color var(--ed-t-base); }
.rt-drive #event-day .ed-check-label { font: var(--ed-type-label); letter-spacing: var(--ed-track-label); text-transform: uppercase; }
.rt-drive #event-day .ed-check-detail { justify-self: end; color: var(--ed-ink-3); font: var(--ed-type-body); font-size: 12px; text-align: right; }
.rt-drive #event-day .ed-check[data-state="done"], .rt-drive #event-day .ed-check[data-state="active"] { color: var(--ed-ink); }
.rt-drive #event-day .ed-check[data-state="done"] .ed-check-detail, .rt-drive #event-day .ed-check[data-state="active"] .ed-check-detail { color: var(--ed-ink-2); }
.rt-drive #event-day .ed-check-mark { position: relative; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--g-slate); }
.rt-drive #event-day .ed-check[data-state="done"] .ed-check-mark { background: var(--ed-ok); box-shadow: none; }
.rt-drive #event-day .ed-check[data-state="done"] .ed-check-mark::after { content: ""; position: absolute; left: 4px; top: 2px; width: 4px; height: 7px; border: solid var(--g-black); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rt-drive #event-day .ed-check[data-state="active"] .ed-check-mark { box-shadow: inset 0 0 0 2px rgba(244, 242, 238, 0.2); }
.rt-drive #event-day .ed-check[data-state="active"] .ed-check-mark::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; border-top-color: var(--g-bone); border-radius: 50%; animation: ed-spin var(--ed-t-spin) linear infinite; }
.rt-drive #event-day .ed-check-bar { grid-column: 2 / 4; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.rt-drive #event-day .ed-check-bar i { display: block; height: 100%; background: var(--g-bone); transition: width var(--ed-t-base) linear; }

/* ── The refusal (SPEC §4.8): the one blocking failure ── */
.rt-drive #event-day .ed-refusal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(13, 13, 15, 0.7); backdrop-filter: blur(3px); }
.rt-drive #event-day .ed-refusal .card { width: min(520px, 100%); padding: 0 0 18px; overflow: hidden; border: 1px solid var(--g-slate); border-radius: 12px; background: var(--g-carbon); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
.rt-drive #event-day .ed-refusal .card > :not(.ed-hazard) { margin-left: 20px; margin-right: 20px; }
.rt-drive #event-day .ed-refusal .kicker { display: block; margin-top: 16px; }
.rt-drive #event-day .ed-refusal-body { display: flex; gap: 16px; align-items: flex-start; margin-top: 10px; }
.rt-drive #event-day .ed-refusal-plan { flex: none; width: 120px; height: 80px; border-radius: 8px; background: var(--g-black); box-shadow: inset 0 0 0 1px var(--g-slate); }
.rt-drive #event-day .ed-refusal-plan .lap { fill: none; stroke: var(--g-mist); stroke-width: 2; stroke-linejoin: round; }
.rt-drive #event-day .ed-refusal-plan .stand { fill: var(--g-bone); stroke: none; }
.rt-drive #event-day .ed-refusal .title { margin: 0 0 6px; font: var(--ed-type-title); letter-spacing: 0.04em; text-transform: uppercase; }
.rt-drive #event-day .ed-refusal .lead { margin: 0; color: var(--ed-ink-2); font: var(--ed-type-body); font-size: 14px; }
.rt-drive #event-day .ed-needs { margin: 10px 0 0; padding-left: 18px; color: var(--ed-ink-2); font: var(--ed-type-body); }
.rt-drive #event-day .ed-refusal .actions { display: flex; align-items: center; gap: 8px; margin-top: 18px; }

/* ── The shortcut strip (?) ── */
.rt-drive #event-day .ed-shortcuts .card { width: min(640px, 100%); }
/* Its head is the debrief's: title left, Close right (the old report-head
   rule went with the old report). */
.rt-drive #event-day .ed-shortcuts .report-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.rt-drive #event-day .ed-shortcuts .report-head .title { margin: 0; }
.rt-drive #event-day .ed-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 14px 0 0; }
.rt-drive #event-day .ed-keys div { display: flex; align-items: baseline; gap: 10px; }
.rt-drive #event-day .ed-keys dt { flex: none; min-width: 96px; }
.rt-drive #event-day .ed-keys dd { margin: 0; color: var(--ed-ink-2); font: var(--ed-type-body); }
.rt-drive #event-day .ed-debug { position: fixed; right: 16px; top: 72px; z-index: 50; margin: 0; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.8); color: #d4ffd9; font: 11px/1.4 var(--g-mono); pointer-events: none; }

/* Focus (C1): the moulded button's shadow no longer hides the ring. */
.rt-drive #event-day button:focus-visible, .rt-drive #event-day a:focus-visible, .rt-drive #event-day summary:focus-visible, .rt-drive #event-day [tabindex]:focus-visible { outline: none; box-shadow: var(--g-focus), var(--g-lift-shadow); }

@keyframes ed-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ed-rise-centred { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes ed-slide-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes ed-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ed-sheen { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes ed-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Laptop heights: the strip loses the tick labels' gap, the rail narrows. */
@media (max-width: 1366px) {
  .rt-drive #event-day { --ed-rail-w: 240px; }
}
/* Phone (SPEC §4.2): a 44 px bug bar, a 64 px strip, icons with labels for
   assistive tech, everything else in ⋯. */
@media (max-width: 720px) {
  .rt-drive #event-day { --ed-edge: 0px; }
  .rt-drive #event-day[data-layout="feed"] > [data-ed-region="bug"] { top: 0; left: 0; right: 0; gap: 0; border-bottom: 1px solid var(--g-slate); background: var(--ed-surface); backdrop-filter: blur(10px); }
  .rt-drive #event-day .ed-bug { flex: 1; border: 0; border-radius: 0; box-shadow: none; background: transparent; backdrop-filter: none; }
  .rt-drive #event-day .ed-bug-kind, .rt-drive #event-day .ed-bug-kind + .ed-bug-sep, .rt-drive #event-day .ed-bug-kind ~ .ed-bug-fans, .rt-drive #event-day .ed-bug-labs, .rt-drive #event-day .ed-bug-link, .rt-drive #event-day [data-ed-help] { display: none; }
  .rt-drive #event-day .ed-bug-kind, .rt-drive #event-day .ed-bug-extra { display: none; }
  .rt-drive #event-day .ed-bug-sep:has(+ .ed-bug-kind) { display: none; }
  .rt-drive #event-day .ed-bug-actions { padding-right: 4px; }
  .rt-drive #event-day .ed-bug-actions > * { height: 44px; min-height: 44px; box-shadow: none; }
  .rt-drive #event-day .ed-leave-text { display: none; }
  .rt-drive #event-day button.ed-leave { width: 44px; padding: 0; }
  .rt-drive #event-day[data-layout="feed"] > [data-ed-region="strip"] { left: 0; right: 0; bottom: 0; }
  .rt-drive #event-day[data-layout="feed"] .bar-card[data-ed-region="strip"] { padding: 8px 8px max(8px, env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 14px 14px 0 0; }
  .rt-drive #event-day[data-layout="feed"] > .bar-card[data-mode="opening"] { left: 0; width: 100%; transform: none; animation-name: ed-rise; }
  .rt-drive #event-day .ed-strip-grid { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "now ticker ticker" "transport rundown controls"; gap: 6px 8px; }
  .rt-drive #event-day button.ed-speed { min-width: 44px; padding: 0 8px; }
  .rt-drive #event-day .ed-speed-label, .rt-drive #event-day .ed-caret { display: none; }
  .rt-drive #event-day .ed-speed-short { display: inline; }
  .rt-drive #event-day .ed-controls { gap: 4px; }
  .rt-drive #event-day button.ed-play { width: 44px; height: 44px; min-height: 44px; }
  .rt-drive #event-day .ed-now .clock { font-size: 20px; }
  .rt-drive #event-day .ed-now-session, .rt-drive #event-day .ed-ticks, .rt-drive #event-day .ed-desk { display: none; }
  .rt-drive #event-day .ed-rundown { padding-top: 0; }
  .rt-drive #event-day .ed-phone { display: inline-flex; }
  .rt-drive #event-day button.ed-live { padding: 0 10px; gap: 6px; }
  .rt-drive #event-day button.ed-live [data-ed-race-label] { display: none; }
  .rt-drive #event-day .ed-live-short { display: inline; }
  .rt-drive #event-day[data-layout="feed"] > [data-ed-region="rail"] { top: auto; left: 0; right: 0; bottom: calc(var(--ed-strip-live, 64px) + 4px); width: auto; max-height: 46vh; }
  .rt-drive #event-day[data-layout="feed"] > [data-ed-region="caption"] { left: 8px; right: 8px; bottom: calc(var(--ed-strip-live, 64px) + 8px); }
  .rt-drive #event-day[data-layout="feed"].ed-has-rail > [data-ed-region="caption"] { left: 8px; }
  .rt-drive #event-day .ed-refusal-body { flex-direction: column; }
  .rt-drive #event-day .ed-keys { grid-template-columns: 1fr; }
}
@media (hover: none), (pointer: coarse) {
  .rt-drive #event-day[data-layout="feed"] .scrub { height: 44px; }
  .rt-drive #event-day[data-layout="feed"] .scrub .mark[data-lane="0"] { top: 15px; height: 17px; }
  .rt-drive #event-day[data-layout="feed"] .scrub .mark[data-lane="1"] { top: 35px; height: 5px; }
  .rt-drive #event-day .ed-icon, .rt-drive #event-day button.ed-speed { min-width: 44px; min-height: 44px; }
  .rt-drive #event-day .ed-bug-actions > * { height: 44px; }
}
/* Reduced motion (SPEC §5): no chrome motion at all. Playback still plays. */
@media (prefers-reduced-motion: reduce) {
  .rt-drive #event-day *, .rt-drive #event-day *::before, .rt-drive #event-day *::after, .rt-drive #event-day[data-layout="feed"] > [data-ed-region] { transition: none !important; animation: none !important; }
}

/* ── Event Day · S2 itinerary & sessions ─────────────────────────────────
   The running order (SPEC §4.1–4.2): a rail down the left edge of the
   picture on a desktop (300 px, 56 px collapsed to a glyph strip), a bottom
   sheet with a 1-row peek on a phone. Day tabs are two-line mini cards with
   a status stripe; rows carry clock, name, series, status + reason, result,
   ONE Watch (▶) and ONE fix. Finished rows collapse to one line; the NOW row
   is lit bone (the playhead's colour), the headline's ★ is the signal. The
   insets (--ed-rail-top / --ed-rail-bottom) are measured by the view so the
   rail never sits under drive's top bar or the strip. */
.rt-drive #event-day .ed-rail {
  position: fixed;
  z-index: 23;
  left: var(--ed-edge);
  top: var(--ed-rail-top, calc(var(--ed-edge) + var(--ed-bug-h) + 8px));
  display: flex;
  flex-direction: column;
  width: var(--ed-rail-w);
  max-height: calc(100vh - var(--ed-rail-top, 68px) - var(--ed-rail-bottom, 96px));
  max-height: calc(100dvh - var(--ed-rail-top, 68px) - var(--ed-rail-bottom, 96px));
  overflow: hidden;
  border: 1px solid var(--g-panel-edge);
  border-radius: 12px;
  background: var(--ed-surface);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  color: var(--ed-ink);
  font: var(--ed-type-body);
  animation: ed-rail-in var(--ed-t-slow) var(--ed-ease-out) both;
  transition: width var(--ed-t-slow) var(--ed-ease-out);
}
@keyframes ed-rail-in { from { opacity: 0; transform: translateX(-12px); } }
.rt-drive #event-day .ed-rail[inert] { opacity: 0.45; }
.rt-drive #event-day .ed-rail[data-filming="1"] { visibility: hidden; }
/* In the World Feed the strip's live height is the shell's (S1 sets
   --ed-strip-live from one ResizeObserver): the desktop rail ends above it
   whatever S2 measured at its last render — a strip that grew after that
   (opening card → day strip → ticker line) left the rail over the transport. */
.rt-drive #event-day[data-layout="feed"] .ed-rail:not([data-sheet="1"]) { max-height: calc(100dvh - var(--ed-rail-top, 68px) - var(--ed-edge) - var(--ed-strip-live, 100px) - 8px); }
.rt-drive #event-day .ed-rail .ed-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Head: kicker, title, sub; the collapse toggle pinned right. */
.rt-drive #event-day .ed-rail-grip { display: none; }
.rt-drive #event-day .ed-rail-head { display: flex; align-items: flex-start; gap: 8px; padding: 12px 10px 8px 14px; }
.rt-drive #event-day .ed-rail-titles { display: grid; flex: 1; min-width: 0; gap: 3px; }
.rt-drive #event-day .ed-rail-kicker { color: var(--ed-ink-3); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); text-transform: uppercase; }
.rt-drive #event-day .ed-rail-title { color: var(--ed-ink); font: var(--ed-type-title); letter-spacing: 0.03em; text-transform: uppercase; }
.rt-drive #event-day .ed-rail-sub { color: var(--ed-ink-2); font: 500 12px/1.3 var(--g-text); }
.rt-drive #event-day .ed-rail-sub:empty { display: none; }
.rt-drive #event-day .ed-rail-mini { display: none; }
.rt-drive #event-day .ed-rail .ed-rail-toggle { flex: none; width: 32px; min-height: 32px; padding: 0; font: 600 16px/1 var(--g-display); letter-spacing: 0; }

/* Day tabs: two-line mini cards. Chosen = the bone block; the stripe along
   the bottom is the day's worst status; a spinner while it simulates. */
.rt-drive #event-day .ed-rail .ed-days { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 6px; margin: 0; padding: 0 10px 10px 14px; }
.rt-drive #event-day .ed-rail .ed-days[hidden] { display: none; }
.rt-drive #event-day .ed-rail .ed-day {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 3px;
  min-width: 0;
  min-height: 46px;
  padding: 6px 8px 8px;
  overflow: hidden;
  border-color: var(--g-slate);
  border-radius: 8px;
  color: var(--ed-ink-2);
  text-align: left;
  letter-spacing: 0;
  white-space: normal;
  transition: background-color var(--ed-t-fast) var(--ed-ease-out), color var(--ed-t-fast) var(--ed-ease-out);
}
.rt-drive #event-day .ed-rail .ed-day::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.rt-drive #event-day .ed-rail .ed-day[data-stripe="cancelled"]::after { background: var(--ed-cancelled); }
.rt-drive #event-day .ed-rail .ed-day[data-stripe="reduced"]::after { background: var(--ed-reduced); }
.rt-drive #event-day .ed-rail .ed-day-wk { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1 var(--g-display); letter-spacing: 0.08em; }
.rt-drive #event-day .ed-rail .ed-day-noun { font: 500 11px/1.1 var(--g-text); text-transform: none; letter-spacing: 0; opacity: 0.85; }
/* The day's state in words, not a glyph: "2 reduced", "1 cancelled",
   "Simulating…" over a thin running bar (review: ◐4 / a bare spinner). */
.rt-drive #event-day .ed-rail .ed-day-flag { font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); text-transform: uppercase; white-space: nowrap; }
.rt-drive #event-day .ed-rail .ed-day-flag[data-status="cancelled"] { color: var(--ed-cancelled); }
.rt-drive #event-day .ed-rail .ed-day-flag[data-status="reduced"] { color: var(--ed-reduced); }
.rt-drive #event-day .ed-rail .ed-day-flag[data-status="running"] { color: var(--ed-ink-2); }
.rt-drive #event-day .ed-rail .ed-day-progress { position: absolute; left: 0; bottom: 0; width: 40%; height: 3px; background: var(--g-bone); opacity: 0.7; animation: ed-day-run 1.6s ease-in-out infinite; }
@keyframes ed-day-run { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.rt-drive #event-day .ed-rail .ed-day[aria-selected="true"] .ed-day-progress { background: var(--g-black); }
.rt-drive #event-day .ed-rail .ed-day[aria-selected="true"] .ed-day-flag[data-status="running"] { color: var(--g-black); }
@keyframes ed-spin { to { transform: rotate(360deg); } }
.rt-drive #event-day .ed-rail .ed-day[aria-selected="true"] { border-color: var(--g-bone); background: var(--g-bone); box-shadow: none; color: var(--g-black); }
.rt-drive #event-day .ed-rail .ed-day[aria-selected="true"] .ed-day-flag[data-status="cancelled"] { color: #be123c; }
.rt-drive #event-day .ed-rail .ed-day[aria-selected="true"] .ed-day-flag[data-status="reduced"] { color: #92400e; }
.rt-drive #event-day .ed-rail .ed-day[aria-selected="true"]:hover:not(:disabled) { background: #fff; color: var(--g-black); }

/* The list scrolls; the head, tabs and foot stay put. */
.rt-drive #event-day .ed-rail-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 6px 6px; border-top: 1px solid var(--g-panel-edge); scrollbar-width: thin; scrollbar-color: var(--g-slate) transparent; }
.rt-drive #event-day .ed-rail .ed-sessions { margin: 0; padding: 4px 0 0; list-style: none; }

/* A row: [seek: clock · name/series/reason/result · chip] [▶], the fix
   on its own line under the name. */
.rt-drive #event-day .ed-rail .ed-session {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 2px;
  margin: 1px 0;
  border-radius: 8px;
  transition: background-color var(--ed-t-base) var(--ed-ease-out), box-shadow var(--ed-t-base) var(--ed-ease-out);
}
.rt-drive #event-day .ed-rail .ed-session-glyph { display: none; }
.rt-drive #event-day .ed-rail .ed-session-seek {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 0 8px;
  width: 100%;
  min-height: 0;
  padding: 7px 6px 7px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--ed-ink);
  font: var(--ed-type-body);
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
}
.rt-drive #event-day .ed-rail .ed-session-seek:hover:not(:disabled) { background: rgba(255, 255, 255, 0.05); color: var(--ed-ink); }
.rt-drive #event-day .ed-rail .ed-session-seek:active:not(:disabled) { transform: none; box-shadow: none; background: rgba(255, 255, 255, 0.08); }
.rt-drive #event-day .ed-rail .ed-session-clock { padding-top: 1px; color: var(--ed-ink-3); font: 500 12px/1.3 var(--g-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-drive #event-day .ed-rail .ed-clock-end { display: none; }
.rt-drive #event-day .ed-rail .ed-session-main { display: grid; gap: 2px; min-width: 0; }
.rt-drive #event-day .ed-rail .ed-session-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.rt-drive #event-day .ed-rail .ed-session-label { color: var(--ed-ink); font: var(--ed-type-label); letter-spacing: var(--ed-track-label); text-transform: uppercase; }
.rt-drive #event-day .ed-rail .ed-headline-mark { color: var(--ed-action); font-weight: 400; }
.rt-drive #event-day .ed-rail .ed-now-tag { display: none; padding: 2px 5px; border-radius: 3px; background: var(--g-bone); color: var(--g-black); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); text-transform: uppercase; }
.rt-drive #event-day .ed-rail .ed-session-series { color: var(--ed-ink-2); font: 500 12px/1.35 var(--g-text); }
.rt-drive #event-day .ed-rail .ed-session-reason { color: var(--ed-cancelled); font: 500 12px/1.35 var(--g-text); }
.rt-drive #event-day .ed-rail .ed-session[data-status="reduced"] .ed-session-reason { color: var(--ed-reduced); }
.rt-drive #event-day .ed-rail .ed-session-leader { color: var(--ed-ink-2); font: 500 12px/1.35 var(--g-text); }
.rt-drive #event-day .ed-rail .ed-session .ed-chip { margin-left: auto; align-self: center; }
.rt-drive #event-day .ed-rail .ed-session[aria-current="true"] .ed-now-tag { display: inline-block; }
.rt-drive #event-day .ed-rail .ed-session[data-status="cancelled"] .ed-session-label { color: var(--ed-ink-3); text-decoration: line-through; text-decoration-color: rgba(251, 113, 133, 0.7); }

/* NOW: lit bone, the playhead's colour. */
.rt-drive #event-day .ed-rail .ed-session[aria-current="true"] { background: rgba(244, 242, 238, 0.07); box-shadow: inset 3px 0 0 var(--g-bone); }
/* NOW's end on its own lines — "until" over the clock, never a wrapped
   "–12:11" that read as a negative countdown. */
.rt-drive #event-day .ed-rail .ed-session[aria-current="true"] .ed-clock-end { display: block; color: var(--ed-ink-3); font-size: 11px; white-space: nowrap; }
.rt-drive #event-day .ed-rail .ed-clock-until { display: block; margin-top: 2px; font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); text-transform: uppercase; }
.rt-drive #event-day .ed-rail .ed-session[aria-current="true"] .ed-session-clock { color: var(--ed-ink); }
/* A strip block or the reader's pointer over a row. */
.rt-drive #event-day .ed-rail .ed-session[data-hover] { background: rgba(255, 255, 255, 0.05); }
.rt-drive #event-day .ed-rail .ed-session[data-hover="strip"] { box-shadow: inset 0 0 0 1px rgba(244, 242, 238, 0.35); }
.rt-drive #event-day .ed-rail .ed-session[aria-current="true"][data-hover="strip"] { box-shadow: inset 3px 0 0 var(--g-bone), inset 0 0 0 1px rgba(244, 242, 238, 0.35); }

/* Finished: one line — clock, name, result or chip. The details come back
   on hover or focus (the row is still the reader's to open). */
.rt-drive #event-day .ed-rail .ed-session[data-phase="past"] .ed-session-seek { padding-top: 5px; padding-bottom: 5px; }
.rt-drive #event-day .ed-rail .ed-session[data-phase="past"]:not(:hover):not(:focus-within) :is(.ed-session-series, .ed-session-reason) { display: none; }
.rt-drive #event-day .ed-rail .ed-session[data-phase="past"] .ed-session-label { color: var(--ed-ink-2); }
.rt-drive #event-day .ed-rail .ed-session[data-phase="past"] .ed-session-leader { color: var(--ed-ink); }

/* Watch: one small ▶ per row; the headline's is outlined in the signal. */
.rt-drive #event-day .ed-rail .ed-watch { align-self: center; width: 32px; min-height: 32px; margin-right: 4px; padding: 0; color: var(--ed-ink); }
.rt-drive #event-day .ed-rail .ed-watch .ed-watch-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rt-drive #event-day .ed-rail .ed-session[data-headline] .ed-watch { border-color: var(--ed-action); color: var(--ed-action); }
.rt-drive #event-day .ed-rail .ed-watch.pending { width: auto; padding: 0 8px; }
.rt-drive #event-day .ed-rail .ed-watch.pending svg { display: none; }
.rt-drive #event-day .ed-rail .ed-watch.pending .ed-watch-word { position: static; width: auto; height: auto; clip: auto; font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); }

/* The fix: a verb, one press to the studio with the card armed. */
.rt-drive #event-day .ed-rail .ed-session-fix { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 0 8px 8px 56px; }
.rt-drive #event-day .ed-rail .ed-fix { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 8px; border: 1px solid var(--g-slate); border-radius: 6px; background: rgba(255, 255, 255, 0.03); color: var(--ed-ink); font: 500 12px/1.3 var(--g-text); letter-spacing: 0; text-decoration: none; text-transform: none; transition: border-color var(--ed-t-fast) var(--ed-ease-out), background-color var(--ed-t-fast) var(--ed-ease-out); }
.rt-drive #event-day .ed-rail .ed-fix:hover { border-color: var(--g-mist); background: rgba(255, 255, 255, 0.07); }
.rt-drive #event-day .ed-rail .ed-fix-verb { color: var(--ed-ink-3); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); text-transform: uppercase; }
.rt-drive #event-day .ed-rail .ed-fix-arrow { color: var(--ed-ink-2); transition: transform var(--ed-t-fast) var(--ed-ease-out); }
.rt-drive #event-day .ed-rail .ed-fix:hover .ed-fix-arrow { transform: translateX(2px); }
.rt-drive #event-day .ed-rail .ed-session-fix .ed-hint { display: inline-flex; gap: 6px; margin: 0; color: var(--ed-ink-2); font: 500 12px/1.35 var(--g-text); }
.rt-drive #event-day .ed-rail .ed-fix-more { color: var(--ed-ink-3); font: 500 11px/1.3 var(--g-text); }

/* The result landing: one 400 ms pulse (none with reduced motion). */
.rt-drive #event-day .ed-rail .ed-session.ed-pulse { animation: ed-row-pulse 400ms var(--ed-ease-out); /* SPEC §5: result chip, 400 ms once */ }
@keyframes ed-row-pulse { 0% { background-color: rgba(244, 242, 238, 0.24); } 100% { background-color: transparent; } }

/* Foot: the readiness chip, one line. */
.rt-drive #event-day .ed-rail-foot { flex: none; padding: 8px 10px 10px; border-top: 1px solid var(--g-panel-edge); }
.rt-drive #event-day .ed-rail-foot[hidden] { display: none; }
.rt-drive #event-day .ed-rail .ed-readiness-chip { display: flex; justify-content: flex-start; align-items: center; gap: 8px; width: 100%; min-height: 36px; margin: 0; padding: 0 10px; }
.rt-drive #event-day .ed-rail .ed-readiness-word { color: var(--ed-ink-3); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); }
.rt-drive #event-day .ed-rail .ed-readiness-chip b { color: var(--ed-ink); font: 600 16px/1 var(--g-mono); font-variant-numeric: tabular-nums; }
.rt-drive #event-day .ed-rail .ed-readiness-tier { color: var(--ed-ink-2); font: var(--ed-type-label); letter-spacing: var(--ed-track-label); }
.rt-drive #event-day .ed-rail .ed-readiness-go { margin-left: auto; color: var(--ed-ink-3); }

/* Focus is always visible (C1): the ring wins over the moulded shadow. */
.rt-drive #event-day .ed-rail :is(button, a):focus-visible { box-shadow: var(--g-focus), var(--g-lift-shadow); }
.rt-drive #event-day .ed-rail .ed-session-seek:focus-visible { box-shadow: inset 0 0 0 2px var(--ed-action); }

/* Collapsed (desktop): a 56 px glyph strip — toggle, one glyph per row,
   the NOW glyph lit. Any press on it opens the rail. */
.rt-drive #event-day .ed-rail[data-open="0"]:not([data-sheet="1"]) { width: var(--ed-rail-min); cursor: pointer; }
.rt-drive #event-day .ed-rail[data-open="0"]:not([data-sheet="1"]) :is(.ed-rail-titles, .ed-days, .ed-rail-foot, .ed-session-seek, .ed-watch, .ed-session-fix) { display: none; }
.rt-drive #event-day .ed-rail[data-open="0"]:not([data-sheet="1"]) .ed-rail-head { flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 6px; }
.rt-drive #event-day .ed-rail[data-open="0"]:not([data-sheet="1"]) .ed-rail-mini { display: block; color: var(--ed-ink-2); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); }
.rt-drive #event-day .ed-rail[data-open="0"]:not([data-sheet="1"]) .ed-rail-toggle { width: 40px; min-height: 40px; }
.rt-drive #event-day .ed-rail[data-open="0"]:not([data-sheet="1"]) .ed-rail-panel { padding: 4px 0 8px; overflow: hidden; }
.rt-drive #event-day .ed-rail[data-open="0"]:not([data-sheet="1"]) .ed-session { display: flex; justify-content: center; height: 20px; margin: 2px 8px; }
.rt-drive #event-day .ed-rail[data-open="0"]:not([data-sheet="1"]) .ed-session-glyph { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; border-radius: 4px; font: 600 12px/20px var(--g-mono); text-align: center; }
.rt-drive #event-day .ed-rail .ed-session-mini { color: var(--ed-ink-2); font: 500 10px/20px var(--g-mono); font-variant-numeric: tabular-nums; }
.rt-drive #event-day .ed-rail[data-open="0"]:not([data-sheet="1"]) .ed-session[aria-current="true"] .ed-session-mini { color: var(--g-black); }
/* The day's scaffolding (gates, exodus): drawn quieter than its sessions. */
.rt-drive #event-day .ed-rail .ed-session[data-background]:not([aria-current="true"]) .ed-session-label { color: var(--ed-ink-2); }
.rt-drive #event-day .ed-rail[data-open="0"]:not([data-sheet="1"]) .ed-session[aria-current="true"] { background: transparent; box-shadow: none; }
.rt-drive #event-day .ed-rail[data-open="0"]:not([data-sheet="1"]) .ed-session[aria-current="true"] .ed-session-glyph { background: var(--g-bone); color: var(--g-black); }
.rt-drive #event-day .ed-rail .ed-session-glyph[data-tone="cancelled"] { color: var(--ed-cancelled); }
.rt-drive #event-day .ed-rail .ed-session-glyph[data-tone="reduced"] { color: var(--ed-reduced); }
.rt-drive #event-day .ed-rail .ed-session-glyph[data-tone="past"] { color: var(--ed-ink-3); }
.rt-drive #event-day .ed-rail .ed-session-glyph[data-tone="now"] { color: var(--ed-ink); }
.rt-drive #event-day .ed-rail .ed-session-glyph[data-tone="headline"] { color: var(--ed-action); }
.rt-drive #event-day .ed-rail .ed-session-glyph[data-tone="later"] { color: var(--ed-ink-3); font-size: 10px; }

/* Phone: the bottom sheet. Peek = the grip and ONE row (NOW, else next),
   raised = tabs, the whole list and the chip. */
.rt-drive #event-day .ed-rail[data-sheet="1"] {
  left: 8px;
  right: 8px;
  top: auto;
  bottom: var(--ed-rail-bottom, 96px);
  width: auto;
  max-height: min(64vh, calc(100dvh - var(--ed-rail-bottom, 96px) - 56px));
  border-radius: 14px;
  animation-name: ed-sheet-in;
  transition: none;
}
@keyframes ed-sheet-in { from { opacity: 0; transform: translateY(12px); } }
.rt-drive #event-day .ed-rail[data-sheet="1"] .ed-rail-grip { display: block; flex: none; width: 36px; height: 4px; margin: 6px auto 0; border-radius: 2px; background: var(--g-slate); touch-action: none; }
.rt-drive #event-day .ed-rail[data-sheet="1"] .ed-rail-head { padding: 6px 8px 6px 14px; touch-action: none; }
.rt-drive #event-day .ed-rail[data-sheet="1"] .ed-rail-title { font-size: 16px; }
.rt-drive #event-day .ed-rail[data-sheet="1"] :is(.ed-rail-kicker, .ed-rail-sub) { display: none; }
.rt-drive #event-day .ed-rail[data-sheet="1"] .ed-rail-head { align-items: center; }
.rt-drive #event-day .ed-rail[data-sheet="1"][data-open="0"] { cursor: pointer; }
.rt-drive #event-day .ed-rail[data-sheet="1"][data-open="0"] :is(.ed-rail-titles, .ed-days, .ed-rail-foot) { display: none; }
.rt-drive #event-day .ed-rail[data-sheet="1"][data-open="0"] .ed-rail-head { position: absolute; top: 50%; right: 0; padding: 0 6px; transform: translateY(-50%); }
.rt-drive #event-day .ed-rail[data-sheet="1"][data-open="0"] .ed-rail-panel { padding: 0 52px 2px 6px; overflow: hidden; border-top: 0; }
.rt-drive #event-day .ed-rail[data-sheet="1"][data-open="0"] .ed-session:not([data-peek]) { display: none; }
.rt-drive #event-day .ed-rail[data-sheet="1"][data-open="0"] .ed-session :is(.ed-session-series, .ed-session-reason, .ed-session-fix) { display: none; }
/* The phone's one-row peek keeps to one row: the end clock is the open sheet's. */
.rt-drive #event-day .ed-rail[data-sheet="1"][data-open="0"] .ed-session[aria-current="true"] .ed-clock-end { display: none; }

@media (hover: none), (pointer: coarse) {
  .rt-drive #event-day .ed-rail .ed-session-seek { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .rt-drive #event-day .ed-rail .ed-session[data-phase="past"] .ed-session-seek { padding-top: 10px; padding-bottom: 10px; }
  .rt-drive #event-day .ed-rail .ed-watch, .rt-drive #event-day .ed-rail .ed-rail-toggle { width: 44px; min-height: 44px; padding: 0; }
  .rt-drive #event-day .ed-rail .ed-watch.pending { width: auto; padding: 0 10px; }
  .rt-drive #event-day .ed-rail .ed-day { min-height: 48px; padding: 5px 8px 7px; }
  .rt-drive #event-day .ed-rail .ed-readiness-chip { min-height: 44px; padding: 0 10px; }
  .rt-drive #event-day .ed-rail a.ed-fix { min-height: 44px; }
  .rt-drive #event-day .ed-rail[data-open="0"]:not([data-sheet="1"]) .ed-session { height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .rt-drive #event-day .ed-rail, .rt-drive #event-day .ed-rail * { animation: none !important; transition: none !important; }
}

/* ── Event Day · S3 report & paywall: the report dialog, tabs, flow map ── */
/* The debrief (SPEC §4.6): a 760 px dialog with a sticky head, tabs and
   foot around one scrolling body; Summary first. Every rule that must beat
   the core's moulded button or the core dialog card does so on specificity
   (.ed-debrief / .ed-upsell under .ed-dialog), never on position. */
.rt-drive #event-day .ed-dialog { pointer-events: auto; }
.rt-drive #event-day .ed-debrief-dialog { padding: 24px; background: rgba(13, 13, 15, 0.72); backdrop-filter: blur(4px); }
.rt-drive #event-day .ed-dialog .report.ed-debrief {
  display: flex; flex-direction: column; width: min(760px, 100%); height: min(640px, calc(100vh - 48px)); max-height: calc(100dvh - 48px);
  padding: 0; overflow: hidden; border: 1px solid var(--g-slate); border-radius: 14px; background: var(--g-carbon);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); animation: ed-db-rise var(--ed-t-slow) var(--ed-ease-out) both;
}
@keyframes ed-db-rise { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
.rt-drive #event-day .ed-debrief .ed-db-head, .rt-drive #event-day .ed-debrief .ed-tabs, .rt-drive #event-day .ed-debrief .ed-db-foot { flex: none; }
.rt-drive #event-day .ed-debrief .ed-db-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 20px 10px; }
.rt-drive #event-day .ed-debrief .ed-db-titles { display: grid; gap: 6px; min-width: 0; }
.rt-drive #event-day .ed-debrief .ed-db-kicker { overflow: hidden; color: var(--ed-ink-3); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.rt-drive #event-day .ed-debrief .ed-db-head h2 { margin: 0; padding-left: 10px; border-left: 3px solid var(--ed-ink); color: var(--ed-ink); font: 600 24px/1 var(--g-display); letter-spacing: 0.04em; text-transform: uppercase; }
.rt-drive #event-day .ed-debrief .ed-tabs { display: flex; gap: 2px; margin: 0; padding: 0 14px; overflow-x: auto; border-bottom: 1px solid var(--g-slate); scrollbar-width: none; }
.rt-drive #event-day .ed-debrief .ed-tabs [role="tab"] {
  position: relative; min-height: 40px; padding: 0 10px; border: 0; border-radius: 6px 6px 0 0; background: transparent; box-shadow: none;
  color: var(--ed-ink-3); font: var(--ed-type-label); letter-spacing: var(--ed-track-label); transition: color var(--ed-t-fast);
}
.rt-drive #event-day .ed-debrief .ed-tabs [role="tab"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px; background: transparent; transition: background var(--ed-t-base); }
.rt-drive #event-day .ed-debrief .ed-tabs [role="tab"]:hover { background: rgba(255, 255, 255, 0.04); color: var(--ed-ink); }
.rt-drive #event-day .ed-debrief .ed-tabs [role="tab"][aria-selected="true"] { background: transparent; color: var(--ed-ink); }
.rt-drive #event-day .ed-debrief .ed-tabs [role="tab"][aria-selected="true"]::after { background: var(--ed-ink); }
.rt-drive #event-day .ed-debrief .ed-tabs .ed-lock { margin-left: 2px; opacity: 0.8; }
/* ONE scroller per tab (review: an inner table scroller and the body both
   clipped mid-row above the footer). The body fades into the footer
   instead of cutting a line in half; the fade sits over its bottom padding,
   so the last row reads at the end of the scroll (and a pane that fits
   still fits — the summary never scrolls at 1440×900). */
.rt-drive #event-day .ed-debrief .ed-db-body { flex: 1 1 auto; min-height: 0; padding: 16px 20px 20px; overflow-y: auto; overscroll-behavior: contain; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent); }
.rt-drive #event-day .ed-debrief .ed-db-pane:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--g-signal); border-radius: 6px; }
.rt-drive #event-day .ed-debrief .ed-db-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 20px; border-top: 1px solid var(--g-slate); background: var(--g-black); }
.rt-drive #event-day .ed-debrief .ed-db-foot .fine { margin: 0 0 0 auto; }
.rt-drive #event-day .ed-debrief .ed-db-foot[data-pane-locked] .ed-db-ask { display: none; }
.rt-drive #event-day .ed-debrief .ed-db-foot .go { min-height: 40px; padding: 0 18px; font-size: 15px; }
.rt-drive #event-day .ed-debrief .ed-film-pick { display: inline-flex; align-items: center; gap: 6px; }
.rt-drive #event-day .ed-debrief .ed-film-pick-label { margin-right: 4px; color: var(--ed-ink); font: var(--ed-type-label); letter-spacing: var(--ed-track-label); text-transform: uppercase; }
.rt-drive #event-day .ed-debrief .ed-film-pick button { display: inline-flex; align-items: baseline; gap: 6px; min-height: 40px; padding: 0 14px; }
.rt-drive #event-day .ed-debrief .ed-film-pick button b { font: 600 14px/1 var(--g-mono); letter-spacing: 0; }
.rt-drive #event-day .ed-debrief .ed-film-pick button span { font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); text-transform: uppercase; opacity: 0.8; }
.rt-drive #event-day .ed-debrief .ed-db-note, .rt-drive #event-day .ed-debrief .ed-db-quiet { margin: 4px 0; color: var(--ed-ink-2); font: var(--ed-type-body); }
.rt-drive #event-day .ed-debrief .ed-db-h { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; color: var(--ed-ink-3); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); text-transform: uppercase; }
.rt-drive #event-day .ed-debrief .ed-count { padding: 2px 6px; border-radius: 999px; background: var(--g-steel); color: var(--ed-ink); font: 500 11px/1 var(--g-mono); letter-spacing: 0; }
.rt-drive #event-day .ed-debrief [data-tone="cancelled"] { --ed-tone: var(--ed-cancelled); }
.rt-drive #event-day .ed-debrief [data-tone="reduced"] { --ed-tone: var(--ed-reduced); }
.rt-drive #event-day .ed-debrief [data-tone="ok"] { --ed-tone: var(--ed-ok); }
.rt-drive #event-day .ed-debrief .ed-db-alert { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--ed-tone, var(--ed-cancelled)); border-radius: 0 8px 8px 0; background: rgba(251, 113, 133, 0.08); color: var(--ed-ink); font: var(--ed-type-body); }
.rt-drive #event-day .ed-debrief .ed-num { font: var(--ed-type-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-drive #event-day .ed-debrief .ed-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Summary: the verdict, three numbers, since last time, fix next. */
.rt-drive #event-day .ed-debrief .ed-verdict { max-width: 62ch; margin: 2px 0 14px; color: var(--ed-ink); font: 500 18px/1.35 var(--g-text); letter-spacing: -0.005em; }
.rt-drive #event-day .ed-debrief .ed-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rt-drive #event-day .ed-debrief .ed-kpi { display: grid; align-content: start; gap: 5px; padding: 12px 14px; border: 1px solid var(--g-slate); border-left: 3px solid var(--ed-tone, var(--g-slate)); border-radius: 10px; background: var(--g-black); }
.rt-drive #event-day .ed-debrief .ed-kpi-value { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.rt-drive #event-day .ed-debrief .ed-kpi-value b { color: var(--ed-ink); font: 600 30px/1 var(--g-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.rt-drive #event-day .ed-debrief .ed-kpi-value span { color: var(--ed-ink-3); font: 500 14px/1 var(--g-mono); }
.rt-drive #event-day .ed-debrief .ed-kpi-label { color: var(--ed-ink-2); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); text-transform: uppercase; }
.rt-drive #event-day .ed-debrief .ed-kpi-sub { color: var(--ed-tone, var(--ed-ink-3)); font: 400 12px/1.3 var(--g-text); }
.rt-drive #event-day .ed-debrief .ed-db-crowdline { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 12px 0 0; color: var(--ed-ink-2); font: var(--ed-type-body); }
.rt-drive #event-day .ed-debrief .ed-db-crowdline span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--ed-ink-3); }
.rt-drive #event-day .ed-debrief .ed-since { margin-top: 14px; padding: 10px 14px; border-left: 3px solid var(--ed-ink-3); border-radius: 0 10px 10px 0; background: rgba(255, 255, 255, 0.04); }
.rt-drive #event-day .ed-debrief .ed-since .ed-db-h { margin: 0 0 4px; color: var(--ed-ink-2); }
.rt-drive #event-day .ed-debrief .ed-since .ed-db-h::before { content: "↻ "; }
/* One row: the label beside its lines (Summary must fit 1440×900 unscrolled
   now that "Since last time" is always there — S5's history landed). */
.rt-drive #event-day .ed-debrief .ed-since:not([hidden]) { display: flex; align-items: baseline; gap: 14px; margin-top: 10px; padding: 7px 14px; }
.rt-drive #event-day .ed-debrief .ed-since .ed-db-h { flex: none; margin: 0; white-space: nowrap; }
.rt-drive #event-day .ed-debrief .ed-since ul { margin: 0; padding: 0; list-style: none; color: var(--ed-ink); font: var(--ed-type-body); }
.rt-drive #event-day .ed-debrief .ed-fixes { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rt-drive #event-day .ed-debrief .ed-fix-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 10px 7px 12px; border: 1px solid var(--g-slate); border-radius: 10px; background: var(--g-black); }
.rt-drive #event-day .ed-debrief .ed-fix-n { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--g-slate); border-radius: 50%; color: var(--ed-ink); font: 600 12px/1 var(--g-mono); }
.rt-drive #event-day .ed-debrief .ed-fix-what { display: grid; gap: 2px; min-width: 0; }
.rt-drive #event-day .ed-debrief .ed-fix-label { color: var(--ed-ink); font: 600 14px/1.25 var(--g-text); }
.rt-drive #event-day .ed-debrief .ed-fix-gain { color: var(--ed-ink-2); font: 500 12px/1.3 var(--g-text); }
.rt-drive #event-day .ed-debrief .ed-fix-gain::before { content: "→ "; }
.rt-drive #event-day .ed-debrief .ed-fix-hint { max-width: 28ch; color: var(--ed-ink-3); font: 400 12px/1.3 var(--g-text); text-align: right; }
.rt-drive #event-day .ed-dialog a.ed-fix-go {
  display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 14px; border: 1px solid var(--ed-ink-3); border-radius: 7px;
  color: var(--ed-ink); font: var(--ed-type-label); letter-spacing: var(--ed-track-label); text-decoration: none; text-transform: uppercase; transition: background var(--ed-t-fast), border-color var(--ed-t-fast);
}
.rt-drive #event-day .ed-dialog a.ed-fix-go::after { content: "↗"; margin-left: 6px; color: var(--ed-ink-3); font-size: 11px; }
.rt-drive #event-day .ed-dialog a.ed-fix-go:hover { border-color: var(--ed-ink); background: rgba(255, 255, 255, 0.06); }

/* Crowd: headline, map + stands, pinch points, the site facts. */
.rt-drive #event-day .ed-debrief .ed-db-headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 0 0 12px; color: var(--ed-ink-2); font: 500 14px/1.3 var(--g-text); letter-spacing: 0; text-transform: none; }
.rt-drive #event-day .ed-debrief .ed-db-headline b { color: var(--ed-ink); font: 600 22px/1 var(--g-mono); }
.rt-drive #event-day .ed-debrief .ed-db-headline [data-tone] { color: var(--ed-tone); }
.rt-drive #event-day .ed-debrief .ed-crowd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.rt-drive #event-day .ed-debrief .ed-map-figure { margin: 0; }
.rt-drive #event-day .ed-debrief .ed-map-frame { position: relative; overflow: hidden; border: 1px solid var(--g-slate); border-radius: 10px; background: var(--g-black); }
.rt-drive #event-day .ed-debrief canvas.map { display: block; width: 100%; height: auto; margin: 0; border: 0; border-radius: 0; }
.rt-drive #event-day .ed-debrief .ed-map-marks { position: absolute; inset: 0; pointer-events: none; }
.rt-drive #event-day .ed-dialog .ed-map-mark {
  position: absolute; min-height: 0; width: 22px; height: 22px; padding: 0; transform: translate(-50%, -50%); border: 2px solid var(--g-black); border-radius: 50%;
  background: var(--ed-ink); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); color: var(--g-black); font: 600 12px/1 var(--g-mono); letter-spacing: 0; pointer-events: auto; transition: transform var(--ed-t-fast) var(--ed-ease-out);
}
.rt-drive #event-day .ed-dialog .ed-map-mark:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.18); background: #fff; color: var(--g-black); }
.rt-drive #event-day .ed-debrief .ed-map-legend { display: flex; align-items: center; gap: 10px; margin-top: 6px; color: var(--ed-ink-3); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); text-transform: uppercase; }
.rt-drive #event-day .ed-debrief .ed-ramp { width: 72px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(154, 154, 160, 0.45), var(--g-bone) 82%, var(--g-signal) 82%); }
.rt-drive #event-day .ed-debrief .ed-hot { color: var(--g-signal); }
.rt-drive #event-day .ed-debrief .ed-stands-wrap { overflow-x: auto; }
.rt-drive #event-day .ed-debrief .ed-stands tbody th, .rt-drive #event-day .ed-debrief .ed-stands tbody td { padding: 6px; }
.rt-drive #event-day .ed-debrief table { width: 100%; margin: 0; border-collapse: collapse; font: var(--ed-type-body); }
.rt-drive #event-day .ed-debrief thead th { white-space: nowrap; position: sticky; top: 0; padding: 6px 8px; border-bottom: 1px solid var(--g-slate); background: var(--g-carbon); color: var(--ed-ink-3); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); text-align: left; text-transform: uppercase; }
.rt-drive #event-day .ed-debrief tbody th, .rt-drive #event-day .ed-debrief tbody td { padding: 7px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); color: var(--ed-ink); font-weight: 400; text-align: left; vertical-align: middle; }
.rt-drive #event-day .ed-debrief tbody th { font-weight: 500; }
.rt-drive #event-day .ed-debrief .ed-stand-tag { display: inline-block; min-width: 26px; margin-right: 8px; padding: 2px 4px; border-radius: 4px; background: var(--g-steel); color: var(--ed-ink-2); font: 600 10px/1.2 var(--g-mono); text-align: center; }
.rt-drive #event-day .ed-debrief .ed-fill { display: flex; align-items: center; gap: 8px; }
.rt-drive #event-day .ed-debrief .ed-bar { flex: 1 1 40px; height: 6px; min-width: 28px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, 0.08); }
.rt-drive #event-day .ed-debrief .ed-bar i { display: block; height: 100%; border-radius: 3px; background: var(--ed-ink-2); }
.rt-drive #event-day .ed-debrief td [data-tone] { color: var(--ed-tone); font: 500 12px/1 var(--g-text); }
.rt-drive #event-day .ed-debrief .ed-necks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rt-drive #event-day .ed-dialog .ed-neck {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid var(--g-slate); border-radius: 10px;
  background: var(--g-black); box-shadow: none; color: var(--ed-ink); font: var(--ed-type-body); letter-spacing: 0; text-align: left; text-transform: none; white-space: normal;
}
.rt-drive #event-day .ed-dialog .ed-neck:hover:not(:disabled) { border-color: var(--ed-ink-3); background: var(--g-steel); color: var(--ed-ink); }
.rt-drive #event-day .ed-debrief .ed-badge { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ed-ink); color: var(--g-black); font: 600 12px/1 var(--g-mono); }
.rt-drive #event-day .ed-debrief .ed-neck-what { display: grid; gap: 2px; min-width: 0; }
.rt-drive #event-day .ed-debrief .ed-neck-what b { font-weight: 600; }
.rt-drive #event-day .ed-debrief .ed-neck-what span { color: var(--ed-ink-2); font-size: 12px; }
.rt-drive #event-day .ed-debrief .ed-neck-go { color: var(--ed-ink-3); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); text-transform: uppercase; }
.rt-drive #event-day .ed-debrief .ed-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-top: 14px; }
.rt-drive #event-day .ed-debrief .ed-fact { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--g-slate); border-left: 3px solid var(--ed-tone, var(--g-slate)); border-radius: 10px; background: var(--g-black); }
.rt-drive #event-day .ed-debrief .ed-fact-label { color: var(--ed-ink-3); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); text-transform: uppercase; }
.rt-drive #event-day .ed-debrief .ed-fact b { color: var(--ed-ink); font: 600 15px/1.25 var(--g-text); }
.rt-drive #event-day .ed-debrief .ed-fact span:last-child { color: var(--ed-ink-2); font: 400 12px/1.3 var(--g-text); }

/* Readiness: the score, the grade ladder, the checks. */
.rt-drive #event-day .ed-debrief .ed-ready-hero { display: flex; align-items: center; gap: 22px; }
.rt-drive #event-day .ed-debrief .ed-score { display: flex; align-items: baseline; gap: 4px; margin: 0; font: 500 16px/1 var(--g-mono); letter-spacing: 0; text-transform: none; }
.rt-drive #event-day .ed-debrief .ed-score b { color: var(--ed-ink); font: 600 48px/1 var(--g-mono); letter-spacing: -0.03em; }
.rt-drive #event-day .ed-debrief .ed-score span { color: var(--ed-ink-3); }
.rt-drive #event-day .ed-debrief .ed-ready-side { display: grid; gap: 8px; }
.rt-drive #event-day .ed-debrief .ed-tier { margin: 0; color: var(--ed-ink); font: var(--ed-type-title); letter-spacing: 0.03em; text-transform: uppercase; }
.rt-drive #event-day .ed-debrief .ed-ladder { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rt-drive #event-day .ed-debrief .ed-ladder li { padding: 4px 8px; border: 1px solid var(--g-slate); border-radius: 5px; color: var(--ed-ink-3); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); text-transform: uppercase; }
.rt-drive #event-day .ed-debrief .ed-ladder li[data-state="done"] { border-color: transparent; background: var(--g-steel); color: var(--ed-ink-2); }
.rt-drive #event-day .ed-debrief .ed-ladder li[data-state="current"] { border-color: var(--ed-ink); background: var(--ed-ink); color: var(--g-black); }
.rt-drive #event-day .ed-debrief .ed-score-bar { height: 4px; margin: 14px 0 4px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.08); }
.rt-drive #event-day .ed-debrief .ed-score-bar i { display: block; height: 100%; background: var(--ed-ink); }
.rt-drive #event-day .ed-debrief .ed-checks { margin-top: 12px; }
.rt-drive #event-day .ed-debrief .ed-check-label { display: block; }
.rt-drive #event-day .ed-debrief .ed-check-hint, .rt-drive #event-day .ed-debrief .ed-check-cost { display: block; margin-top: 2px; color: var(--ed-ink-3); font: 400 12px/1.3 var(--g-text); }
.rt-drive #event-day .ed-debrief .ed-checks .ed-chip { display: inline-block; }
.rt-drive #event-day .ed-debrief .ed-lock-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--g-slate); border-radius: 10px; color: var(--ed-ink-2); font: var(--ed-type-body); }
.rt-drive #event-day .ed-debrief .ed-lock-line a { margin-left: auto; color: var(--ed-ink); font: var(--ed-type-label); letter-spacing: var(--ed-track-label); text-transform: uppercase; }
.rt-drive #event-day .ed-debrief .ed-flavour { margin: 12px 0 0; padding: 0; list-style: none; color: var(--ed-ink-2); font: italic 400 13px/1.45 var(--g-text); }

/* Weekend: podium cards, then compact standings. */
.rt-drive #event-day .ed-debrief .ed-podiums { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.rt-drive #event-day .ed-debrief .ed-podium { padding: 10px 12px; border: 1px solid var(--g-slate); border-radius: 10px; background: var(--g-black); }
.rt-drive #event-day .ed-debrief .ed-podium[data-status="cancelled"] { border-style: dashed; }
.rt-drive #event-day .ed-debrief .ed-podium-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 6px; color: var(--ed-ink); font: var(--ed-type-label); letter-spacing: var(--ed-track-label); text-transform: uppercase; }
.rt-drive #event-day .ed-debrief .ed-podium-head span { color: var(--ed-ink-3); }
.rt-drive #event-day .ed-debrief .ed-podium-head small { margin-left: auto; color: var(--ed-ink-3); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); }
.rt-drive #event-day .ed-debrief .ed-podium-order { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; color: var(--ed-ink-2); font: var(--ed-type-body); }
.rt-drive #event-day .ed-debrief .ed-podium-order li[data-p="1"] { color: var(--ed-ink); font-weight: 600; }
.rt-drive #event-day .ed-debrief .ed-pos { display: inline-block; min-width: 26px; margin-right: 6px; color: var(--ed-ink-3); font: 500 12px/1 var(--g-mono); }
.rt-drive #event-day .ed-debrief .ed-podium-fastest { margin: 0; color: var(--ed-ink); font: var(--ed-type-body); font-weight: 600; }
.rt-drive #event-day .ed-debrief .ed-podium-reason { margin: 0; color: var(--ed-ink-2); font: 400 12px/1.35 var(--g-text); }
.rt-drive #event-day .ed-debrief .ed-standings { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.rt-drive #event-day .ed-debrief .ed-standing h4 { margin: 0 0 4px; color: var(--ed-ink); font: var(--ed-type-label); letter-spacing: var(--ed-track-label); text-transform: uppercase; }

/* Ops: issues first. */
.rt-drive #event-day .ed-debrief .ed-issues { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rt-drive #event-day .ed-debrief .ed-issues li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 8px 12px; border-left: 3px solid var(--ed-tone); border-radius: 0 8px 8px 0; background: rgba(255, 255, 255, 0.03); color: var(--ed-ink); font: var(--ed-type-body); }
.rt-drive #event-day .ed-debrief .ed-issue-what { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.rt-drive #event-day .ed-debrief .ed-issue-what b { font-weight: 600; }
.rt-drive #event-day .ed-debrief .ed-issue-n { padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); font: 600 12px/1.3 var(--g-mono); font-variant-numeric: tabular-nums; }
.rt-drive #event-day .ed-debrief .ed-issue-detail { grid-column: 1; color: var(--ed-ink-2); font: 400 12px/1.4 var(--g-text); }
.rt-drive #event-day .ed-debrief .ed-issues .ed-fix-go { grid-column: 2; grid-row: 1 / span 2; }
.rt-drive #event-day .ed-debrief .ed-ops-count { margin: 10px 0 0; color: var(--ed-ink); font: var(--ed-type-body); }
.rt-drive #event-day .ed-debrief .ed-crews-all { margin-top: 14px; }
.rt-drive #event-day .ed-debrief .ed-crews-all summary { display: flex; align-items: center; gap: 8px; min-height: 36px; color: var(--ed-ink-2); font: var(--ed-type-label); letter-spacing: var(--ed-track-label); text-transform: uppercase; }
.rt-drive #event-day .ed-debrief .ed-crews { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px 16px; margin: 6px 0 0; padding: 0; list-style: none; color: var(--ed-ink-2); font: 400 12px/1.5 var(--g-text); }
.rt-drive #event-day .ed-debrief .ed-crews b { color: var(--ed-ink); font-weight: 500; }
.rt-drive #event-day .ed-debrief .ed-legend { margin: 0 0 4px; }

/* Locked panes (SPEC §10): the real content, blurred and masked, under a
   frosted card that carries the one orange ask. */
.rt-drive #event-day .ed-debrief .ed-locked { position: relative; min-height: 320px; }
.rt-drive #event-day .ed-debrief .ed-locked-preview { max-height: 440px; overflow: hidden; filter: blur(6px) saturate(0.7); opacity: 0.7; pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.rt-drive #event-day .ed-debrief .ed-lock-card {
  position: absolute; top: 44%; left: 50%; display: grid; justify-items: center; gap: 8px; width: min(380px, calc(100% - 24px)); padding: 20px 22px; transform: translate(-50%, -50%);
  border: 1px solid var(--g-slate); border-radius: 14px; background: rgba(20, 20, 22, 0.86); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px); text-align: center;
}
.rt-drive #event-day .ed-debrief .ed-lock-kicker { display: flex; align-items: center; gap: 6px; color: var(--ed-ink-2); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); text-transform: uppercase; }
.rt-drive #event-day .ed-debrief .ed-lock-card h3 { margin: 0; color: var(--ed-ink); font: var(--ed-type-title); letter-spacing: 0.03em; text-transform: uppercase; }
.rt-drive #event-day .ed-debrief .ed-lock-card p { margin: 0 0 6px; color: var(--ed-ink-2); font: var(--ed-type-body); }
/* B1: the core's moulded `a.go` outranks `.go`; the orange wins back here. */
.rt-drive #event-day .ed-dialog a.go { border-color: var(--g-signal-deep); background: var(--g-mould-go), var(--g-signal); color: var(--g-on-signal); }
.rt-drive #event-day .ed-dialog a.go:hover { background: var(--g-lift), var(--g-mould-go), var(--g-signal); color: var(--g-on-signal); }
.rt-drive #event-day .ed-debrief .ed-lock-card .go { min-height: 42px; padding: 0 18px; font-size: 15px; }

/* The Lifetime sheet: over the weekend, which keeps playing behind it. */
.rt-drive #event-day .ed-upsell-dialog { z-index: 41; background: rgba(13, 13, 15, 0.55); }
.rt-drive #event-day .ed-upsell-dialog .card.ed-upsell {
  display: grid; gap: 12px; width: min(440px, 100%); padding: 22px 24px 20px; border: 1px solid var(--g-slate); border-top: 3px solid var(--g-signal); border-radius: 14px;
  background: var(--g-carbon); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65); animation: ed-db-rise var(--ed-t-slow) var(--ed-ease-out) both;
}
/* …and from inside the debrief, the same card as a slide-over on the
   debrief itself (one dialog, not a modal on a modal). */
.rt-drive #event-day .ed-dialog .report.ed-debrief { position: relative; }
.rt-drive #event-day .ed-upsell-over { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 20px; background: rgba(13, 13, 15, 0.78); animation: ed-fade-in var(--ed-t-base) var(--ed-ease-out) both; }
.rt-drive #event-day .ed-upsell-over .card.ed-upsell {
  display: grid; gap: 12px; width: min(440px, 100%); max-height: 100%; overflow: auto; padding: 22px 24px 20px; border: 1px solid var(--g-slate); border-top: 3px solid var(--g-signal); border-radius: 14px;
  background: var(--g-carbon); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65); animation: ed-db-rise var(--ed-t-slow) var(--ed-ease-out) both;
}
.rt-drive #event-day .ed-upsell-kicker { display: flex; align-items: center; gap: 6px; color: var(--ed-ink-2); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); text-transform: uppercase; }
.rt-drive #event-day .ed-upsell-title { margin: 0; color: var(--ed-ink); font: 600 26px/1.05 var(--g-display); letter-spacing: 0.03em; text-transform: uppercase; }
.rt-drive #event-day .ed-upsell-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.rt-drive #event-day .ed-upsell-price b { color: var(--ed-ink); font: 600 36px/1 var(--g-mono); letter-spacing: -0.03em; }
.rt-drive #event-day .ed-upsell-price s { color: var(--ed-ink-3); font: 500 16px/1 var(--g-mono); }
.rt-drive #event-day .ed-upsell-price span { color: var(--ed-ink-2); font: var(--ed-type-body); }
.rt-drive #event-day .ed-upsell-list { display: grid; gap: 8px; margin: 2px 0 4px; padding: 0; list-style: none; }
.rt-drive #event-day .ed-upsell-list li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; color: var(--ed-ink); font: var(--ed-type-body); }
.rt-drive #event-day .ed-upsell-list svg { margin-top: 2px; color: var(--ed-ok); }
.rt-drive #event-day .ed-upsell-actions { display: grid; gap: 6px; }
.rt-drive #event-day .ed-upsell-form { margin: 0; }
.rt-drive #event-day .ed-dialog .ed-upsell-go { width: 100%; min-height: 48px; font-size: 17px; }
.rt-drive #event-day .ed-dialog .ed-upsell-go[aria-busy="true"] { opacity: 0.85; cursor: progress; }
.rt-drive #event-day .ed-dialog .ed-upsell-later { min-height: 40px; border-color: transparent; background: transparent; box-shadow: none; color: var(--ed-ink-2); }
.rt-drive #event-day .ed-upsell-fine { margin: 0; color: var(--ed-ink-3); font: 400 12px/1.4 var(--g-text); text-align: center; }

/* C1 for the S3 surfaces: the focus ring beats the moulded button's shadow. */
.rt-drive #event-day .ed-dialog :is(button, a, summary):focus-visible { outline: none; box-shadow: var(--g-focus), var(--g-lift-shadow); }
.rt-drive #event-day .ed-debrief .ed-tabs [role="tab"]:focus-visible { box-shadow: inset 0 0 0 2px var(--g-signal); }
.rt-drive #event-day .ed-dialog .ed-map-mark:focus-visible { box-shadow: 0 0 0 2px var(--g-black), 0 0 0 4px var(--g-signal); }

@media (prefers-reduced-motion: reduce) {
  .rt-drive #event-day .ed-dialog .report.ed-debrief, .rt-drive #event-day .ed-upsell-dialog .card.ed-upsell, .rt-drive #event-day .ed-upsell-over, .rt-drive #event-day .ed-upsell-over .card.ed-upsell { animation: none; }
  .rt-drive #event-day .ed-dialog .ed-map-mark:hover:not(:disabled) { transform: translate(-50%, -50%); }
}
@media (max-width: 720px) {
  .rt-drive #event-day .ed-debrief-dialog { padding: 0; }
  .rt-drive #event-day .ed-dialog .report.ed-debrief { width: 100%; height: 100vh; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .rt-drive #event-day .ed-debrief .ed-db-head { padding: 12px 14px 8px; }
  .rt-drive #event-day .ed-debrief .ed-db-body { padding: 14px 14px 20px; }
  .rt-drive #event-day .ed-debrief .ed-db-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .rt-drive #event-day .ed-debrief .ed-db-foot .fine { flex-basis: 100%; order: 2; margin: 0; }
  .rt-drive #event-day .ed-debrief .ed-db-foot .go { flex: 1 1 auto; }
  .rt-drive #event-day .ed-debrief .ed-film-pick { flex: 1 1 100%; }
  .rt-drive #event-day .ed-debrief .ed-film-pick button { flex: 1 1 0; justify-content: center; min-height: 44px; }
  .rt-drive #event-day .ed-debrief .ed-verdict { font-size: 16px; }
  .rt-drive #event-day .ed-debrief .ed-kpis { gap: 6px; }
  .rt-drive #event-day .ed-debrief .ed-kpi { padding: 10px; }
  .rt-drive #event-day .ed-debrief .ed-kpi-value b { font-size: 22px; }
  .rt-drive #event-day .ed-debrief .ed-kpi-sub { display: none; }
  .rt-drive #event-day .ed-debrief .ed-fix-row { grid-template-columns: 26px minmax(0, 1fr); }
  .rt-drive #event-day .ed-debrief .ed-fix-row > :last-child:not(.ed-fix-what) { grid-column: 2; justify-self: start; max-width: none; text-align: left; }
  .rt-drive #event-day .ed-debrief .ed-kpi-label { letter-spacing: 0.08em; }
  .rt-drive #event-day .ed-debrief .ed-crowd-grid { grid-template-columns: 1fr; }
  .rt-drive #event-day .ed-debrief .ed-ready-hero { gap: 14px; }
  .rt-drive #event-day .ed-debrief .ed-checks thead { display: none; }
  .rt-drive #event-day .ed-debrief .ed-checks tr { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
  .rt-drive #event-day .ed-debrief .ed-checks tr > * { padding: 0; border: 0; }
  .rt-drive #event-day .ed-debrief .ed-checks tr > th { grid-column: 1 / -1; }
  .rt-drive #event-day .ed-upsell-dialog { align-items: flex-end; padding: 0; }
  .rt-drive #event-day .ed-upsell-dialog .card.ed-upsell { width: 100%; padding-bottom: calc(20px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; }
  .rt-drive #event-day .ed-upsell-over { align-items: end; padding: 0; }
  .rt-drive #event-day .ed-upsell-over .card.ed-upsell { width: 100%; padding-bottom: calc(20px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; }
}
@media (hover: none), (pointer: coarse) {
  .rt-drive #event-day a[data-ed-unlock], .rt-drive #event-day .ed-dialog a.ed-fix-go { display: inline-flex; align-items: center; min-height: 44px; }
  .rt-drive #event-day .ed-debrief .ed-tabs [role="tab"] { min-height: 44px; }
  .rt-drive #event-day .ed-dialog .ed-upsell-later { min-height: 44px; }
  .rt-drive #event-day .ed-dialog .ed-map-mark { width: 28px; height: 28px; }
  .rt-drive #event-day .ed-dialog .ed-map-mark::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
  .rt-drive #event-day .ed-debrief .ed-crews-all summary { min-height: 44px; }
}

/* ── Event Day · S4 director & world: chapter cards, world tags, camera chip,
   who's on site, the film preflight and REC ─────────────────────────────
   SPEC §4.1 (tags), §4.4 (headline beat), §4.7 (filming), §5 (motion), §7
   (roles). Regions are position: fixed so they sit on the picture whatever
   the panel's own geometry is; they take pointer events only where there is
   something to press. */
.rt-drive #event-day [data-ed-region="chapter"] { position: fixed; left: 50%; bottom: 26vh; z-index: 3; width: min(560px, calc(100vw - 32px)); transform: translateX(-50%); pointer-events: none; }
.rt-drive #event-day .ed-chapter { position: relative; overflow: hidden; padding: 14px 18px 16px 21px; border: 1px solid var(--g-panel-edge); border-radius: 10px; background: var(--ed-surface); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px); color: var(--ed-ink); opacity: 0; transform: translateY(8px); transition: opacity 240ms var(--ed-ease-out), transform 240ms var(--ed-ease-out); }
.rt-drive #event-day .ed-chapter::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ed-ink); }
.rt-drive #event-day .ed-chapter.in { opacity: 1; transform: none; }
.rt-drive #event-day .ed-chapter.out { opacity: 0; transform: translateY(-4px); transition-timing-function: var(--ed-ease-in); }
.rt-drive #event-day .ed-chapter.interactive { pointer-events: auto; }
.rt-drive #event-day .ed-chapter[data-tone="headline"] { border-color: rgba(255, 122, 26, 0.55); box-shadow: 0 0 0 1px rgba(255, 122, 26, 0.25), 0 18px 48px rgba(0, 0, 0, 0.55); }
.rt-drive #event-day .ed-chapter[data-tone="headline"]::before { background: var(--ed-action); }
.rt-drive #event-day .ed-chapter[data-tone="cancelled"]::before { background: var(--ed-cancelled); }
.rt-drive #event-day .ed-chapter[data-tone="cancelled"] .ed-chapter-kicker { color: var(--ed-cancelled); }
.rt-drive #event-day .ed-chapter[data-tone="complete"]::before { background: var(--ed-ok); }
.rt-drive #event-day .ed-chapter:focus { outline: none; }
.rt-drive #event-day .ed-chapter:focus-visible { box-shadow: var(--g-focus), 0 18px 48px rgba(0, 0, 0, 0.55); }
.rt-drive #event-day .ed-chapter-kicker { color: var(--ed-ink-2); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); text-transform: uppercase; }
.rt-drive #event-day .ed-chapter[data-tone="headline"] .ed-chapter-kicker { color: var(--ed-action); }
.rt-drive #event-day .ed-chapter-title { margin: 6px 0 0; color: var(--ed-ink); font: 600 26px/1.05 var(--g-display); letter-spacing: 0.03em; text-transform: uppercase; }
.rt-drive #event-day .ed-chapter-sub { margin: 5px 0 0; color: var(--ed-ink-2); font: var(--ed-type-body); }
.rt-drive #event-day .ed-chapter-num { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 0; color: var(--ed-ink-2); font: var(--ed-type-body); white-space: nowrap; }
.rt-drive #event-day .ed-chapter-num b { color: var(--ed-ink); font: 600 24px/1 var(--g-mono); font-variant-numeric: tabular-nums; }
.rt-drive #event-day .ed-chapter-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.rt-drive #event-day .ed-chapter-btn { min-height: 40px; padding: 0 16px; cursor: pointer; }
.rt-drive #event-day a.ed-chapter-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 7px; font: 600 13px/1 var(--g-display); letter-spacing: 0.05em; text-decoration: none; text-transform: uppercase; }
.rt-drive #event-day .ed-chapter-btn:focus-visible { outline: none; box-shadow: var(--g-focus), var(--g-lift-shadow); }

/* World tags: pinned to the venue, projected every frame. The box is small;
   the hit area is not. */
.rt-drive #event-day [data-ed-region="world"] { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.rt-drive #event-day [data-ed-region="world"][hidden] { display: none; }
.rt-drive #event-day .ed-tags { position: absolute; inset: 0; }
.rt-drive #event-day .ed-tag { position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; height: 28px; padding: 0 9px 0 8px; border: 1px solid var(--g-panel-edge); border-left: 3px solid var(--ed-ink-2); border-radius: 6px; background: var(--ed-surface); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px); color: var(--ed-ink); cursor: pointer; pointer-events: auto; text-transform: none; letter-spacing: 0; white-space: nowrap; will-change: transform; transition: border-color var(--ed-t-fast), background var(--ed-t-fast); }
.rt-drive #event-day .ed-tag::before { content: ""; position: absolute; inset: -8px; }
.rt-drive #event-day .ed-tag::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 1px; height: 7px; background: rgba(244, 242, 238, 0.55); }
.rt-drive #event-day .ed-tag b { color: var(--ed-ink); font: var(--ed-type-label); letter-spacing: var(--ed-track-label); text-transform: uppercase; }
.rt-drive #event-day .ed-tag span { color: var(--ed-ink-2); font: var(--ed-type-num); font-size: 12px; font-variant-numeric: tabular-nums; }
.rt-drive #event-day .ed-tag[data-tone="full"] { border-left-color: var(--ed-ok); }
.rt-drive #event-day .ed-tag[data-tone="warn"] { border-left-color: var(--ed-reduced); }
.rt-drive #event-day .ed-tag[data-tone="warn"] span { color: var(--ed-reduced); }
.rt-drive #event-day .ed-tag:hover { background: var(--g-lift), var(--ed-surface); }
.rt-drive #event-day .ed-tag:hover span { color: var(--ed-ink); }
.rt-drive #event-day .ed-tag:active { transform: none; }
.rt-drive #event-day .ed-tag:focus-visible { outline: none; box-shadow: var(--g-focus); }
.rt-drive #event-day .ed-tag[hidden] { display: none; }

/* The camera chip (top-right of the picture; S1's bug takes it when it has
   a [data-ed-bug-extra] slot). */
.rt-drive #event-day .ed-world-controls { position: absolute; top: 12px; right: 16px; display: flex; gap: 6px; pointer-events: auto; }
.rt-drive #event-day [data-ed-bug-extra] .ed-world-controls { position: static; }
.rt-drive #event-day .ed-cam-chip { min-height: 36px; gap: 8px; padding: 0 12px; border-color: var(--g-panel-edge); background: var(--ed-surface); backdrop-filter: blur(8px); cursor: pointer; }
.rt-drive #event-day .ed-cam-chip .ed-cam-k { color: var(--ed-ink-3); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); }
.rt-drive #event-day .ed-cam-chip b { color: var(--ed-ink); font: var(--ed-type-label); letter-spacing: var(--ed-track-label); }
.rt-drive #event-day .ed-cam-chip:focus-visible { outline: none; box-shadow: var(--g-focus), var(--g-lift-shadow); }

/* Who's on site: a chip in the bar, a popover of role families. */
.rt-drive #event-day [data-ed-legend] { position: relative; }
.rt-drive #event-day .ed-onsite { display: inline-block; margin: 6px 0 0; }
.rt-drive #event-day .ed-onsite > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 10px; border: 1px solid var(--g-panel-edge); border-radius: 6px; background: rgba(255, 255, 255, 0.04); color: var(--ed-ink-2); cursor: pointer; list-style: none; user-select: none; }
.rt-drive #event-day .ed-onsite > summary::-webkit-details-marker { display: none; }
.rt-drive #event-day .ed-onsite > summary:hover { color: var(--ed-ink); background: rgba(255, 255, 255, 0.07); }
.rt-drive #event-day .ed-onsite > summary:focus-visible { outline: none; box-shadow: var(--g-focus); }
.rt-drive #event-day .ed-onsite-k { font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); text-transform: uppercase; }
.rt-drive #event-day .ed-onsite > summary b { color: var(--ed-ink); font: var(--ed-type-num); font-variant-numeric: tabular-nums; }
.rt-drive #event-day .ed-onsite-swatches { display: inline-flex; gap: 2px; }
.rt-drive #event-day .ed-onsite-swatches i, .rt-drive #event-day .ed-onsite-pop li i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.rt-drive #event-day .ed-onsite-pop { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 4; width: 300px; padding: 12px 14px; border: 1px solid var(--g-slate); border-radius: 10px; background: var(--ed-surface-solid); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6); }
.rt-drive #event-day .ed-onsite-head { margin: 0 0 8px; color: var(--ed-ink); font: var(--ed-type-label); letter-spacing: var(--ed-track-label); text-transform: uppercase; }
.rt-drive #event-day .ed-onsite-pop ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rt-drive #event-day .ed-onsite-pop li { display: grid; grid-template-columns: 10px 1fr auto; align-items: baseline; gap: 8px; color: var(--ed-ink); font: var(--ed-type-body); }
.rt-drive #event-day .ed-onsite-pop li[data-empty] { color: var(--ed-ink-3); }
.rt-drive #event-day .ed-onsite-pop li[data-empty] i { opacity: 0.45; }
.rt-drive #event-day .ed-onsite-name small { display: block; color: var(--ed-ink-3); font: 500 11px/1.3 var(--g-text); }
.rt-drive #event-day .ed-onsite-pop li b { font: var(--ed-type-num); font-variant-numeric: tabular-nums; }
.rt-drive #event-day .ed-onsite-fine { margin: 10px 0 0; color: var(--ed-ink-3); font: 500 11px/1.4 var(--g-text); }

/* The staff legend as S3's Ops tab draws it (weekend_panel legendHtml). */
.rt-drive #event-day .ed-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 0; color: var(--g-mist); font: 500 11px/1.3 var(--g-text); }
.rt-drive #event-day .ed-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; vertical-align: 0; }
.rt-drive #event-day .ed-legend b { font-family: var(--g-mono); font-weight: 500; }

/* The film preflight: the planned beats, the format, one primary. */
.rt-drive #event-day .ed-film-pre .card { width: min(520px, 100%); }
/* Title left, Close right — the debrief's and the shortcuts' head. */
.rt-drive #event-day .ed-film-pre .report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rt-drive #event-day .ed-film-pre .report-head h2 { min-width: 0; }
.rt-drive #event-day .ed-film-pre .report-head [data-ed-pre-close] { flex: none; }
.rt-drive #event-day .ed-film-lead { margin: 2px 0 12px; color: var(--ed-ink-2); font: var(--ed-type-body); }
.rt-drive #event-day .ed-film-beats { display: grid; gap: 0; margin: 0 0 14px; padding: 0; border-top: 1px solid var(--g-steel); list-style: none; counter-reset: none; }
.rt-drive #event-day .ed-film-beats li { display: grid; grid-template-columns: 44px 108px 1fr; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--g-steel); }
.rt-drive #event-day .ed-film-t { color: var(--ed-ink-3); font: var(--ed-type-num); font-variant-numeric: tabular-nums; }
.rt-drive #event-day .ed-film-beats b { color: var(--ed-ink); font: var(--ed-type-label); letter-spacing: var(--ed-track-label); text-transform: uppercase; }
.rt-drive #event-day .ed-film-what { color: var(--ed-ink-2); font: var(--ed-type-body); }
.rt-drive #event-day .ed-film-beats li[data-warn] .ed-film-what { color: var(--ed-reduced); }
.rt-drive #event-day .ed-film-format { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rt-drive #event-day .ed-film-format button { display: grid; justify-items: start; gap: 4px; min-height: 52px; padding: 8px 12px; text-transform: none; letter-spacing: 0; cursor: pointer; }
.rt-drive #event-day .ed-film-format button b { color: var(--ed-ink); font: 600 18px/1 var(--g-mono); }
.rt-drive #event-day .ed-film-format button span { color: var(--ed-ink-3); font: 500 11px/1.2 var(--g-text); }
.rt-drive #event-day .ed-film-format button[aria-checked="true"] { border-color: var(--ed-ink); background: var(--ed-ink); box-shadow: none; }
.rt-drive #event-day .ed-film-format button[aria-checked="true"] b, .rt-drive #event-day .ed-film-format button[aria-checked="true"] span { color: var(--g-black); }
.rt-drive #event-day .ed-film-pre button:focus-visible { outline: none; box-shadow: var(--g-focus), var(--g-lift-shadow); }
.rt-drive #event-day .ed-film-actions .ed-lock { flex: none; }

/* Filming: the picture is the film. */
.rt-drive #event-day.ed-filming > :not([data-ed-film-dialog]) { visibility: hidden; }
.rt-drive.event-day-filming #drive-nav, .rt-drive.event-day-filming #drive-minimap { visibility: hidden; }
.rt-drive #event-day .ed-rec { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.rt-drive #event-day .ed-rec:focus { outline: none; }
.rt-drive #event-day .ed-rec-frame { position: absolute; box-shadow: 0 0 0 1px rgba(244, 242, 238, 0.28); }
.rt-drive #event-day .ed-rec-pill { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 6px; background: rgba(13, 13, 15, 0.78); color: var(--ed-ink); font: var(--ed-type-label); letter-spacing: var(--ed-track-label); text-transform: uppercase; white-space: nowrap; }
.rt-drive #event-day .ed-rec-pill b { font: var(--ed-type-num); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.rt-drive #event-day .ed-rec-sep { color: var(--ed-ink-3); }
.rt-drive #event-day .ed-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ed-rec); animation: ed-rec-blink var(--ed-t-throb) steps(2, jump-none) infinite; }
@keyframes ed-rec-blink { 0% { opacity: 1; } 100% { opacity: 0.35; } }
.rt-drive #event-day .ed-rec-line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(244, 242, 238, 0.18); }
.rt-drive #event-day .ed-rec-line i { display: block; height: 100%; background: var(--ed-ink); transform: scaleX(0); transform-origin: 0 50%; }
.rt-drive #event-day .ed-rec-foot { position: absolute; left: 50%; bottom: 22px; display: flex; align-items: center; gap: 12px; transform: translateX(-50%); pointer-events: auto; }
.rt-drive #event-day .ed-rec-note { margin: 0; padding: 6px 10px; border-radius: 6px; background: rgba(13, 13, 15, 0.7); color: var(--ed-ink-2); font: var(--ed-type-body); white-space: nowrap; }
.rt-drive #event-day .ed-rec-foot button { min-height: 40px; cursor: pointer; }
.rt-drive #event-day .ed-rec-foot button:focus-visible { outline: none; box-shadow: var(--g-focus), var(--g-lift-shadow); }
.rt-drive #event-day .ed-rec-foot kbd { padding: 2px 5px; border: 1px solid var(--g-slate); border-radius: 4px; color: var(--ed-ink-3); font: 500 10px/1 var(--g-mono); }

@media (prefers-reduced-motion: reduce) {
  .rt-drive #event-day .ed-chapter, .rt-drive #event-day .ed-chapter.out, .rt-drive #event-day .ed-tag { transition: none; transform: none; }
  .rt-drive #event-day .ed-rec-dot { animation: none; }
}
@media (max-width: 700px) {
  .rt-drive #event-day [data-ed-region="chapter"] { bottom: calc(var(--ed-strip-h) + var(--ed-sheet-peek) + 56px); }
  .rt-drive #event-day .ed-chapter { padding: 12px 14px 13px 17px; }
  .rt-drive #event-day .ed-chapter-title { font-size: 22px; }
  .rt-drive #event-day .ed-film-beats li { grid-template-columns: 40px 1fr; }
  .rt-drive #event-day .ed-film-what { grid-column: 2; }
  .rt-drive #event-day .ed-rec-note { display: none; }
  .rt-drive #event-day .ed-onsite-pop { width: min(300px, calc(100vw - 48px)); }
  .rt-drive #event-day .ed-world-controls { top: 64px; right: 12px; }
}
@media (hover: none), (pointer: coarse) {
  .rt-drive #event-day .ed-chapter-btn, .rt-drive #event-day .ed-cam-chip, .rt-drive #event-day .ed-rec-foot button, .rt-drive #event-day .ed-film-format button { min-height: 44px; }
  .rt-drive #event-day .ed-onsite > summary { min-height: 44px; }
  .rt-drive #event-day .ed-tag::before { inset: -9px -4px; }
}

/* ── Event Day · S5 watch mode: the watch bar, commentary, ticker ──────── */
.rt-drive #event-day .watching { color: var(--g-bone); font: 600 14px/1 var(--g-display); letter-spacing: 0.06em; }
.rt-drive #event-day .ed-ticker { min-height: 18px; margin: 4px 0 0; color: var(--g-mist); font: 500 12px/1.4 var(--g-text); }
.rt-drive #event-day .ed-ticker .ed-line { margin: 0; }
.rt-drive #event-day .ed-ticker .ed-line b { margin-right: 6px; color: var(--g-bone); font: 600 12px/1 var(--g-display); letter-spacing: 0.08em; text-transform: uppercase; }
.rt-drive #event-day .ed-ticker .ed-line[data-speaker="colour"] b { color: var(--ed-ink-2); }
.rt-drive #event-day .ed-live { margin: 6px 0 0; }
/* The day's ticker moved to the lower-third (caption); the bar's old slot
   stays empty and takes no room. */
.rt-drive #event-day .bar-card .ed-ticker:empty { display: none; }

/* The strip while watching (SPEC §4.5): LIVE · session · LAP bug · followed
   car, then the segmented controls; at the flag, the podium. */
.rt-drive #event-day .ed-watch .top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rt-drive #event-day .ed-watch .watching { margin-left: auto; font: 600 15px/1 var(--g-display); letter-spacing: 0.06em; white-space: nowrap; }
.rt-drive #event-day .ed-live-tag { display: inline-flex; align-items: center; gap: 6px; }
.rt-drive #event-day .ed-live-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--ed-rec); animation: ed-pulse var(--ed-t-throb) ease-in-out infinite; }
.rt-drive #event-day .ed-lapbug { padding: 4px 8px; border: 1px solid var(--g-slate); border-radius: 4px; background: var(--g-black); color: var(--ed-ink); font: var(--ed-type-num); font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }
.rt-drive #event-day .ed-lapbug:empty { display: none; }
.rt-drive #event-day .ed-lapbug[data-phase="final"] { border-color: var(--ed-reduced); color: var(--ed-reduced); }
.rt-drive #event-day .ed-lapbug[data-phase="flag"] { border-color: var(--ed-ink); background: var(--ed-ink); color: var(--g-black); }
.rt-drive #event-day .ed-watch-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.rt-drive #event-day .ed-seg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--g-slate); border-radius: 9px; background: var(--g-black); }
.rt-drive #event-day .ed-seg button { min-height: 30px; padding: 0 11px; border-color: transparent; background: transparent; box-shadow: none; }
.rt-drive #event-day .ed-seg button:hover:not(:disabled) { background: var(--g-steel); color: var(--ed-ink); }
.rt-drive #event-day .ed-seg button[aria-pressed="true"], .rt-drive #event-day .ed-seg button[aria-pressed="true"]:hover { border-color: var(--ed-ink); background: var(--ed-ink); color: var(--g-black); }
.rt-drive #event-day .ed-seg kbd { margin: 0 6px 0 4px; }
.rt-drive #event-day .ed-watch button:focus-visible, .rt-drive #event-day .ed-tower .row:focus-visible, .rt-drive #event-day .ed-since-close:focus-visible { box-shadow: var(--g-focus), var(--g-lift-shadow); }

/* The podium (the flag hold's second beat). P1 carries the bone edge; the
   fastest lap is purple, the way timing screens have always shown it. */
.rt-drive #event-day .ed-flag-tag { width: 28px; height: 20px; padding: 0; border-radius: 3px; background: repeating-conic-gradient(var(--g-bone) 0 25%, var(--g-black) 0 50%) 0 0 / 10px 10px; box-shadow: 0 0 0 1px var(--g-slate); }
.rt-drive #event-day .ed-podium-note { margin-left: auto; color: var(--ed-ink-3); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); text-transform: uppercase; }
/* ol.ed-podium is the watch podium; the debrief's Weekend cards are
   li.ed-podium — unscoped, these rules squeezed each card's names into a
   three-column grid of bordered chips. */
.rt-drive #event-day ol.ed-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.rt-drive #event-day ol.ed-podium > li { display: grid; grid-template-columns: auto 4px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 2px 10px; padding: 8px 12px; border: 1px solid var(--g-slate); border-radius: 9px; background: var(--g-black); animation: ed-rise var(--ed-t-slow) var(--ed-ease-out) both; }
.rt-drive #event-day ol.ed-podium > li:nth-child(2) { animation-delay: 80ms; }
.rt-drive #event-day ol.ed-podium > li:nth-child(3) { animation-delay: 160ms; }
.rt-drive #event-day ol.ed-podium > li[data-pos="1"] { border-color: var(--ed-ink); box-shadow: inset 0 3px 0 var(--ed-ink); }
.rt-drive #event-day .ed-podium-pos { grid-row: 1 / 3; color: var(--ed-ink); font: 600 28px/1 var(--g-mono); }
.rt-drive #event-day ol.ed-podium > li i { grid-row: 1 / 3; width: 4px; height: 30px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28); }
.rt-drive #event-day .ed-podium-name { overflow: hidden; color: var(--ed-ink); font: 600 17px/1.1 var(--g-display); letter-spacing: 0.05em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.rt-drive #event-day .ed-podium-detail { color: var(--ed-ink-2); font: var(--ed-type-num); font-size: 12px; }
.rt-drive #event-day .ed-podium-fast { margin: 8px 0 0; color: var(--ed-ink-2); font: var(--ed-type-body); }
.rt-drive #event-day .ed-podium-fast b { color: var(--ed-ink); font-weight: 600; }
.rt-drive #event-day .ed-podium-fast span { color: var(--g-best); font: var(--ed-type-num); white-space: nowrap; }
.rt-drive #event-day .ed-count { min-width: 1ch; margin-left: 8px; font: 600 13px/1 var(--g-mono); }
.rt-drive #event-day [data-ed-back] .ed-count { margin-left: 2px; font-variant-numeric: tabular-nums; }
/* "Back to the day" drains as it counts down to the time-lapse. */
.rt-drive #event-day button[data-ed-back][data-draining] { position: relative; overflow: hidden; }
.rt-drive #event-day button[data-ed-back][data-draining]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--ed-drain, 1) * 100%); background: rgba(0, 0, 0, 0.35); transition: width 250ms linear; }
.rt-drive #event-day .ed-count:empty { display: none; }

/* The timing tower (Race Day's rows, race_day_ui.js raceTowerMarkup): top
   left, under the event bug; a row follows its car. */
.rt-drive #event-day .ed-tower { position: fixed; left: var(--ed-edge); top: 64px; z-index: 23; width: 216px; padding: 4px 0 6px; border: 1px solid var(--g-panel-edge); border-radius: 10px; background: var(--ed-surface); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45); backdrop-filter: blur(8px); color: var(--ed-ink); font: 500 12px/1.2 var(--g-mono); font-variant-numeric: tabular-nums; }
.rt-drive #event-day .ed-tower .head { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 12px 7px; border-bottom: 1px solid var(--g-panel-edge); font: 600 14px/1 var(--g-display); letter-spacing: 0.12em; }
.rt-drive #event-day .ed-tower .head .clock { color: var(--ed-ink-2); font: 500 12px/1 var(--g-mono); letter-spacing: 0; }
.rt-drive #event-day .ed-tower .row { display: grid; grid-template-columns: 20px 4px 42px minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; min-height: 25px; margin: 0; padding: 2px 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ed-ink); font: 500 12px/1.2 var(--g-mono); letter-spacing: 0; text-align: left; text-transform: none; transition: background var(--ed-t-fast) var(--ed-ease-out); }
.rt-drive #event-day .ed-tower button.row:hover { background: rgba(255, 255, 255, 0.07); color: var(--ed-ink); }
.rt-drive #event-day .ed-tower .row .pos { color: var(--ed-ink-3); text-align: right; }
.rt-drive #event-day .ed-tower .row i { width: 4px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28); }
.rt-drive #event-day .ed-tower .row .code { font: 600 14px/1 var(--g-display); letter-spacing: 0.06em; }
.rt-drive #event-day .ed-tower .row .gap { overflow: hidden; color: var(--ed-ink-2); text-align: right; white-space: nowrap; }
.rt-drive #event-day .ed-tower .row.watching { background: rgba(244, 242, 238, 0.12); box-shadow: inset 3px 0 0 var(--ed-ink); }
.rt-drive #event-day .ed-tower .row.done .gap { color: var(--ed-ok); }
.rt-drive #event-day .ed-tower .row-gap { padding: 0 12px; color: var(--ed-ink-3); line-height: 10px; text-align: center; }

/* Lower-thirds (the caption region): a speaker tab and the line. Signal
   orange tabs the lead commentator only; the colour commentator is purple. */
.rt-drive #event-day .ed-caption { position: fixed; left: var(--ed-edge); bottom: 140px; z-index: 23; max-width: min(640px, calc(100vw - 2 * var(--ed-edge))); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--ed-t-base) var(--ed-ease-in), transform var(--ed-t-base) var(--ed-ease-in); }
.rt-drive #event-day .ed-caption.in { opacity: 1; transform: none; pointer-events: auto; transition-timing-function: var(--ed-ease-out); }
/* One moment at a time: while a chapter card (a beat) is up, the lower-third
   steps aside — on a phone the two share the bottom third, and the caption
   took the taps meant for "Keep the time-lapse". */
.rt-drive #event-day:has([data-ed-region="chapter"] .ed-chapter.in) .ed-caption { opacity: 0; pointer-events: none; }
/* A lower-third is read, not pressed: taps go through it to whatever is
   under it (a strip menu, a card), except its own dismiss button. And a
   summoned menu beats it outright. */
.rt-drive #event-day .ed-caption.in { pointer-events: none; }
.rt-drive #event-day .ed-caption.in button { pointer-events: auto; }
.rt-drive #event-day:has(.ed-menu:not([hidden])) .ed-caption { opacity: 0; }
/* A raised running-order sheet is what the reader is reading: the
   lower-third waits (it would sit on the sheet's rows). */
.rt-drive #event-day:has(.ed-rail[data-sheet="1"][data-open="1"]) .ed-caption { opacity: 0; pointer-events: none; }
/* …and a strip menu opens over the running order (the phone's sheet sits
   on the strip and took the ⋯ menu's "Leave weekend"). */
.rt-drive #event-day[data-layout="feed"] > [data-ed-region="strip"]:has(.ed-menu:not([hidden])) { z-index: 30; }
.rt-drive #event-day:has(.ed-menu:not([hidden])) .ed-caption button { pointer-events: none; }
.rt-drive #event-day .ed-l3 { display: flex; align-items: stretch; margin: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); }
.rt-drive #event-day .ed-l3-tab { display: flex; flex: none; align-items: center; padding: 0 12px; background: var(--ed-action); color: var(--ed-on-action); font: var(--ed-type-label); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.rt-drive #event-day .ed-l3[data-speaker="colour"] .ed-l3-tab { background: var(--ed-ink); color: var(--g-black); }
.rt-drive #event-day .ed-l3-text { display: flex; align-items: center; min-height: 40px; padding: 9px 14px; background: var(--ed-surface); color: var(--ed-ink); font: 500 15px/1.35 var(--g-text); backdrop-filter: blur(10px); }
.rt-drive #event-day .ed-l3--pending .ed-l3-tab { background: var(--ed-ink); color: var(--g-black); }
.rt-drive #event-day .ed-l3--pending .ed-l3-text { gap: 10px; }
.rt-drive #event-day .ed-l3-spin { flex: none; align-self: center; width: 16px; height: 16px; margin-right: 12px; margin-left: -4px; border: 2px solid var(--g-slate); border-top-color: var(--ed-ink); border-radius: 50%; background: var(--ed-surface); animation: ed-spin var(--ed-t-spin) linear infinite; }
.rt-drive #event-day .ed-l3--pending { background: var(--ed-surface); }
.rt-drive #event-day .ed-l3--flag .ed-l3-tab { position: relative; padding-left: 42px; background: var(--ed-ink); color: var(--g-black); }
.rt-drive #event-day .ed-l3--flag .ed-l3-tab::before { content: ""; position: absolute; left: 10px; top: 50%; width: 22px; height: 16px; margin-top: -8px; border-radius: 2px; background: repeating-conic-gradient(var(--g-black) 0 25%, var(--ed-ink) 0 50%) 0 0 / 8px 8px; box-shadow: 0 0 0 1px var(--g-black); }
.rt-drive #event-day .ed-l3--flag .ed-l3-text { font: 600 20px/1.1 var(--g-display); letter-spacing: 0.05em; text-transform: uppercase; }
/* "Since last time": the weekend opens on what the studio changed. */
/* Scoped to the lower-third: the debrief's own "Since last time" section
   carries the same class, and this rule made it a three-column card that
   pushed Summary past a 900 px screen. One colour for the idea in both
   places: the informational blue, not the status green. */
.rt-drive #event-day .ed-caption .ed-since { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px 14px; padding: 10px 8px 10px 14px; border: 1px solid var(--g-slate); border-left: 3px solid var(--ed-ink-3); border-radius: 8px; background: var(--ed-surface); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); backdrop-filter: blur(10px); }
.rt-drive #event-day .ed-since-label { padding-top: 3px; color: var(--ed-ink-2); font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); text-transform: uppercase; white-space: nowrap; }
.rt-drive #event-day .ed-caption .ed-since ul { margin: 0; padding: 0; list-style: none; color: var(--ed-ink); font: 500 14px/1.45 var(--g-text); }
.rt-drive #event-day .ed-caption .ed-since .ed-since-close { min-height: 26px; width: 26px; padding: 0; border-color: transparent; background: transparent; box-shadow: none; font: 400 18px/1 var(--g-text); }
@media (prefers-reduced-motion: reduce) {
  .rt-drive #event-day .ed-caption, .rt-drive #event-day .ed-caption.in { transform: none; transition: opacity 1ms; }
  .rt-drive #event-day .ed-live-tag i, .rt-drive #event-day .ed-l3-spin, .rt-drive #event-day ol.ed-podium > li { animation: none; }
}
@media (max-width: 720px) {
  .rt-drive #event-day .ed-tower { width: 150px; }
  .rt-drive #event-day .ed-tower .row { grid-template-columns: 16px 4px 36px minmax(0, 1fr); gap: 6px; padding: 2px 8px; }
  .rt-drive #event-day .ed-tower .head { padding: 5px 8px 6px; }
  .rt-drive #event-day .ed-caption { right: var(--ed-edge); }
  .rt-drive #event-day .ed-l3-text { font-size: 14px; }
  /* A phone's lower-third: the speaker is a small label over the line, not
     a 180 px orange block beside it (the one orange stays, a third its size). */
  .rt-drive #event-day .ed-l3:not(.ed-l3--flag) { flex-direction: column; }
  .rt-drive #event-day .ed-l3:not(.ed-l3--flag) .ed-l3-tab { align-self: flex-start; padding: 4px 10px; border-radius: 6px 6px 0 0; font: var(--ed-type-micro); letter-spacing: var(--ed-track-micro); }
  .rt-drive #event-day .ed-l3:not(.ed-l3--flag) .ed-l3-text { min-height: 0; padding: 8px 12px; border-radius: 0 6px 6px 6px; }
  .rt-drive #event-day .ed-l3:not(.ed-l3--flag) { overflow: visible; box-shadow: none; }
  .rt-drive #event-day .ed-watch .watching { margin-left: 0; }
  .rt-drive #event-day .ed-watch-controls .spacer, .rt-drive #event-day .ed-seg kbd, .rt-drive #event-day .ed-watch kbd { display: none; }
  .rt-drive #event-day ol.ed-podium { grid-template-columns: 1fr; gap: 4px; }
  .rt-drive #event-day ol.ed-podium > li { grid-template-columns: 22px 4px minmax(0, 1fr) auto; grid-template-rows: auto; padding: 6px 10px; }
  .rt-drive #event-day .ed-podium-pos, .rt-drive #event-day ol.ed-podium > li i { grid-row: auto; }
  .rt-drive #event-day .ed-podium-pos { font-size: 18px; }
  .rt-drive #event-day ol.ed-podium > li i { height: 18px; }
}
@media (hover: none), (pointer: coarse) {
  .rt-drive #event-day .ed-seg button { min-width: 44px; min-height: 44px; }
  .rt-drive #event-day .ed-caption .ed-since .ed-since-close { min-height: 44px; width: 44px; }
}
/* ══ end Event Day ═══════════════════════════════════════════════════════ */

/* ── Touch: no keyboard hints, 44 px targets ─────────────────────────────── */
@media (hover: none), (pointer: coarse), (max-width: 900px) and (max-height: 600px) {
  .rt-drive .mobile-drive-stick { display: block; }
  .rt-drive .mobile-actions { display: flex; }
  .rt-drive .hint { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .rt-drive kbd.key-hint, .rt-drive #replay-bar kbd, .rt-drive #race-spectate kbd, .rt-drive #event-day kbd { display: none; }
  /* The segmented rows name the dialog as well as the button: their own
     30 px rule outranks `.drive-dialog button` on a wide touch screen. */
  .rt-drive .drive-dialog button, .rt-drive .drive-dialog .segmented button, .rt-drive .quality-presets .custom-tag { min-height: 44px; }
  .rt-drive #race-tower .head .mode { min-width: 44px; min-height: 44px; }
  .rt-drive #race-setup .toggle { min-height: 44px; }
}
@media (max-width: 720px) {
  .rt-drive #controls-card .cols { grid-template-columns: 1fr; }
  /* On a touch screen the touch column comes first. */
  .rt-drive #controls-card .col.here { order: -1; }
}

/* ── Phone and narrow tablet: a compact top bar + a "More" sheet ─────────── */
@media (max-width: 1023px) {
  /* No backdrop-filter on the bar: it would become the containing block of
     the fixed "More" sheet inside it. */
  .rt-drive .nav { top: 0; left: 0; right: 0; flex-wrap: nowrap; gap: 6px; padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); border-bottom: 1px solid var(--g-slate); background: rgba(20, 20, 22, 0.94); }
  .rt-drive .nav a, .rt-drive .nav button, .rt-drive .nav select { min-height: 44px; }
  .rt-drive .nav .nav-primary { display: flex; gap: 6px; min-width: 0; }
  .rt-drive .nav .nav-launch { display: flex; gap: 6px; }
  .rt-drive #drive-more { display: inline-flex; margin-left: auto; }
  .rt-drive #drive-more[aria-expanded="true"] { border-color: var(--g-bone); background: var(--g-bone); color: var(--g-black); }
  .rt-drive .nav > .promo { display: none; }
  .rt-drive .nav-more { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 14px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--g-slate); border-radius: 14px 14px 0 0; background: var(--g-carbon); box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.5); }
  .rt-drive.more-open .nav-more { display: grid; }
  /* The sheet lives in the bar; the bar climbs over the touch controls. */
  .rt-drive.more-open .nav { z-index: 31; }
  .rt-drive .nav-more .promo--sheet { display: flex; justify-content: center; grid-column: 1 / -1; }
  .rt-drive .nav-more > * { min-height: 44px; }
  .rt-drive .nav-more #quality-open .lbl { display: inline; }
  .rt-drive .drive-dialog .segmented button, .rt-drive .quality-presets .custom-tag { min-height: 44px; }
  .rt-drive .quality-row { grid-template-columns: 1fr; gap: 6px; }
  .rt-drive .hud { top: 72px; }
  .rt-drive #drive-minimap { top: 290px; }
  .rt-drive #race-setup button, .rt-drive #race-setup select, .rt-drive #race-results button, .rt-drive #race-spectate button, .rt-drive #replay-bar button, .rt-drive .drive-dialog button, .rt-drive #controls-card button { min-height: 44px; }
  .rt-drive #race-setup input[type=range] { height: 44px; }
  .rt-drive #race-setup .toggle input { width: 22px; height: 44px; }
  .rt-drive #race-tower { top: 72px; }
}
@media (max-width: 720px) {
  /* The panel shrinks rather than reflowing, so it reads the same. */
  .rt-drive .hud { transform: scale(0.62); transform-origin: top right; }
  .rt-drive #drive-minimap { top: 290px; width: 96px; height: 96px; }
  .rt-drive #delta-bar { top: auto; bottom: 170px; width: 220px; }
  .rt-drive #start-lights { top: 43%; }
  .rt-drive .gantry { gap: 6px; padding: 8px 10px; }
  .rt-drive .gantry .pod { gap: 5px; padding: 5px; }
  .rt-drive .gantry .pod i { width: 22px; height: 22px; }
  .rt-drive #lap-banner { min-width: 240px; }
  .rt-drive #lap-banner .lb-time { font-size: 34px; }
  /* A 20-car tower would reach the lights: the top six, you and the car you
     watch. */
  .rt-drive #race-tower { width: 150px; }
  .rt-drive #race-tower .row:nth-child(n+8):not(.you):not(.watching) { display: none; }
  .rt-drive #race-setup .cards, .rt-drive #race-setup .fields { grid-template-columns: 1fr; }
  .rt-drive #race-setup .cards button { min-height: 60px; }
}
@media (max-width: 480px) {
  .rt-drive .nav .lbl { display: none; }
  .rt-drive .nav a, .rt-drive .nav button { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .rt-drive #event-day button[data-ed-back][data-draining]::after { transition: none; }
}

/* Studio → drive (fidelity P1): the creator's own Studio 3D frame under the
   loading screen, darkened so the steps stay legible. drive_v3.js sets the
   variable from the one-shot hand-off; without it nothing changes. */
.rt-drive #drive-loading.has-poster { background: linear-gradient(rgba(13, 13, 15, 0.55), rgba(13, 13, 15, 0.8)), var(--drive-poster) center / cover no-repeat, var(--g-asphalt); }

/* Lifetime depth (PLAN-lifetime-depth.md, Wave A): the in-drive Lifetime ask
   (lib/drive_on_demand/lifetime_ask.js) on a locked Race Day choice. A .drive-dialog, so the
   backdrop, card, heading and the ONE orange go button are the shared
   rules above; only the price, the list and the quiet "Not now" are its own.
   Above Race setup (z 40), which it opens over. */
.rt-drive .drive-dialog.lifetime-ask { z-index: 42; }
.rt-drive .lifetime-ask .card { display: grid; gap: 12px; width: min(420px, 100%); }
.rt-drive .lifetime-ask h2 { margin: 0; }
.rt-drive .lifetime-ask-kicker { display: flex; align-items: center; gap: 6px; color: var(--g-signal); font: 600 12px/1 var(--g-display); letter-spacing: 0.12em; text-transform: uppercase; }
.rt-drive .lifetime-ask-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.rt-drive .lifetime-ask-price b { color: var(--g-bone); font: 600 36px/1 var(--g-mono); letter-spacing: -0.03em; }
.rt-drive .lifetime-ask-price s { color: var(--g-smoke); font: 500 16px/1 var(--g-mono); }
.rt-drive .lifetime-ask-price span { color: var(--g-mist); font: 600 14px/1 var(--g-display); letter-spacing: 0.06em; text-transform: uppercase; }
.rt-drive .lifetime-ask-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.rt-drive .lifetime-ask-list li { display: grid; grid-template-columns: 12px 1fr; gap: 8px; align-items: baseline; color: var(--g-bone); font-size: 14px; }
.rt-drive .lifetime-ask-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--g-bone); transform: translateY(-2px); }
.rt-drive .lifetime-ask-fine { margin: 0; color: var(--g-smoke); font-size: 12px; }
.rt-drive .lifetime-ask-actions { display: grid; gap: 6px; }
.rt-drive .lifetime-ask-form { margin: 0; }
.rt-drive .drive-dialog .lifetime-ask-go { width: 100%; min-height: 48px; font-size: 17px; }
.rt-drive .drive-dialog .lifetime-ask-go[aria-busy="true"] { opacity: 0.85; cursor: progress; }
.rt-drive .drive-dialog a.lifetime-ask-go { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--g-signal-deep); border-radius: 7px; font: 600 17px/1 var(--g-display); letter-spacing: 0.05em; text-decoration: none; text-transform: uppercase; }
.rt-drive .drive-dialog .lifetime-ask-later { min-height: 40px; border-color: transparent; background: transparent; box-shadow: none; color: var(--g-mist); }
@media (max-width: 720px) {
  .rt-drive .drive-dialog.lifetime-ask { align-items: flex-end; padding: 0; }
  .rt-drive .lifetime-ask .card { width: 100%; padding-bottom: calc(20px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; }
  .rt-drive .drive-dialog .lifetime-ask-later { min-height: 44px; }
}

/* ── Race control (Wave E, lib/drive_on_demand/race_control_ui.js) ──────────────────────────
   The director's desk (mockup docs/concepts/idealised-state/
   mock-5-race-control.html). The host owns the root element and where it
   sits; mountRaceControl gives it the class `rc`. Docked to the right by
   default, map on the left of it, flags / incidents / stewards / pit lane on
   the right. Flag colours are what the flags ARE (green, yellow, the VSC's
   amber-yellow, red) — flags, not button colours; the one orange stays the
   lock tag's. Everything race control draws is styled inside this block. */
.rt-drive .rc {
  position: fixed;
  top: 64px;
  right: 16px;
  bottom: 16px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  /* Docked right at no more than 640 px, so the spectate bar, radio and
     flag banner have the left of the screen (the race-control-on rules
     beside #race-spectate re-dock them there). */
  width: min(640px, calc(100vw - 32px));
  border: 1px solid var(--g-steel);
  border-radius: 10px;
  background: var(--g-glass);
  backdrop-filter: blur(6px);
  color: var(--g-bone);
  overflow: hidden;
  --rc-green: var(--g-power);
  --rc-yellow: #facc15;
  --rc-vsc: #ca8a04;
  --rc-red: #ef4444;
  --rc-pit: var(--g-flat);
}
.rt-drive .rc-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--g-steel); }
.rt-drive .rc-head h2 { margin: 0; font: 600 22px/1 var(--g-display); letter-spacing: 0.04em; text-transform: uppercase; }
.rt-drive .rc-chip { padding: 5px 10px; border-radius: 6px; background: var(--g-steel); color: var(--g-mist); font: 600 13px/1 var(--g-display); letter-spacing: 0.06em; text-transform: uppercase; }
.rt-drive .rc-chip[data-flag="green"] { background: var(--rc-green); color: var(--g-on-signal); }
.rt-drive .rc-chip[data-flag="yellow"] { background: var(--rc-yellow); color: var(--g-on-signal); }
.rt-drive .rc-chip[data-flag="vsc"], .rt-drive .rc-chip[data-flag="safety_car"] { background: var(--rc-vsc); color: var(--g-on-signal); }
.rt-drive .rc-chip[data-flag="red"] { background: var(--rc-red); color: var(--g-bone); }
.rt-drive .rc-chip[data-flag="chequered"] { background: var(--g-bone); color: var(--g-black); }
.rt-drive .rc-clock { color: var(--g-mist); font: 500 13px/1 var(--g-mono); font-variant-numeric: tabular-nums; }
.rt-drive .rc-stewards { margin-left: auto; color: var(--g-smoke); font: 600 12px/1 var(--g-display); letter-spacing: 0.1em; text-transform: uppercase; }
.rt-drive .rc-collapse { min-height: 32px; padding: 6px 12px; border: 1px solid var(--g-steel); border-radius: 6px; background: transparent; color: var(--g-bone); font: 600 12px/1 var(--g-display); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.rt-drive .rc-collapse:hover { background: var(--g-steel); }
.rt-drive .rc[data-collapsed] { bottom: auto; }
.rt-drive .rc[data-collapsed] .rc-body { display: none; }
/* One column: at ≤ 640 px two columns left the flag grid wider than its
   track, so it overflowed under the map. The map is a strip on top; the
   controls scroll beneath it. */
.rt-drive .rc-body { display: grid; flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(140px, 32%) minmax(0, 1fr); }
.rt-drive .rc-map { display: flex; flex-direction: column; min-height: 0; padding: 12px 16px; border-bottom: 1px solid var(--g-steel); }
.rt-drive .rc-map svg { flex: 1; width: 100%; min-height: 0; }
.rt-drive .rc-side { display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 12px 16px; overflow-y: auto; }
.rt-drive .rc-lbl { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--g-smoke); font: 600 12px/1.2 var(--g-display); letter-spacing: 0.12em; text-transform: uppercase; }
.rt-drive .rc-lbl:first-child { margin-top: 0; }

/* The map. */
.rt-drive .rc-map-road { fill: none; stroke: var(--g-steel); stroke-linejoin: round; }
.rt-drive .rc-map-line { fill: none; stroke: var(--g-bone); stroke-linejoin: round; }
.rt-drive .rc-map-sector { fill: none; stroke: transparent; stroke-linecap: round; stroke-linejoin: round; }
.rt-drive .rc-map-sector[data-on][data-flag="yellow"] { stroke: var(--rc-yellow); }
.rt-drive .rc-map-sector[data-on][data-flag="red"] { stroke: var(--rc-red); }
.rt-drive .rc-map-pit { fill: none; stroke: var(--rc-pit); }
.rt-drive .rc[data-pits-closed] .rc-map-pit { stroke: var(--rc-red); }
.rt-drive .rc-map-label { fill: var(--rc-pit); font-family: var(--g-mono); }
.rt-drive .rc[data-pits-closed] .rc-map-label { fill: var(--rc-red); }
.rt-drive .rc-post { fill: var(--rc-green); stroke: rgba(0, 0, 0, 0.6); stroke-width: 0.5; }
.rt-drive .rc-post[data-flag="yellow"] { fill: var(--rc-yellow); }
.rt-drive .rc-post[data-flag="sc"] { fill: var(--rc-vsc); }
.rt-drive .rc-post[data-flag="red"] { fill: var(--rc-red); }
.rt-drive .rc-map-cars circle { stroke: #000; stroke-width: 0.5; }
.rt-drive .rc-map-cars .sc { fill: var(--rc-vsc); }
.rt-drive .rc-map-cars .you { fill: var(--g-signal); }
.rt-drive .rc-map-incident circle { fill: none; stroke: var(--rc-red); }
.rt-drive .rc-map-incident .dot { fill: var(--rc-red); }
.rt-drive .rc-map-incident text { fill: var(--rc-red); font-family: var(--g-mono); }
.rt-drive .rc-map-incident[hidden] { display: none; }

/* The buttons (the moulded button, here), and the flags as blocks in their
   own colours. */
.rt-drive .rc button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--g-slate);
  border-radius: 7px;
  background: var(--g-mould), var(--g-steel);
  box-shadow: var(--g-lift-shadow);
  color: var(--g-mist);
  font: 600 13px/1 var(--g-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform var(--g-press), box-shadow var(--g-press);
}
.rt-drive .rc button:hover:not(:disabled) { background: var(--g-lift), var(--g-mould), var(--g-steel); color: var(--g-bone); }
.rt-drive .rc button:active:not(:disabled) { transform: translateY(1px) scale(0.975); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45); }
.rt-drive .rc button:focus-visible { outline: none; box-shadow: var(--g-focus), var(--g-lift-shadow); }
.rt-drive .rc-flags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rt-drive .rc .rc-flag { min-height: 56px; font-size: 16px; }
.rt-drive .rc .rc-green { border-color: var(--rc-green); background: var(--g-mould), var(--rc-green); color: var(--g-on-signal); }
.rt-drive .rc .rc-vsc { border-color: var(--rc-vsc); background: var(--g-mould), var(--rc-vsc); color: var(--g-on-signal); }
.rt-drive .rc .rc-safety_car { border-color: var(--g-bone); background: var(--g-mould), var(--g-bone); color: var(--g-black); }
.rt-drive .rc .rc-red_flag { border-color: var(--rc-red); background: var(--g-mould), var(--rc-red); color: var(--g-bone); }
.rt-drive .rc :is(.rc-green, .rc-vsc, .rc-safety_car, .rc-red_flag):hover:not(:disabled) { filter: brightness(1.08); }
.rt-drive .rc .rc-yellow { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--rc-yellow); border-radius: 7px; background: rgba(250, 204, 21, 0.12); color: var(--rc-yellow); font: 600 14px/1 var(--g-display); letter-spacing: 0.05em; text-transform: uppercase; }
.rt-drive .rc .rc-sectors { display: flex; gap: 4px; }
.rt-drive .rc .rc-sector-btn { flex: 1; min-height: 26px; padding: 0 4px; border-color: var(--rc-yellow); color: var(--rc-yellow); }
.rt-drive .rc button:disabled { opacity: 0.4; border-style: dashed; background: var(--g-steel); box-shadow: none; color: var(--g-smoke); cursor: not-allowed; filter: none; }
/* A sector already showing yellow: shown lit, not greyed (it's on, not off). */
.rt-drive .rc .rc-sector-btn[aria-pressed="true"] { border-style: solid; background: var(--rc-yellow); color: var(--g-on-signal); opacity: 1; cursor: default; }
.rt-drive .rc kbd { margin-left: 4px; }
.rt-drive .rc-restart { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--rc-red); border-radius: 8px; background: rgba(239, 68, 68, 0.1); }
.rt-drive .rc-restart-note { flex-basis: 100%; color: var(--g-bone); font-size: 13px; }
.rt-drive .rc-note { margin: 0; color: var(--g-mist); font-size: 12px; }

/* Incidents and the stewards. */
.rt-drive .rc-incidents, .rt-drive .rc-cases { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rt-drive .rc-incident { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--g-steel); border-left: 4px solid var(--rc-yellow); border-radius: 8px; background: var(--g-carbon); }
.rt-drive .rc-incident[data-kind="contact"] { border-left-color: var(--rc-red); }
.rt-drive .rc-sector-tag { width: 30px; font: 600 18px/1 var(--g-display); }
.rt-drive .rc-what { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.rt-drive .rc-what b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.rt-drive .rc-what small { color: var(--g-smoke); font: 500 11px/1 var(--g-mono); }
.rt-drive .rc .rc-incident button[aria-pressed="true"], .rt-drive .rc .rc-live { border-color: var(--g-bone); background: var(--g-bone); color: var(--g-black); }
.rt-drive .rc-case { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--g-steel); }
.rt-drive .rc-car { width: 44px; font: 600 15px/1 var(--g-display); letter-spacing: 0.04em; }
.rt-drive .rc-reason { flex: 1; min-width: 0; color: var(--g-mist); font-size: 12px; }
.rt-drive .rc-seconds { color: var(--g-bone); font: 500 12px/1 var(--g-mono); }
.rt-drive .rc .rc-apply { border-color: var(--g-bone); background: var(--g-bone); color: var(--g-black); }
.rt-drive .rc-empty { color: var(--g-smoke); font-size: 12px; }

/* The pit lane, and the lock for a free reader. */
.rt-drive .rc-pit { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.rt-drive .rc-pit-state { color: var(--rc-pit); font: 600 14px/1 var(--g-display); letter-spacing: 0.08em; text-transform: uppercase; }
.rt-drive .rc-pit-state[data-open="false"] { color: var(--rc-red); }
.rt-drive .rc-pit-cars { color: var(--g-mist); }
.rt-drive .rc-lock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--g-smoke); font-size: 13px; }
.rt-drive .rc-lock-tag { display: inline-flex; align-items: center; gap: 5px; color: var(--g-signal); font: 600 12px/1 var(--g-display); letter-spacing: 0.08em; text-transform: uppercase; }
.rt-drive .rc-lock-tag::before { content: ""; display: inline-block; width: 9px; height: 11px; border: 2px solid currentColor; border-top-width: 5px; border-radius: 3px 3px 2px 2px; }
/* Locked: the commands are asks — quieter, still pressable. */
.rt-drive .rc[data-locked] .rc-flags { opacity: 0.72; }
@media (max-width: 900px) {
  .rt-drive .rc { top: 56px; right: 8px; bottom: 8px; width: calc(100vw - 16px); }
  .rt-drive .rc-body { grid-template-columns: 1fr; overflow-y: auto; }
  .rt-drive .rc-map { min-height: 240px; border-right: 0; border-bottom: 1px solid var(--g-steel); }
  .rt-drive .rc .rc-flag, .rt-drive .rc button { min-height: 44px; }
}
/* ── end Race control ─────────────────────────────────────────────────────── */

/* ── Garage (Labs :garage, lib/drive_on_demand/garage_ui.js) ─────────────────
   The livery sheet (a .drive-dialog, drive's one dialog pattern), the setup
   card's class picker (its chips are the card's own .chip) and the tower's
   class badge. Nothing here is drawn without the garage. */
.rt-drive #race-tower .row .badges .cls { background: rgba(244, 242, 238, 0.12); color: var(--g-mist); }
.rt-drive .garage-classes { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-drive .garage-classes .chip[aria-disabled="true"] { cursor: default; }
/* A gated reader's one multi-class lock, said once under the row. */
.rt-drive .garage-classes-lock { display: flex; align-items: center; gap: 5px; margin: 6px 0 0; color: var(--g-signal); }
.rt-drive .garage-classes-lock .lock-word { color: var(--g-signal); font: 600 10px/1 var(--g-display); letter-spacing: 0.1em; text-transform: uppercase; }
.rt-drive .drive-dialog.garage-livery { z-index: 41; }
.rt-drive .garage-livery .card { display: grid; gap: 8px; width: min(440px, 100%); }
.rt-drive .garage-livery h2 { margin: 0; }
.rt-drive .garage-livery-preview { display: grid; place-items: center; height: 64px; border-radius: 8px; background: linear-gradient(115deg, var(--base) 0 62%, var(--accent) 62% 70%, var(--base) 70%); border: 1px solid var(--g-slate); }
.rt-drive .garage-livery-number { display: grid; place-items: center; min-width: 52px; height: 40px; padding: 0 8px; border-radius: 6px; background: var(--accent); color: var(--base); font: 600 26px/1 var(--g-display); letter-spacing: 0.02em; }
.rt-drive .garage-livery-label { margin: 6px 0 0; color: var(--g-smoke); font: 600 12px/1 var(--g-display); letter-spacing: 0.12em; text-transform: uppercase; }
.rt-drive .garage-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-drive .drive-dialog .garage-swatch { width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; border: 2px solid var(--g-slate); border-radius: 6px; background: var(--swatch); cursor: pointer; }
.rt-drive .drive-dialog .garage-swatch[aria-checked="true"] { border-color: var(--g-bone); box-shadow: 0 0 0 2px var(--g-black) inset; }
.rt-drive .garage-livery-input { width: 96px; height: 36px; padding: 0 10px; border: 1px solid var(--g-slate); border-radius: 8px; background: var(--g-black); color: var(--g-bone); font: 500 16px/1 var(--g-mono); }
@media (max-width: 900px), (pointer: coarse) {
  .rt-drive .drive-dialog .garage-swatch { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .rt-drive .garage-livery-input { height: 44px; }
}
/* ── end Garage ───────────────────────────────────────────────────────────── */

/* ── Spectator seat (Lifetime depth round 2, WP seat, lib/drive_on_demand/spectator_ui.js) ───
   A race from a seat in your own grandstand (mockup docs/concepts/
   idealised-state/mock-4-spectator.html). The host owns the root;
   mountSpectator gives it the class `sp` and the body `spectator-on`. The
   venue is the picture: panels sit in the corners (the ticket right of the
   timing tower, the big screen top right, around-you bottom left, the crowd
   bottom right), the invite bar above the spectate bar. The root lets
   pointer events through to the scene (drag to look); the panels take
   them. The one orange is the invite (or the Lifetime button when the free
   seat is spent). Everything the seat draws is styled inside this block. */
.rt-drive .sp { position: fixed; inset: 0; z-index: 25; pointer-events: none; color: var(--g-bone); font: 400 13px/1.35 var(--g-text); }
.rt-drive .sp-panel, .rt-drive .sp-pad { position: absolute; pointer-events: auto; border: 1px solid var(--g-panel-edge); border-radius: 10px; background: var(--g-glass); backdrop-filter: blur(8px); }
.rt-drive .sp-panel { padding: 12px 14px; }
.rt-drive .sp-kicker { margin: 0 0 4px; color: var(--g-signal); font: 600 11px/1.2 var(--g-display); letter-spacing: 0.14em; text-transform: uppercase; }
.rt-drive .sp-ticket { top: 96px; left: 236px; width: min(330px, calc(100vw - 248px)); }
.rt-drive .sp-ticket h2 { margin: 0; font: 600 24px/1.05 var(--g-display); letter-spacing: 0.04em; text-transform: uppercase; }
.rt-drive .sp-line { margin: 4px 0 0; color: var(--g-mist); font: 500 13px/1.35 var(--g-mono); }
.rt-drive .sp-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rt-drive .sp button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--g-slate); border-radius: 7px; background: var(--g-mould), var(--g-steel); box-shadow: var(--g-lift-shadow); color: var(--g-mist); font: 600 12px/1 var(--g-display); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: transform var(--g-press), box-shadow var(--g-press); }
.rt-drive .sp button:hover:not(:disabled) { background: var(--g-lift), var(--g-mould), var(--g-steel); color: var(--g-bone); }
.rt-drive .sp button:active:not(:disabled) { transform: translateY(1px) scale(0.975); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45); }
.rt-drive .sp button:focus-visible { outline: none; box-shadow: var(--g-focus), var(--g-lift-shadow); }
.rt-drive .sp button:disabled { cursor: not-allowed; opacity: 0.5; }
.rt-drive .sp button[aria-pressed="true"] { border-color: var(--g-bone); background: var(--g-bone); color: var(--g-black); }
.rt-drive .sp button.go { border-color: var(--g-signal-deep); background: var(--g-mould-go), var(--g-signal); color: var(--g-on-signal); }
.rt-drive .sp button.go:hover:not(:disabled) { background: var(--g-lift), var(--g-mould-go), var(--g-signal); color: var(--g-on-signal); }
.rt-drive .sp kbd { padding: 1px 4px; border: 1px solid currentColor; border-radius: 3px; font: 500 10px/1 var(--g-mono); opacity: 0.7; }
.rt-drive .sp-lock { display: inline-block; width: 9px; height: 11px; border: 2px solid var(--g-signal); border-top-width: 5px; border-radius: 3px 3px 2px 2px; }

/* The big screen: the TV / helicopter feed, ≤ 10 Hz, top right. */
.rt-drive .sp-screen { top: 64px; right: 12px; width: 300px; padding: 6px; overflow: hidden; border: 3px solid var(--g-black); background: var(--g-black); }
.rt-drive .sp-screen canvas { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; background: var(--g-carbon); }
.rt-drive .sp-screen-tag { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 3px 7px; border-radius: 4px; background: var(--g-bone); color: var(--g-black); font: 600 11px/1 var(--g-display); letter-spacing: 0.1em; text-transform: uppercase; }
.rt-drive .sp-screen-caption { position: absolute; bottom: 12px; left: 12px; padding: 3px 7px; border-radius: 4px; background: rgba(20, 20, 22, 0.86); font: 600 12px/1 var(--g-mono); }
.rt-drive .sp-screen-caption:empty { display: none; }
.rt-drive .sp-screen-note { margin: 6px 4px 2px; color: var(--g-smoke); font-size: 11px; }
/* Live timing only (no picture): the caption leaves the picture and sits
   in line above the note, rather than on top of it. */
.rt-drive .sp-screen:has(.sp-screen-note) .sp-screen-caption { position: static; display: inline-block; margin: 6px 4px 0; }

/* Around you: the nearest points of interest, walk, go to. */
.rt-drive .sp-around { left: 12px; bottom: 20px; width: min(340px, calc(100vw - 24px)); }
.rt-drive .sp-pois { display: grid; gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; }
.rt-drive .sp .sp-pois button, .rt-drive .sp-sheet .sp-pois button { justify-content: space-between; width: 100%; min-height: 34px; border-color: transparent; background: transparent; box-shadow: none; color: var(--g-bone); font: 500 13px/1.2 var(--g-text); letter-spacing: 0; text-transform: none; }
.rt-drive .sp-poi-far { color: var(--g-mist); font: 500 12px/1 var(--g-mono); }

/* The crowd: how many, a bar a stand (lit as the wave passes), the actions. */
.rt-drive .sp-crowd { right: 12px; bottom: 20px; width: min(400px, calc(100vw - 24px)); }
.rt-drive .sp-crowd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rt-drive .sp-crowd-count { font: 500 13px/1 var(--g-mono); }
.rt-drive .sp-bars { display: flex; align-items: flex-end; gap: 3px; height: 40px; margin-top: 8px; }
.rt-drive .sp-bars i { flex: 1; min-width: 3px; border-radius: 2px 2px 0 0; background: var(--g-slate); transition: background var(--g-press); }
.rt-drive .sp-bars i[data-mine] { background: var(--g-mist); }
.rt-drive .sp-bars i[data-lit] { background: var(--g-signal); }

/* Invite friends to this seat: above the spectate bar. */
.rt-drive .sp-invite { left: 50%; bottom: 208px; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 8px 8px 8px 14px; transform: translateX(-50%); }
.rt-drive .sp-invite[hidden] { display: none; }
.rt-drive .sp-url { overflow: hidden; color: var(--g-mist); font: 500 13px/1 var(--g-mono); text-overflow: ellipsis; white-space: nowrap; }

/* The walking pad: hold to walk / turn. */
.rt-drive .sp-pad { left: 50%; bottom: 20px; display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 4px; padding: 6px; transform: translateX(-50%); }
.rt-drive .sp-pad[hidden] { display: none; }
.rt-drive .sp-pad button { min-height: 44px; padding: 0; touch-action: none; }
.rt-drive .sp-pad button:nth-child(1) { grid-column: 2; }
.rt-drive .sp-pad button:nth-child(2) { grid-column: 1; grid-row: 2; }
.rt-drive .sp-pad button:nth-child(3) { grid-column: 2; grid-row: 2; }
.rt-drive .sp-pad button:nth-child(4) { grid-column: 3; grid-row: 2; }

/* Change seat / Go to: sheets on drive's dialog pattern. */
.rt-drive .sp-sheet .card { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 96px); overflow-y: auto; }
.rt-drive .sp-sheet .sp-pois button { cursor: pointer; }
.rt-drive .sp-sheet .sp-pois button:hover:not(:disabled) { background: var(--g-steel); }
.rt-drive .sp-seat-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.rt-drive .sp-seat-pick select { min-height: 32px; padding: 0 8px; border: 1px solid var(--g-slate); border-radius: 7px; background: var(--g-black); color: var(--g-bone); font: 500 13px/1 var(--g-mono); cursor: pointer; }

/* With the seat on, the radio sits above the crowd panel. */
.rt-drive.spectator-on #race-radio { bottom: 272px; }
/* The seat is its own camera: the spectate bar's lens buttons would do
   nothing, and End race is in the nav. The tower stays (the scoreboard).
   A SPENT free seat has no seat camera, so the bar comes back and the
   panels built round the seat go (a black big screen read as a bug). */
.rt-drive.spectator-on:not(.spectator-spent) #race-spectate { display: none; }
.rt-drive .sp[data-spent] :is(.sp-screen, .sp-crowd, .sp-around, .sp-invite, .sp-pad) { display: none; }
/* The start lights sit under the ticket (its measured bottom, set by
   spectator_ui.js): at 15 % / 92 px they ran into it, and at 1024 px the
   ticket (z 25) covered the lights and Skip start. */
.rt-drive.spectator-on #start-lights { top: calc(var(--sp-ticket-bottom, 256px) + 12px); z-index: 26; }

@media (max-width: 900px) {
  .rt-drive .sp-ticket { top: 56px; left: 8px; width: calc(100vw - 16px); padding: 10px 12px; }
  .rt-drive .sp-ticket h2 { font-size: 19px; }
  .rt-drive .sp-screen { right: 8px; padding: 3px; }
  .rt-drive .sp-screen-tag, .rt-drive .sp-screen-caption { top: 7px; left: 7px; font-size: 10px; }
  .rt-drive .sp-screen-caption { top: auto; bottom: 7px; }
  .rt-drive .sp-screen:has(.sp-screen-note) .sp-screen-caption { position: static; margin: 4px 2px 0; }
  .rt-drive .sp-around { left: 8px; bottom: 8px; width: calc(50vw - 12px); }
  .rt-drive .sp-crowd { right: 8px; bottom: 8px; width: calc(50vw - 12px); }
  .rt-drive .sp-pois, .rt-drive .sp-bars, .rt-drive .sp kbd { display: none; }
  /* Top down on a phone, each from the one above's measured bottom: the
     ticket, the invite, then the timing tower (the scoreboard — the full-
     width ticket covered it, and a fixed top: 150 put the invite over the
     ticket's buttons). The lights clear both. */
  .rt-drive .sp-ticket .sp-kicker { display: none; }
  .rt-drive .sp-invite { top: calc(var(--sp-ticket-bottom, 150px) + 6px); bottom: auto; left: 8px; right: 8px; max-width: none; transform: none; padding: 4px 4px 4px 12px; }
  .rt-drive .sp-invite .sp-url { flex: 1; min-width: 0; }
  /* !important: race_day_ui renderTower pins the tower under the nav with
     an inline top every render. The big screen goes top right beside it
     (bottom right it ran into the crowd panel). The lights (z 26, above the
     panels) cover the tower and the screen for the countdown only. */
  .rt-drive.spectator-on #race-tower { top: calc(max(var(--sp-ticket-bottom, 150px), var(--sp-invite-bottom, 0px)) + 8px) !important; }
  .rt-drive.spectator-on #start-lights { top: calc(max(var(--sp-ticket-bottom, 150px), var(--sp-invite-bottom, 0px)) + 12px); }
  .rt-drive .sp-screen { top: calc(max(var(--sp-ticket-bottom, 150px), var(--sp-invite-bottom, 0px)) + 8px); bottom: auto; width: min(168px, calc(100vw - 186px)); }
  .rt-drive .sp-pad { bottom: 190px; }
  .rt-drive .sp button, .rt-drive .sp-sheet .sp-pois button, .rt-drive .sp-seat-pick select { min-height: 44px; }
}
/* ── end Spectator seat ───────────────────────────────────────────────────── */

/* ── TV desk (Lifetime depth round 2, lib/drive_on_demand/tv_desk.js) ─────────────────────
   Play the race as its TV crew (mockup docs/concepts/idealised-state/
   mock-3-tv-director.html). The host owns the root; mountTvDesk gives it the
   class `tvd` and adds the programme's layers to the body: `.tvd-mix` (the
   mix's outgoing picture, over the whole canvas) and `.tvg` (the on-air
   graphics and the split / PiP picture, over the programme area — the left
   of the screen on a desktop, where the desk isn't). Docked right at no
   more than 640 px like race control's desk, folds to its header strip.
   The one orange is the lock tag and REC; PGM is red, PVW green — the
   switcher's own colours. Everything the desk draws is styled inside this
   block (tv_desk.test.mjs holds it). */
.rt-drive .tvd {
  position: fixed;
  top: calc(var(--tv-nav-bottom, 48px) + 16px);
  right: 16px;
  bottom: 16px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: min(640px, calc(100vw - 32px));
  border: 1px solid var(--g-steel);
  border-radius: 10px;
  background: var(--g-glass);
  backdrop-filter: blur(6px);
  color: var(--g-bone);
  overflow: hidden;
  --tvd-pgm: #ef4444;
  --tvd-pvw: var(--g-power);
}
.rt-drive .tvd-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--g-steel); }
.rt-drive .tvd-head h2 { margin: 0; font: 600 22px/1 var(--g-display); letter-spacing: 0.04em; text-transform: uppercase; }
.rt-drive .tvd-chip-static { padding: 5px 10px; border-radius: 6px; background: var(--g-bone); color: var(--g-black); font: 600 12px/1 var(--g-display); letter-spacing: 0.08em; text-transform: uppercase; }
.rt-drive .tvd-clock { color: var(--g-mist); font: 500 13px/1 var(--g-mono); font-variant-numeric: tabular-nums; }
.rt-drive .tvd[data-collapsed] { bottom: auto; }
.rt-drive .tvd[data-collapsed] .tvd-body { display: none; }
.rt-drive .tvd-body { display: flex; flex: 1; flex-direction: column; gap: 8px; min-height: 0; padding: 12px 16px; overflow-y: auto; }
.rt-drive .tvd-lbl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; color: var(--g-smoke); font: 600 12px/1.2 var(--g-display); letter-spacing: 0.12em; text-transform: uppercase; }

/* Buttons: the moulded garage button. */
.rt-drive .tvd button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--g-slate);
  border-radius: 7px;
  background: var(--g-mould), var(--g-steel);
  box-shadow: var(--g-lift-shadow);
  color: var(--g-mist);
  font: 600 14px/1 var(--g-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--g-press), box-shadow var(--g-press);
}
.rt-drive .tvd button:hover:not(:disabled) { background: var(--g-lift), var(--g-mould), var(--g-steel); color: var(--g-bone); }
.rt-drive .tvd button:active:not(:disabled) { transform: translateY(1px) scale(0.975); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45); }
.rt-drive .tvd button:focus-visible { outline: none; box-shadow: var(--g-focus), var(--g-lift-shadow); }
.rt-drive .tvd button[aria-pressed="true"] { border-color: var(--g-bone); background: var(--g-bone); color: var(--g-black); }
.rt-drive .tvd kbd { margin-left: 4px; }
.rt-drive .tvd .tvd-collapse { margin-left: auto; min-height: 32px; background: transparent; box-shadow: none; }
.rt-drive .tvd .tvd-rec[aria-pressed="true"] { border-color: var(--g-signal); background: var(--g-signal); color: var(--g-on-signal); }

/* The switcher: preview, then the transition buttons. */
.rt-drive .tvd-switcher { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; }
.rt-drive .tvd-pvw { position: relative; aspect-ratio: 16 / 9; border: 2px solid var(--tvd-pvw); border-radius: 8px; background: var(--g-carbon); overflow: hidden; }
.rt-drive .tvd-pvw canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.rt-drive .tvd-dark { position: absolute; inset: auto 12px 12px; margin: 0; color: var(--g-mist); font: 500 13px/1.35 var(--g-text); }
.rt-drive .tvd-pvw-label, .rt-drive .tvd-pgm-label { font: 600 12px/1 var(--g-display); letter-spacing: 0.1em; text-transform: uppercase; }
.rt-drive .tvd-pvw-label { position: absolute; top: 6px; left: 6px; z-index: 1; padding: 4px 8px; border-radius: 5px; background: var(--tvd-pvw); color: var(--g-on-signal); }
.rt-drive .tvd-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; gap: 6px; }
/* Grid items keep their min-content width by default: at a 1280 px desk the
   labels pushed the second column past the panel's edge. */
.rt-drive .tvd-actions button { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.rt-drive .tvd-pgm-label { grid-column: 1 / -1; padding: 6px 8px; border-left: 3px solid var(--tvd-pgm); color: var(--g-bone); }
.rt-drive .tvd .tvd-cut { grid-column: 1 / -1; min-height: 44px; border-color: var(--g-bone); background: var(--g-bone); color: var(--g-black); font-size: 18px; }
.rt-drive .tvd .tvd-auto { grid-column: 1 / -1; background: transparent; box-shadow: none; color: var(--g-smoke); }
.rt-drive .tvd-note { margin: 0; color: var(--g-mist); font-size: 12px; }

/* The six monitors. PGM red, PVW green. */
.rt-drive .tvd-monitors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rt-drive .tvd .tvd-monitor { position: relative; display: block; min-height: 0; padding: 0; border: 2px solid var(--g-steel); border-radius: 7px; background: var(--g-carbon); box-shadow: none; overflow: hidden; aspect-ratio: 16 / 9; }
.rt-drive .tvd .tvd-monitor canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.rt-drive .tvd .tvd-monitor[data-state="pvw"], .rt-drive .tvd .tvd-monitor[aria-pressed="true"] { border-color: var(--tvd-pvw); background: var(--g-carbon); }
.rt-drive .tvd .tvd-monitor[data-state="pgm"] { border-color: var(--tvd-pgm); }
.rt-drive .tvd-monitor-label { position: absolute; left: 6px; bottom: 5px; max-width: calc(100% - 36px); overflow: hidden; color: var(--g-bone); font: 600 11px/1 var(--g-display); letter-spacing: 0.06em; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; text-transform: uppercase; white-space: nowrap; }
.rt-drive .tvd-monitor kbd { position: absolute; right: 5px; bottom: 4px; margin: 0; }

/* The replay buffer: marked moments, oldest last. */
.rt-drive .tvd-moments { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.rt-drive .tvd .tvd-moment { flex-direction: column; align-items: flex-start; gap: 3px; min-height: 44px; padding: 6px 10px; border-left: 3px solid var(--g-smoke); }
.rt-drive .tvd .tvd-moment[data-kind="overtake"], .rt-drive .tvd .tvd-moment[data-kind="green"] { border-left-color: var(--g-signal); }
.rt-drive .tvd .tvd-moment[data-kind="contact"], .rt-drive .tvd .tvd-moment[data-kind="mistake"] { border-left-color: var(--g-corner); }
.rt-drive .tvd .tvd-moment[data-kind="pit_stop"] { border-left-color: var(--g-flat); }
.rt-drive .tvd .tvd-moment[data-kind="fastest_lap"] { border-left-color: var(--g-best); }
.rt-drive .tvd-moment b { color: var(--g-bone); font-weight: 600; }
.rt-drive .tvd-moment small { color: var(--g-smoke); font: 500 11px/1 var(--g-mono); text-transform: none; }
.rt-drive .tvd-empty { margin: 0; color: var(--g-smoke); font-size: 12px; }

/* Graphics chips and the camera plan. */
.rt-drive .tvd-graphics, .rt-drive .tvd-plan-list { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-drive .tvd .tvd-chip { min-height: 32px; font-size: 13px; }
.rt-drive .tvd-plan { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.rt-drive .tvd-plan svg { width: 100%; max-height: 180px; }
.rt-drive .tvd-plan-road { fill: none; stroke: var(--g-mist); stroke-linejoin: round; }
.rt-drive .tvd-plan-cam circle { fill: var(--g-carbon); stroke: var(--g-bone); stroke-width: 0.8; }
.rt-drive .tvd-plan-cam text { fill: var(--g-bone); font-family: var(--g-mono); }
.rt-drive [data-tvd-plan-cars] circle { stroke: #000; stroke-width: 0.5; }
.rt-drive [data-tvd-plan-cars] .tvd-plan-followed { stroke: var(--g-bone); stroke-width: 1.5; }
.rt-drive .tvd .tvd-plan-list [data-state="pvw"] { border-color: var(--tvd-pvw); }
.rt-drive .tvd .tvd-plan-list [data-state="pgm"] { border-color: var(--tvd-pgm); }
.rt-drive .tvd-stats { margin: 0; color: var(--g-smoke); font: 500 11px/1.3 var(--g-mono); }
.rt-drive .tvd-lock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; color: var(--g-smoke); font-size: 13px; }
.rt-drive .tvd-lock-tag { display: inline-flex; align-items: center; gap: 5px; color: var(--g-signal); font: 600 12px/1 var(--g-display); letter-spacing: 0.08em; text-transform: uppercase; }
.rt-drive .tvd-lock-tag::before { content: ""; display: inline-block; width: 9px; height: 11px; border: 2px solid currentColor; border-top-width: 5px; border-radius: 3px 3px 2px 2px; }
/* Locked: the commands are asks — quieter, still pressable. */
.rt-drive .tvd[data-locked] .tvd-actions, .rt-drive .tvd[data-locked] .tvd-graphics { opacity: 0.72; }

/* The programme's layers. Pointer-less: the race is still the race. The
   graphics layer starts BELOW drive's nav (--tv-nav-bottom, the nav's
   measured bottom, set by tv_desk.js on the body): the nav wraps to two
   rows on a laptop, and a split, the tower or the REPLAY tag over it hid
   buttons that were still clickable underneath. */
.rt-drive .tvd-mix { position: fixed; inset: 0; z-index: 9; width: 100vw; height: 100vh; object-fit: cover; opacity: 0; pointer-events: none; }
.rt-drive .tvg { position: fixed; inset: 0; top: var(--tv-nav-bottom, 48px); z-index: 10; pointer-events: none; }
.rt-drive .tvg-split { position: absolute; top: 0; right: 0; width: 50%; height: 100%; object-fit: cover; border-left: 3px solid var(--g-bone); }
.rt-drive .tvg-split[data-kind="pip"] { top: auto; right: 16px; bottom: 150px; width: min(30%, 360px); height: auto; aspect-ratio: 16 / 9; border: 2px solid var(--g-bone); border-radius: 6px; }
.rt-drive .tvg-split[hidden] { display: none; }
.rt-drive .tvg-graphics { position: absolute; inset: 0; color: var(--g-bone); }
.rt-drive .tvg-tower { position: absolute; top: 16px; left: 12px; width: 212px; padding: 6px 0; background: rgba(20, 20, 22, 0.88); font: 500 13px/1.2 var(--g-mono); font-variant-numeric: tabular-nums; }
.rt-drive .tvg-tower-head { display: flex; justify-content: space-between; padding: 2px 10px 6px; font: 600 15px/1 var(--g-display); letter-spacing: 0.08em; text-transform: uppercase; }
.rt-drive .tvg-tower-head b { color: #facc15; }
.rt-drive .tvg-clock { color: var(--g-mist); }
.rt-drive .tvg-row { display: grid; grid-template-columns: 18px 4px 40px 1fr; align-items: center; gap: 6px; padding: 3px 10px; }
.rt-drive .tvg-row i { width: 4px; height: 13px; }
.rt-drive .tvg-pos { color: var(--g-mist); text-align: right; }
.rt-drive .tvg-code { font: 600 15px/1 var(--g-display); letter-spacing: 0.06em; }
.rt-drive .tvg-gap { color: var(--g-mist); text-align: right; }
.rt-drive .tvg-followed { background: rgba(244, 242, 238, 0.14); }
.rt-drive .tvg-third { position: absolute; left: 16px; bottom: 150px; display: flex; flex-direction: column; gap: 6px; max-width: calc(100% - 32px); padding: 12px 22px 12px 18px; border-left: 6px solid var(--g-signal); background: rgba(20, 20, 22, 0.88); }
.rt-drive .tvg-third small { color: var(--g-signal); font: 600 13px/1 var(--g-display); letter-spacing: 0.12em; text-transform: uppercase; }
.rt-drive .tvg-third strong { font: 600 clamp(20px, 2.4vw, 32px)/1 var(--g-display); letter-spacing: 0.03em; text-transform: uppercase; }
.rt-drive .tvg-corner { position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rt-drive .tvg-bug, .rt-drive .tvg-tag { padding: 7px 12px; font: 600 14px/1 var(--g-display); letter-spacing: 0.08em; text-transform: uppercase; }
.rt-drive .tvg-bug { background: var(--g-bone); color: var(--g-black); }
.rt-drive .tvg-tag { background: rgba(20, 20, 22, 0.88); }
.rt-drive .tvg-map { position: absolute; right: 16px; bottom: 150px; width: 150px; padding: 8px; background: rgba(20, 20, 22, 0.88); }
.rt-drive .tvg-map svg { display: block; width: 100%; }
.rt-drive .tvg-replay { position: absolute; top: 16px; left: 50%; padding: 8px 14px; transform: translateX(-50%); background: var(--g-signal); color: var(--g-on-signal); font: 600 16px/1 var(--g-display); letter-spacing: 0.14em; text-transform: uppercase; }
/* The desk is the lens: the spectate bar's Director / Car / Leader /
   Camera buttons would drive race_day_ui's RaceDirector behind its back
   (two directors on one lens). End race is in the nav. */
.rt-drive.tv-desk-on #race-spectate { display: none; }
/* The desk's own tower replaces Race Day's while it is on air. */
.rt-drive.tv-desk-tower #race-tower { display: none; }
@media (min-width: 901px) {
  /* The programme area is the left of the screen: the graphics, the split
     and the camera bar / radio / banner move there, as for race control. */
  .rt-drive .tvg { right: 672px; }
  .rt-drive.tv-desk-on #race-banner { left: calc((100vw - 656px) / 2); }
  .rt-drive.tv-desk-on #race-radio { left: 12px; right: auto; }
}
@media (max-width: 900px) {
  /* Phone: a bottom sheet over the race; folding it is how you watch. */
  .rt-drive .tvd { top: auto; right: 8px; bottom: 8px; width: calc(100vw - 16px); max-height: 64vh; }
  .rt-drive .tvd-switcher { grid-template-columns: 1fr; }
  .rt-drive .tvd-monitors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-drive .tvd button, .rt-drive .tvd .tvd-chip, .rt-drive .tvd .tvd-collapse { min-height: 44px; }
  .rt-drive .tvg-tower { width: 176px; font-size: 12px; }
  /* The venue bug and tags keep right of the tower (176 px at 12). */
  .rt-drive .tvg-corner { max-width: calc(100% - 212px); }
  .rt-drive .tvg-bug, .rt-drive .tvg-tag { font-size: 12px; line-height: 1.2; text-align: right; }
  .rt-drive .tvg-map { display: none; }
}
/* ── end TV desk ──────────────────────────────────────────────────────────── */

/* ── Role switcher (Race weekend, entry points, lib/drive_on_demand/role_switcher.js) ── */
/* Drive · Watch · Seat · TV desk · Race control in the nav (mockup 4), only
   with Labs :experience. A segmented bar: the role you are is the bone
   block, a locked role keeps its label and shows the lock. Phone: one
   "You: <role>" button opens the roles as a bottom sheet, 44 px rows. */
.rt-drive .rs { position: relative; display: inline-flex; align-items: center; }
.rt-drive .rs .rs-toggle { display: none; }
.rt-drive .rs .rs-roles { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--g-slate); border-radius: 9px; background: rgba(20, 20, 22, 0.86); }
.rt-drive .nav .rs .rs-role { min-height: 30px; padding: 0 11px; border-color: transparent; background: transparent; box-shadow: none; color: var(--g-mist); }
.rt-drive .nav .rs .rs-role:hover:not(:disabled) { background: var(--g-steel); color: var(--g-bone); }
.rt-drive .nav .rs .rs-role[aria-pressed="true"] { border-color: var(--g-bone); background: var(--g-bone); color: var(--g-black); }
/* A role is a segment, not a toggle: no on/off dot (the nav's aria-pressed rule). */
.rt-drive .nav .rs .rs-role[aria-pressed]::before { display: none; }
.rt-drive .rs .rs-role kbd { min-width: 0; padding: 0; border: 0; background: none; color: inherit; opacity: 0.55; font: 500 10px/1 var(--g-mono); }
.rt-drive .rs .rs-role .lock { opacity: 0.8; }
.rt-drive .rs .rs-role .rs-tag { color: var(--g-smoke); font: 600 10px/1 var(--g-display); letter-spacing: 0.1em; }
.rt-drive .rs .rs-role[data-state="unlock"] .rs-tag { color: var(--g-power); }
.rt-drive .rs .rs-hint { position: absolute; top: calc(100% + 10px); left: 50%; z-index: 12; margin: 0; padding: 8px 12px; transform: translateX(-50%); border: 1px solid var(--g-slate); border-radius: 8px; background: var(--g-carbon); color: var(--g-bone); font: 500 12px/1.3 var(--g-text); white-space: nowrap; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); }
.rt-drive .rs .rs-hint[hidden] { display: none; }
.rt-drive #race-setup .setup-role { margin: 0 0 10px; }
.rt-drive #race-setup .setup-role b { color: var(--g-bone); }
.rt-drive .rs-retire .card { width: min(420px, 100%); }
/* The phone sheet is position: fixed INSIDE the nav's stacking context
   (z 10): raise the nav while it is open, as .more-open does, or the
   spectate bar (21), the stick (15) and the tower (11) draw over its rows. */
.rt-drive.rs-open .nav { z-index: 31; }
@media (max-width: 900px) {
  .rt-drive .rs .rs-toggle { display: inline-flex; min-height: 44px; }
  .rt-drive .rs .rs-toggle .rs-toggle-kicker { color: var(--g-smoke); }
  .rt-drive .rs .rs-roles { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 32; flex-direction: column; gap: 6px; padding: 14px 14px max(14px, env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--g-slate); border-radius: 14px 14px 0 0; background: var(--g-carbon); box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.5); }
  .rt-drive .rs.open .rs-roles { display: flex; }
  .rt-drive .nav .rs .rs-role { justify-content: flex-start; min-height: 48px; padding: 0 14px; border-color: var(--g-slate); background: var(--g-mould), var(--g-steel); font-size: 15px; }
  .rt-drive .rs .rs-role kbd { display: none; }
  .rt-drive .rs .rs-hint { position: fixed; top: 64px; }
}
/* ── end Role switcher ────────────────────────────────────────────────────── */

/* ── Exit cards (Race weekend, entry points, lib/drive_on_demand/exit_cards.js) ── */
/* Each spectator role ends on its own card in #race-results (mockup 5):
   the flag, the winner at your circuit, the podium, the role's exits (the
   first is the one orange), the seat link and the way back to the Studio. */
.rt-drive #race-results .exit-card { width: min(760px, 100%); padding-top: 0; overflow: hidden; }
.rt-drive #race-results .exit-card .tape { height: 8px; margin: 0 -20px 16px; background: var(--g-hazard); }
.rt-drive #race-results .exit-card h2 { font-size: 34px; }
.rt-drive #race-results .exit-card h2::before { height: 30px; }
.rt-drive .exit-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.rt-drive .exit-podium li { display: grid; grid-template-columns: auto 3px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--g-slate); border-radius: 10px; background: var(--g-black); text-align: left; }
.rt-drive .exit-podium .exit-pos { grid-row: 1 / 3; color: var(--g-bone); font: 600 26px/1 var(--g-display); }
.rt-drive .exit-podium i { grid-row: 1 / 3; width: 3px; height: 30px; border-radius: 2px; }
.rt-drive .exit-podium .exit-name { color: var(--g-bone); font: 600 17px/1.1 var(--g-display); letter-spacing: 0.04em; text-transform: uppercase; }
.rt-drive .exit-podium .exit-detail { color: var(--g-smoke); font: 500 11px/1.3 var(--g-mono); }
.rt-drive .exit-lines { margin: 14px 0 0; padding: 0; list-style: none; color: var(--g-mist); font: 500 13px/1.5 var(--g-text); text-align: left; }
.rt-drive #race-results .exit-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.rt-drive #race-results .exit-actions button { min-height: 48px; font-size: 15px; }
.rt-drive .exit-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--g-steel); }
.rt-drive .exit-foot .exit-url { color: var(--g-smoke); font: 500 12px/1.3 var(--g-mono); overflow-wrap: anywhere; text-align: left; }
.rt-drive .exit-foot .exit-back { display: inline-flex; align-items: center; min-height: 32px; color: var(--g-bone); font: 600 14px/1 var(--g-display); letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; }
.rt-drive .exit-foot .exit-back:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .rt-drive .exit-podium { grid-template-columns: 1fr; }
  .rt-drive #race-results .exit-card h2 { font-size: 26px; }
  .rt-drive .exit-foot .exit-back { min-height: 44px; }
}
/* ── end Exit cards ───────────────────────────────────────────────────────── */

/* ── Reels (CLAUDE.md "Reels — the short cut every video defaults to") ──────
   The after-save panel (lib/clip_after_save.js, on drive's dialog pattern:
   caption, share / download, send to phone + QR) and the personal-best
   nudge (drive_v3.js offerReel). The nudge is never focused: it must not
   take Space or Enter from the car. */
.rt-drive .clip-panel .clip-panel-caption { display: flex; flex-direction: column; gap: 4px; color: var(--g-smoke); font: 600 12px/1 var(--g-display); letter-spacing: 0.1em; text-transform: uppercase; }
.rt-drive .clip-panel textarea { min-height: 88px; resize: none; font-size: 13px; letter-spacing: 0; text-transform: none; }
.rt-drive .clip-panel .clip-panel-qr { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--g-slate); color: var(--g-mist); font-size: 12px; }
.rt-drive .clip-panel .clip-panel-qr[hidden] { display: none; }
.rt-drive .clip-panel .clip-panel-qr p { margin: 0 0 6px; }
.rt-drive .clip-panel .clip-panel-qr a { color: var(--g-bone); font: 500 12px/1.3 var(--g-mono); overflow-wrap: anywhere; cursor: pointer; }
.rt-drive .clip-panel .clip-panel-qr-art { flex: none; width: 132px; height: 132px; padding: 6px; border-radius: 8px; background: #fff; }
.rt-drive .clip-panel .clip-panel-qr-art svg { display: block; width: 100%; height: 100%; }
.rt-drive .clip-panel .fine { min-height: 1em; }
.rt-drive #reel-nudge { position: absolute; left: 50%; bottom: 116px; z-index: 44; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 16px; border: 1px solid var(--g-slate); border-radius: 10px; background: var(--g-carbon); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); color: var(--g-bone); font: 600 15px/1.2 var(--g-display); letter-spacing: 0.04em; text-transform: uppercase; opacity: 0; transform: translate(-50%, 10px); transition: 0.2s; }
.rt-drive #reel-nudge.show { opacity: 1; transform: translate(-50%, 0); }
.rt-drive #reel-nudge button { min-height: 36px; padding: 0 14px; border: 1px solid var(--g-slate); border-radius: 8px; background: var(--g-black); color: var(--g-bone); font: inherit; cursor: pointer; }
.rt-drive #reel-nudge button.go { border-color: var(--g-signal); background: var(--g-signal); color: var(--g-on-signal); }
.rt-drive #reel-nudge button.close { padding: 0 10px; font-size: 18px; }
@media (pointer: coarse) {
  .rt-drive #reel-nudge button, .rt-drive .clip-panel .actions button { min-height: 44px; }
}
/* ── end Reels ────────────────────────────────────────────────────────────── */

/* ── Pit stops (Labs :pits, drive_v3.js renderPitHud) ────────────────────── */
/* The lane's banner: limit, limiter, your box's countdown and the lane time.
   Under Race Day's own banner (72 px) so the two never overlap in a race. */
.rt-drive #pit-hud { position: absolute; top: 116px; left: 50%; z-index: 13; transform: translateX(-50%); padding: 7px 14px; border: 1px solid var(--g-panel-edge); border-radius: 8px; background: var(--g-glass); backdrop-filter: blur(8px); color: var(--g-bone); font: 600 16px/1 var(--g-display); letter-spacing: 0.14em; white-space: nowrap; pointer-events: none; }
.rt-drive #pit-hud[hidden] { display: none; }
.rt-drive #pit-hud[data-state="limiter"] { border-color: rgba(96, 165, 250, 0.8); }
.rt-drive #pit-hud[data-state="over"] { border-color: rgba(251, 191, 36, 0.8); background: rgba(251, 191, 36, 0.92); color: var(--g-black); }
.rt-drive #pit-hud[data-state="approach"] { border-color: var(--g-signal-deep); }
.rt-drive #pit-hud[data-state="box"], .rt-drive #pit-hud[data-state="hold"] { border-color: var(--g-signal); box-shadow: 0 0 0 1px var(--g-signal) inset; }
.rt-drive #pit-hud[data-state="released"] { border-color: rgba(74, 222, 128, 0.85); }
.rt-drive.replaying #pit-hud { display: none; }
@media (max-width: 900px) { .rt-drive #pit-hud { top: 104px; font-size: 13px; } }

/* ── Drive feel (#3360): lighter in-race glass, the slim lap banner ──────
   The HUD, the delta bar and the lap banner sit OVER the road, so they wear
   a lighter, translucent glass than the dialogs (--g-glass, 0.88) and carry
   a text shadow instead of an opaque box. The lap banner was a 44 px card a
   quarter of the way down the screen — over the braking point of the next
   lap; it is now a slim strip under the delta bar that clears in 3 s. Same
   ids and classes, so drive_v3.js and the specs are unchanged. */
.rt-drive .hud,
.rt-drive #delta-bar,
.rt-drive #lap-banner {
  background: linear-gradient(180deg, rgba(16, 16, 18, 0.6), rgba(16, 16, 18, 0.4));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(6px);
}
.rt-drive .hud .speed, .rt-drive .hud .gear, .rt-drive .hud-row, .rt-drive .sector,
.rt-drive #delta-bar, .rt-drive #lap-banner .lb-time, .rt-drive #lap-banner .lb-head { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65); }
.rt-drive .hud .gear-box { background: rgba(0, 0, 0, 0.32); }
.rt-drive .hud .sector-box:not([data-colour]) { background: rgba(0, 0, 0, 0.22); }
.rt-drive #lap-banner {
  top: 108px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: center;
  gap: 6px 14px;
  min-width: 0;
  padding: 8px 16px 9px;
  border-radius: 10px;
}
.rt-drive #lap-banner .lb-head { grid-column: 1; font-size: 11px; }
.rt-drive #lap-banner .lb-time { grid-column: 2; margin: 0; font-size: 28px; }
.rt-drive #lap-banner .lb-meta { grid-column: 1 / -1; font-size: 12px; }
.rt-drive #lap-banner .lb-sectors { grid-column: 1 / -1; margin-top: 0; }
.rt-drive #lap-banner .lb-sectors span { min-width: 58px; font-size: 11px; }
@media (max-width: 900px) { .rt-drive #lap-banner { top: 64px; } }
/* A phone: top-left under the bar, beside the (scaled) HUD — one column,
   no sector chips (the HUD's own sector boxes carry them). */
@media (max-width: 720px) {
  .rt-drive #lap-banner, .rt-drive #lap-banner.show { left: 12px; transform: none; }
  .rt-drive #lap-banner { grid-template-columns: 1fr; justify-items: start; max-width: min(190px, calc(100vw - 210px)); padding: 7px 12px 8px; gap: 4px; }
  .rt-drive #lap-banner .lb-head, .rt-drive #lap-banner .lb-time, .rt-drive #lap-banner .lb-meta { grid-column: 1; }
  .rt-drive #lap-banner .lb-head { font-size: 10px; white-space: nowrap; }
  .rt-drive #lap-banner .lb-time { font-size: 24px; }
  .rt-drive #lap-banner .lb-meta { justify-content: flex-start; gap: 4px 6px; font-size: 11px; }
  .rt-drive #lap-banner .lb-sectors { display: none; }
}

/* ── Controller setup (#3359): lib/drive_on_demand/controller_setup.js ── */
.rt-drive #drive-controller.needs-setup::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--g-signal); vertical-align: middle; }
.rt-drive .controller-setup .card { display: grid; gap: 10px; width: min(440px, 100%); }
.rt-drive .controller-setup .lead, .rt-drive .controller-setup h2 { margin: 0; }
.rt-drive .controller-setup .cs-body { display: grid; gap: 10px; }
.rt-drive .controller-setup .cs-step { margin: 0; color: var(--g-smoke); font: 600 12px/1 var(--g-display); letter-spacing: 0.14em; text-transform: uppercase; }
.rt-drive .controller-setup .cs-text { margin: 0; color: var(--g-bone); font-size: 15px; line-height: 1.4; }
.rt-drive .controller-setup .cs-hold { --cs-hold: 0; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.rt-drive .controller-setup .cs-hold::before { content: ""; display: block; height: 100%; background: var(--g-power); transform: scaleX(var(--cs-hold)); transform-origin: left; }
.rt-drive .controller-setup .cs-meters { display: grid; gap: 8px; }
.rt-drive .controller-setup .cs-meter { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; color: var(--g-mist); font: 600 12px/1 var(--g-display); letter-spacing: 0.08em; text-transform: uppercase; }
.rt-drive .controller-setup .cs-meter i { position: relative; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.rt-drive .controller-setup .cs-meter b { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: inherit; background: var(--g-power); }
.rt-drive .controller-setup .cs-meter.centre b { background: var(--g-bone); }
.rt-drive .controller-setup .cs-meter:nth-child(3) b { background: var(--g-brake); }
.rt-drive .controller-setup .cs-slider { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; color: var(--g-mist); font-size: 13px; cursor: pointer; }
.rt-drive .controller-setup .cs-slider input { grid-column: 1 / -1; width: 100%; cursor: pointer; }
.rt-drive .controller-setup .cs-slider output { color: var(--g-bone); font: 500 12px/1 var(--g-mono); }
.rt-drive .controller-setup .cs-check { display: flex; align-items: center; gap: 8px; color: var(--g-mist); font-size: 13px; cursor: pointer; }
.rt-drive .controller-setup .cs-check input { width: 18px; height: 18px; cursor: pointer; }
@media (hover: none), (pointer: coarse) { .rt-drive .controller-setup .cs-slider input, .rt-drive .controller-setup .cs-check { min-height: 44px; } }