/* Tokens + legacy variable bridge come from /grandstand.css */


:where(#page-body) * { box-sizing: border-box; margin: 0; padding: 0; }
/* body comes from grandstand.css */

/* Results/Qualifying shared geometry. One source of truth so the two grids
   cannot drift on the common left columns or the row height. --pos-col is the
   leading position column; it is widened beyond the bare numeral so the grid to
   finish delta can be seated beside the position number on Race Results, and is
   shared with Qualifying so the two tables keep an identical left edge even
   though Qualifying carries no delta. */
:root {
  --pos-col: 64px;
  --cols-left: var(--pos-col) 50px minmax(0,1fr);
  --row-h: 65px;
  /* Interval is the first information column. Its track is wider than the value
     needs so the right-aligned figure can be pushed left, off the PERF roundel
     that follows it; the surplus over the 72px the widest value occupies becomes
     right padding (see the .card-row nth-child(4) rule), so the content box stays
     a constant 72px and the longest reading ("-162 Laps") never wraps. Tune the
     gap to PERF here alone. */
  --interval-col: 100px;
}

/* ── Top bar ── */
:where(#page-body) .content-wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 18px; box-sizing: border-box; }
@media (min-width: 720px) { :where(#page-body) .content-wrap { padding: 0 32px; } }
@media (min-width: 1200px) { :where(#page-body) .content-wrap { padding: 0 56px; } }
/* Topbar: .gs-topbar from grandstand.css. Hamburger + mobile menu retired
   (masthead tab row scrolls horizontally on mobile). */

/* ── Qualifying table — matches Race Overview card pattern ── */

/* Standalone header row — same as col-header-row */

/* Each qualifying entry is its own card */

:where(#page-body) .qual-row:hover { background: var(--off-white); }

:where(#page-body) .cs-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px; }
:where(#page-body) .cs-mobile { display: none; padding: 10px 18px; }
:where(#page-body) #stint-mobile-team-sel { display: none; }
/* Mobile breakpoint */
:where(#page-body) .rb-track-mobile { display: none; }
@media (max-width: 920px) {
  /* (mobile topbar/masthead rules replaced by the Grandstand ladder) */

  /* (Results mobile rules replaced by the Grandstand <720 compact) */

  /* awards responsive rules re-homed in the Grandstand tiers (phase 5) */


  /* H2H responsive rules re-homed in the Grandstand tiers (phase 6) */

  /* Hide go-to-start / go-to-end on both replay and H2H (step buttons + slider suffice) */
  :where(#page-body) button[data-tip="Go to start"],
:where(#page-body) button[data-tip="Go to end"] { display: none; }
  /* (progression card-head wrap retired — phase 8; head is title-only, masthead owns class pills) */

  /* Lap times responsive re-homed to the Grandstand 720-1023 / <=719 tiers (phase 7 r4) */
  /* Class selector pills: allow wrapping if many classes */
  :where(#page-body) .class-tabs { flex-wrap: wrap; }
  /* (shared .cs-chips/.cs-mobile <=920 flip retired — phase 8; progression re-homed to the two-step ladder, lap-times + stints box picker show chips across tablet) */
  /* (progression chart padding retired — phase 8; the Grandstand flush chart-area owns it) */





  /* (Qualifying mobile rules replaced by the Grandstand <720 compact) */


}

/* Race masthead + tab bar: Grandstand styles at end of this block */

/* ── Layout ── */
:where(#page-body) .page { display: none; padding-top: 20px; padding-bottom: 48px; }
:where(#page-body) .page.active { display: block; }

/* ── Class sections ── */
:where(#page-body) .class-section { margin:0; }

:where(#page-body) .class-pill {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
}
:where(#page-body) .pill-cls0 { background: #fef3c7; color: #b45309; }
:where(#page-body) .pill-cls1 { background: #eff4ff; color: #2563eb; }
:where(#page-body) .pill-cls2 { background: #fff1f2; color: #e11d48; }
:where(#page-body) .pill-cls3 { background: #f0fdf4; color: #16a34a; }
:where(#page-body) .pill-cls4 { background: #faf5ff; color: #7c3aed; }
:where(#page-body) .class-header h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
:where(#page-body) .class-meta { font-size: 14px; color: var(--text-3); margin-left: auto; }

/* Results table: Grandstand styles at end of this block */

/* ── Lap times page ── */
:where(#page-body) .lt-layout { display: block; max-width: 100%; }
/* ── Lap Times page · GRANDSTAND PHASE 7 ──────────────────────────────
   Card chrome → section heads on paper; rank tabs → masthead-underline
   idiom (own .rank-tab class — showPage()'s .nav-btn sweep must not catch
   them); DNF → filter-button pill; methodology band → .st-note prose
   (mirror stints); chip legend → filter-button base, dot dropped via
   js[84] (colour rides the #num — Q4-B); rank table → fl-table grandstand
   scoped (mirror the stints table — Q2-A, base dies at cutover); rank
   plate → 17px secondary scale (Q3-B, matches awards — two-tier by table
   role); Trend/Actual hidden-alive (handlers kept, JS untouched).
   Shared classes (.card/.card-head/.card-title/.chart-area/.car-chip*)
   are OVERRIDDEN SCOPED — never globally — so progression + signed-off
   stints keep their own. Canvas axis/grid/text stay on the shared cool
   helpers until the chartTheme pass (retire-together rule); this phase
   only drops the bg fill (js[85]) + unifies the stray axis label to
   Inter (js[86]).
   ────────────────────────────────────────────────────────────────── */
/* both cards → borderless paper sections */
:where(#page-body) #page-laptimes .card { background: none; border: none; border-radius: 0; box-shadow: none; overflow: visible; margin-bottom: 28px; }
:where(#page-body) #page-laptimes .lt-layout > .card:last-child { margin-bottom: 0; }

/* chart-section head → overline + trailing hairline (gs-section-head idiom) */
:where(#page-body) #page-laptimes .card-head { padding: 0; border-bottom: none; display: flex; align-items: center; gap: 16px; justify-content: flex-start; margin-bottom: 14px; }
:where(#page-body) #page-laptimes .card-head::after { content: ''; flex: 1; height: 1px; background: var(--line); }
:where(#page-body) #page-laptimes .card-title { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
/* Trend/Actual hidden-alive — the wrapper carries an inline display:flex, so a
   selector-level display:none loses to it; the inline style is stripped in
   markup and the wrapper gets .lt-mode-wrap, which the hide then owns. Scoped
   so #race-class-tabs is untouched; buttons + setLtMode handlers stay for revival. */
:where(#page-body) #page-laptimes .lt-mode-wrap { display: none; }
:where(#page-body) #page-laptimes .chart-area { padding: 14px 0 4px; }
/* reserve the canvas box (display height + full width) so it cannot reflow on
   first interaction — the JS sizes to the same values (drops -36, H 320). (#2) */
:where(#page-body) #page-laptimes #lt-canvas { display: block; width: 100%; height: 320px; }

/* chip legend (Q4-B: colour on the #num, no dot) — filter-button base */
:where(#page-body) #page-laptimes .car-selector { position: relative; border-bottom: none; }
:where(#page-body) #page-laptimes .cs-chips { padding: 14px 0 0; gap: 8px; }
:where(#page-body) #page-laptimes .car-chip { border-radius: 4px; border: 1px solid var(--line); background: none; padding: 4px 9px; gap: 6px; font-family: var(--font-body); font-size: 11.5px; font-weight: 600; color: var(--sub); transition: border-color 0.12s, color 0.12s, background 0.12s; }
:where(#page-body) #page-laptimes .car-chip-label { font-family: var(--font-body); font-weight: 800; font-size: 12px; }
:where(#page-body) #page-laptimes .car-chip-name { font-family: var(--font-body); font-size: 11.5px; color: var(--sub); max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { :where(#page-body) #page-laptimes .car-chip:hover { border-color: var(--faint); color: var(--ink); } }
:where(#page-body) #page-laptimes .car-chip.selected,
:where(#page-body) #page-laptimes .car-chip.selected:hover { background: var(--ink); border-color: var(--ink); }
:where(#page-body) #page-laptimes .car-chip.selected .car-chip-name { color: var(--paper); font-weight: 700; }

/* ranking-section head → masthead-underline tabs + DNF pill */
:where(#page-body) #page-laptimes .rank-tabs { display: flex; align-items: flex-end; gap: 26px; min-height: 0; border-bottom: 1px solid var(--line); }
:where(#page-body) #page-laptimes .rank-tab { padding: 0 2px 10px; font-family: var(--font-body); font-size: 13.5px; font-weight: 500; color: var(--sub); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color 0.12s; }
:where(#page-body) #page-laptimes .rank-tab.active { color: var(--ink); font-weight: 700; border-bottom-color: var(--red); }
@media (hover: hover) { :where(#page-body) #page-laptimes .rank-tab:hover { color: var(--ink); } }
:where(#page-body) #page-laptimes .dnf-toggle { border-radius: 4px; border: 1px solid var(--line); background: none; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--sub); padding: 5px 13px; transition: border-color 0.12s, color 0.12s, background 0.12s; }
:where(#page-body) #page-laptimes .dnf-toggle.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (hover: hover) { :where(#page-body) #page-laptimes .dnf-toggle:hover { border-color: var(--faint); color: var(--ink); } :where(#page-body) #page-laptimes .dnf-toggle.on:hover { border-color: var(--ink); color: var(--paper); } }

/* methodology note → .st-note prose; lives left in the .rank-meta band, wider */
:where(#page-body) #page-laptimes .lt-note { flex: 1; padding: 0; background: none; border: none; font-family: var(--font-body); font-size: 12px; color: var(--faint); line-height: 1.5; max-width: 720px; margin: 0; }
/* note + DNF share one band below the tab hairline (note left, pill right) — #3/#4 */
:where(#page-body) #page-laptimes .rank-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin: 14px 0 18px; }
:where(#page-body) #page-laptimes .rank-meta .dnf-toggle { flex-shrink: 0; align-self: flex-start; }

/* rank table → fl-table grandstand (mirror the stints table — Q2-A) */
:where(#page-body) #page-laptimes .fl-table { font-family: var(--font-body); }
:where(#page-body) #page-laptimes .fl-table th { padding: 11px 14px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--ink); }
:where(#page-body) #page-laptimes .fl-table td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); color: var(--sub); }
/* Car Model + Team truncate harder on the rank table — keeps the full 10-col desktop table inside the viewport above the 1023 step (content is only ~960px there once the 32px gutters kick in) */
:where(#page-body) #page-laptimes #rank-table th:nth-child(4),
:where(#page-body) #page-laptimes #rank-table td:nth-child(4) { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(#page-body) #page-laptimes #rank-table th[data-tip] { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--faint); }
  /* reserve the sort-arrow slot so tapping a header to re-sort never reflows the column (auto table-layout) */
  :where(#page-body) #page-laptimes #rank-table .sort-arrow { width: 0.8em; text-align: center; }
:where(#page-body) #page-laptimes #rank-table td.team-col { max-width: 160px; }
:where(#page-body) #page-laptimes .fl-table td.mono { font-family: var(--font-body); font-variant-numeric: tabular-nums lining-nums; font-size: 12.5px; }
:where(#page-body) #page-laptimes .fl-table td.team-col { color: var(--ink); font-weight: 500; }
:where(#page-body) #page-laptimes .fl-table tr:last-child td { border-bottom: none; }
@media (hover: hover) { :where(#page-body) #page-laptimes .fl-table th:hover { color: var(--faint); } :where(#page-body) #page-laptimes .fl-table tr:hover td { background: transparent; } }

/* rank plate → 17px secondary scale (Q3-B; matches awards — two-tier by table role) */
:where(#page-body) #page-laptimes .car-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 27px; height: 17px; padding: 0 4px; border: none; border-radius: 3px; font-family: var(--font-body); font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 17px; }

/* ── responsive: Grandstand two-step ladder (mirrors stints — 720–1023 tablet, ≤719 mobile) ──
   Re-homed out of the legacy shared 920 block. New column order is
   1 Pos · 2 Car · 3 Driver/Team · 4 Car Model · 5 Laps · 6 Best · 7 Top 50% ·
   8 Median · 9 Top 10% · 10 Pace. Tablet keeps the chart and drops the three
   least-load-bearing columns; mobile drops the chart and falls to four. */
@media (min-width: 720px) and (max-width: 1023px) {
  /* the chart stays on tablet, so its chip legend must too (the shared chip hide is retired in phase 8) */
  :where(#page-body) #page-laptimes .cs-chips { display: flex; }
  /* phase 8: step the chips down a touch entering tablet (match progression) */
  :where(#page-body) #page-laptimes .car-chip { padding: 5px 10px; font-size: 11.5px; }
  :where(#page-body) #page-laptimes .car-chip-label { font-size: 12px; }
  /* drop Car Model(4), Median(8), Top 10%(9) → Pos·Car·Driver·Laps·Best·Top50·Pace fits without scroll */
  :where(#page-body) #page-laptimes #rank-table th:nth-child(4),
:where(#page-body) #page-laptimes #rank-table td:nth-child(4),
:where(#page-body) #page-laptimes #rank-table th:nth-child(8),
:where(#page-body) #page-laptimes #rank-table td:nth-child(8),
:where(#page-body) #page-laptimes #rank-table th:nth-child(9),
:where(#page-body) #page-laptimes #rank-table td:nth-child(9) { display: none; }
  :where(#page-body) #page-laptimes #rank-table th,
:where(#page-body) #page-laptimes #rank-table td { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 719px) {
  /* mobile: hide the chart + note; table down to Pos · Car · Driver · Top 50% (col 7) */
  :where(#page-body) #page-laptimes .lt-layout > .card:first-child { display: none; }
  :where(#page-body) #page-laptimes .lt-note { display: none; }
  :where(#page-body) #page-laptimes #rank-table th:nth-child(4),
:where(#page-body) #page-laptimes #rank-table td:nth-child(4),
:where(#page-body) #page-laptimes #rank-table th:nth-child(5),
:where(#page-body) #page-laptimes #rank-table td:nth-child(5),
:where(#page-body) #page-laptimes #rank-table th:nth-child(6),
:where(#page-body) #page-laptimes #rank-table td:nth-child(6),
:where(#page-body) #page-laptimes #rank-table th:nth-child(8),
:where(#page-body) #page-laptimes #rank-table td:nth-child(8),
:where(#page-body) #page-laptimes #rank-table th:nth-child(9),
:where(#page-body) #page-laptimes #rank-table td:nth-child(9),
:where(#page-body) #page-laptimes #rank-table th:nth-child(10),
:where(#page-body) #page-laptimes #rank-table td:nth-child(10) { display: none; }
  :where(#page-body) #page-laptimes #rank-table th,
:where(#page-body) #page-laptimes #rank-table td { padding-left: 8px; padding-right: 8px; }
  :where(#page-body) #page-laptimes #rank-table td.team-col { max-width: 42vw; }
}


:where(#page-body) .card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
:where(#page-body) .card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
:where(#page-body) .card-title { font-size: 14px; font-weight: 600; color: var(--text); }
:where(#page-body) .card-body { padding: 16px 18px; }

/* Chart */
:where(#page-body) .chart-area { padding: 16px 18px 12px; }
:where(#page-body) canvas { display: block; }

/* Class filter buttons: Grandstand styles at end of this block */

/* Car selector */
:where(#page-body) .car-selector { position: relative; border-bottom: 1px solid var(--border); }
:where(#page-body) .car-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 6px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--white);
  font-size: 13px; cursor: pointer; transition: all 0.12s; user-select: none;
}
:where(#page-body) .car-chip:hover { border-color: var(--border-strong); }
:where(#page-body) .car-chip.selected { border-color: transparent; }
:where(#page-body) .car-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
:where(#page-body) .car-chip-label { font-family: var(--mono); font-weight: 500; font-size: 12px; }
:where(#page-body) .car-chip-name { font-size: 12px; color: var(--text-2); }
/* Mobile car dropdown */
:where(#page-body) .cs-trigger {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--white);
  font-family: var(--sans); font-size: 14px; color: var(--text-2);
  cursor: pointer; transition: border-color .15s;
}
:where(#page-body) .cs-trigger:hover { border-color: var(--border-strong); }
:where(#page-body) .cs-trigger svg { transition: transform .2s; flex-shrink: 0; }
:where(#page-body) .cs-trigger.open svg { transform: rotate(180deg); }
:where(#page-body) .cs-panel {
  display: none; position: absolute;
  top: 100%; left: 18px; right: 18px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 50; max-height: 280px; overflow-y: auto;
}
:where(#page-body) .cs-panel.open { display: block; }
:where(#page-body) .cs-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
:where(#page-body) .cs-row:last-child { border-bottom: none; }
:where(#page-body) .cs-row:hover { background: var(--off-white); }
:where(#page-body) .cs-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
:where(#page-body) .cs-num { font-family: var(--mono); font-size: 13px; font-weight: 600; flex-shrink: 0; }
:where(#page-body) .cs-name { flex: 1; font-size: 13px; color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(#page-body) .cs-check { font-size: 14px; color: var(--gtp); flex-shrink: 0; opacity: 0; }
:where(#page-body) .cs-row.cs-sel .cs-check { opacity: 1; }

/* Fastest laps table */
:where(#page-body) .fl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
:where(#page-body) .fl-table th {
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  background: var(--off-white);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
:where(#page-body) .fl-table th:hover { color: var(--text-2); }
:where(#page-body) .fl-table th.sorted { color: var(--gtp); }
:where(#page-body) .fl-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  white-space: nowrap;
}
:where(#page-body) .fl-table tr:last-child td { border-bottom: none; }
:where(#page-body) .fl-table tr:hover td { background: var(--off-white); }
:where(#page-body) .fl-table td.mono { font-family: var(--mono); font-size: 12px; }
:where(#page-body) .fl-table td.best-time { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--gtp); }
:where(#page-body) .fl-table td.team-col { font-weight: 500; color: var(--text); max-width: 180px; overflow: hidden; }
:where(#page-body) .fl-table td.team-col .team-col-inner { display: flex; align-items: center; gap: 5px; overflow: hidden; }
:where(#page-body) .fl-table td.team-col .team-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
:where(#page-body) .fl-table td.team-col .status-badge { flex-shrink: 0; }

/* Ranking table */
:where(#page-body) .rank-tabs { display:flex; align-items:stretch; min-height:48px; border-bottom:1px solid var(--border); }
:where(#page-body) .rank-tab { padding:14px 18px; font-size:13px; font-weight:600; cursor:pointer; color:var(--text-3); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color 0.12s; }
:where(#page-body) .rank-tab:hover { color:var(--text-2); }
:where(#page-body) .rank-tab.active { color:var(--text); border-bottom-color:var(--text); }
:where(#page-body) .dnf-toggle { display:inline-flex; align-items:center; font-size:12px; font-weight:600; color:var(--text-3); border:1px solid var(--border); border-radius:20px; padding:5px 13px; cursor:pointer; user-select:none; white-space:nowrap; transition:all .12s; }
:where(#page-body) .dnf-toggle:hover { border-color:var(--border-strong); color:var(--text-2); }
:where(#page-body) .dnf-toggle.on { background:var(--text); color:var(--off-white); border-color:var(--text); }
:where(#page-body) .solo-race .team-rank-tab { display:none; }
:where(#page-body) .solo-race .driver-rank-tab { border-bottom-color:var(--gtp); color:var(--text); }

/* Sort indicator */
:where(#page-body) .sort-arrow { display: inline-block; margin-left: 3px; opacity: 0.5; }
:where(#page-body) .sort-arrow.asc::after { content: '↑'; }
:where(#page-body) .sort-arrow.desc::after { content: '↓'; }

/* Tooltip */
:where(#page-body) .tooltip {
  position: fixed;
  background: var(--surface);
  color: var(--ink);
  border: 0.5px solid var(--line);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-family: var(--mono);
  pointer-events: none;
  z-index: 999;
  display: none;
  box-shadow: var(--shadow-md);
  max-width: 200px;
}
:where(#page-body) .tooltip-lap { color: var(--sub); font-size: 11px; margin-bottom: 3px; }
:where(#page-body) .tooltip-entry { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
:where(#page-body) .tooltip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
:where(#page-body) .tt-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* Delta badge */
:where(#page-body) .delta { font-family: var(--mono); font-size: 12px; }
:where(#page-body) .delta.up { color: var(--lmp2); }
:where(#page-body) .delta.dn { color: var(--gt3); }
:where(#page-body) .delta.eq { color: var(--text-3); }

/* ── Race progression page ── */
:where(#page-body) .prog-layout { display: block; max-width: 100%; }
/* -- Race progression page * GRANDSTAND PHASE 8 ---------------------- */
/* both charts -> borderless paper sections (mirror lap-times) */
:where(#page-body) #page-progression .card { background: none; border: none; border-radius: 0; box-shadow: none; overflow: visible; margin-bottom: 28px; }
:where(#page-body) #page-progression .prog-layout > .card:last-child { margin-bottom: 0; }

/* card head -> overline + trailing hairline (gs-section-head idiom) */
:where(#page-body) #page-progression .card-head { padding: 0; border-bottom: none; display: flex; align-items: center; gap: 16px; justify-content: flex-start; margin-bottom: 14px; }
:where(#page-body) #page-progression .card-head::after { content: ''; flex: 1; height: 1px; background: var(--line); }
:where(#page-body) #page-progression .card-title { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }

/* flush chart-area + reserved canvas box (display height + full width) so the
   first measure is the final one — no first-hover shrink, no JS reorder. The JS
   sizes to the same values (drops -36 via js[103/104]; H stays 340). */
:where(#page-body) #page-progression .chart-area { padding: 14px 0 4px; }
:where(#page-body) #page-progression #pos-canvas,
:where(#page-body) #page-progression #gap-canvas { display: block; width: 100%; height: 340px; }

/* chip legend (dot dropped js[102]; colour rides the #num) — filter-button base */
:where(#page-body) #page-progression .car-selector { position: relative; border-bottom: none; }
:where(#page-body) #page-progression .cs-chips { padding: 14px 0 0; gap: 8px; }
:where(#page-body) #page-progression .car-chip { border-radius: 4px; border: 1px solid var(--line); background: none; padding: 4px 9px; gap: 6px; font-family: var(--font-body); font-size: 11.5px; font-weight: 600; color: var(--sub); transition: border-color 0.12s, color 0.12s, background 0.12s; }
:where(#page-body) #page-progression .car-chip-label { font-family: var(--font-body); font-weight: 800; font-size: 12px; }
:where(#page-body) #page-progression .car-chip-name { font-family: var(--font-body); font-size: 11.5px; color: var(--sub); max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { :where(#page-body) #page-progression .car-chip:hover { border-color: var(--faint); color: var(--ink); } }
:where(#page-body) #page-progression .car-chip.selected,
:where(#page-body) #page-progression .car-chip.selected:hover { background: var(--ink); border-color: var(--ink); }
:where(#page-body) #page-progression .car-chip.selected .car-chip-name { color: var(--paper); font-weight: 700; }

/* mobile dropdown -> Grandstand sheet (mirror stints): flat paper, hairline rows */
:where(#page-body) #page-progression .cs-mobile { padding: 14px 0 2px; }
:where(#page-body) #page-progression .cs-trigger { width: 100%; justify-content: space-between; padding: 10px 14px; border: 1px solid var(--line); border-radius: 4px; background: none; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink); }
:where(#page-body) #page-progression .cs-panel { left: 0; right: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); box-shadow: none; }
:where(#page-body) #page-progression .cs-row { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); }
:where(#page-body) #page-progression .cs-row:last-child { border-bottom: none; }
:where(#page-body) #page-progression .cs-name { color: var(--sub); }
:where(#page-body) #page-progression .cs-check { color: var(--ink); }
/* iOS hover-latch: neutralise the ungated legacy hovers; real hovers behind hover:hover */
:where(#page-body) #page-progression .cs-trigger:hover { border-color: var(--line); }
:where(#page-body) #page-progression .cs-row:hover { background: transparent; }
@media (hover: hover) {
  :where(#page-body) #page-progression .cs-trigger:hover { border-color: var(--faint); }
  :where(#page-body) #page-progression .cs-row:hover { background: var(--surface); }
}

/* -- responsive: Grandstand two-step ladder (720-1023 tablet, <=719 mobile) --
   The shared <=920 chip->dropdown flip is gone (retired below), so the base
   .cs-chips{display:flex} / .cs-mobile{display:none} hold on desktop+tablet.
   Tablet steps the chips down a touch (a crowded class wraps tidier); mobile
   swaps chips for the dropdown. Both charts stay on mobile (no table fallback). */
@media (min-width: 720px) and (max-width: 1023px) {
  :where(#page-body) #page-progression .car-chip { padding: 5px 10px; font-size: 11.5px; }
  :where(#page-body) #page-progression .car-chip-label { font-size: 12px; }
}
@media (max-width: 719px) {
  :where(#page-body) #page-progression .cs-chips { display: none; }
  :where(#page-body) #page-progression .cs-mobile { display: block; }
}


/* ── Stint analysis page · GRANDSTAND PHASE 4 ──────────────────────────
   Section heads replace the card chrome. .fl-table is restyled SCOPED to
   #page-stints (option (a) — Lap Times' rank-table keeps the legacy base
   until its own phase); the cs dropdown restyle likewise.
   Round 2 pulls a chartTheme slice forward for the two STINT canvases
   (js[26–42]): transparent on paper, Inter, warm tokens — so the scoped
   .chart-area below zeroes the lateral inset and the draws read the full
   parent width. The SHARED .chart-area rule stays untouched for the other
   tabs. Layout: js[20] toggles .stints-sbs on .stint-layout when the
   SELECTED car's stint count ≤ 14 (round 7 — keyed per car, not class
   max); the ≥1024 gate lives in CSS so resizes need no JS.
   ROUND 3: the map is the selector — chips gone, head metas name the car. */
:where(#page-body) .stint-layout { display: block; max-width: 100%; }
:where(#page-body) #page-stints .st-shead {
  display: flex; align-items: center; gap: 16px; margin-bottom: 4px;
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
:where(#page-body) #page-stints .st-shead::after { content: ''; flex: 1; height: 1px; background: var(--line); order: 2; }
:where(#page-body) #page-stints .st-shead-meta { order: 3; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* map label column (STINTS.md selector D): real buttons beside the canvas */
:where(#page-body) #page-stints .st-map-body { display: flex; align-items: flex-start; }
:where(#page-body) #page-stints .st-map-labels { width: 244px; flex-shrink: 0; padding-top: 10px; } /* chart-area 0 + canvas PAD.t 10 */
:where(#page-body) #page-stints .st-map-body .chart-area { flex: 1; min-width: 0; padding-top: 0; }
:where(#page-body) #page-stints .st-row-label { display: flex; align-items: center; gap: 8px; height: 32px; }
:where(#page-body) #page-stints .st-row-pos { width: 26px; text-align: right; font-size: 11px; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; flex-shrink: 0; }
:where(#page-body) #page-stints .st-row-btn {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
  margin-right: 14px; height: 26px; padding: 3px 10px;
  border: 1px solid var(--line); border-radius: 4px; background: none;
  font-family: var(--font-body); cursor: pointer; text-align: left;
}
:where(#page-body) #page-stints .st-row-btn .st-row-num { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
:where(#page-body) #page-stints .st-row-btn .st-row-name { font-size: 11.5px; font-weight: 600; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(#page-body) #page-stints .st-row-btn.sel { background: var(--ink); border-color: var(--ink); }
:where(#page-body) #page-stints .st-row-btn.sel .st-row-num { font-weight: 800; }
:where(#page-body) #page-stints .st-row-btn.sel .st-row-name { color: var(--paper); font-weight: 700; } /* paper, not #fff — dark mode flips ink to light (phase-5 session fix) */
:where(#page-body) #page-stints .st-row-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
:where(#page-body) #page-stints .st-map-sec { margin-top: -1px; margin-bottom: 30px; }
:where(#page-body) #page-stints .st-pair { align-items: start; }
:where(#page-body) #page-stints .st-box-sec { margin-bottom: 30px; }
:where(#page-body) #page-stints .st-note { font-size: 12px; color: var(--faint); line-height: 1.5; max-width: 560px; margin-top: 2px; }
:where(#page-body) #page-stints .chart-area { padding: 14px 0 6px; }
:where(#page-body) #page-stints #st-minimap { display: none; }

/* ROUND 3: the chip selector is GONE — the stint map's rows are the car
   selector (js[20] renderStintMapLabels — real buttons, round 8); the
   selected car is named in the section-head metas (js[51]). The legacy
   chip base CSS survives untouched for Lap Times / Progression. */
:where(#page-body) #page-stints .car-selector { border-bottom: none; }
/* (canvas cursor rule retired round 8 — the buttons are the targets) */

/* mobile dropdown — same control family in dropdown form. Panel pinned to
   the wrapper edges (the legacy 18px insets assumed card padding); flat
   paper sheet, hairline rows (replay-card language, no shadow). */
:where(#page-body) #page-stints .cs-mobile { padding: 14px 0 2px; } /* round 14: breathing room above the trigger; the table's 18px margin covers below */
:where(#page-body) #page-stints .cs-trigger {
  width: 100%; justify-content: space-between; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 4px; background: none;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink);
}
:where(#page-body) #page-stints .cs-panel { left: 0; right: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); box-shadow: none; }
:where(#page-body) #page-stints .cs-row { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); }
:where(#page-body) #page-stints .cs-row:last-child { border-bottom: none; }
:where(#page-body) #page-stints .cs-name { color: var(--sub); }
:where(#page-body) #page-stints .cs-check { color: var(--ink); }

/* summary table — Results language: hairline rows on paper, transparent
   header over a 1px ink rule. The sorted state is the arrow span the JS
   renders into the th (audit: legacy .fl-table th.sorted was DEAD CSS —
   renderStintTableRows never emits the class; gold sorted headers never
   actually appeared). The hover affordance below is the sort cue. */
:where(#page-body) #page-stints .st-table-scroll { overflow-x: auto; margin-top: 18px; } /* top spacing above the table; on narrow widths it also separates the mobile team selector from the column-header row (the former section head was removed) */
:where(#page-body) #page-stints .fl-table th {
  background: transparent; border-bottom: 1px solid var(--ink);
  padding: 0 14px 7px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; color: var(--faint);
}
:where(#page-body) #page-stints .fl-table td { padding: 9px 14px; border-bottom: 1px solid var(--line-soft); color: var(--sub); }
:where(#page-body) #page-stints .fl-table tr:last-child td { border-bottom: none; } /* re-assert the base no-trailing-rule the scoped td rule above was overriding */
:where(#page-body) #page-stints .fl-table td.mono { font-family: var(--font-body); font-variant-numeric: tabular-nums lining-nums; font-size: 12.5px; }
:where(#page-body) #page-stints .fl-table td.st-best { font-family: var(--font-body); font-variant-numeric: tabular-nums lining-nums; font-size: 12.5px; color: var(--ink); font-weight: 600; }

/* iOS hover-latch (deviation 38 mechanism): unconditional neutralisers pin
   the ungated legacy hovers to base; real hovers live behind hover:hover */
:where(#page-body) #page-stints .fl-table th:hover { color: var(--faint); }
:where(#page-body) #page-stints .fl-table tr:hover td { background: transparent; }
:where(#page-body) #page-stints .cs-trigger:hover { border-color: var(--line); }
:where(#page-body) #page-stints .st-row-btn:hover { border-color: var(--line); }
:where(#page-body) #page-stints .cs-row:hover { background: transparent; }
@media (hover: hover) {
  :where(#page-body) #page-stints .fl-table th:hover { color: var(--ink); }
  :where(#page-body) #page-stints .cs-trigger:hover { border-color: var(--faint); }
  :where(#page-body) #page-stints .st-row-btn:hover { border-color: var(--sub); }
  :where(#page-body) #page-stints .st-row-btn.sel:hover { border-color: var(--ink); }
  :where(#page-body) #page-stints .cs-row:hover { background: var(--surface); }
}

/* mini-map (AMStints) — HTML bars, the canvas map's per-driver shades */
:where(#page-body) #page-stints .st-mm-row { margin-bottom: 12px; }
:where(#page-body) #page-stints .st-mm-meta { display: flex; align-items: baseline; gap: 7px; margin-bottom: 4px; min-width: 0; }
:where(#page-body) #page-stints .st-mm-pos { font-size: 10px; font-weight: 800; color: var(--faint); font-variant-numeric: tabular-nums; min-width: 18px; }
:where(#page-body) #page-stints .st-mm-num { font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
:where(#page-body) #page-stints .st-mm-name { font-size: 11px; font-weight: 600; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(#page-body) #page-stints .st-mm-bar { position: relative; height: 22px; }
:where(#page-body) #page-stints .st-mm-mid { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
:where(#page-body) #page-stints .st-mm-seg { position: absolute; height: 6px; border-radius: 1.5px; min-width: 2px; }
:where(#page-body) #page-stints .st-mm-more {
  display: block; width: 100%; margin: 12px 0 0; padding: 9px 0; text-align: center;
  border: 1px solid var(--line); border-radius: 4px; background: none;
  color: var(--sub); font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer;
}

/* 720–1023: charts stay (the map is the tab's headline on tablets); the
   table drops the depth tier — Racing + Outliers — leaving the desktop
   mock's six. Chips stay visible over the shared legacy ≤920 hide. */
@media (min-width: 720px) {
  :where(#page-body) #page-stints #stint-mobile-team-sel { display: none; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  :where(#page-body) #page-stints .fl-table th:nth-child(4),
:where(#page-body) #page-stints .fl-table td:nth-child(4),
:where(#page-body) #page-stints .fl-table th:nth-child(8),
:where(#page-body) #page-stints .fl-table td:nth-child(8) { display: none; }
  :where(#page-body) #page-stints .fl-table th,
:where(#page-body) #page-stints .fl-table td { padding-left: 9px; padding-right: 9px; }
}
/* round 12: the driver column is the only unbounded cell — cap it so the
   summary can never grow a horizontal scrollbar at in-between widths */
:where(#page-body) #page-stints #stint-table-body td:nth-child(2) { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px) and (max-width: 1279px) {
  /* round 13: at the pair's narrowest the half-width summary can't fit six
     columns — variance steps out until there's room */
  :where(#page-body) #page-stints .stints-sbs .fl-table th:nth-child(7),
:where(#page-body) #page-stints .stints-sbs .fl-table td:nth-child(7) { display: none; }
}
@media (min-width: 1024px) {
  /* minmax(0,1fr): a bare 1fr track minimums at AUTO, so the table's
     intrinsic width blew the pair past the container (round-4 fix) */
  :where(#page-body) #page-stints .stints-sbs .st-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  /* side-by-side: the table no longer carries a section head of its own, so drop
     the 18px top gap and let its column-header row sit level with the chart's
     section head in the column beside it */
  :where(#page-body) #page-stints .stints-sbs .st-table-scroll { margin-top: 0; }
  /* side-by-side = the mock's six columns: the depth tier yields the half width */
  :where(#page-body) #page-stints .stints-sbs .fl-table th:nth-child(4),
:where(#page-body) #page-stints .stints-sbs .fl-table td:nth-child(4),
:where(#page-body) #page-stints .stints-sbs .fl-table th:nth-child(8),
:where(#page-body) #page-stints .stints-sbs .fl-table td:nth-child(8) { display: none; }
  :where(#page-body) #page-stints .stints-sbs .fl-table th,
:where(#page-body) #page-stints .stints-sbs .fl-table td { padding-left: 9px; padding-right: 9px; }
}

/* <720: mini-map + dropdown + table — legacy column picks (Stint · Driver ·
   Laps · Median; the old 920 block kept 1,2,3,6). nth-child cuts match the
   proven legacy mechanism: the live columns are FIXED (the thead is JS-
   rewritten but always 8), so the phase-2 tier-class machinery isn't needed.
   Lateral padding LONGHAND (round-7 lesson). */
@media (max-width: 719px) {
  :where(#page-body) #page-stints .st-map-body { display: none; }
  :where(#page-body) #page-stints #st-minimap { display: block; }
  :where(#page-body) #page-stints .st-map-sec .st-shead-meta { display: none; } /* dynamic car-name metas stay */
  :where(#page-body) #page-stints .st-box-sec { display: none; }
  :where(#page-body) #page-stints #stint-mobile-team-sel { display: block; }
  :where(#page-body) #page-stints #stint-mobile-team-sel .cs-mobile { display: block; }
  :where(#page-body) #page-stints .fl-table th:nth-child(4),
:where(#page-body) #page-stints .fl-table td:nth-child(4),
:where(#page-body) #page-stints .fl-table th:nth-child(5),
:where(#page-body) #page-stints .fl-table td:nth-child(5),
:where(#page-body) #page-stints .fl-table th:nth-child(7),
:where(#page-body) #page-stints .fl-table td:nth-child(7),
:where(#page-body) #page-stints .fl-table th:nth-child(8),
:where(#page-body) #page-stints .fl-table td:nth-child(8) { display: none; }
  :where(#page-body) #page-stints .fl-table th { padding-left: 10px; padding-right: 10px; }
  :where(#page-body) #page-stints .fl-table td { padding-left: 10px; padding-right: 10px; }
}

/* ── Awards page ── */
/* ── Awards page · GRANDSTAND PHASE 5 ──────────────────────────────────
   Rows replace the cards (AAwards). Per category: .aw-cat wraps an
   .aw-shead (emoji kept on section titles) + one .aw-row per award.
   Entry = .aw-rank (1st/2nd/3rd, 1st rosso) beside .aw-lines:
   .aw-who (flag + cp-linked name, or plate + team for team awards),
   .aw-val (metric · context), .aw-team (plate + team — driver awards
   only). All three lines ellipsize. The awards plate is a scaled-down
   Results plate, scoped here (Results keeps its own at 21px). */
:where(#page-body) #page-awards .aw-shead {
  position: relative; display: grid; grid-template-columns: 250px 1fr 1fr 1fr;
  gap: 24px; align-items: center; margin: 34px 0 4px;
}
:where(#page-body) #page-awards .aw-shead::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto 0; height: 1px; background: var(--line); }
:where(#page-body) #page-awards .aw-cat:first-child .aw-shead { margin-top: 2px; }
:where(#page-body) #page-awards .aw-shead-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--faint); line-height: 1;
  position: relative; background: var(--paper); padding-right: 12px; justify-self: start;
}
:where(#page-body) .aw-hnum { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; line-height: 1; position: relative; background: var(--paper); padding: 0 12px; margin-left: -12px; justify-self: start; }
:where(#page-body) .aw-h1,
:where(#page-body) .aw-p1 .aw-rank { color: var(--gold); }
:where(#page-body) .aw-h2,
:where(#page-body) .aw-p2 .aw-rank { color: #82878f; }
:where(#page-body) .aw-h3,
:where(#page-body) .aw-p3 .aw-rank { color: #a3622e; }
[data-theme="dark"] :where(#page-body) .aw-h2,
[data-theme="dark"] :where(#page-body) .aw-p2 .aw-rank { color: #9aa1ab; }
[data-theme="dark"] :where(#page-body) .aw-h3,
[data-theme="dark"] :where(#page-body) .aw-p3 .aw-rank { color: #c98a52; }
:where(#page-body) .aw-row {
  display: grid; grid-template-columns: 250px 1fr 1fr 1fr; gap: 24px;
  padding: 16px 0; border-bottom: 1px solid var(--line-soft);
  align-items: center;
}
:where(#page-body) #page-awards .aw-cat .aw-row:last-child { border-bottom: none; } /* last award in a category: drop the rule so it doesn't double with the next section's hairline */
:where(#page-body) .aw-info { min-width: 0; }
:where(#page-body) .aw-name { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--ink); letter-spacing: -0.01em; }
:where(#page-body) .aw-desc { font-size: 12px; color: var(--faint); margin-top: 3px; line-height: 1.4; }
:where(#page-body) .aw-entry { display: flex; align-items: center; min-width: 0; }
:where(#page-body) .aw-entry.aw-p2,
:where(#page-body) .aw-entry.aw-p3 { opacity: .78; }
:where(#page-body) .aw-rank { display: none; } /* desktop: the head's column numerals carry rank; mobile shows these */
:where(#page-body) .aw-lines { min-width: 0; flex: 1; }
:where(#page-body) .aw-who { font-size: 13.5px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; min-width: 0; }
:where(#page-body) .aw-val { font-size: 12px; color: var(--sub); margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(#page-body) .aw-team { font-size: 11.5px; color: var(--faint); margin-top: 3px; display: flex; align-items: center; gap: 5px; min-width: 0; }
:where(#page-body) .aw-who .cp-link,
:where(#page-body) .aw-team .cp-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(#page-body) .aw-who .fl,
:where(#page-body) .aw-who .car-badge { flex-shrink: 0; }
:where(#page-body) #awards-content .car-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 27px; height: 17px; padding: 0 4px; border: none; border-radius: 3px; font-family: var(--font-body); font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 17px; }
@media (max-width: 1023.5px) and (min-width: 720px) {
  :where(#page-body) .aw-row,
:where(#page-body) #page-awards .aw-shead { grid-template-columns: 190px 1fr 1fr 1fr; gap: 16px; }
}
@media (max-width: 719.5px) {
  /* Mobile (round 4 — Marcus): one simple table per award —
       1 [flag] name        content
       2 [flag] name        content
       3 [flag] name        content
     Metal rank, identity, the data point right-aligned and trimmed
     (.aw-extra context spans and the team line hidden). Winner's
     content bold. */
  :where(#page-body) .aw-row { display: block; padding: 12px 0; }
  :where(#page-body) .aw-info { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  :where(#page-body) .aw-name { font-size: 14.5px; }
  :where(#page-body) .aw-desc { margin-top: 0; font-size: 10.5px; flex-shrink: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
  :where(#page-body) .aw-entry { margin-top: 7px; gap: 9px; }
  :where(#page-body) .aw-entry.aw-p2,
:where(#page-body) .aw-entry.aw-p3 { opacity: 1; }
  :where(#page-body) .aw-rank { display: block; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; line-height: 1.2; min-width: 30px; flex-shrink: 0; }
  :where(#page-body) .aw-lines { display: flex; align-items: center; gap: 10px; }
  :where(#page-body) .aw-who { flex: 1; font-size: 12.5px; }
  :where(#page-body) .aw-val { margin: 0; flex-shrink: 0; max-width: 45%; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :where(#page-body) .aw-p1 .aw-val { font-weight: 700; color: var(--ink); }
  :where(#page-body) .aw-team,
:where(#page-body) .aw-extra { display: none; }
  :where(#page-body) .aw-hnum { display: none; }
  :where(#page-body) #page-awards .aw-shead { display: flex; }
}
/* Top bar toggle and share button use the shared circular style from grandstand.css. */

/* legacy .hl-* card rules removed (phase 5 — cards → rows) */
:where(#page-body) .mb20 { margin-bottom: 20px; }
:where(#page-body) .mt16 { margin-top: 16px; }
:where(#page-body) .flex-gap { display: flex; gap: 8px; align-items: center; }
:where(#page-body) .text-3 { color: var(--text-3); }
:where(#page-body) .text-sm { font-size: 13px; }

/* ── Head to Head · GRANDSTAND PHASE 6 ─────────────────────────────────
   B2 scoreboard: two typography sides as paper punch-outs on one
   continuous hairline, VS punched out centre. Colour is data — the car
   tag carries carColor() inline (js[77]); no class-hue remnants.
   Selector sheet = the stints cs-panel idiom; car buttons = the filter-
   button family. Frame chrome stripped: sheads name the charts, the
   soft dividers bound the stat band. Stats = Q2-A flat mirrored grid,
   inline colour edges kept (JS-painted, same data link as the tags). */
:where(#page-body) .h2h-wrap { /* .page provides max-width, centering and padding */ }
:where(#page-body) .h2h-cars-row { position: relative; display: grid; grid-template-columns: 1fr 64px 1fr; align-items: start; margin: 0 0 22px; }
:where(#page-body) .h2h-cars-row::before { content: ''; position: absolute; left: 0; right: 0; top: 17px; height: 1px; background: var(--line); }
:where(#page-body) .h2h-vs { position: relative; background: var(--paper); text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--faint); padding-top: 11px; align-self: start; }
/* r6: the paper punch-out is LINE 1's background, width:fit-content —
   the card-level background blanked the hairline to the (often wider)
   driver line's width; now the line cuts at the team name and the
   drivers run beneath it. Card stays position:relative (paints above
   the row's absolute ::before — the punch-out mechanism). */
:where(#page-body) .h2h-car-card { position: relative; cursor: pointer; min-width: 0; max-width: 100%; justify-self: start; }
:where(#page-body) #h2h-card-b { justify-self: end; text-align: right; }
:where(#page-body) .h2h-card-line1 { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; overflow: hidden; min-width: 0; height: 34px; background: var(--paper); padding-right: 12px; width: fit-content; max-width: 100%; }
:where(#page-body) #h2h-card-b .h2h-card-line1 { flex-direction: row-reverse; padding-right: 0; padding-left: 12px; margin-left: auto; }
:where(#page-body) .h2h-car-tag { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.01em; line-height: 34px; flex-shrink: 0; }
:where(#page-body) .h2h-card-team { font-size: 14.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
:where(#page-body) .h2h-card-line2 { font-size: 11.5px; font-weight: 600; color: var(--sub); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(#page-body) .h2h-car-card.h2h-empty { display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; padding: 11px 20px; border: 1px dashed var(--line); border-radius: 4px; white-space: nowrap; background: var(--paper); }
:where(#page-body) .h2h-empty-icon { font-size: 14px; color: var(--faint); line-height: 1; }
:where(#page-body) .h2h-empty-text { font-size: 12.5px; font-weight: 600; color: var(--faint); }

/* selector sheet — the stints cs-panel idiom: flat paper, hairline rows */
:where(#page-body) .h2h-selector-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; margin-bottom: 18px; }
:where(#page-body) .h2h-selector-head { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; }
:where(#page-body) .h2h-selector-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }
:where(#page-body) .h2h-selector-close { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--faint); line-height: 1; padding: 0; }
:where(#page-body) .h2h-car-list { padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 8px; }
:where(#page-body) .h2h-car-btn { background: none; border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 2px; min-width: 160px; max-width: 200px; color: var(--ink); font-family: var(--font-body); }
:where(#page-body) .h2h-car-btn.is-other { opacity: .4; pointer-events: none; }
:where(#page-body) .h2h-car-btn .btn-num { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
:where(#page-body) .h2h-car-btn .btn-team { font-size: 11px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(#page-body) .h2h-car-btn .btn-pos { font-size: 10px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(#page-body) #page-h2h .h2h-car-btn.selected,
:where(#page-body) #page-h2h .h2h-car-btn.selected:hover { background: var(--ink); border-color: var(--ink); }
:where(#page-body) #page-h2h .h2h-car-btn.selected .btn-team,
:where(#page-body) #page-h2h .h2h-car-btn.selected .btn-pos { color: var(--paper); }

/* analysis strip — frame chrome gone; sheads name the charts; the soft
   dividers bound the stat band (replay keeps the ctrl-underline rhythm) */
:where(#page-body) .h2h-analysis-frame { margin-bottom: 14px; }
:where(#page-body) #h2hGapCanvas,
:where(#page-body) #h2hDeltaCanvas { margin-top: 4px; }
:where(#page-body) .h2h-frame-controls { padding: 0 0 14px; }
:where(#page-body) .h2h-frame-section-head { padding: 26px 0 8px; display: flex; align-items: center; gap: 16px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
:where(#page-body) .h2h-frame-section-head::after { content: ''; flex: 1; height: 1px; background: var(--line); order: 2; }
:where(#page-body) .h2h-chart-title { min-width: 0; }
:where(#page-body) .h2h-shead-meta { order: 3; display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--faint); white-space: nowrap; }
/* ── Charts + versus rail (Direction C) ───────────────────────────────────
   Desktop: charts left (fluid) + full-height versus rail right. Tablet drops
   the rail (charts only); mobile drops the charts (readout only). Status and
   incident hues themed below so the readout reads in dark as well as light. */
:where(#page-body) #page-h2h { --h2h-amber: #9a6a12; --h2h-purple: #7a3aa0; }
[data-theme="dark"] :where(#page-body) #page-h2h { --h2h-amber: #cdb462; --h2h-purple: #b98cd9; }
:where(#page-body) .h2h-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 40px; align-items: stretch; padding-top: 8px; }
:where(#page-body) .h2h-charts-col { min-width: 0; }
:where(#page-body) .h2h-rail { display: flex; flex-direction: column; border-left: 1px solid var(--line); padding-left: 28px; padding-top: 24px; min-width: 0; }
:where(#page-body) .h2h-rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 24px; }
:where(#page-body) .h2h-rail-now { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
:where(#page-body) .h2h-rail-togo { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(#page-body) .h2h-versus { flex: 1; display: grid; grid-template-rows: auto repeat(5, 1fr); }
:where(#page-body) .h2h-vnames { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 14px; padding-bottom: 12px; }
:where(#page-body) .h2h-vsec { display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; }
:where(#page-body) .h2h-vsec-pos { justify-content: center; transform: translateY(-14px); }
:where(#page-body) .h2h-vsec-pos .h2h-vval { font-size: 36px; }
:where(#page-body) .h2h-vdriver { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 7px; min-width: 0; font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: -.01em; color: var(--ink); }
:where(#page-body) .h2h-vdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
:where(#page-body) .h2h-vname { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(#page-body) .h2h-vtitle { padding: 0 0 8px; }
:where(#page-body) .h2h-vgrid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
:where(#page-body) .h2h-vgrid-top { margin-top: 16px; }
:where(#page-body) .h2h-vcol { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
:where(#page-body) .h2h-vval { display: block; max-width: 100%; font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -.01em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
:where(#page-body) .h2h-vval.h2h-vdash { color: color-mix(in srgb, var(--faint) 50%, var(--line)); font-weight: 400; }
:where(#page-body) .h2h-vval.h2h-vtext { font-family: var(--font-body); font-weight: 700; font-size: 15px; letter-spacing: 0; white-space: nowrap; }
:where(#page-body) .h2h-vsub { font-size: 11.5px; color: var(--sub); line-height: 1.35; margin-top: 4px; font-variant-numeric: tabular-nums; }
:where(#page-body) .h2h-vsub.h2h-vstatus { display: flex; align-items: center; justify-content: center; gap: 5px; }
:where(#page-body) .h2h-vpip { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
:where(#page-body) .h2h-st-clean { background: var(--green); } :where(#page-body) .h2h-st-off { background: var(--h2h-amber); } :where(#page-body) .h2h-st-contact { background: var(--red); } :where(#page-body) .h2h-st-spin { background: var(--h2h-purple); }
:where(#page-body) .h2h-vtri { font-size: 8px; vertical-align: 1px; margin-right: 3px; }
:where(#page-body) .h2h-vtri-up { color: var(--green); } :where(#page-body) .h2h-vtri-down { color: var(--red); } :where(#page-body) .h2h-vtri-flat { color: var(--sub); }
:where(#page-body) .h2h-legend { padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 7px 16px; }
:where(#page-body) .h2h-leg-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--sub); }
:where(#page-body) .h2h-leg-pip { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
:where(#page-body) .h2h-leg-line { width: 0; height: 11px; flex-shrink: 0; }
:where(#page-body) .h2h-lg-pit { border-left: 1.5px dashed var(--sub); } :where(#page-body) .h2h-lg-sc { background: rgba(234,179,8,0.5); } :where(#page-body) .h2h-lg-dc { border-left: 2.5px solid var(--sub); }

/* transport: LOCKSTEP MIRROR of the replay-page skin (phase 3) — same
   physical control, two scopes; fold into one home at cutover. The base
   .h2h-ctrl-* rules below this block are replay's substrate: KEEP. */
:where(#page-body) #page-h2h .h2h-ctrl-row { display: flex; align-items: center; gap: 18px; margin-bottom: 0; flex-wrap: wrap; row-gap: 12px; }
:where(#page-body) #page-h2h .h2h-ctrl-group { display: flex; gap: 6px; }
:where(#page-body) #page-h2h .h2h-ctrl-btn { width: 38px; height: 38px; border-radius: 4px; border: 1px solid var(--line); background: var(--surface); color: var(--sub); font-size: 13px; }
:where(#page-body) #page-h2h .h2h-ctrl-btn:hover { background: var(--surface); border-color: var(--line); color: var(--sub); }
:where(#page-body) #page-h2h .h2h-ctrl-btn:hover::after { content: none; }
:where(#page-body) #page-h2h .h2h-play-btn { background: var(--red); border-color: var(--red); color: #fff; font-size: 15px; border-width: 1px; }
:where(#page-body) #page-h2h .h2h-play-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
:where(#page-body) #page-h2h .h2h-spd-group { gap: 0; border-bottom: 1px solid var(--line); align-self: center; }
:where(#page-body) #page-h2h .h2h-spd-btn { padding: 8px 14px; height: auto; border: none; border-radius: 0; border-bottom: 2px solid transparent; background: none; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--faint); margin-bottom: -1px; }
:where(#page-body) #page-h2h .h2h-spd-btn:hover { color: var(--faint); border-bottom-color: transparent; }
:where(#page-body) #page-h2h .h2h-spd-btn.active { background: none; border-bottom-color: var(--red); color: var(--ink); font-weight: 700; }
:where(#page-body) #page-h2h .h2h-slider { height: 2px; background: var(--line); border-radius: 0; }
:where(#page-body) #page-h2h .h2h-slider::-webkit-slider-thumb { width: 13px; height: 13px; background: var(--red); box-shadow: none; }
:where(#page-body) #page-h2h .h2h-slider::-moz-range-thumb { width: 13px; height: 13px; border: none; border-radius: 50%; background: var(--red); }
:where(#page-body) #page-h2h .h2h-lap-display { margin-left: 0; font-family: inherit; font-size: 12.5px; color: var(--sub); padding-left: 0; }
:where(#page-body) #page-h2h .h2h-lap-display strong { color: var(--ink); font-size: 16px; font-weight: 700; }
:where(#page-body) #page-h2h .h2h-scrub { flex: 1; min-width: 160px; }
/* r9: no border-top (replay keeps its own) — the line under the delta
   chart read as one hairline too many */
:where(#page-body) #page-h2h .h2h-kbd-tip { text-align: left; font-family: inherit; font-size: 12.5px; color: var(--faint); padding: 12px 0 4px; margin-top: 14px; }
:where(#page-body) #page-h2h button[data-tip="Go to start"],
:where(#page-body) #page-h2h button[data-tip="Go to end"] { display: flex; }

/* r8 (Marcus): Follow/Overview = PILLS on the class-tab filter-button
   spec (radius 4, hairline, active = ink/paper) — markup + JS untouched,
   this reskins over the underline-tab base. Speed stays underline tabs. */
:where(#page-body) #page-h2h #h2h-view-ctrl { gap: 6px; border-bottom: none; align-self: center; }
:where(#page-body) #page-h2h #h2h-view-ctrl .h2h-spd-btn { padding: 6px 14px; height: auto; border: 1px solid var(--line); border-radius: 4px; background: none; font-family: var(--font-body); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--sub); margin-bottom: 0; }
:where(#page-body) #page-h2h #h2h-view-ctrl .h2h-spd-btn:hover { border-color: var(--line); color: var(--sub); }
:where(#page-body) #page-h2h #h2h-view-ctrl .h2h-spd-btn.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* iOS hover-latch (deviation 38): new hovers authored INSIDE the gate only */
@media (hover: hover) {
  :where(#page-body) #page-h2h .h2h-ctrl-btn:hover { background: var(--paper); border-color: var(--faint); color: var(--ink); }
  :where(#page-body) #page-h2h .h2h-play-btn:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
  :where(#page-body) #page-h2h .h2h-spd-btn:hover { color: var(--ink); }
  :where(#page-body) #page-h2h #h2h-view-ctrl .h2h-spd-btn:hover { border-color: var(--faint); color: var(--ink); }
  :where(#page-body) #page-h2h #h2h-view-ctrl .h2h-spd-btn.active:hover { border-color: var(--ink); color: var(--paper); }
  :where(#page-body) #page-h2h .h2h-ctrl-btn:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); font-size: 10px; font-weight: 500; white-space: nowrap; padding: 3px 7px; border-radius: 4px; pointer-events: none; }
  :where(#page-body) .h2h-car-card.h2h-selected:hover .h2h-card-team { text-decoration: underline; text-underline-offset: 2px; }
  :where(#page-body) .h2h-car-card.h2h-empty:hover { border-color: var(--faint); }
  :where(#page-body) .h2h-car-card.h2h-empty:hover .h2h-empty-text { color: var(--sub); }
  :where(#page-body) #page-h2h .h2h-car-btn:hover { border-color: var(--sub); }
  :where(#page-body) #page-h2h .h2h-selector-close:hover { color: var(--ink); }
}

/* responsive — re-homed from the legacy 920 block into the Grandstand
   tiers, replay's <720 reflow mirrored. The h2hResizeCanvases JS keeps
   its legacy 920 height switch (canvas-internal; chartTheme territory). */
@media (max-width: 1023.9px) {
  :where(#page-body) #page-h2h .h2h-ctrl-btn { width: 40px; height: 40px; }
  /* tablet: charts only, rail dropped */
  :where(#page-body) .h2h-grid { grid-template-columns: 1fr; }
  :where(#page-body) .h2h-rail { display: none; }
}
@media (max-width: 719.9px) {
  /* board compresses: tags + chevrons only */
  :where(#page-body) .h2h-card-team,
:where(#page-body) .h2h-card-line2 { display: none; }
  :where(#page-body) .h2h-car-tag { font-size: 21px; }
  /* mobile: charts dropped — the versus readout is the page */
  :where(#page-body) .h2h-charts-col { display: none; }
  :where(#page-body) .h2h-legend { display: none; }
  :where(#page-body) .h2h-rail { display: flex; border-left: none; padding-left: 0; }
  :where(#page-body) .h2h-versus { display: flex; flex-direction: column; gap: 25px; }
  :where(#page-body) .h2h-vnames { column-gap: 16px; padding-bottom: 4px; }
  :where(#page-body) .h2h-vgrid { column-gap: 16px; }
  :where(#page-body) .h2h-vval { font-size: 21px; }
  :where(#page-body) .h2h-vsec-pos .h2h-vval { font-size: 28px; }
  :where(#page-body) .h2h-vsec-pos { transform: none; margin: -18px 0 -6px; }
  :where(#page-body) .h2h-vdriver { font-size: 15px; }
  /* transport reflow — replay <720 verbatim; speed + view tabs each on
     their own line */
  :where(#page-body) #page-h2h .h2h-ctrl-row { column-gap: 0; row-gap: 10px; justify-content: space-between; }
  :where(#page-body) #page-h2h .h2h-scrub { order: 3; flex-basis: 100%; min-width: 0; padding: 12px 0 2px; }
  :where(#page-body) #page-h2h .h2h-slider::-webkit-slider-thumb { width: 18px; height: 18px; }
  :where(#page-body) #page-h2h #h2h-spd-group { order: 4; flex-basis: 100%; justify-content: flex-start; }
  :where(#page-body) #page-h2h #h2h-view-ctrl { display: none; }
  :where(#page-body) #page-h2h .h2h-lap-display { order: 2; margin-left: auto; padding-left: 10px; }
  :where(#page-body) #page-h2h .h2h-kbd-tip { display: none; }
}

/* shared transport BASE (replay substrate — fold at cutover) */
:where(#page-body) .h2h-ctrl-row { display:flex; align-items:center; gap:0; margin-bottom:12px; flex-wrap:wrap; row-gap:8px; }
:where(#page-body) .h2h-ctrl-group { display:flex; align-items:center; gap:5px; }
:where(#page-body) .h2h-ctrl-sep { width:1px; height:32px; background:var(--border); margin:0 14px; flex-shrink:0; }
:where(#page-body) .h2h-ctrl-btn { width:44px; height:44px; border-radius:8px; border:1px solid var(--border); background:var(--white); color:var(--text-2); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .1s; flex-shrink:0; position:relative; outline:none; }
:where(#page-body) .h2h-ctrl-btn:hover { background:var(--off-white); border-color:var(--border-strong); color:var(--text); }
:where(#page-body) .h2h-ctrl-btn:hover::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:var(--text); color:var(--white); font-size:10px; font-family:var(--sans); font-weight:500; white-space:nowrap; padding:3px 7px; border-radius:4px; pointer-events:none; opacity:1; }
:where(#page-body) .h2h-play-btn { width:54px; height:54px; font-size:22px; border-color:#d97706; color:#d97706; border-width:2px; }
:where(#page-body) .h2h-play-btn:hover { background:rgba(217,119,6,.08); border-color:#b45309; color:#b45309; }
:where(#page-body) .h2h-spd-group { display:flex; gap:4px; }
:where(#page-body) .h2h-spd-btn { padding:8px 13px; border-radius:6px; border:1px solid var(--border); background:none; font-family:var(--mono); font-size:12px; font-weight:600; cursor:pointer; color:var(--text-3); transition:all .1s; height:36px; display:flex; align-items:center; outline:none; }
:where(#page-body) .h2h-spd-btn:hover { border-color:var(--border-strong); color:var(--text); }
:where(#page-body) .h2h-spd-btn.active { background:#d97706; border-color:#d97706; color:white; }
:where(#page-body) .h2h-lap-display { margin-left:auto; font-family:var(--mono); font-size:14px; color:var(--text-2); white-space:nowrap; padding-left:14px; }
:where(#page-body) .h2h-lap-display strong { color:var(--text); font-size:17px; font-weight:600; }
:where(#page-body) .h2h-slider-row { display:flex; align-items:center; gap:10px; }
:where(#page-body) .h2h-slider { flex:1; -webkit-appearance:none; height:4px; background:var(--border); border-radius:2px; outline:none; cursor:pointer; }
:where(#page-body) .h2h-slider::-webkit-slider-thumb { -webkit-appearance:none; width:15px; height:15px; border-radius:50%; background:#f59e0b; cursor:pointer; box-shadow:0 0 0 3px rgba(245,158,11,.2); }
:where(#page-body) .h2h-kbd-tip { text-align:center; font-size:11px; font-family:var(--mono); color:var(--text-3); padding:12px 0 4px; }
:where(#page-body) .h2h-empty-state { text-align:center; padding:64px 20px; color:var(--text-3); font-size:14px; }
:where(#page-body) .h2h-badge-pip { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:3px; }
:where(#page-body) .h2h-pip-pit { background:#f59e0b; } :where(#page-body) .h2h-pip-inc { background:#e11d48; } :where(#page-body) .h2h-pip-sc { background:#eab308; } :where(#page-body) .h2h-pip-clean { background:#16a34a; }

  /* Results controls row: Grandstand styles at end of this block */

  /* ── Replay — Grandstand (phase 3): chrome around the canvas only ────────
     Panel RIGHT of canvas via row-reverse (markup order unchanged).
     .rpl-card background must be OPAQUE (cards overlap during shuffles);
     selection colour is inline-owned by rplSelectCar (translucent wash +
     border-left 3px↔5px) — the CSS never sets card background on select. */
  :where(#page-body) .rpl-wrap { margin-bottom: 20px; }
  :where(#page-body) .rpl-ctrl-card { padding: 4px 0 14px; }
  :where(#page-body) .rpl-col-hdr { display: flex; flex-direction: row-reverse; gap: 15px; }
  :where(#page-body) .rpl-col-hdr-panel { width: 275px; flex-shrink: 0; display: grid; grid-template-columns: 24px 14px 1fr 62px; column-gap: 10px; padding: 0 10px 7px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--faint); border-bottom: 1px solid var(--ink); align-items: end; }
  :where(#page-body) .rpl-col-hdr-canvas { flex: 1; }
  :where(#page-body) .rpl-area { display: flex; flex-direction: row-reverse; align-items: flex-start; overflow: hidden; gap: 15px; }
  :where(#page-body) .rpl-panel-body { width: 275px; flex-shrink: 0; position: relative; overflow: hidden; }
  :where(#page-body) .rpl-canvas-wrap { flex: 1; overflow: hidden; }
  :where(#page-body) #rpl-canvas { display: block; }
  :where(#page-body) .rpl-card { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: 24px 14px 1fr 62px; column-gap: 10px; align-items: center; padding: 0 10px; border-bottom: 1px solid var(--line-soft); background: var(--paper); will-change: transform; box-sizing: border-box; }
  :where(#page-body) .rpl-card-pos { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--faint); font-variant-numeric: tabular-nums lining-nums; letter-spacing: .01em; }
  :where(#page-body) .rpl-card--podium .rpl-card-pos { color: var(--ink); }
  :where(#page-body) .rpl-card-pos.rpl-card-pos--pit { font-family: var(--font-body); font-size: 9px; font-weight: 800; letter-spacing: .04em; color: var(--gold); background: var(--gold-light); padding: 2px 3px; border-radius: 3px; display: inline-block; line-height: 1; justify-self: start; }
  :where(#page-body) .rpl-card-dot { width: 9px; height: 9px; border-radius: 50%; justify-self: center; }
  :where(#page-body) .rpl-card-info { min-width: 0; }
  :where(#page-body) .rpl-card-team { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :where(#page-body) .rpl-card-team-solo { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; font-weight: 600; }
  :where(#page-body) .rpl-card-driver { font-size: 12px; font-weight: 500; color: var(--sub); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :where(#page-body) .rpl-card-gap { font-size: 12.5px; font-weight: 400; color: var(--sub); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; letter-spacing: .01em; }
  :where(#page-body) .rpl-card-finished .rpl-card-gap::after { content: '\1F3C1'; margin-left: 6px; font-size: 11px; } /* 🏁 once the race is decided (Running-classified cars only) */

  /* Transport — deviation 38: scoped restyle (option a); the shared
     .h2h-ctrl-* base rules stay legacy until the H2H phase. The
     unconditional :hover rules below NEUTRALISE the legacy non-gated
     hovers (iOS latches :hover after tap — phase-2 round-4 lesson);
     real hover styling + the tooltip live behind @media (hover: hover). */
  :where(#page-body) #page-replay .h2h-ctrl-row { display: flex; align-items: center; gap: 18px; margin-bottom: 0; flex-wrap: wrap; row-gap: 12px; }
  :where(#page-body) #page-replay .h2h-ctrl-group { display: flex; gap: 6px; }
  :where(#page-body) #page-replay .h2h-ctrl-btn { width: 38px; height: 38px; border-radius: 4px; border: 1px solid var(--line); background: var(--surface); color: var(--sub); font-size: 13px; }
  :where(#page-body) #page-replay .h2h-ctrl-btn:hover { background: var(--surface); border-color: var(--line); color: var(--sub); }
  :where(#page-body) #page-replay .h2h-ctrl-btn:hover::after { content: none; }
  :where(#page-body) #page-replay .h2h-play-btn { background: var(--red); border-color: var(--red); color: #fff; font-size: 15px; border-width: 1px; }
  :where(#page-body) #page-replay .h2h-play-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
  :where(#page-body) #page-replay button[data-tip="Go to start"],
:where(#page-body) #page-replay button[data-tip="Go to end"] { display: flex; }
  :where(#page-body) #page-replay .h2h-spd-group { gap: 0; border-bottom: 1px solid var(--line); align-self: center; }
  :where(#page-body) #page-replay .h2h-spd-btn { padding: 8px 14px; height: auto; border: none; border-radius: 0; border-bottom: 2px solid transparent; background: none; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--faint); margin-bottom: -1px; }
  :where(#page-body) #page-replay .h2h-spd-btn:hover { color: var(--faint); border-bottom-color: transparent; }
  :where(#page-body) #page-replay .h2h-spd-btn.active { background: none; border-bottom-color: var(--red); color: var(--ink); font-weight: 700; }
  :where(#page-body) #page-replay .rpl-scrub { flex: 1; min-width: 160px; }
  :where(#page-body) #page-replay .h2h-slider { height: 2px; background: var(--line); border-radius: 0; }
  :where(#page-body) #page-replay .h2h-slider::-webkit-slider-thumb { width: 13px; height: 13px; background: var(--red); box-shadow: none; }
  :where(#page-body) #page-replay .h2h-slider::-moz-range-thumb { width: 13px; height: 13px; border: none; border-radius: 50%; background: var(--red); }
  :where(#page-body) #page-replay .h2h-lap-display { margin-left: 0; font-family: inherit; font-size: 12.5px; color: var(--sub); padding-left: 0; }
  :where(#page-body) #page-replay .h2h-lap-display strong { color: var(--ink); font-size: 16px; font-weight: 700; }
  :where(#page-body) #page-replay .h2h-kbd-tip { text-align: left; font-family: inherit; font-size: 12.5px; color: var(--faint); border-top: 1px solid var(--line-soft); padding: 12px 0 4px; margin-top: 14px; }
  @media (hover: hover) {
    :where(#page-body) #page-replay .h2h-ctrl-btn:hover { background: var(--paper); border-color: var(--faint); color: var(--ink); }
    :where(#page-body) #page-replay .h2h-play-btn:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
    :where(#page-body) #page-replay .h2h-spd-btn:hover { color: var(--ink); }
    :where(#page-body) #page-replay .h2h-ctrl-btn:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); font-size: 10px; font-weight: 500; white-space: nowrap; padding: 3px 7px; border-radius: 4px; pointer-events: none; }
    :where(#page-body) .rpl-card:hover { background: var(--surface); }
  }
  @media (max-width: 1023.9px) {
    :where(#page-body) #page-replay .h2h-ctrl-btn { width: 40px; height: 40px; }
  }
  /* 720–1023 keeps the desktop geometry (canvas + right panel — on-device
     check pending); <720 = the AMReplay running-order list, NO canvas
     (re-homed + INVERTED from the legacy 920px block, which hid the panel) */
  @media (max-width: 719.9px) {
    /* round 2 (on-device): `gap: 0` here wiped the base row-gap via the
       shorthand — the wrapped rows stacked with ZERO vertical gap and the
       18px thumb (±8px beyond its 2px track) overlapped the transport row
       and the speed tabs. column-gap only + scrub padding gives the thumb
       clearance both sides. Round 3: the three stack gaps are tuned for an
       EVEN ink-to-ink rhythm (~16–22px) — the speed tabs already carry
       ~12px of their own dead space (40px tap-target min-height + text
       padding), so the scrub's bottom padding is minimal on purpose; its
       top padding does the real work against the transport row. */
    :where(#page-body) #page-replay .h2h-ctrl-row { column-gap: 0; row-gap: 10px; justify-content: space-between; }
    :where(#page-body) #page-replay .rpl-scrub { order: 3; flex-basis: 100%; min-width: 0; padding: 12px 0 2px; }
    :where(#page-body) #page-replay .h2h-slider::-webkit-slider-thumb { width: 18px; height: 18px; }
    :where(#page-body) #page-replay .h2h-spd-group { order: 4; flex-basis: 100%; justify-content: flex-start; }
    :where(#page-body) #page-replay .h2h-lap-display { order: 2; margin-left: auto; padding-left: 10px; }
    :where(#page-body) .rpl-col-hdr-canvas,
:where(#page-body) .rpl-canvas-wrap { display: none; }
    :where(#page-body) .rpl-col-hdr-panel,
:where(#page-body) .rpl-panel-body { width: 100%; border-left: none; }
    :where(#page-body) #page-replay .h2h-kbd-tip { display: none; }
  }

/* Results/Qualifying container: Grandstand styles at end of this block */

/* Replay: selected car tracking */
:where(#page-body) .rpl-card-selected .rpl-card-team { font-weight: 800; } /* wash inline via rplSelectCar */
:where(#page-body) .status-badge { display:inline-block; font-size:10px; font-weight:700; padding:1px 6px; border-radius:3px; margin-left:6px; vertical-align:middle; letter-spacing:.04em; }
:where(#page-body) .status-badge.dsq { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
:where(#page-body) .status-badge.dnf { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }

/* ── Car/Driver panel ────────────────────────────────────────────────────────
   Scoped under #page-carpanel. Accent = the car's class colour, set as --cpa
   on the page element by openCarPanel(); light tints derive via color-mix so
   they track the theme. Visual reference: car94-8driver-demo.html. */
:where(#page-body) .cp-link { cursor:pointer; }
:where(#page-body) .cp-link:hover { text-decoration:underline; text-underline-offset:2px; }
/* ── Car/Driver panel · GRANDSTAND PHASE 2 ─────────────────────────────
   Selectors unchanged (JS-touched). The panel is DE-CLASSED (r2): class
   colour is not data on this page. --cpa = the FOCUS accent — set by
   cpSetFocus to the focused driver's palette colour, so the .hl row wash
   and inset bar match that driver's timeline segments. Tabs/buttons follow
   the Results filter-button spec (active = ink). Tables = hairline rows on
   paper, transparent header over a 1px ink rule; sticky cells solid paper. */
:where(#page-body) #page-carpanel { --cpa:#1f7a72; } /* pre-open default = palette slot 0 */
/* Focus selector (scope-selector handoff, option 1b): the boxed score-ring
   pills are replaced by a row of underline tabs sharing one hairline. Each tab
   carries its scope name and its overall SimRecap score as a single comparable
   figure. A single rosso bar slides between scopes, mirroring the page nav, so
   the selection is marked by motion rather than a static border; the type is
   set to the nav size above it so the two read as one family. A hairline
   divider sets the Team tab apart from its drivers. */
:where(#page-body) #page-carpanel .ftabs { position:relative; display:flex; align-items:flex-end; gap:26px; padding:0; margin-bottom:22px; background:none; border:none; border-radius:0; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
:where(#page-body) #page-carpanel .ftab { display:inline-flex; align-items:baseline; gap:6px; padding:0 2px 10px; border:none; border-radius:0; background:none; font-family:var(--font-body); font-size:13.5px; font-weight:500; letter-spacing:0; color:var(--sub); white-space:nowrap; cursor:pointer; transition:color .12s; }
:where(#page-body) #page-carpanel .ftab:hover:not(.active) { color:var(--ink); }
:where(#page-body) #page-carpanel .ftab.active { color:var(--ink); }
:where(#page-body) #page-carpanel .ftab-lbl { font-weight:inherit; color:inherit; }
:where(#page-body) #page-carpanel .ftab.active .ftab-lbl { font-weight:700; }
:where(#page-body) #page-carpanel .ftab-score { font-family:var(--font-display); font-weight:800; font-size:12.5px; color:inherit; font-variant-numeric:tabular-nums lining-nums; letter-spacing:.01em; }
:where(#page-body) #page-carpanel .ftab-score.is-null { color:var(--faint); }
:where(#page-body) #page-carpanel .ftab-div { flex:none; width:1px; height:14px; background:var(--line); margin-bottom:11px; }
/* the single sliding bar; CSS transitions its left/width like .nav-underline */
:where(#page-body) #page-carpanel .ftab-underline { position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--red); opacity:0; pointer-events:none; transition:left .34s cubic-bezier(.22,.61,.36,1), width .34s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) { :where(#page-body) #page-carpanel .ftab-underline { transition:none; } }
:where(#page-body) #page-carpanel .rr-hero { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
:where(#page-body) #page-carpanel .car-badge { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:21px; padding:0 5px; border:none; border-radius:3px; font-family:var(--font-body); font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; line-height:21px; } /* standard Results plate, reused here */
:where(#page-body) #page-carpanel .rr-name { font-family:var(--font-display); font-size:24px; font-weight:800; letter-spacing:-.01em; line-height:1.1; color:var(--ink); }
:where(#page-body) #page-carpanel .rr-sub { color:var(--sub); font-size:13px; margin-bottom:10px; font-variant-numeric:tabular-nums; }
:where(#page-body) #page-carpanel .rr-sub strong { color:var(--ink); font-weight:700; }
/* ── Performance score card: 12 metrics -> 3 category scores -> 1 overall.
   Three category bands sit on paper (hairline top/bottom, whitespace between),
   the overall ring on a right rail. Pillar ramp is the quiet warm-neutral set,
   never a traffic-light gauge; rosso is reserved for the ring arc and wordmark.
   The three category scores and the overall come from the SimRecapScore engine. */
:where(#page-body) #page-carpanel { --pp-pace:#1b1812; --pp-mid:#5a544a; --pp-safety:#8d8676; }
[data-theme="dark"] :where(#page-body) #page-carpanel { --pp-pace:var(--ink); --pp-mid:#b0aaa0; --pp-safety:#8e8e97; }
:where(#page-body) #page-carpanel .cp-sc { display:flex; align-items:flex-start; gap:18px; margin:16px 0 30px; }
:where(#page-body) #page-carpanel .cp-sc-bands { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
:where(#page-body) #page-carpanel .cp-sc-band { display:grid; grid-template-columns:6px 1fr 170px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
:where(#page-body) #page-carpanel .cp-sc-band.is-pace { --pp:var(--pp-pace); }
:where(#page-body) #page-carpanel .cp-sc-band.is-result { --pp:var(--pp-mid); }
:where(#page-body) #page-carpanel .cp-sc-band.is-safety { --pp:var(--pp-safety); }
:where(#page-body) #page-carpanel .cp-sc-spine { background:var(--pp); }
:where(#page-body) #page-carpanel .cp-sc-metrics { display:grid; grid-template-columns:repeat(4,1fr); min-width:0; }
:where(#page-body) #page-carpanel .cp-sc-cell { padding:10px 18px; min-width:0; border-left:1px solid var(--line-soft); }
:where(#page-body) #page-carpanel .cp-sc-cell:first-child { border-left:none; }
:where(#page-body) #page-carpanel .cp-sc-lbl { font-family:var(--font-body); font-size:8.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); line-height:1.2; }
:where(#page-body) #page-carpanel .cp-sc-val { margin-top:5px; font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-.015em; line-height:1.04; color:var(--ink); font-variant-numeric:tabular-nums lining-nums; }
:where(#page-body) #page-carpanel .cp-sc-val.good { color:var(--green); }
:where(#page-body) #page-carpanel .cp-sc-val.bad { color:var(--red); }
:where(#page-body) #page-carpanel .cp-sc-unit { font-family:var(--font-body); font-size:11px; font-weight:600; color:var(--faint); margin-left:4px; letter-spacing:0; }
:where(#page-body) #page-carpanel .cp-sc-sup { margin-top:4px; font-size:11px; color:var(--faint); line-height:1.3; }
:where(#page-body) #page-carpanel .cp-sc-cat { border-left:1px solid var(--line); background:color-mix(in srgb, var(--pp) 6%, var(--paper)); padding:10px 20px; display:flex; flex-direction:column; justify-content:center; }
:where(#page-body) #page-carpanel .cp-sc-cat-lbl { font-family:var(--font-body); font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
:where(#page-body) #page-carpanel .cp-sc-cat-num { display:flex; align-items:baseline; gap:3px; margin-top:6px; font-variant-numeric:tabular-nums; }
:where(#page-body) #page-carpanel .cp-sc-cat-score { font-family:var(--font-display); font-weight:800; font-size:26px; letter-spacing:-.015em; line-height:1; color:var(--sub); }
:where(#page-body) #page-carpanel .cp-sc-cat-slash { font-family:var(--font-display); font-weight:700; font-size:11px; color:var(--faint); }
:where(#page-body) #page-carpanel .cp-sc-cat-bar { position:relative; height:4px; background:var(--line-soft); border-radius:2px; margin-top:8px; overflow:hidden; }
:where(#page-body) #page-carpanel .cp-sc-cat-bar > div { position:absolute; left:0; top:0; height:100%; background:var(--pp); border-radius:2px; }
:where(#page-body) #page-carpanel .cp-sc-rail { width:240px; flex:0 0 240px; align-self:stretch; box-sizing:border-box; border-left:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:12px 26px; }
:where(#page-body) #page-carpanel .cp-sc-mark { display:flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:800; font-size:14px; letter-spacing:-.01em; color:var(--ink); }
:where(#page-body) #page-carpanel .cp-sc-mark span span { color:var(--red); }
:where(#page-body) #page-carpanel .cp-sc-mark i { width:6px; height:6px; background:var(--red); transform:skewX(-12deg); }
:where(#page-body) #page-carpanel .cp-sc-all { display:inline-flex; align-items:center; gap:5px; margin-top:2px; padding:0; border:none; background:none; cursor:pointer; font-family:var(--font-body); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sub); transition:color .12s; }
:where(#page-body) #page-carpanel .cp-sc-all:hover { color:var(--red); }
:where(#page-body) #page-carpanel .cp-sc-all-arr { font-size:12px; line-height:1; transition:transform .12s; }
:where(#page-body) #page-carpanel .cp-sc-all:hover .cp-sc-all-arr { transform:translateX(2px); }
/* tablet — four metrics collapse to a 2x2 grid, overall stays on the rail */
@media (max-width:1099.9px) {
  :where(#page-body) #page-carpanel .cp-sc-band { grid-template-columns:6px 1fr 146px; }
  :where(#page-body) #page-carpanel .cp-sc-metrics { grid-template-columns:1fr 1fr; }
  :where(#page-body) #page-carpanel .cp-sc-cell { padding:9px 16px; }
  :where(#page-body) #page-carpanel .cp-sc-cell:nth-child(odd) { border-left:none; }
  :where(#page-body) #page-carpanel .cp-sc-cell:nth-child(even) { border-left:1px solid var(--line-soft); }
  :where(#page-body) #page-carpanel .cp-sc-cell:nth-child(n+3) { border-top:1px solid var(--line-soft); }
  :where(#page-body) #page-carpanel .cp-sc-val { font-size:17px; }
  :where(#page-body) #page-carpanel .cp-sc-cat { padding:10px 16px; }
}
/* mobile — overall hero on top under a 2px ink rule, then stacked bands */
@media (max-width:767.9px) {
  :where(#page-body) #page-carpanel .cp-sc { flex-direction:column; gap:0; }
  :where(#page-body) #page-carpanel .cp-sc-rail { order:-1; width:auto; flex:none; align-self:stretch; border-left:none; border-top:2px solid var(--ink); background:none; padding:8px 0 20px; margin-bottom:6px; }
  :where(#page-body) #page-carpanel .cp-sc-bands { width:100%; }
  :where(#page-body) #page-carpanel .cp-sc-band { grid-template-columns:6px 1fr; }
  :where(#page-body) #page-carpanel .cp-sc-spine { grid-row:1 / span 2; }
  :where(#page-body) #page-carpanel .cp-sc-cat { grid-column:2; grid-row:1; border-left:none; border-bottom:1px solid var(--line-soft); }
  :where(#page-body) #page-carpanel .cp-sc-metrics { grid-column:2; grid-row:2; }
  :where(#page-body) #page-carpanel .cp-sc-cat-score { font-size:22px; }
  :where(#page-body) #page-carpanel .cp-sc-val { font-size:16px; }
}
:where(#page-body) #page-carpanel .good { color:var(--green); }
:where(#page-body) #page-carpanel .bad { color:var(--red); }
:where(#page-body) #page-carpanel .cp-section { margin-bottom:32px; }
:where(#page-body) #page-carpanel .cp-section-title { display:flex; align-items:center; gap:16px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:12px; }
:where(#page-body) #page-carpanel .cp-section-title::after { content:''; flex:1; height:1px; background:var(--line); }
:where(#page-body) #page-carpanel .tl-wrap { position:relative; height:110px; background:none; border:none; margin:0; overflow:hidden; }
:where(#page-body) #page-carpanel .cp-axis-cap { display:block; text-align:right; font-size:10.5px; font-weight:600; letter-spacing:.04em; color:var(--faint); font-variant-numeric:tabular-nums; line-height:1; }
:where(#page-body) #page-carpanel .cp-axis-cap.top { margin:0 2px 4px 0; }
:where(#page-body) #page-carpanel .cp-axis-cap.bot { margin:4px 2px 0 0; }
:where(#page-body) #page-carpanel { --tl-muted:var(--border-strong); }
[data-theme="dark"] :where(#page-body) #page-carpanel { --tl-muted:#4a463f; }
:where(#page-body) #page-carpanel .tl-mid { position:absolute; left:0; right:0; top:50%; height:1px; background:var(--faint); }
:where(#page-body) #page-carpanel .tl-axis-row { text-align:right; font-size:9.5px; font-family:var(--font-body); color:var(--faint); line-height:1; padding:0 2px; font-variant-numeric:tabular-nums; }
:where(#page-body) #page-carpanel .tl-seg { position:absolute; height:16px; border-radius:3px; display:flex; align-items:center; justify-content:center; z-index:2; background:var(--border-strong); min-width:14px; }
:where(#page-body) #page-carpanel .tl-seg span { font-family:var(--font-body); font-size:11px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
:where(#page-body) #page-carpanel .tl-scx { position:absolute; top:0; bottom:0; min-width:2px; background:#eab308; opacity:.22; z-index:1; } /* SC hue stays legacy until the chartTheme pass — must match the canvas SC tint on other tabs */
:where(#page-body) #page-carpanel .tl-pit { position:absolute; top:0; bottom:0; width:1px; background:repeating-linear-gradient(to bottom, var(--sub) 0 2px, transparent 2px 6px); }
:where(#page-body) #page-carpanel .tl-legend { font-size:12px; color:var(--sub); margin:14px 0 24px; display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
:where(#page-body) #page-carpanel .cp-chart-head { display:flex; align-items:center; gap:16px; margin:0 0 14px; }
:where(#page-body) #page-carpanel .cp-chart-title { font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); white-space:nowrap; }
:where(#page-body) #page-carpanel .cp-chart-rule { flex:1; height:1px; background:var(--line); }
:where(#page-body) #page-carpanel .cp-chart-pills { display:inline-flex; border:1px solid var(--line); border-radius:3px; overflow:hidden; background:var(--surface); }
:where(#page-body) #page-carpanel .cp-chart-pills:empty { display:none; }
:where(#page-body) #page-carpanel .cp-pill { font-family:var(--font-body); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:5px 13px; border:none; background:transparent; color:var(--sub); cursor:pointer; line-height:1.6; }
:where(#page-body) #page-carpanel .cp-pill + .cp-pill { border-left:1px solid var(--line); }
:where(#page-body) #page-carpanel .cp-pill:hover:not(.active) { color:var(--ink); }
:where(#page-body) #page-carpanel .cp-pill.active { background:var(--ink); color:var(--paper); }
:where(#page-body) #page-carpanel #cp-gap-section { margin-top:30px; }
:where(#page-body) #page-carpanel .cp-gap-svg { display:block; width:100%; height:100%; }
:where(#page-body) #page-carpanel .cp-gap-zero { stroke:var(--faint); stroke-width:1; }
:where(#page-body) #page-carpanel .cp-gap-sc { fill:#eab308; opacity:.22; }
:where(#page-body) #page-carpanel .cp-gap-line { fill:none; stroke:var(--tl-muted); stroke-width:2.25; stroke-linejoin:round; stroke-linecap:round; }
:where(#page-body) #page-carpanel .cp-gap-pit { stroke:var(--sub); stroke-width:1; stroke-dasharray:2 4; }
:where(#page-body) #page-carpanel #cp-gap-wrap { cursor:default; }
:where(#page-body) #page-carpanel .cp-gap-cross { position:absolute; top:0; bottom:0; width:1px; background:var(--faint); opacity:.55; pointer-events:none; display:none; z-index:3; }
:where(#page-body) #page-carpanel .cp-gap-dot { position:absolute; width:8px; height:8px; border-radius:50%; border:1.5px solid var(--paper); transform:translate(-50%,-50%); pointer-events:none; display:none; z-index:4; }
:where(#page-body) #page-carpanel .tl-key { display:inline-block; width:16px; height:3px; border-radius:2px; vertical-align:middle; margin-right:7px; }
:where(#page-body) #page-carpanel .rr-scroll { overflow-x:auto; }
:where(#page-body) #page-carpanel table.rr { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; font-variant-numeric:tabular-nums; }
:where(#page-body) #page-carpanel table.rr th { text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding:9px 12px; border-bottom:1px solid var(--ink); background:none; }
:where(#page-body) #page-carpanel table.rr td { padding:9px 12px; border-bottom:1px solid var(--line-soft); }
:where(#page-body) #page-carpanel table.rr tr:last-child td { border-bottom:none; }
:where(#page-body) #page-carpanel table.rr tr[data-cust] td { transition:background .12s; }
:where(#page-body) #page-carpanel table.rr tr.hl td { background:color-mix(in srgb, var(--cpa) 12%, var(--paper)); }
:where(#page-body) #page-carpanel table.rr tr.hl td:first-child { box-shadow:inset 3px 0 0 var(--cpa); }
:where(#page-body) #page-carpanel td.sticky,
:where(#page-body) #page-carpanel th.sticky { position:sticky; left:0; background:var(--paper); z-index:1; white-space:nowrap; }
:where(#page-body) #page-carpanel td.sticky:hover { z-index:6; }
:where(#page-body) #page-carpanel table.rr th.sticky { background:var(--paper); }
:where(#page-body) #page-carpanel table.rr tr.hl td.sticky { background:color-mix(in srgb, var(--cpa) 12%, var(--paper)); }
:where(#page-body) #page-carpanel .dm { display:inline-block; font-family:var(--font-body); font-size:9px; font-weight:700; padding:1px 4px; border-radius:3px; background:var(--surface); color:var(--sub); border:1px solid var(--line); margin-left:4px; vertical-align:1px; }
:where(#page-body) #page-carpanel th[data-tip],
:where(#page-body) #page-carpanel th [data-tip] { text-decoration:underline dotted; text-underline-offset:3px; text-decoration-color:var(--faint); }
:where(#page-body) #page-carpanel td.best { font-weight:700; }
:where(#page-body) #page-carpanel .cp-mono { font-family:var(--font-body); font-size:12.5px; font-variant-numeric:tabular-nums; }
:where(#page-body) #page-carpanel .dim { color:var(--faint); }
:where(#page-body) #page-carpanel .cp-note { font-size:12.5px; color:var(--faint); line-height:1.5; margin:12px 0 0; max-width:820px; }
@media (hover: hover) {
  /* hover-capable devices only — iOS sticky-:hover otherwise latches after a
     tap and out-specifies the .hl tint, masking the focused driver's colour */
  :where(#page-body) #page-carpanel .ftab:not(.active):hover { border-color:var(--faint); color:var(--ink); }
  :where(#page-body) #page-carpanel table.rr tr[data-cust]:hover td { background:var(--surface); }
  :where(#page-body) #page-carpanel table.rr tr[data-cust]:hover td.sticky { background:var(--surface); }
}
@media (max-width: 1023.9px) {
  :where(#page-body) #page-carpanel .cpt { display:none; }
}
@media (max-width: 719.9px) {
  :where(#page-body) #page-carpanel .cpm { display:none; }
  :where(#page-body) #page-carpanel .rr-name { font-size:20px; }
  :where(#page-body) #page-carpanel table.rr { font-size:12px; }
  :where(#page-body) #page-carpanel table.rr td,
:where(#page-body) #page-carpanel table.rr th { padding:7px 8px; }
}

/* ════════════════════════════════════════════════════════════════════
   GRANDSTAND · PHASE 1 — race chrome (AMast) + Results (AResults)
   Appended last so these win source-order ties against legacy rules.
   ════════════════════════════════════════════════════════════════════ */

/* ── Race masthead — breadcrumb → title → meta → class filters → 2px ink
      rule → tab bar. The one header system every tab shares. ── */
:where(#page-body) .race-mast { padding-top: 26px; }
:where(#page-body) .rm-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; border-bottom: 2px solid var(--ink); padding-bottom: 16px; }
:where(#page-body) .rm-main { min-width: 0; flex: 1; }
:where(#page-body) .rb-name { display: block; font-family: var(--font-display); font-weight: 800; font-size: 32px; letter-spacing: -0.015em; line-height: 1.04; color: var(--ink); margin-top: 6px; }
:where(#page-body) .rb-date-hero { font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: normal; color: var(--sub); margin-left: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; } /* date moved up beside the title, keeps the muted meta styling */
:where(#page-body) .rb-meta { display: flex; align-items: center; flex-wrap: wrap; margin-top: 8px; row-gap: 4px; min-width: 0; }
:where(#page-body) .sh-item { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--sub); white-space: nowrap; padding-left: 12px; margin-left: 12px; border-left: 1px solid var(--line); font-variant-numeric: tabular-nums; }
:where(#page-body) .sh-item:first-child { border-left: none; padding-left: 0; margin-left: 0; }
:where(#page-body) .sh-item:empty { display: none; }
:where(#page-body) .sh-item strong { color: var(--ink); font-weight: 700; }
:where(#page-body) .sh-icon { font-size: 11px; opacity: .6; margin-right: 1px; }
:where(#page-body) .sh-icon-amber { color: var(--gold); opacity: .85; font-size: 9px; }
:where(#page-body) #sh-track { flex-shrink: 1; min-width: 60px; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
:where(#page-body) #sh-track-mobile,
:where(#page-body) .rb-track-mobile { display: none !important; } /* meta line shows at all widths now */
:where(#page-body) #race-class-tabs { flex-shrink: 0; }

/* Tab bar — 2px rosso underline on the active tab; scrolls under 720 */
:where(#page-body) .rm-tabs { position: relative; }
:where(#page-body) .rm-tabs::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 28px; background: linear-gradient(90deg, transparent, var(--paper)); pointer-events: none; opacity: 0; }
:where(#page-body) .nav { display: flex; gap: 26px; padding-top: 12px; margin: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; position: relative; }
:where(#page-body) .nav::-webkit-scrollbar { display: none; }
:where(#page-body) .nav-btn { padding: 0 2px 10px; border: none; border-radius: 0; background: none; font-family: var(--font-body); font-size: 13.5px; font-weight: 500; color: var(--sub); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color .12s; }
:where(#page-body) .nav-btn:hover { color: var(--ink); background: none; }
:where(#page-body) .nav-btn.active { color: var(--ink); font-weight: 700; background: none; }
/* Reserve each tab's bold width with a hidden 700-weight copy of its label, so
   switching a tab between 500 and 700 never changes its box and the row of tabs
   does not shift. The PER·FORMANCE tab is fixed weight already, so it is exempt. */
:where(#page-body) .nav-btn[data-label]::after {
  content: attr(data-label); display: block; height: 0; overflow: hidden;
  visibility: hidden; font-weight: 700; pointer-events: none; user-select: none;
}

/* ════════ Race-page motion: sliding underline · stagger intro · page dissolve ════════
   Single shared red bar tracks the active tab and CSS-transitions between tabs;
   the per-tab static border above is intentionally dropped so the slide reads. */
:where(#page-body) .nav-underline {
  position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
  background: var(--red); opacity: 0; pointer-events: none;
  transition: left .34s cubic-bezier(.22,.61,.36,1),
              width .34s cubic-bezier(.22,.61,.36,1);
}
/* Nav intro — labels rise and fade in, left to right, only while data-intro is set */
@keyframes navTabRise { from { opacity: 0; transform: translateY(11px); }
                        to   { opacity: 1; transform: none; } }
:where(#page-body) .nav[data-intro="stagger"] .nav-btn {
  animation: navTabRise .52s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(var(--d, 0) * 72ms);
}
/* Page body cross-dissolve — outgoing and incoming share one grid cell */
@keyframes pgIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pgOut { from { opacity: 1; } to { opacity: 0; } }
:where(#page-body) .page-stack { display: grid; width: 100%; min-width: 0; align-items: start; position: relative; }
:where(#page-body) .page-stack > .page { grid-area: 1 / 1; min-width: 0; }
/* While a dissolve is in flight, pin the outgoing layer out of flow and clip the
   stack to the incoming page, so the page-stack height settles to the incoming
   page on the first frame. This stops the footer snapping up when the outgoing
   layer is dropped at the end of the dissolve. */
:where(#page-body) .page-stack.pg-animating { overflow: clip; }
:where(#page-body) .page-stack.pg-animating > .page.pg-leave { position: absolute; top: 0; left: 0; right: 0; }
:where(#page-body) .page-stack > .page.pg-enter {
  animation: pgIn 480ms cubic-bezier(.22,.61,.36,1) both;
}
:where(#page-body) .page-stack > .page.pg-leave {
  display: block; pointer-events: none;
  animation: pgOut 317ms cubic-bezier(.22,.61,.36,1) both;
}
@media (prefers-reduced-motion: reduce) {
  :where(#page-body) .nav-underline { transition: none; }
  :where(#page-body) .nav[data-intro] .nav-btn { animation: none; }
  :where(#page-body) .page-stack > .page.pg-enter,
:where(#page-body) .page-stack > .page.pg-leave { animation: none; }
}

/* ── Class filter buttons — Results filter-button spec: radius 4, hairline
      outline, active = ink bg / paper text (label IS the class identity) ── */
:where(#page-body) .class-tabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
:where(#page-body) .class-tab { padding: 6px 14px; border-radius: 4px; border: 1px solid var(--line); background: none; font-family: var(--font-body); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--sub); cursor: pointer; transition: border-color .12s, color .12s, background .12s; user-select: none; }
:where(#page-body) .class-tab:hover { border-color: var(--faint); color: var(--ink); }
:where(#page-body) .class-tab.active-cls0,
:where(#page-body) .class-tab.active-cls1,
:where(#page-body) .class-tab.active-cls2,
:where(#page-body) .class-tab.active-cls3,
:where(#page-body) .class-tab.active-cls4 { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ── Compact-view notice (shown <720 only) ── */
:where(#page-body) .gs-compact-note { display: none; border: 1px solid var(--line); background: var(--surface); padding: 9px 12px; font-size: 11.5px; color: var(--sub); line-height: 1.45; margin: 0 0 16px; }
:where(#page-body) .gs-compact-note b { color: var(--ink); }

/* ── Results controls row — quiet strip above the table ── */
:where(#page-body) .ov-card { background: none; border: none; border-radius: 0; box-shadow: none; overflow: visible; margin-bottom: 12px; }
:where(#page-body) .ov-controls { display: flex; align-items: center; gap: 12px; padding: 4px 0 12px; background: none; border: none; }
:where(#page-body) .view-toggle { display: flex; gap: 6px; border: none; border-radius: 0; overflow: visible; flex-shrink: 0; }
:where(#page-body) .view-btn { padding: 6px 14px; border-radius: 4px; border: 1px solid var(--line); background: none; font-family: var(--font-body); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--sub); cursor: pointer; transition: border-color .12s, color .12s, background .12s; white-space: nowrap; }
:where(#page-body) .view-btn:hover { border-color: var(--faint); color: var(--ink); }
:where(#page-body) .view-btn.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
:where(#page-body) #overview-content { padding: 0; }

/* ── Results table (AResults) — hairline rows on paper, P1 = surface ── */
:where(#page-body) .team-card { background: none; border-bottom: 1px solid var(--line-soft); }
:where(#page-body) .team-card:last-of-type { border-bottom: none; }
/* (round 3: P1 surface highlight removed — it duplicated the hover/expanded
   state and read as a stuck hover; the podium numeral carries the emphasis) */

/* grid-template-rows pins ONE deterministic 43px row track. Without it the
   single row is an implicit auto track stretched to the content box by
   align-content, which Chromium rounds against each grid's own cell sizes, so
   Race Results (13 cols + delta) and Qualifying (8 cols + flag) resolved it
   fractionally apart and shifted all content 1px. An explicit minmax(0,1fr)
   track fills the definite 43px identically and content-independently in both
   grids. min 0 keeps an oversized cell overflowing rather than growing the row.
   This also gives the .pos-num line-height fix a clean 43px to centre in. The
   mobile 2-row layout resets this (see the <=719.9px block). */
:where(#page-body) .card-row { display: grid; grid-template-columns: var(--cols-left) var(--interval-col) 50px 72px 72px 96px 96px 72px 72px 32px; grid-template-rows: minmax(0, 1fr); align-items: center; padding-left: 14px; padding-right: 14px; } /* col order after Team/Driver: Interval · PERF · iRating · Laps · Best Lap · Race Avg · Incidents · Led · expand. Grid (start position) is not shown on Results at any width; it remains on the Qualifying tab. */
/* Grid column omitted from Results. The cell stays in the markup so the shared
   nth-child column map (and the header, itself a card-row) is unchanged; the
   track is simply dropped above and the cell hidden here. */
:where(#page-body) .card-row > :nth-child(7) { display: none; }
:where(#page-body) #overview-content.no-ir .card-row { grid-template-columns: var(--cols-left) var(--interval-col) 50px 72px 96px 96px 72px 72px 32px; }
:where(#page-body) #overview-content.no-ir .card-row > :nth-child(6) { display: none; } /* untrusted iRating: column omitted */

/* ONE row metric for every data row, both views — heights must not shift
   when flicking Race Results ↔ Qualifying (round 6). Vertical rhythm is
   shared; lateral padding stays per-grid (.card-row / .qual-table-row). */
:where(#page-body) .team-card-header,
:where(#page-body) .team-card-header-solo,
:where(#page-body) .qual-table-row { padding-top: 11px; padding-bottom: 11px; height: var(--row-h); box-sizing: border-box; } /* exact integer height: a fractional row left a 1px remainder that rounded into a different row on each tab */
:where(#page-body) .team-card-header { cursor: pointer; transition: background .12s; }
/* Highlight is a MOUSEOVER affordance only (Marcus, phase-5 session): it no
   longer persists on expanded rows (read as stuck), and it's gated behind
   hover:hover so touch taps can't pin it either — phase-3/4 convention. */
@media (hover: hover) {
  :where(#page-body) .team-card-header:hover { background: var(--surface); }
}
/* Separator below an expanded header. Painted as an inset box-shadow rather
   than a border so it does not consume 1px of the border-box content height
   (a border here shrank the 43px content area to 42px, lifting the centred row
   content ~0.5px on expand). box-shadow occupies no layout space, so the header
   content sits identically whether collapsed or expanded. */
:where(#page-body) .team-card.expanded .team-card-header { box-shadow: inset 0 -1px 0 var(--line-soft); }

:where(#page-body) .col-header-row { background: none; border-bottom: 1px solid var(--ink); height: 38px; padding-top: 12px; padding-bottom: 9px; } /* explicit integer height (was auto): the PERF wordmark cell is 11px vs the 10.5px labels, so an auto header resolved ~0.78px taller on Race Results than on Qualifying and the align-items:center labels landed at different offsets, shifting the gap to the hairline between tabs. A shared 38px track centres the labels identically in both (same approach as the 65px data rows). */
:where(#page-body) .col-header-row,
:where(#page-body) .col-header-row .sc { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }

/* The numeral is given the car-number plate's exact box treatment, because the
   plate is the one cell that already lands identically in both tabs. The plate
   is a fixed 21px box, so the grid centres it at a whole offset, (43 - 21) / 2 =
   11px, and its text baseline is computed inside that integer-placed box the
   same way in either grid. A content-sized numeral, by contrast, is measured and
   centred by each grid against its own column geometry, landing a pixel higher
   on Qualifying. Pinning the numeral to a 21px box with line-height:21px makes
   it behave like the plate: whole 11px offset, identical baseline, both tabs
   matching. Its optical centre is unchanged, so it does not move; height is
   fixed, so expand is unaffected; 19px digits have no descenders, so the 21px
   box never clips them. */
:where(#page-body) .pos-num { font-family: var(--font-display); font-size: 19px; font-weight: 800; height: 21px; line-height: 21px; letter-spacing: -0.01em; color: var(--ink); text-align: left; font-variant-numeric: tabular-nums; }
/* The position cell now seats the numeral and, on Race Results, the grid to
   finish delta beside it. The flex box hugs its content (height = the 21px
   numeral box), so the grid centres it in the row exactly as it did the bare
   numeral; Qualifying wraps the numeral in the same cell with no delta, so the
   numeral lands at the identical x and y in both tabs. */
:where(#page-body) .pos-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
:where(#page-body) .pos-delta { display: inline-flex; align-items: center; }
/* Podium metals (round 3) — gold is the established winner colour (driver
   page, deviation 10); silver/bronze are page-local, tuned per theme. */
:where(#page-body) .pos-num.p1 { color: var(--gold); }
:where(#page-body) .pos-num.p2 { color: #82878f; }
:where(#page-body) .pos-num.p3 { color: #a3622e; }
[data-theme="dark"] :where(#page-body) .pos-num.p2 { color: #9aa1ab; }
[data-theme="dark"] :where(#page-body) .pos-num.p3 { color: #c98a52; }

/* Number plate — scoped to Results; rank tables / awards / car panel keep
   the legacy badge until their own phase (carBadgeHtml is shared) */
:where(#page-body) #overview-content .car-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 21px; padding: 0 5px; border: none; border-radius: 3px; font-family: var(--font-body); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 21px; }

:where(#page-body) .team-info { padding: 0 12px; min-width: 0; }
:where(#page-body) .team-name { font-size: 14.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(#page-body) .team-car { font-size: 12px; color: var(--faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* truncate the car name like the team name above it, rather than letting a long name (e.g. BMW M Hybrid V8) wrap onto several rows when the column is tight */
:where(#page-body) .tc-delta { display: none; } /* desktop: the delta now sits beside the position numeral (see .pos-delta); the sub-line copy is kept in the markup for the <720 compact layout, which re-shows it */
:where(#page-body) .tc-delta .delta { font-size: 12px; } /* match the car text so the Results team-car line height equals a Qualifying row's (mobile sub-line) */

:where(#page-body) .sc { text-align: right; padding-right: 16px; }
:where(#page-body) .sc-val { font-family: var(--font-body); font-size: 13.5px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
:where(#page-body) .sc-val.muted { color: var(--sub); }
:where(#page-body) .sc-val.best { color: var(--ink); font-weight: 600; }
:where(#page-body) .sc-val.fl-purple { color: var(--fastest-lap); font-weight: 800; } /* class-fastest stays purple (deviation #1) */
:where(#page-body) .sc-val.inc-high { color: var(--red); font-weight: 700; }
:where(#page-body) .card-row > :nth-child(4) .sc-val { color: var(--ink); font-weight: 700; } /* Interval — the primary gap column, now first after Team/Driver (empty spacer in driver rows) */
:where(#page-body) .card-row > :nth-child(4) { padding-right: calc(var(--interval-col) - 72px); } /* push the right-aligned figure left, off the PERF roundel; keeps a constant 72px content box (see --interval-col) */
:where(#page-body) .card-row > :nth-child(6) { padding-right: 6px; } /* iRating sits nearer Grid; frees room on the Perf side */

/* Performance roundel — the SimRecap Score on Results, to one decimal in a
   compact ink ring (same language as the Performance tab), set beside the
   team/driver. Sized to sit inside the existing row height, so rows do not
   grow; shown on team rows only. The PERF header is the brand wordmark. */
:where(#page-body) .rs-perf,
:where(#page-body) .rs-perf-th { display: flex; align-items: center; justify-content: center; min-width: 0; }
:where(#page-body) .rs-roundel { position: relative; display: inline-flex; align-items: center; justify-content: center; }
:where(#page-body) .rs-roundel svg { display: block; }
:where(#page-body) .rs-roundel-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
:where(#page-body) .rs-roundel.unrated .rs-roundel-num { color: var(--faint); font-weight: 600; }
/* The team ring is centred as an overlay that contributes nothing to layout,
   so the row height is governed solely by the two-line team block — identical
   to a Qualifying row, which has no ring. The two therefore match exactly. */
:where(#page-body) .team-card-header .rs-perf,
:where(#page-body) .team-card-header-solo .rs-perf { position: relative; }
:where(#page-body) .team-card-header .rs-roundel,
:where(#page-body) .team-card-header-solo .rs-roundel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
/* Optical centring of the score inside the ring. The team ring numeral reads
   1px high against the ink arc, so it is dropped 1px. The smaller driver-row
   numeral sits at the geometric centre (it read 1px high on iOS with the former
   1px lift). */
:where(#page-body) .team-card-header .rs-roundel-num,
:where(#page-body) .team-card-header-solo .rs-roundel-num { transform: translateY(1px); }
:where(#page-body) .driver-row .rs-roundel-num { transform: translateY(0); }
/* Match the body line-height (1.55) so the wordmark shares the label baseline
   at every width; a fractional transform rounded differently per breakpoint. */
:where(#page-body) .col-header-row .rs-perf-th .pb { line-height: 1.55; }
/* Optical lift: pinning the header to a fixed 38px track settled the Archivo
   wordmark below the Inter labels (the two faces centre differently in the line
   box). 1px brings it level and keeps the glyphs crisp; desktop only in effect,
   as the PERF cell (nth-child 4) is hidden under 720px. */
:where(#page-body) .col-header-row .rs-perf-th { position: relative; top: -1px; }

/* iRating chip — licence class as a 2px underline (quiet data colour; the
   old solid licence-coloured blocks fought the table. Official iRacing hues,
   tuned per theme; Pro = ink so it flips in dark; no licence = hairline). */
:where(#page-body) .ir-card { display: inline-block; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; background: none; border: none; border-radius: 0; padding: 0 1px 2px; border-bottom: 2px solid var(--line); line-height: 1.3; }
:where(#page-body) .ir-card.lic-rookie { border-bottom-color: #e0140e; }
:where(#page-body) .ir-card.lic-d { border-bottom-color: #e06d00; }
:where(#page-body) .ir-card.lic-c { border-bottom-color: #cfae00; }
:where(#page-body) .ir-card.lic-b { border-bottom-color: #0d9f10; }
:where(#page-body) .ir-card.lic-a { border-bottom-color: #0153db; }
:where(#page-body) .ir-card.lic-pro,
:where(#page-body) .ir-card.lic-prowc { border-bottom-color: var(--ink); }
[data-theme="dark"] :where(#page-body) .ir-card.lic-rookie { border-bottom-color: #ff4d47; }
[data-theme="dark"] :where(#page-body) .ir-card.lic-d { border-bottom-color: #ff8a1f; }
[data-theme="dark"] :where(#page-body) .ir-card.lic-c { border-bottom-color: #f2d600; }
[data-theme="dark"] :where(#page-body) .ir-card.lic-b { border-bottom-color: #2ed145; }
[data-theme="dark"] :where(#page-body) .ir-card.lic-a { border-bottom-color: #4d8dff; }

:where(#page-body) .delta { font-family: var(--font-body); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
:where(#page-body) .delta.up { color: var(--green); }
:where(#page-body) .delta.dn { color: var(--red); }
:where(#page-body) .delta.eq { color: var(--faint); font-weight: 500; }

:where(#page-body) .expand-arrow { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--faint); transition: transform .2s; justify-self: center; }
:where(#page-body) .team-card.expanded .expand-arrow { transform: rotate(180deg); }

:where(#page-body) .driver-rows { display: none; background: none; }
:where(#page-body) .team-card.expanded .driver-rows { display: block; }
:where(#page-body) .driver-row { padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
:where(#page-body) .driver-row:last-child { border-bottom: none; }
:where(#page-body) .driver-name { padding: 0 12px; font-size: 13px; font-weight: 500; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(#page-body) .driver-row .sc-val { font-size: 12.5px; }

/* Qual numerals: time = primary (ink/700, like Interval), gap = secondary */
:where(#page-body) .sc-val.qt { color: var(--ink); font-weight: 700; }
:where(#page-body) .sc-val.qgap { color: var(--sub); font-weight: 500; }

/* ── Qualifying rows — same row language, JS-set inline grids kept ── */
:where(#page-body) .qual-table-row { display: grid; grid-template-rows: minmax(0, 1fr); align-items: center; padding-left: 14px; padding-right: 14px; } /* single pinned track, matching .card-row, so Qualifying and Race Results centre row content identically (see the .card-row note) */
:where(#page-body) .qual-table-row.col-header-row { min-height: unset; height: 38px; padding-top: 12px; padding-bottom: 9px; } /* match the Race Results header track (overrides the 65px .qual-table-row data-row height) so the gap to the hairline is identical across tabs */

/* ── 720–1023 — drop Grid · Avg · Inc · Led (progressive column drop) ── */
@media (max-width: 1023.9px) {
  :where(#page-body) .card-row { grid-template-columns: var(--cols-left) var(--interval-col) 50px 72px 72px 96px 32px; }
  :where(#page-body) .card-row > :nth-child(7),
:where(#page-body) .card-row > :nth-child(10),
:where(#page-body) .card-row > :nth-child(11),
:where(#page-body) .card-row > :nth-child(12) { display: none; }
  :where(#page-body) #overview-content.no-ir .card-row { grid-template-columns: var(--cols-left) var(--interval-col) 50px 72px 96px 32px; }
  /* qualifying: the 200px qualifying-driver column goes first in team mode */
  :where(#page-body) #overview-content .qual-table-row.qual-team { grid-template-columns: var(--cols-left) 90px 140px 140px 32px !important; }
  :where(#page-body) #overview-content .qual-table-row.qual-team > :nth-child(4) { display: none; }
  :where(#page-body) #overview-content .qual-table-row.qual-team-noir { grid-template-columns: var(--cols-left) 140px 140px 32px !important; }
  :where(#page-body) #overview-content .qual-table-row.qual-team-noir > :nth-child(4) { display: none; }
}

/* ── <720 — masthead compact + 4-column Results (AMResults) ── */
@media (max-width: 719.9px) {
  :where(#page-body) .gs-compact-note { display: block; }
  :where(#page-body) #ov-class-meta { display: none; }

  :where(#page-body) .race-mast { padding-top: 14px; }
  :where(#page-body) .rm-top { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; padding-bottom: 12px; }
  :where(#page-body) .rb-name { font-size: 22px; margin-top: 5px; }
  :where(#page-body) .rb-date-hero { font-size: 11px; margin-left: 8px; }
  :where(#page-body) .rb-meta { margin-top: 6px; }
  :where(#page-body) .sh-item { font-size: 11px; padding-left: 8px; margin-left: 8px; }
  :where(#page-body) #race-class-tabs { flex: 1 1 100%; justify-content: flex-start; }
  :where(#page-body) .class-tab { padding: 5px 11px; font-size: 11.5px; }
  :where(#page-body) .nav { gap: 16px; padding-top: 10px; }
  :where(#page-body) .nav-btn { font-size: 12.5px; padding-bottom: 9px; }
  :where(#page-body) .rm-tabs::after { opacity: 1; } /* right-edge fade over the scrolling tab row */

  /* Results compact: Pos | No | Team (Δ beneath) | Interval / Best stacked.
     The .no-ir variant is listed explicitly — its base/tablet selectors are
     (0,2,1) and would otherwise out-rank this (0,1,1) rule, leaving no-ir
     races on the desktop template at phone widths (round-4 bug). */
  :where(#page-body) #overview-content .card-row,
:where(#page-body) #overview-content.no-ir .card-row { grid-template-columns: 26px 44px minmax(0,1fr) auto; grid-template-rows: none; column-gap: 10px; padding-left: 10px; padding-right: 10px; }
  /* ^ grid-template-rows:none drops the desktop single-track pin; this view is a
       2-row grid (children on grid-row 1 / 2 below) with height:auto, so rows
       must size to content again */
  /* ^ lateral LONGHAND only — `padding:` shorthand here out-ranks the shared
     row-metric rule and zeroes the vertical padding (round-7 bug: race rows
     pinned to min-height while qual rows sat at content+padding) */
  :where(#page-body) #overview-content .card-row .sc { padding-right: 0; }
  :where(#page-body) #overview-content .card-row > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  :where(#page-body) #overview-content .card-row > :nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
  :where(#page-body) #overview-content .card-row > :nth-child(3) { grid-column: 3; grid-row: 1 / span 2; }
  :where(#page-body) #overview-content .card-row > :nth-child(4) { grid-column: 4; grid-row: 1; }
  :where(#page-body) #overview-content .card-row > :nth-child(9) { display: block; grid-column: 4; grid-row: 2; }
  :where(#page-body) #overview-content .card-row > :nth-child(5),
:where(#page-body) #overview-content .card-row > :nth-child(6),
:where(#page-body) #overview-content .card-row > :nth-child(7),
:where(#page-body) #overview-content .card-row > :nth-child(8),
:where(#page-body) #overview-content .card-row > :nth-child(10),
:where(#page-body) #overview-content .card-row > :nth-child(11),
:where(#page-body) #overview-content .card-row > :nth-child(12),
:where(#page-body) #overview-content .card-row > :nth-child(13) { display: none; }
  /* sub-line per the mock: "car · ▲3" (round 5 — was Δ-only). The compact view
     keeps the 26px position column, which has no room beside the numeral, so the
     delta returns to the sub-line: hide the position-cell copy, show the sub-line one. */
  :where(#page-body) #overview-content .pos-delta { display: none; }
  :where(#page-body) #overview-content .team-car { display: block; font-size: 10.5px; margin-top: 2px; white-space: normal; overflow: visible; text-overflow: clip; } /* the phone sub-line carries the car plus the position delta inside .tc-delta; keep it wrapping so a long car name never truncates the delta away */
  :where(#page-body) .tc-delta { display: inline; }
  :where(#page-body) .tc-delta .delta { font-size: 10.5px; }
  :where(#page-body) #overview-content .pos-num { font-size: 16px; height: auto; line-height: normal; } /* drop the desktop fixed 21px box; mobile centres the numeral in its 2-row span */
  :where(#page-body) #overview-content .card-row > :nth-child(9) .sc-val { font-size: 11px; color: var(--faint); }
  :where(#page-body) #overview-content .card-row > :nth-child(9) .sc-val.fl-purple { color: var(--fastest-lap); font-weight: 800; }
  :where(#page-body) #overview-content .col-header-row { height: auto; padding-top: 0; padding-bottom: 7px; }
  :where(#page-body) #overview-content .col-header-row,
:where(#page-body) #overview-content .col-header-row .sc { font-size: 9.5px; letter-spacing: .08em; }
  :where(#page-body) .team-card-header,
:where(#page-body) .team-card-header-solo,
:where(#page-body) .qual-table-row { padding-top: 9px; padding-bottom: 9px; min-height: 44px; height: auto; }

  /* expanded driver rows: name only, full width */
  :where(#page-body) #overview-content .driver-row { display: flex; align-items: center; }
  :where(#page-body) #overview-content .driver-row > * { display: none; }
  :where(#page-body) #overview-content .driver-row > .driver-name { display: block; flex: 1; padding: 0 12px; }

  /* qualifying compact: pos · plate · team · TIME-over-GAP (round 8 — same
     primary/secondary stack as Interval-over-Best in race view); same
     column-gap as the race grid so plates/text align across views */
  :where(#page-body) .qual-table-row { padding-left: 10px; padding-right: 10px; }
  :where(#page-body) #overview-content .qual-table-row { column-gap: 10px; grid-template-rows: none; } /* drop the desktop track pin: this view is a 2-row, height:auto grid */
  :where(#page-body) #overview-content .qual-table-row .sc { padding-right: 0; }
  :where(#page-body) #overview-content .qual-table-row > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  :where(#page-body) #overview-content .qual-table-row > :nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
  :where(#page-body) #overview-content .qual-table-row > :nth-child(3) { grid-column: 3; grid-row: 1 / span 2; }
  :where(#page-body) #overview-content .qual-table-row .qgap { font-size: 11px; color: var(--faint); }
  /* per-mode time/gap indices (driver/ir cells are conditional children) */
  :where(#page-body) #overview-content .qual-table-row.qual-team { grid-template-columns: 26px 44px minmax(0,1fr) auto !important; }
  :where(#page-body) #overview-content .qual-table-row.qual-team > :nth-child(6) { grid-column: 4; grid-row: 1; }
  :where(#page-body) #overview-content .qual-table-row.qual-team > :nth-child(7) { display: block; grid-column: 4; grid-row: 2; }
  :where(#page-body) #overview-content .qual-table-row.qual-team > :nth-child(4),
:where(#page-body) #overview-content .qual-table-row.qual-team > :nth-child(5),
:where(#page-body) #overview-content .qual-table-row.qual-team > :nth-child(8) { display: none; }
  :where(#page-body) #overview-content .qual-table-row.qual-solo { grid-template-columns: 26px 44px minmax(0,1fr) auto !important; }
  :where(#page-body) #overview-content .qual-table-row.qual-solo > :nth-child(5) { grid-column: 4; grid-row: 1; }
  :where(#page-body) #overview-content .qual-table-row.qual-solo > :nth-child(6) { display: block; grid-column: 4; grid-row: 2; }
  :where(#page-body) #overview-content .qual-table-row.qual-solo > :nth-child(4),
:where(#page-body) #overview-content .qual-table-row.qual-solo > :nth-child(7) { display: none; }
  :where(#page-body) #overview-content .qual-table-row.qual-team-noir { grid-template-columns: 26px 44px minmax(0,1fr) auto !important; }
  :where(#page-body) #overview-content .qual-table-row.qual-team-noir > :nth-child(5) { grid-column: 4; grid-row: 1; }
  :where(#page-body) #overview-content .qual-table-row.qual-team-noir > :nth-child(6) { display: block; grid-column: 4; grid-row: 2; }
  :where(#page-body) #overview-content .qual-table-row.qual-team-noir > :nth-child(4),
:where(#page-body) #overview-content .qual-table-row.qual-team-noir > :nth-child(7) { display: none; }
  :where(#page-body) #overview-content .qual-table-row.qual-solo-noir { grid-template-columns: 26px 44px minmax(0,1fr) auto !important; }
  :where(#page-body) #overview-content .qual-table-row.qual-solo-noir > :nth-child(4) { grid-column: 4; grid-row: 1; }
  :where(#page-body) #overview-content .qual-table-row.qual-solo-noir > :nth-child(5) { display: block; grid-column: 4; grid-row: 2; }
  :where(#page-body) #overview-content .qual-table-row.qual-solo-noir > :nth-child(6) { display: none; }
}



/* The page transition expands into this loading overlay; once the race is built
   underneath, the overlay fades out so the loader dissolves into the page. The
   header is lifted above the overlay while loading, for continuity, then the
   lift is dropped (sr-ready) once the overlay is gone. */
:where(#page-body) #sr-loading {transition:opacity .45s ease}
:where(#page-body) #sr-loading.sr-out {opacity:0;pointer-events:none}
#page-body:not(.sr-ready)>.gs-topbar {position:relative;z-index:1000}
@media (prefers-reduced-motion:reduce) {:where(#page-body) #sr-loading {transition:none}}


/* ════════ Performance tab (SimRecap Score) ════════
   Content sits inside .content-wrap, so no outer horizontal padding here.
   Pillar ramp is a quiet three-step warm-neutral, never a traffic-light gauge;
   rosso is reserved for the ring arc and the brand mark. */
:where(#page-body) #page-performance { --pp-pace: #1b1812; --pp-mid: #5a544a; --pp-safety: #8d8676; }
[data-theme="dark"] :where(#page-body) #page-performance { --pp-pace: var(--ink); --pp-mid: #b0aaa0; --pp-safety: #8e8e97; }

/* ── brand nav tab (PER·FORMANCE) ── */
:where(#page-body) .nav-btn.perf-tab { display: inline-flex; align-items: center; gap: 4px; }
:where(#page-body) .perf-tab-word { font-family: var(--font-display); font-weight: 800; font-size: 13.5px; letter-spacing: -0.01em; color: var(--ink); line-height: 1; }
:where(#page-body) .perf-tab-word > span { color: var(--red); }
:where(#page-body) .perf-tab-slash { width: 5px; height: 5px; background: var(--red); transform: skewX(-12deg); display: inline-block; }
:where(#page-body) .nav-btn.perf-tab:hover .perf-tab-word { color: var(--ink); }
@media (max-width: 719.9px) { :where(#page-body) .perf-tab-word { font-size: 12.5px; } }

/* ── methodology intro: the score ruler ── */
:where(#page-body) #page-performance { --perf-wash: 27,24,18; }
[data-theme="dark"] :where(#page-body) #page-performance { --perf-wash: 233,233,238; }

:where(#page-body) .perf-intro { margin: 0; }
:where(#page-body) .perf-intro-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 44px; flex-wrap: wrap; }
:where(#page-body) .perf-intro-left { max-width: 370px; }
:where(#page-body) .perf-over { font-family: var(--font-body); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
:where(#page-body) .perf-intro-lead { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--ink); line-height: 1.28; letter-spacing: -0.01em; margin: 14px 0 0; }
:where(#page-body) .perf-intro-lead .hl { color: var(--red); }
:where(#page-body) .perf-intro-sub { font-family: var(--font-body); font-size: 13px; color: var(--sub); line-height: 1.6; margin: 12px 0 0; max-width: 350px; }
:where(#page-body) .perf-intro-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex: 0 0 auto; }
:where(#page-body) .perf-intro-cap { font-family: var(--font-body); font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
:where(#page-body) .perf-intro-cap b { color: var(--sub); font-weight: 700; }

:where(#page-body) .perf-ruler { margin-top: 34px; }
:where(#page-body) .perf-plot { position: relative; width: 100%; }
:where(#page-body) .perf-band { position: absolute; top: 0; bottom: 0; width: 20%; }
:where(#page-body) .perf-median { position: absolute; top: -4px; bottom: 0; border-left: 1px dashed var(--faint); pointer-events: none; }
:where(#page-body) .perf-median-lab { position: absolute; bottom: 100%; left: 4px; font-family: var(--font-display); font-size: 10px; font-weight: 700; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
:where(#page-body) .perf-dot { position: absolute; width: 13px; height: 13px; transform: translateX(-50%); z-index: 1; }
:where(#page-body) .perf-dot:hover { z-index: 6; }
:where(#page-body) .perf-dot .pip { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1.5px solid var(--paper); transition: transform .08s; }
:where(#page-body) .perf-dot:hover .pip { transform: scale(1.25); box-shadow: 0 0 0 2px var(--ink); }
@media (prefers-reduced-motion: reduce) { :where(#page-body) .perf-dot .pip,
:where(#page-body) .perf-expand-arrow { transition: none; } }
:where(#page-body) .perf-tip { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-family: var(--font-body); background: var(--ink); color: var(--paper); padding: 6px 10px; border-radius: 4px; white-space: nowrap; z-index: 10; font-size: 11.5px; font-variant-numeric: tabular-nums; box-shadow: 0 4px 14px rgba(0,0,0,0.18); opacity: 0; visibility: hidden; pointer-events: none; }
:where(#page-body) .perf-dot:hover .perf-tip { opacity: 1; visibility: visible; }
:where(#page-body) .perf-tip b { font-weight: 700; }
:where(#page-body) .perf-tip .sc { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }
:where(#page-body) .perf-tip .dot { color: #c9c2b4; }
:where(#page-body) .perf-tip-caret { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid var(--ink); }
:where(#page-body) .perf-band-axis { display: flex; width: 100%; margin-top: 9px; border-top: 1px solid var(--line); padding-top: 8px; }
:where(#page-body) .perf-band-axis .perf-over { flex: 1; text-align: center; font-size: 9px; }
:where(#page-body) .perf-tick-axis { position: relative; width: 100%; height: 16px; margin-top: 3px; }
:where(#page-body) .perf-tick { position: absolute; transform: translateX(-50%); font-family: var(--font-display); font-size: 11.5px; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ── ruler entrance: the frame fades in, then dots draw on left to right ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes perfFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes perfFadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes perfDotPop { from { opacity: 0; transform: translateX(-50%) scale(0); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
  :where(#page-body) .perf-band { animation: perfFadeIn .5s ease both; }
  :where(#page-body) .perf-median { animation: perfFadeIn .5s ease .12s both; }
  :where(#page-body) .perf-band-axis,
:where(#page-body) .perf-tick-axis { animation: perfFadeUp .5s ease .14s both; }
  :where(#page-body) .perf-dot { animation: perfDotPop .42s cubic-bezier(.18,.85,.32,1.28) both; }
  /* a Teams/Drivers flip keeps the frame still and only redraws the dots */
  :where(#page-body) .perf-ruler.perf-static .perf-band,
:where(#page-body) .perf-ruler.perf-static .perf-median,
:where(#page-body) .perf-ruler.perf-static .perf-band-axis,
:where(#page-body) .perf-ruler.perf-static .perf-tick-axis { animation: none; }
}

:where(#page-body) .perf-th-brand { display: inline-flex; align-items: center; gap: 3px; }
:where(#page-body) .perf-th-brand .pb { font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 0.01em; color: var(--ink); line-height: 1; }
:where(#page-body) .perf-th-brand .pb span { color: var(--red); }
:where(#page-body) .perf-th-brand .pb-slash { width: 4px; height: 4px; background: var(--red); transform: skewX(-12deg); display: inline-block; }

/* ── leaderboard ── */
:where(#page-body) .perf-head,
:where(#page-body) .perf-row,
:where(#page-body) .perf-card .perf-drow {
  display: grid;
  grid-template-columns: 44px 58px minmax(240px, 1fr) 140px minmax(300px, 1.1fr) 150px;
  align-items: center; gap: 22px;
}
:where(#page-body) .perf-head { margin-top: 46px; padding: 0 14px 12px; border-bottom: 1px solid var(--ink); align-items: end; }
:where(#page-body) .perf-th { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
:where(#page-body) .perf-th.c { text-align: center; }
:where(#page-body) .perf-th.perf-th-pillars { padding-left: 80px; }
:where(#page-body) .perf-row { min-height: 50px; padding: 9px 14px; border-bottom: 1px solid var(--line-soft); }
:where(#page-body) .perf-rank { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--faint); font-variant-numeric: tabular-nums; }
:where(#page-body) .perf-rank.top { color: var(--ink); }
:where(#page-body) .perf-ic { display: flex; align-items: center; }
:where(#page-body) .perf-plate { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 21px; padding: 0 5px; font-family: var(--font-body); font-weight: 800; font-size: 12px; line-height: 21px; border-radius: 3px; font-variant-numeric: tabular-nums; }
:where(#page-body) .perf-id { min-width: 0; }
:where(#page-body) .perf-id-main { font-size: 14.5px; font-weight: 700; line-height: 1.2; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(#page-body) .perf-id-main .fl { margin-right: 7px; }
:where(#page-body) .perf-id-sub { font-size: 12px; line-height: 1.2; color: var(--sub); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(#page-body) .perf-ring-cell { display: flex; justify-content: center; }
:where(#page-body) .perf-ring { position: relative; display: inline-block; }
:where(#page-body) .perf-ring svg { display: block; }
:where(#page-body) .perf-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* pillars */
:where(#page-body) .perf-pillars { display: flex; flex-direction: column; gap: 4px; max-width: 300px; }
:where(#page-body) .perf-pillar-row { display: grid; grid-template-columns: 70px 1fr 24px; gap: 10px; align-items: center; }
:where(#page-body) .perf-pillar-lab { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); display: flex; justify-content: flex-end; align-items: center; white-space: nowrap; }
:where(#page-body) .perf-pillar-track { position: relative; height: 5px; background: var(--line-soft); border-radius: 2px; }
:where(#page-body) .perf-pillar-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 2px; }
:where(#page-body) .perf-pillar-fill.pp-pace { background: var(--pp-pace); }
:where(#page-body) .perf-pillar-fill.pp-mid { background: var(--pp-mid); }
:where(#page-body) .perf-pillar-fill.pp-safety { background: var(--pp-safety); }
:where(#page-body) .perf-pillar-val { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--sub); text-align: right; font-variant-numeric: tabular-nums; }

/* detail */
:where(#page-body) .perf-detail { position: relative; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
:where(#page-body) .perf-detail-exp { padding-right: 28px; }
:where(#page-body) .perf-detail-lab { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
:where(#page-body) .perf-detail-val { font-size: 14px; font-weight: 600; color: var(--sub); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; }
:where(#page-body) .perf-detail-sub { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* status marks */
:where(#page-body) .perf-stat { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); padding: 2px 6px; border-radius: 3px; cursor: help; font-variant-numeric: tabular-nums; }

/* trailing notes */
:where(#page-body) .perf-more { padding: 15px 8px; font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ── teams view: clickable rows that expand to the car's drivers ──
   Two click targets, mirroring the Results tab: the team name is a panel link,
   the rest of the row toggles the driver sub-rows. The chevron sits inside the
   result column (not its own track), so result + arrow occupies the same width
   the result column has on the drivers view and nothing shifts on the toggle. */
:where(#page-body) .perf-card { border-bottom: 1px solid var(--line-soft); }
:where(#page-body) .perf-card:last-of-type { border-bottom: none; }
:where(#page-body) .perf-card .perf-row { border-bottom: none; cursor: pointer; transition: background .12s; }
:where(#page-body) .perf-card .perf-row:hover { background: var(--surface); }
:where(#page-body) .perf-card.expanded .perf-row { border-bottom: 1px solid var(--line-soft); }
:where(#page-body) .perf-expand-arrow { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--faint); transition: transform .2s, color .12s; }
:where(#page-body) .perf-card .perf-row:hover .perf-expand-arrow { color: var(--sub); }
:where(#page-body) .perf-card.expanded .perf-expand-arrow { transform: translateY(-50%) rotate(180deg); }

:where(#page-body) .perf-drivers { display: none; background: none; }
:where(#page-body) .perf-card.expanded .perf-drivers { display: block; }
:where(#page-body) .perf-drow { min-height: 40px; padding: 8px 14px; border-bottom: 1px solid var(--line-soft); }
:where(#page-body) .perf-drow:last-child { border-bottom: none; }
:where(#page-body) .perf-drow-name { min-width: 0; font-size: 13px; font-weight: 500; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(#page-body) .perf-drow-name .fl { margin-right: 6px; }
:where(#page-body) .perf-drow-ring { display: flex; justify-content: center; }
:where(#page-body) .perf-mini-ring { position: relative; display: inline-block; }
:where(#page-body) .perf-mini-ring svg { display: block; }
:where(#page-body) .perf-mini-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ── responsive ── */
@media (max-width: 1023.9px) {
  :where(#page-body) .perf-head,
:where(#page-body) .perf-row,
:where(#page-body) .perf-card .perf-drow { grid-template-columns: 32px 48px minmax(0, 1fr) 120px 140px; }
  :where(#page-body) .perf-pillars-cell,
:where(#page-body) .perf-th-pillars { display: none; }
}
@media (max-width: 719.9px) {
  :where(#page-body) .perf-intro-head { flex-direction: column; align-items: stretch; gap: 18px; }
  :where(#page-body) .perf-intro-controls { align-items: flex-start; }
  :where(#page-body) .perf-intro-lead { font-size: 19px; }
  :where(#page-body) .perf-head,
:where(#page-body) .perf-row,
:where(#page-body) .perf-card .perf-drow { grid-template-columns: 26px 42px minmax(0, 1fr) 76px; gap: 10px; padding-left: 4px; padding-right: 4px; }
  :where(#page-body) .perf-row { min-height: 44px; padding-top: 7px; padding-bottom: 7px; }
  :where(#page-body) .perf-th { font-size: 9.5px; letter-spacing: 0.08em; }
  :where(#page-body) .perf-th-brand .pb { font-size: 9px; }
  :where(#page-body) .perf-th-brand .pb-slash { display: none; }
  :where(#page-body) .perf-detail,
:where(#page-body) .perf-th-detail { display: none; }
}