/* v2-race.css — the race view (live.html Classic + the planner's phone race
 * view) in the v2 "timing screen" system. Loads after v2.css.
 *
 * Read mid-race from a seat or a second monitor: the call word, the lap delta
 * and the laps left are the three things that must read at a glance, so they
 * get the big number face; everything else steps down to labels and wells.
 * Scoped like v2.css (:where() = zero specificity). Rules that must beat
 * live.html's in-frame block or a style a script injects at runtime use the
 * plain html:not(.design-old) prefix instead.
 */

/* ======================================================================
   1. SECTION BAR — Dashboard / Schedule / Rivals / Tires / Weather / Telemetry
   Inactive tabs are full-strength text on a raised key, so they read as
   buttons you can press, not greyed-out options. The one you're on sits in
   the accent with a 3px bar under it.
   ====================================================================== */
:where(html:not(.design-old)) .live-subtabs.subtabs,
html.in-frame:not(.design-old) .live-subtabs.subtabs {
    background: var(--v2-panel);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    box-shadow: var(--v2-shadow-1);
    padding: 4px;
    gap: 4px;
}
:where(html:not(.design-old)) .live-subtabs .subtab {
    font-family: var(--v2-font-display);
    font-size: var(--v2-fs-md);
    font-weight: 600;
    font-stretch: 94%;
    letter-spacing: .01em;
    color: var(--text);
    background: var(--v2-raise);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-sm);
    padding: 7px 16px;
    cursor: pointer;
    box-shadow: none;
}
:where(html:not(.design-old)) .live-subtabs .subtab:hover {
    color: var(--text-hi, var(--text));
    background: var(--v2-overlay);
    border-color: var(--v2-line-2);
}
:where(html:not(.design-old)) .live-subtabs .subtab.active {
    color: var(--text-hi, var(--text));
    background: var(--v2-wash);
    border-color: rgba(var(--accent-rgb), .45);
    box-shadow: inset 0 -3px 0 var(--accent);
}
:where(html:not(.design-old)) .live-subtabs .subtab:focus-visible { box-shadow: var(--v2-focus); }
:where(html:not(.design-old)) .live-subtabs .subtab.active:focus-visible { box-shadow: inset 0 -3px 0 var(--accent), var(--v2-focus); }
/* Right side: secondary buttons, quieter than the section keys. */
:where(html:not(.design-old)) .live-subtabs .btn-download {
    background: transparent; border: 1px solid var(--v2-line); color: var(--text-2);
    font-family: var(--v2-font-display); font-size: var(--v2-fs-sm); font-weight: 600;
    border-radius: var(--v2-r-sm); min-height: 0; padding: 6px 11px;
}
:where(html:not(.design-old)) .live-subtabs .btn-download:hover { background: var(--v2-hover); border-color: var(--v2-line-2); color: var(--text-hi, var(--text)); }

/* ======================================================================
   2. CONNECTION PILL + READINESS CHECKLIST
   ====================================================================== */
