/* Podigami landing page */

main {
    padding: 28px 0 48px;
    flex: 1;
}

/* shared trio name styling (matches the combinations page) */
.trio {
    color: var(--text);
}

.pdriver {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.trio .sep {
    color: var(--muted-dim);
    margin: 0 8px;
    font-weight: 400;
}

.trio-sm .pdriver {
    font-size: 14px;
    font-weight: 500;
}

/* A trio that has happened links to its stats on the combos page. The link
   inherits the surrounding text colour (so contrast holds in both themes) and
   only reveals its affordance — an accent underline + tint — on hover/focus. */
.combo-link {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px;
    transition: box-shadow 0.15s;
}

.combo-link:hover {
    box-shadow: inset 0 -1px 0 var(--accent-bright);
}

.combo-link:hover .lr-code,
.combo-link:hover .pdriver {
    color: var(--accent-bright);
}

.combo-link:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
}

/* next-race box */
.next-race {
    display: grid;
    grid-template-columns: 1fr 210px;
    gap: 26px;
    align-items: stretch;
    background: linear-gradient(135deg, var(--surface) 0%, var(--bg-2) 100%);
    border: 1px solid var(--border-strong);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 22px;
    overflow: hidden;
}

/* No track outline for this circuit -> no plate to sit beside. */
.next-race.nr-noplate {
    grid-template-columns: 1fr;
}

.nr-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.nr-flag {
    width: 34px;
    height: auto;
    border-radius: 3px;
    display: block;
    box-shadow: 0 0 0 1px var(--border);
}

.nr-round {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}

.nr-tag {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-bright);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.nr-name {
    margin: 0 0 2px;
    font-size: 26px;
    letter-spacing: -0.4px;
}

.nr-name a {
    color: var(--text);
    text-decoration: none;
}

.nr-name a:hover {
    color: var(--accent-bright);
}

.nr-circuit {
    font-size: 13px;
    color: var(--muted);
}

/* The countdown is the only thing on this card that moves, so it leads — but in
   text colour. The accent is spent on its label instead, leaving the hero's
   chance figure just below as the one big red number on the page. */
.nr-when {
    display: block;
    margin-top: 14px;
}

.nr-cd-label[hidden] {
    display: none;
}

.nr-cd-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-bright);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin-bottom: 3px;
}

.nr-countdown {
    display: block;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.4px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Once the race starts the slot carries a sentence, not a figure. */
.nr-countdown.nr-cd-msg {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--accent-bright);
}

.nr-date {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
}

/* The track outline framed as a circuit plate, captioned with the circuit's
   own name and length. */
.nr-art {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    align-self: stretch;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 12px 9px;
}

.nr-track {
    width: 100%;
    height: auto;
    max-height: 106px;
}