:where(html:not(.design-old)) .live-conn {
    font-family: var(--v2-font-display); font-size: var(--v2-fs-sm); font-weight: 600;
    background: var(--v2-inset); border: 1px solid var(--v2-line); border-radius: var(--v2-r-pill);
    color: var(--text-2); min-height: 0; box-shadow: none;
}
:where(html:not(.design-old)) .live-conn.is-bad { border-color: var(--crit); background: var(--crit-dim); color: var(--text); }
:where(html:not(.design-old)) .live-conn.is-warn,
:where(html:not(.design-old)) .live-conn.is-wait { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
/* A menu: above the ticker, the sticky bars and the tiles. */
html:not(.design-old) .live-ready { z-index: var(--z-dropdown); }
:where(html:not(.design-old)) .live-ready {
    background: var(--v2-overlay); border: 0; border-radius: var(--v2-r-md);
    box-shadow: var(--v2-shadow-pop); font-size: var(--v2-fs-md); padding: var(--s3) var(--s4);
}
:where(html:not(.design-old)) .live-ready li b { font-family: var(--v2-font-display); font-weight: 600; }
:where(html:not(.design-old)) .live-ready li i { font-family: var(--v2-font-display); }
/* Before the race and not ready yet: a full-width card with a warn rail, not a menu. */
:where(html:not(.design-old)) .live-ready.is-inline {
    background: var(--v2-panel); border: 1px solid var(--v2-line);
    box-shadow: inset 3px 0 0 var(--warn), var(--v2-shadow-1);
}
:where(html:not(.design-old)) .live-ready .lr-head { font-family: var(--v2-font-display); font-size: var(--v2-fs-lg); font-weight: 650; }

/* ======================================================================
   3. Race parts: hint lines, the undercut panel, measured rates
   ====================================================================== */

:where(html:not(.design-old)) .call-hint {
    margin-top: var(--s3); padding-top: var(--s2);
    border-top: 1px solid var(--v2-line);
    font-family: var(--v2-font-display); font-size: var(--v2-fs-xs); font-weight: 600;
    font-stretch: 92%; letter-spacing: var(--v2-track-caps); color: var(--text-2);
}

/* UNDERCUT / OVERCUT — a supporting read: an inset well, not a second hero. */
:where(html:not(.design-old)) .cut-panel {
    background: var(--v2-inset); border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md); box-shadow: none;
}
:where(html:not(.design-old)) .cut-panel .cut-title {
    font-family: var(--v2-font-display); font-size: var(--v2-fs-xs); font-weight: 600;
    font-stretch: 92%; letter-spacing: var(--v2-track-caps); color: var(--text-3);
}
:where(html:not(.design-old)) .cut-panel .cut-rec { font-family: var(--v2-font-display); font-size: var(--v2-fs-lg); font-weight: 650; }
:where(html:not(.design-old)) .cut-card { background: var(--v2-panel); border: 1px solid var(--v2-line); border-radius: var(--v2-r-sm); }
:where(html:not(.design-old)) .cut-card h4 {
    font-family: var(--v2-font-display); font-size: var(--v2-fs-xs); letter-spacing: var(--v2-track-caps); color: var(--text-3);
}
:where(html:not(.design-old)) .cut-action,
:where(html:not(.design-old)) .cut-net { font-family: var(--v2-font-display); font-variant-numeric: tabular-nums; }

/* TIMELINE */
:where(html:not(.design-old)) .timeline {
    background: var(--v2-panel); border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md); box-shadow: var(--v2-shadow-1);
}
:where(html:not(.design-old)) .tl-title {
    font-family: var(--v2-font-display); font-size: var(--v2-fs-xs); font-weight: 600;
    letter-spacing: var(--v2-track-caps); color: var(--text-3);
}
:where(html:not(.design-old)) .tl-next { font-family: var(--v2-font-display); font-size: var(--v2-fs-md); color: var(--text); }
:where(html:not(.design-old)) .tl-track { background: var(--v2-inset); border-radius: var(--v2-r-sm); }
:where(html:not(.design-old)) .tl-run { border-radius: var(--v2-r-sm) 0 0 var(--v2-r-sm); background: rgba(var(--accent-rgb), .55); }
:where(html:not(.design-old)) .tl-key { font-family: var(--v2-font-display); font-size: var(--v2-fs-sm); }

/* Measured rates: reference, so quiet. */
:where(html:not(.design-old)) .raw-col h4 {
    font-family: var(--v2-font-display); font-size: var(--v2-fs-xs); font-weight: 600;
    letter-spacing: var(--v2-track-caps); color: var(--text-3);
}
:where(html:not(.design-old)) .raw-col > div { border-bottom-color: var(--v2-line); font-size: var(--v2-fs-sm); }
:where(html:not(.design-old)) .raw-col > div > span:first-child { color: var(--text-3); }
:where(html:not(.design-old)) .raw-col > div > span:last-child { font-family: var(--v2-font-display); color: var(--text); }
:where(html:not(.design-old)) .raw-col-measured {
    background: var(--v2-panel); border: 1px solid var(--v2-line); border-radius: var(--v2-r-md);
}

/* ======================================================================
   4. SCHEDULE, TIRES and RIVALS tables
   Only horizontal lines; caps headers on the raised step (not accent green);
   the stint on track gets the accent wash and a rail on its first cell.
   ====================================================================== */
:where(html:not(.design-old)) .live-schedule-wrap {
    background: var(--v2-panel); border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md); box-shadow: var(--v2-shadow-1);
}
:where(html:not(.design-old)) .live-stint-table th,
:where(html:not(.design-old)) .live-stint-table td {
    border: 0; border-bottom: 1px solid var(--v2-line);
}
:where(html:not(.design-old)) .live-stint-table th {
    background: var(--v2-raise); color: var(--text-3);
    font-family: var(--v2-font-display); font-size: var(--v2-fs-xs); font-weight: 600;
    font-stretch: 92%; letter-spacing: var(--v2-track-caps);
}
:where(html:not(.design-old)) .live-stint-table td {
    font-family: var(--v2-font-display); font-size: var(--v2-fs-md); font-stretch: 92%;
    font-variant-numeric: tabular-nums; color: var(--text);
}
:where(html:not(.design-old)) .live-stint-table :where(tbody tr:nth-child(even)) { background: var(--v2-zebra); }
:where(html:not(.design-old)) .live-stint-table :where(tbody tr:hover) { background: var(--v2-hover); }
:where(html:not(.design-old)) .live-stint-table tr.done-row td { color: var(--text-2); }
:where(html:not(.design-old)) .live-stint-table tr.live-row { background: var(--v2-wash); }
:where(html:not(.design-old)) .live-stint-table tr.live-row td { font-weight: 650; color: var(--text-hi, var(--text)); }
:where(html:not(.design-old)) .live-stint-table tr.live-row td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
:where(html:not(.design-old)) .live-stint-table tr.next-row { background: color-mix(in srgb, var(--warn) 9%, transparent); }
:where(html:not(.design-old)) .live-stint-table tr.next-row td:first-child { box-shadow: inset 4px 0 0 var(--warn); }

/* Tires: the four corners are the key numbers. */
:where(html:not(.design-old)) .lt-corner {
    background: var(--v2-inset); border: 1px solid var(--v2-line); border-radius: var(--v2-r-sm); gap: var(--s2);
}
:where(html:not(.design-old)) .lt-corner .lt-c {
    font-family: var(--v2-font-display); font-size: var(--v2-fs-xs); letter-spacing: var(--v2-track-caps); color: var(--text-3);
}
:where(html:not(.design-old)) .lt-corner strong {
    font-family: var(--v2-font-display); font-size: 22px; font-weight: 700; font-stretch: 84%;
    font-variant-numeric: tabular-nums; color: var(--text-hi, var(--text));
}
:where(html:not(.design-old)) .lt-row { font-family: var(--v2-font-display); font-size: var(--v2-fs-md); }
:where(html:not(.design-old)) .lt-row > span:first-child { color: var(--text-3); }
:where(html:not(.design-old)) .lt-row > span:last-child { color: var(--text); }
:where(html:not(.design-old)) .lt-legend .leg { font-family: var(--v2-font-display); border-radius: var(--v2-r-sm); }