.nr-track path {
    stroke: var(--accent-bright);
    stroke-width: 2.4;
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.nr-plate-cap {
    font-size: 10px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
}

.next-race:has(+ .last-race) {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
}

.next-race.nr-empty {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

/* last race */
.last-race {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-left: 4px solid var(--muted);
    border-radius: var(--radius);
    padding: 8px 18px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.next-race + .last-race {
    border-top: 1px dashed var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
}

.lr-tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.last-race .nr-flag {
    width: 24px;
    flex-shrink: 0;
}

.lr-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    text-decoration: none;
}

.lr-name:hover {
    color: var(--accent-bright);
}

.lr-trio {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.lr-driver {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.lr-code {
    color: var(--text);
}

.lr-sep {
    color: var(--muted);
    margin: 0 3px;
    font-weight: 400;
}

.lr-podigami {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-bright);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 4px;
}

/* The status describes the trio it follows, so it stays beside it; the spacer
   below takes the leftover width that used to push it to the far edge. */
.lr-status {
    font-size: 12px;
    color: var(--muted);
    margin-left: 6px;
    white-space: nowrap;
}

.lr-sp {
    flex: 1 1 auto;
}

.lr-link {
    color: var(--muted);
    text-decoration: underline;
    text-decoration-color: var(--border);
    text-underline-offset: 2px;
}

.lr-link:hover {
    color: var(--accent-bright);
    text-decoration-color: var(--accent-bright);
}

/* ── hero ────────────────────────────────────────────────────────────────────
   One surface split by a single hairline. Deliberately plain: no card inside a
   card, no uppercase labels, and the accent colour spent once (on the chance)
   so the number is the only thing competing for attention. */
.hero {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px 32px 26px;
}

/* The figure and its sentence are one row, centred against each other: aligning
   the number to the label's first baseline left it riding high whenever the
   sentence ran to two lines. */
.hero-head {
    display: flex;
    align-items: center;
    gap: 20px;
}

.hc-num {
    flex: none;
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    color: var(--accent-bright);
    letter-spacing: -2px;
}

.hero-head-text {
    min-width: 0;
}

.hc-label {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
    color: var(--text);
    /* Wide enough that the sentence and its info icon hold one line at desktop
       width — a tighter measure wrapped the icon onto a line of its own. */
    max-width: 78ch;
}

.hc-sub {
    margin: 5px 0 0;
    font-size: 13.5px;
    color: var(--muted);
}

.hero-pick {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.hp-label {
    margin: 0 0 14px;
    font-size: 13.5px;
    color: var(--muted);
}

/* ── Shared ranked table (Overdue + Unlikeliest + Soulmates) ─────────────────
   Mirrors the Combinations table (index.css) cell-for-cell so the four data
   pages read as one system: a single hairline frame with no outer panel, an
   uppercase column-label strip, flat rows at the page type size, and an
   expanded drawer on --bg-2 behind a 3px accent rail. Every rank is a native
   <details> row (the <summary> is the row face, the body holds the stat
   cells), so there is no JS and keyboard support is free.

   Closed shows the headline stat only; open reveals the detail — #1 included.
   .rankrow-hero adds nothing but an accent rail: same type size, same
   closed-by-default behaviour, so position and the rail mark the leader
   without breaking the grid.

   The label strip and the row faces share their column geometry through
   --rank-cols (a grid track list), set per page as an inline custom property. */

/* ---------- section heading (the table is the only framed element) ---------- */
.rank-section {
    margin-top: 34px;
}

.rank-section:first-of-type {
    margin-top: 0;
}

.rank-section > h2 {
    margin: 0 0 4px;
    font-size: 18px;
    letter-spacing: -0.3px;
}

.rank-section > .rank-sub {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
    max-width: 95ch;
}

/* ---------- frame + label strip ---------- */
.rank-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.rank-head,
.rr-face {
    display: grid;
    grid-template-columns: var(--rank-cols, minmax(0, 1fr) 200px 26px);
    align-items: center;
    column-gap: 18px;
}

.rank-head {
    padding: 13px 18px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    user-select: none;
}

/* Guard: a label wider than its track truncates rather than silently
   overlapping the next column. Keep labels short (combos: "Count", "Last
   seen") and this never fires. */
.rank-head > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rank-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---------- rows ---------- */
.rankrow > details {
    background: transparent;
    transition: background 0.12s;
}

.rankrow + .rankrow > details {
    border-top: 1px solid var(--border);
}

.rankrow > details:hover,
.rankrow > details[open] {
    background: var(--surface-2);
}

/* #1: an accent rule down the left edge drawn as an inset shadow, so the row's
   content stays on the same grid as every other row (a border would shift it). */
.rankrow-hero > details {
    box-shadow: inset 3px 0 0 var(--accent-bright);
}

.rr-face {
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
}

.rr-face::-webkit-details-marker {
    display: none;
}

.rr-drivers {
    min-width: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
    overflow-wrap: break-word;
}

.rr-drivers .oddriver,
.rr-drivers .undriver,
.rr-drivers .smdriver {
    white-space: nowrap;
}

.rr-drivers .sep {
    color: var(--muted-dim);
    margin: 0 8px;
    font-weight: 400;
}

.rr-drivers .dn-abbr {
    display: none;
}

.rr-num {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent-bright);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rr-race {
    min-width: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rr-chev {
    text-align: center;
    color: var(--muted-dim);
}

.rr-chev .chev {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    font-size: 10px;
    transition: transform 0.18s ease, color 0.15s, background 0.15s;
}

.rankrow > details:hover .rr-chev .chev {
    color: var(--text);
}

.rankrow > details[open] .rr-chev .chev {
    transform: rotate(180deg);
    color: var(--accent-bright);
    background: rgba(225, 6, 0, 0.12);
}

/* ---------- expanded drawer ---------- */
.rr-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 40px;
    margin: 0;
    padding: 18px 24px 20px;
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    border-left: 3px solid var(--accent);
}

.rr-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.rr-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    line-height: 1.2;
}

.rr-stat-val {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The race stat cell serves phones only; desktop shows the race on the row
   face. */
.rr-stats .rr-stat-race {
    display: none;
}

/* Inline race-report links: match the site's tagline/footer link convention
   rather than the browser default blue. */
.race-link {
    color: var(--text-dim);
    text-decoration: none;
    border-bottom: 1px dotted var(--border-strong);
    transition: color 0.15s, border-color 0.15s;
}

.race-link:hover {
    color: var(--accent-bright);
    border-color: var(--accent);
}

.race-link .year {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-right: 8px;
}

.race-link .race-name {
    color: var(--text-dim);
}


/* Three equal columns, no boxes: a hairline in the team's colour is the only
   thing marking one driver off from the next. */
.hero-drivers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.hero-driver {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 12px;
    border-left: 2px solid var(--team, var(--accent));
}

.hd-name {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
}

.hd-team {
    font-size: 13.5px;
    color: var(--muted);
}

.hp-prob {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 0;
    font-size: 13px;
    color: var(--muted);
    margin: 22px 0 0;
}

/* panels */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    margin-top: 22px;
}

.panel h2 {
    margin: 0 0 4px;
    font-size: 18px;
    letter-spacing: -0.3px;
}

.panel-sub {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 13px;
}

/* closing methodology footnote (Overdue / Unlikeliest / Soulmates) */
.as-of {
    margin: 28px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

/* candidate list */
/* The board window: --board-rows is the one number that sets how many rows are
   visible before it scrolls (row height is padding + names + gap + bar). */
.cand-scroll {
    --board-rows: 12;
    --board-row-h: 55px;
    /* The +18px leaves a sliver of the next row showing under the fade, so the
       list reads as continuing rather than ending on a full row. */
    max-height: calc(var(--board-rows) * var(--board-row-h) + 18px);
    overflow-y: auto;
    /* Deliberately NOT `contain`: on a phone the board is a panel in the middle
       of the page, not a modal, so swallowing the scroll at the end of the list
       strands the reader inside it. Chaining hands the gesture back to the page
       at both ends, the way the top of the list already does. */
    overscroll-behavior: auto;
    scrollbar-width: thin;
}

/* Fade the last rows so a cut-off row reads as "more below". Applied only while
   podigami.js says there is more — a permanent fade would promise rows that
   aren't there once you reach the end, and without JS no fade is the safe
   default since the list still scrolls natively.

   This is an overlay, NOT a mask on .cand-scroll. A mask (like a transform or a
   filter) makes its element a containing block for position:fixed descendants
   and clips them — which silently truncated the history bubbles to a sliver
   wherever they fell outside the scroll window. */
.cand-board {
    position: relative;
}

.cand-board::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34px;
    background: linear-gradient(to bottom, transparent, var(--surface));
    border-radius: 0 0 var(--radius) var(--radius);
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.cand-board.has-more::after {
    opacity: 1;
}

.cand-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.cand:last-child {
    border-bottom: none;
}

.cand-body {
    flex: 1;
    min-width: 0;
}

.cand-names {
    margin-bottom: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* candidate trio: team-colour dot + TLA code (full name on hover) */
.cd {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.cd-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--team, var(--muted));
    flex: 0 0 auto;
}

.cd-code {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--text-dim);
}

.cd-sep {
    color: var(--muted-dim);
    margin: 0 9px;
}

.cand-meta {
    margin-top: 6px;
    font-size: 13px;
    color: var(--muted);
}

.cand-meta b {
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.cand-bar-wrap {
    background: var(--surface-3);
    border-radius: 99px;
    height: 6px;
    overflow: hidden;
}

.cand-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-dim), var(--accent-bright));
    border-radius: 99px;
}

.cand-prob {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: var(--text-dim);
    font-weight: 600;
    min-width: 56px;
    text-align: right;
}

/* ── Trio board: already-happened vs never-happened ──────────────────────────
   Done rows recede so the new ones read as the highlight, but stay legible —
   their history is the content, not noise. */
.cand-done .cd-code,
.cand-done .cand-prob {
    color: var(--muted);
}

.cand-done .cd-dot {
    opacity: 0.55;
}

.cand-done .cand-bar {
    background: var(--muted-dim);
    opacity: 0.5;
}

.cand-new .cand-prob {
    color: var(--text);
}

.cand-pill {
    margin-left: 10px;
    padding: 1px 6px;
    border-radius: 99px;
    /* --accent, not --accent-bright: white clears 4.5:1 on it in both themes,
       where the brighter red only reaches 3.7:1 in dark mode. */
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
}

/* A done row's history. The bubble is position:fixed — an absolutely positioned
   popover would be clipped by .cand-scroll's overflow — so podigami.js sets its
   coordinates and toggles .open for hover, focus and tap alike. */
.trio-tip {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    cursor: help;
    outline: none;
    border-radius: 4px;
}

.trio-tip:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
}

.trio-tip:hover .cd-code {
    color: var(--text-dim);
}

/* Two-class selector on purpose: .info-bubble supplies the visual chrome and is
   defined later in this file, so a bare .trio-bubble would lose the position
   override to it. */
.trio-tip > .trio-bubble {
    position: fixed;
    display: none;
    top: auto;
    left: auto;
    transform: none;
    min-width: 180px;
    max-width: 260px;
    text-transform: none;
    letter-spacing: 0;
}

.trio-tip.open > .trio-bubble {
    display: block;
}

.trio-bubble b {
    color: var(--text);
    font-weight: 600;
}

.trio-bubble a {
    display: inline-block;
    margin-top: 6px;
    color: var(--accent-link);
    font-weight: 600;
    text-decoration: none;
}

.trio-bubble a:hover {
    text-decoration: underline;
}

/* ── Soulmates fun-fact grid ─────────────────────────────────────────────────
   The partnership leaderboard uses the shared ranked table above; the
   fun-fact cards sit in their own responsive grid inside a second panel. */
/* fun-fact cards (second panel) */
.sm-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.fact-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    transition: border-color 0.12s, background 0.12s;
}

.fact-card:hover {
    border-color: var(--border-strong);
    border-left-color: var(--accent-bright);
}

.fc-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 6px;
}