/* Rivals: pit exit is the read; the feed and the class are evidence. */
:where(html:not(.design-old)) .pe-card {
    background: var(--v2-panel); border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md); box-shadow: var(--v2-shadow-1); padding: var(--s3) var(--s4);
}
:where(html:not(.design-old)) #pitExitCard { box-shadow: inset 3px 0 0 var(--accent), var(--v2-shadow-1); }
:where(html:not(.design-old)) .pe-card.pf-card { background: var(--v2-inset); box-shadow: none; }
:where(html:not(.design-old)) .pe-head {
    font-family: var(--v2-font-display); font-size: var(--v2-fs-xs); font-stretch: 92%; letter-spacing: var(--v2-track-caps);
}
:where(html:not(.design-old)) .pe-big { font-family: var(--v2-font-display); font-size: 26px; font-weight: 700; font-stretch: 88%; line-height: 1.1; }
:where(html:not(.design-old)) .rv-headline {
    font-family: var(--v2-font-display); font-size: var(--v2-fs-lg); font-weight: 650;
}
:where(html:not(.design-old)) .rivals-cards {
    background: var(--v2-panel); border-color: var(--v2-line); border-radius: var(--v2-r-md); box-shadow: var(--v2-shadow-1);
}
:where(html:not(.design-old)) .rv-pos,
:where(html:not(.design-old)) .rv-gap,
:where(html:not(.design-old)) .rv-status { font-family: var(--v2-font-display); font-variant-numeric: tabular-nums; }

/* ======================================================================
   5. WEATHER and TELEMETRY tiles
   ====================================================================== */
:where(html:not(.design-old)) .wx-now > div {
    background: var(--v2-panel); border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md); box-shadow: var(--v2-shadow-1);
}
:where(html:not(.design-old)) .wx-k {
    font-family: var(--v2-font-display); font-size: var(--v2-fs-xs); font-weight: 600;
    font-stretch: 92%; letter-spacing: var(--v2-track-caps); color: var(--text-3);
}
:where(html:not(.design-old)) .wx-v { font-size: 36px; font-weight: 700; line-height: 1.05; }

:where(html:not(.design-old)) .wx-call {
    background: var(--v2-panel); border: 1px solid var(--v2-line); border-radius: var(--v2-r-md);
    box-shadow: inset 3px 0 0 var(--accent), var(--v2-shadow-1);
    font-family: var(--v2-font-display); font-size: var(--v2-fs-lg); font-weight: 600; padding: var(--s3) var(--s4);
}
:where(html:not(.design-old)) .wx-chart {
    background: var(--v2-inset); border-color: var(--v2-line); border-radius: var(--v2-r-md);
}
:where(html:not(.design-old)) .wx-ax { font-family: var(--v2-font-display); }
:where(html:not(.design-old)) .wx-legend { font-family: var(--v2-font-display); font-size: var(--v2-fs-sm); color: var(--text-2); }
:where(html:not(.design-old)) #liveJson { background: var(--v2-inset); border-color: var(--v2-line); font-family: var(--v2-font-mono); }

/* "Good" is a status, not the brand: in Monza and Fuji the accent is red. */
:where(html:not(.design-old)) .live-conn.is-ok .lc-dot { background: var(--dx-good); }
:where(html:not(.design-old)) .live-ready li.is-ok i { color: var(--dx-good); }

:where(html:not(.design-old)) .pe-kept,
:where(html:not(.design-old)) .pe-clear { color: var(--dx-good); }

/* The forecast reads as one block; past ~1100px its viewBox text outgrows label size. */
:where(html:not(.design-old)) #wxPanel { max-width: 1100px; }

/* ======================================================================
   6. PHONE RACE VIEW (phone-race.js, planner Race tab on a phone)
   Same media query as app.css. The delta is the hero; the other cards are
   plain panels, so the accent rail is on one thing only.
   ====================================================================== */