.fc-num {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.4px;
    line-height: 1.1;
    margin-bottom: 4px;
}

.fc-num .fc-unit {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    margin-left: 4px;
    letter-spacing: 0;
}

.fc-detail {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
}

.fc-detail b {
    color: var(--text);
    font-weight: 600;
}

/* current form — collapsed <details> inside the candidates panel */
.form-details {
    margin-top: 14px;
}

.form-details > summary {
    list-style: none;
    display: block;
    width: fit-content;
    margin: 0 auto;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text-dim);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.form-details > summary:hover {
    border-color: var(--accent);
    color: var(--text);
}

.form-details > summary::-webkit-details-marker {
    display: none;
}

.form-details .fd-open {
    display: none;
}

.form-details[open] .fd-open {
    display: inline;
}

.form-details[open] .fd-closed {
    display: none;
}

.form-caption {
    margin: 12px 0 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
}

/* current form — broadcast timing tower */
.form-tower {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tower-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    background: var(--surface-2);
    border-left: 3px solid var(--team, var(--accent));
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.tr-num {
    min-width: 26px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--team, var(--accent));
    color: var(--team-ink, #fff);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.tr-code {
    min-width: 40px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--text);
}

.tr-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tr-team {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.tr-bar {
    width: 110px;
    height: 6px;
    background: var(--surface-3);
    border-radius: 99px;
    overflow: hidden;
    flex: 0 0 auto;
}

.tr-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--team, var(--accent-bright));
    border-radius: 99px;
}

.tr-w {
    min-width: 42px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

/* timeline */
.tl-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.tl-header h2 {
    margin-bottom: 0;
}

.timeline {
    /* Geometry shared by the sparkline and the slider so the thumb lines up
       with the bars. --tl-n (bar/season count) is injected per-page at build
       time; --tl-barw mirrors the flex bar width: full width minus the gaps
       between N bars, divided by N. */
    --tl-gap: 2px;
    --tl-thumb: 14px;
    --tl-barw: calc((100% - (var(--tl-n, 77) - 1) * var(--tl-gap)) / var(--tl-n, 77));
}

.tl-spark {
    display: flex;
    align-items: flex-end;
    gap: var(--tl-gap);
    height: 70px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}

.tl-bar {
    flex: 1 1 0;
    min-width: 2px;
    background: var(--surface-3);
    border-radius: 2px 2px 0 0;
    cursor: pointer;
    transition: background 0.12s;
}

.tl-bar:hover {
    background: var(--muted);
}

.tl-bar.on {
    background: var(--accent-bright);
}

.tl-controls {
    margin-bottom: 16px;
}

/* The bar centers sit half a bar-width in from each edge; the thumb travels
   half a thumb-width in from each track end. Offset the slider by their
   difference and widen it to match so the thumb center runs exactly from the
   first bar center to the last. */
#tl-slider {
    display: block;
    box-sizing: border-box;
    margin-left: calc((var(--tl-barw) - var(--tl-thumb)) / 2);
    width: calc(100% - var(--tl-barw) + var(--tl-thumb));
    height: var(--tl-thumb);
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

#tl-slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: var(--surface-3);
}

#tl-slider::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--surface-3);
}

#tl-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--tl-thumb);
    height: var(--tl-thumb);
    /* Center the thumb on the 4px track. */
    margin-top: calc((4px - var(--tl-thumb)) / 2);
    border: none;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}

#tl-slider::-moz-range-thumb {
    width: var(--tl-thumb);
    height: var(--tl-thumb);
    border: none;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}

#tl-slider:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.tl-select-wrap {
    display: none;
    margin-bottom: 16px;
}

#tl-select {
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    appearance: auto;
}

.tl-readout {
    text-align: right;
    white-space: nowrap;
}

#tl-year {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}

.tl-count {
    font-size: 13px;
    color: var(--muted);
    margin-left: 8px;
}

.tl-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tl-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
}

.tl-item:last-child {
    border-bottom: none;
}

.tl-where {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.15s;
}

a.tl-where:hover {
    color: var(--accent-bright);
    text-decoration: underline;
}

/* info tooltip — "i" icon. Desktop reveals on hover; touch/keyboard toggle the
   .open class via JS (so a tap can close it again, unlike sticky :focus). */
.info-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 6px;
    cursor: pointer;
    outline: none;
}

.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--muted);
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, serif;
    color: var(--muted);
    line-height: 1;
    transition: border-color 0.15s, color 0.15s;
}

.info-tip:hover .info-icon,
.info-tip:focus-visible .info-icon,
.info-tip.open .info-icon {
    border-color: var(--accent-bright);
    color: var(--accent-bright);
}