@media (max-width: 820px), (pointer: coarse) and (max-width: 1024px) {
    :where(html:not(.design-old)) .pr-card {
        background: var(--v2-panel);
        border: 1px solid var(--v2-line);
        border-radius: var(--v2-r-md);
        box-shadow: var(--v2-shadow-1);
        padding: var(--s3) var(--s4);
    }
    :where(html:not(.design-old)) .pr-card.pr-delta {
        display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--s2);
        box-shadow: inset 4px 0 0 var(--accent), var(--v2-shadow-2);
        font-family: var(--v2-font-display); font-size: var(--v2-fs-md); font-weight: 600;
        font-stretch: 92%; color: var(--text-2);
    }
    :where(html:not(.design-old)) .pr-delta-num {
        font-family: var(--v2-font-display); font-size: 56px; font-stretch: 80%;
        line-height: .9; letter-spacing: -.01em; margin-right: var(--s1);
    }
    :where(html:not(.design-old)) .pr-label,
    :where(html:not(.design-old)) .pr-list-head {
        font-family: var(--v2-font-display); font-size: var(--v2-fs-xs); font-weight: 600;
        font-stretch: 92%; letter-spacing: var(--v2-track-caps); color: var(--text-3);
    }
    :where(html:not(.design-old)) .pr-big {
        font-family: var(--v2-font-display); font-size: 30px; font-stretch: 84%; line-height: 1.05;
    }
    :where(html:not(.design-old)) .pr-note {
        font-family: var(--v2-font-display); font-size: var(--v2-fs-md); font-weight: 650;
    }
    :where(html:not(.design-old)) .pr-sub {
        font-family: var(--v2-font-display); font-size: var(--v2-fs-sm); color: var(--text-2); font-stretch: 92%;
    }
    /* The car's own line (position, laps of fuel/VE left) is last in the card: big enough to glance at. */
    :where(html:not(.design-old)) .pr-card .pr-sub:last-child { font-size: var(--v2-fs-lg); }
    :where(html:not(.design-old)) .pr-chip { font-family: var(--v2-font-display); border-radius: var(--v2-r-sm); }
    :where(html:not(.design-old)) .pr-alert { font-family: var(--v2-font-display); font-size: var(--v2-fs-md); border-radius: var(--v2-r-md); }
    :where(html:not(.design-old)) .pr-ready-pill {
        font-family: var(--v2-font-display); font-size: var(--v2-fs-md); font-weight: 600;
        background: var(--v2-inset); border: 1px solid var(--v2-line); border-radius: var(--v2-r-pill);
        color: var(--text); box-shadow: none;
    }
    :where(html:not(.design-old)) .pr-ready-pill.is-ok i { background: var(--dx-good); }
    :where(html:not(.design-old)) .pr-ready li.is-ok i { color: var(--dx-good); }
    :where(html:not(.design-old)) .pr-ready {
        background: var(--v2-panel); border: 1px solid var(--v2-line); border-radius: var(--v2-r-md);
    }
    :where(html:not(.design-old)) .pr-list { border-color: var(--v2-line); border-radius: var(--v2-r-md); }
    :where(html:not(.design-old)) .pr-row { background: var(--v2-panel); border-bottom-color: var(--v2-line); }
    :where(html:not(.design-old)) .pr-num,
    :where(html:not(.design-old)) .pr-time { font-family: var(--v2-font-display); font-variant-numeric: tabular-nums; }
    :where(html:not(.design-old)) .pr-time { font-size: var(--v2-fs-md); color: var(--text); white-space: nowrap; }
    :where(html:not(.design-old)) .pr-row { grid-template-columns: 26px 78px 1fr auto; }
    :where(html:not(.design-old)) .pr-meta { font-size: var(--v2-fs-xs); color: var(--text-3); }
    :where(html:not(.design-old)) .pr-done { color: var(--text-2); }
    /* "Open the full live view" is a real button, not a greyed-out one. */
    :where(html:not(.design-old)) .pr-full {
        background: var(--v2-raise); border: 1px solid var(--v2-line-2); color: var(--text);
        font-size: var(--v2-fs-md); border-radius: var(--v2-r-md);
    }
    :where(html:not(.design-old)) .pr-full:hover { background: var(--v2-overlay); }
}