.info-bubble {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    max-width: 320px;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    font-family: var(--font);
    line-height: 1.55;
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.info-tip:hover .info-bubble,
.info-tip:focus-visible .info-bubble,
.info-tip.open .info-bubble {
    display: block;
}

.info-tip-sm .info-icon {
    width: 15px;
    height: 15px;
    font-size: 10px;
}

/* FAQ section */
.faq-section {
    margin-top: 22px;
}

.faq-item {
    border-bottom: 1px solid var(--border);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-q {
    padding: 14px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.faq-q::-webkit-details-marker {
    display: none;
}

.faq-q::after {
    content: "+";
    font-size: 18px;
    font-weight: 400;
    color: var(--muted);
    flex: 0 0 auto;
    transition: transform 0.2s;
}

.faq-item[open] .faq-q::after {
    content: "\2212";
}

.faq-a {
    padding: 0 0 14px;
}

.faq-a p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted);
}

.faq-a strong {
    color: var(--text-dim);
    font-weight: 600;
}

@media (max-width: 720px) {
    /* The container padding narrows to 14px at 720px (style.css). The hero is a
       single column now, so only its own padding needs to come in — the three
       driver columns still fit here and stack at 600px instead (#116). */
    .hero {
        padding: 24px 20px 20px;
    }
}

@media (max-width: 600px) {
    /* Ranked table: the column-label strip has no room on a phone, so rows
       stand alone (matching how the combinations table drops its <thead>). */
    .rank-head {
        display: none;
    }

    /* Twelve rows is a desktop-sized window; on a phone the chips wrap onto a
       second line (75px a row, not 55px), so twelve would run past the viewport
       and the panel would swallow the page. Six keeps the card thumb-sized. */
    .cand-scroll {
        --board-rows: 6;
        --board-row-h: 75px;
    }

    /* Capped well inside the viewport: allowed to fill the screen it stopped
       reading as a tooltip and became a band across the list. */
    .trio-tip > .trio-bubble {
        min-width: 0;
        max-width: min(300px, calc(100vw - 32px));
    }

    .sm-facts {
        grid-template-columns: 1fr;
    }

    /* Leaderboard rows: abbreviate driver names (E. Ocon), tighten type, and
       move the race name off the row face into the expanded drawer. */
    .rr-drivers .dn-full {
        display: none;
    }

    .rr-drivers .dn-abbr {
        display: inline;
    }

    .rr-face {
        grid-template-columns: minmax(0, 1fr) auto 26px;
        column-gap: 10px;
        padding: 14px;
    }

    /* A stacked trio is three lines tall, so the rule between rows takes the
       strong border to outweigh the faint hairlines inside each trio. */
    .rankrow + .rankrow > details {
        border-top-color: var(--border-strong);
    }

    .rr-drivers {
        font-size: 14px;
    }

    .rr-drivers .sep {
        margin: 0 5px;
    }

    /* Trios stack one driver per line, a hairline between them in place of
       the "/" — as on the combinations table. Soulmates pairs stay inline. */
    .rr-drivers .oddriver,
    .rr-drivers .undriver {
        display: block;
    }

    .rr-drivers .oddriver + .oddriver,
    .rr-drivers .undriver + .undriver {
        border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
        margin-top: 5px;
        padding-top: 5px;
    }

    .rr-drivers .oddriver .sep,
    .rr-drivers .undriver .sep {
        display: none;
    }

    .rr-num {
        font-size: 15px;
    }

    .rr-race {
        display: none;
    }

    .rr-stats {
        padding: 14px 16px 16px;
        gap: 12px 26px;
    }

    .rr-stats .rr-stat-race {
        display: flex;
    }

    .info-bubble {
        left: auto;
        right: -8px;
        transform: none;
        min-width: 200px;
        max-width: 260px;
    }

    .hero {
        padding: 22px 18px 18px;
    }

    /* The number moves above its sentence — centring the pair would centre them
       horizontally once they stack, so pin both to the left edge. */
    .hero-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .hc-num {
        font-size: 46px;
    }

    .hc-label {
        font-size: 16.5px;
    }

    /* Three columns leave ~158px each here — no room to spare once the
       post-qualifying "Aston Martin · starts 12th" line is in — so the trio
       stacks and each driver gets the full width. */
    .hero-drivers {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hd-team {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .panel {
        padding: 16px;
    }

    .next-race {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
    }

    /* The plate flips to a band: a small outline and its caption on one row,
       instead of an off-centre doodle costing ~90px of scroll. */
    .nr-art {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 11px;
        padding: 7px 12px;
    }

    .nr-track {
        width: 54px;
        height: 38px;
        max-height: none;
        flex: 0 0 auto;
    }

    .nr-plate-cap {
        text-align: left;
    }

    .nr-countdown {
        font-size: 20px;
    }

    .last-race {
        gap: 4px 8px;
        padding: 8px 12px;
    }

    .lr-tag {
        font-size: 10px;
    }

    .last-race .nr-flag {
        width: 20px;
    }

    .lr-name {
        flex: 1 1 auto;
        font-size: 12px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lr-trio {
        gap: 1px;
    }

    .lr-driver {
        font-size: 12px;
        gap: 3px;
    }

    .lr-sep {
        margin: 0 2px;
    }

    .lr-podigami {
        font-size: 10px;
        padding: 2px 6px;
        margin-left: 0;
    }

    .lr-status {
        font-size: 11px;
        white-space: normal;
        margin-left: 0;
    }

    /* Nothing to absorb once the strip wraps — an auto-growing spacer would
       just push the status onto a line of its own. */
    .lr-sp {
        display: none;
    }

    /* timing tower: drop the surname and team name on narrow screens —
       number + TLA code + team colour bar is enough to identify a driver */
    .tr-name,
    .tr-team {
        display: none;
    }

    .tr-bar {
        flex: 1;
        min-width: 40px;
    }

    .tl-spark,
    .tl-controls,
    .tl-readout {
        display: none;
    }

    .tl-select-wrap {
        display: block;
    }

    .tl-header {
        flex-wrap: wrap;
        gap: 2px 12px;
    }

    /* Stacked trios: the strong border between entries outweighs the faint
       hairlines inside each trio. */
    .tl-item {
        flex-direction: column;
        gap: 2px;
        padding: 10px 0;
        border-bottom-color: var(--border-strong);
    }

    .tl-where {
        white-space: normal;
    }

    /* One driver per line, a hairline between them in place of the "/" — as
       on the combinations table. The link spans the row so the hairlines do
       too, rather than stopping at the longest name. */
    .tl-item .combo-link {
        display: block;
        align-self: stretch;
    }

    .trio,
    .trio .pdriver {
        display: block;
    }

    .trio .pdriver + .pdriver {
        border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
        margin-top: 4px;
        padding-top: 4px;
    }

    .trio .sep {
        display: none;
    }
}
/* ---- Discovery hooks & explore grid ------------------------------------ */

.hook-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.hook-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.hook-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--accent-bright);
}

.hook-stat {
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1.45;
}

.hook-stat b {
    color: var(--text);
}

.hook-cta {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.hook-card:hover .hook-cta {
    color: var(--text);
}

.hook-arrow {
    display: inline-block;
    transition: transform 0.15s ease;
}

.hook-card:hover .hook-arrow {
    transform: translateX(3px);
}

.hook-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.explore-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 12px;
}

.explore-grid .hook-card {
    margin-top: 0;
}

@media (max-width: 600px) {
    .hook-row,
    .explore-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Timeline quick-pick chips ------------------------------------------ */

.tl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 2px;
}

.tl-chip {
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text-dim);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.tl-chip:hover {
    border-color: var(--accent);
    color: var(--text);
}

/* Scroll-reveal (class applied by JS only — raw HTML never hides content). */
.reveal {
    opacity: 0;
    transform: translateY(12px);
}

.reveal.reveal-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* ---- Post-quali state (hero badge, movement delta, grid chips, quali line) --- */

/* Both halves of the movement line are plain text on one line now: the pill and
   the arrow glyph were two more things shouting next to a number that already
   carries the page's only accent colour. */
.hc-updated,
.hc-delta {
    color: var(--muted);
}

.panel-badge {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-bright);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.cd-grid {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.05rem 0.3rem;
    margin-left: 0.2rem;
}

@media (max-width: 600px) {
    .cd-grid {
        font-size: 0.58rem;
        padding: 0.03rem 0.25rem;
    }
}

/* A podium step held by one car that two drivers shared (pre-1961 only). */
.lr-step.lr-shared {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15em;
    padding-left: 0.4em;
    border-left: 2px solid var(--muted);
    cursor: help;
}