/* v2-planner.css — the v2 "timing screen" look for the planner (index.html):
 * lobby, Drivers and Plan › Event / Rates / Strategy / Stints / Tires / Options.
 * Loads after v2.css. Styling only: no new classes, tokens only.
 *
 * Levels: page (bg) < card (--v2-panel: toolbars, overview cards, tables)
 * < inset (--v2-inset: inputs, chart wells, timeline track).
 *
 * Scoping: :where(html:not(.design-old)) for zero added weight. Rules aimed at
 * tires-overview.css / strategy-options.css (they load later, inside <body>)
 * or at inline styles from the planner JS use the plain html:not(.design-old)
 * prefix, or re-point the token the inline style reads.
 */

/* ======================================================================
   1. SECTION TABS (Plan › …) AND THEIR STATUS BADGES
   ====================================================================== */
:where(html:not(.design-old)) .plan-jump {
    margin: 0 0 var(--s5);
    padding: 4px;
    gap: 2px;
}
:where(html:not(.design-old)) .plan-jump a {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 36px; padding: 0 16px;
    font-size: var(--v2-fs-md); letter-spacing: .01em;
}

/* Badge: a small status disc after the name. Done reads as quiet good, Need
   as the one warn chip, Live as an accent dot. */
:where(html:not(.design-old)) .tb-badge {
    width: 16px; height: 16px; margin: 0; flex: none;
    border-radius: 50%; vertical-align: 0;
    font: 800 10px/1 var(--v2-font-display);
    color: var(--text-4);
    background: var(--v2-hover);
}
:where(html:not(.design-old)) .tb-badge.is-done {
    color: var(--dx-good);
    background: color-mix(in srgb, var(--dx-good) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dx-good) 38%, transparent);
}
:where(html:not(.design-old)) .tb-badge.is-need {
    color: var(--ink);
    background: var(--warn);
    box-shadow: none;
}
:where(html:not(.design-old)) .tb-badge.is-live {
    color: var(--accent);
    background: var(--v2-wash);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45);
}
/* Level-1 tabs (Drivers / Plan / Race) share the same badge, a size up. */
:where(html:not(.design-old)) nav.tabs .tab { display: inline-flex; align-items: center; gap: 8px; }
:where(html:not(.design-old)) nav.tabs .tb-badge { width: 18px; height: 18px; font-size: 11px; }

:where(html:not(.design-old)) .rs-next { font-size: var(--v2-fs-sm); color: var(--text-3); }

/* ======================================================================
   2. SECTION HEADINGS
   ====================================================================== */
:where(html:not(.design-old)) #app .section {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: var(--s1) var(--s3);
}
:where(html:not(.design-old)) #app .section h2 {
    display: inline-flex; align-items: center; gap: var(--s2);
    flex: none; margin: 0; padding: 0;
}
:where(html:not(.design-old)) #app .section .section-note { flex: 0 1 auto; min-width: 0; }
:where(html:not(.design-old)) .plan-sec > .section:first-child { margin-top: 0; }
:where(html:not(.design-old)) .help-q {
    width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 11px/1 var(--v2-font-display); text-decoration: none;
    color: var(--text-3); border: 1px solid var(--v2-line-2); background: none;
}
:where(html:not(.design-old)) .help-q:hover { color: var(--text-hi, var(--text)); border-color: var(--line-3); }

/* ======================================================================
   3. CARDS, FIELDS, TOGGLES
   ====================================================================== */
:where(html:not(.design-old)) .plan-toolbar,
:where(html:not(.design-old)) .field-grid.setup-row,
:where(html:not(.design-old)) .field-grid.adv-row,
:where(html:not(.design-old)) .rr-panel {
    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)) .field-grid.setup-row,
:where(html:not(.design-old)) .field-grid.adv-row {
    padding: var(--s4);
    gap: var(--s4);
    margin-bottom: var(--s4);
}
:where(html:not(.design-old)) .plan-toolbar { padding: var(--s2) var(--s3); gap: var(--s2) var(--s3); margin-bottom: var(--s4); }
:where(html:not(.design-old)) .plan-toolbar-sep { background: var(--v2-line); margin: 0; }
:where(html:not(.design-old)) .field { gap: 6px; }

/* One input height in the planner forms; the date box no longer runs larger. */
:where(html:not(.design-old)) .field input:not([type="checkbox"]):not([type="radio"]),
:where(html:not(.design-old)) .field select {
    min-height: 40px; height: 40px; padding: 0 12px;
    font-size: var(--v2-fs-md);
}
:where(html:not(.design-old)) input[type="checkbox"] { accent-color: var(--accent); }

:where(html:not(.design-old)) #app .section .section-act { min-height: var(--v2-h-sm); padding: 0 12px; margin: 0; }

/* Segmented toggles (Avg / Per corner …): the v2 track, selected item
   raised and underlined. Plain prefix: app.css .tire-inputs rules are heavier. */
html:not(.design-old) .seg-toggle {
    display: inline-flex; gap: 1px; padding: 2px;
    background: var(--v2-inset);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
}
html:not(.design-old) .seg-toggle button {
    min-height: 26px; height: 26px; margin: 0; padding: 0 10px;
    border: 0; border-radius: var(--v2-r-sm); box-shadow: none;
    background: none; color: var(--text-3);
    font: 600 var(--v2-fs-sm) var(--v2-font-display); letter-spacing: .02em;
}
html:not(.design-old) .seg-toggle button:hover { color: var(--text); background: var(--v2-hover); }
html:not(.design-old) .seg-toggle button[aria-pressed="true"],
html:not(.design-old) .seg-toggle button.is-on {
    background: var(--v2-overlay); color: var(--text-hi, var(--text));
    box-shadow: inset 0 -2px 0 var(--accent), var(--v2-shadow-1);
}
/* Fill every stint is a persistent mode: it reads as a set switch. */
:where(html:not(.design-old)) .mode-toggle {
    min-height: var(--v2-h-sm); padding: 0 12px;
    background: var(--v2-inset); color: var(--text-hi, var(--text));
    border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-md);
    font: 600 var(--v2-fs-sm) var(--v2-font-display);
    box-shadow: inset 0 -2px 0 var(--accent);
}
:where(html:not(.design-old)) .mode-toggle:hover { background: var(--v2-hover); }
:where(html:not(.design-old)) .mode-label {
    font: 600 var(--v2-fs-xs) var(--v2-font-display); letter-spacing: var(--v2-track-caps);
    text-transform: uppercase; color: var(--text-3);
}
:where(html:not(.design-old)) .plan-toolbar .btn-ghost,
:where(html:not(.design-old)) .tire-toolbar .btn-ghost {
    border-color: var(--v2-line-2); color: var(--text-2);
}
:where(html:not(.design-old)) .plan-toolbar .btn-ghost:hover,
:where(html:not(.design-old)) .tire-toolbar .btn-ghost:hover { border-color: var(--line-3); color: var(--text-hi, var(--text)); }

:where(html:not(.design-old)) .rate-summary {
    margin: 0 0 var(--s4); padding: 2px 0 2px var(--s3);
    border-left: 2px solid var(--v2-line-2); background: none;
    font-size: var(--v2-fs-sm); color: var(--text-3);
}
:where(html:not(.design-old)) .rate-summary.is-measured { border-left-color: var(--dx-good); }

/* ======================================================================
   4. TABLES
   ====================================================================== */
:where(html:not(.design-old)) #app .table-wrap { margin-bottom: var(--s4); }
:where(html:not(.design-old)) #app th { height: 36px; padding-top: 0; padding-bottom: 0; vertical-align: middle; }
:where(html:not(.design-old)) #app td { height: 44px; padding-top: 4px; padding-bottom: 4px; vertical-align: middle; font-variant-numeric: tabular-nums; }
/* Availability is a dense grid of hour cells: keep it tight. */
:where(html:not(.design-old)) #availabilityTable td { height: 30px; padding-top: 2px; padding-bottom: 2px; }
:where(html:not(.design-old)) th.has-tip { text-decoration: none; }

:where(html:not(.design-old)) #app td input[type="text"],
:where(html:not(.design-old)) #app td input[type="number"],
:where(html:not(.design-old)) #app td select {
    min-height: 32px; height: 32px; padding: 0 8px;
    font-size: var(--v2-fs-sm); font-weight: 600;
}

/* Rates: inputs, then the read-outs right-aligned in the number face. */
:where(html:not(.design-old)) .rates-table td:first-child {
    font: 600 var(--v2-fs-md) var(--v2-font-display); color: var(--text-hi, var(--text)); white-space: nowrap;
}
:where(html:not(.design-old)) .rates-table td input { width: 100%; max-width: 110px; }
:where(html:not(.design-old)) .rates-table td:nth-child(n+5),
:where(html:not(.design-old)) .rates-table th:nth-child(n+5) { text-align: right; }
:where(html:not(.design-old)) .rates-table td:nth-child(n+5) {
    font: 600 var(--v2-fs-md) var(--v2-font-display); font-stretch: 84%;
    font-variant-numeric: tabular-nums; color: var(--text-hi, var(--text));
}
:where(html:not(.design-old)) .rates-table td:nth-child(5) { color: var(--text-3); }

/* Realtime deltas: status text is written inline as var(--accent); it is a
   status, so it reads as good (Monza's accent is red). */
:where(html:not(.design-old)) #deltaTable td { --accent: var(--dx-good); }
:where(html:not(.design-old)) #deltaTable td:nth-child(n+2):nth-child(-n+4),
:where(html:not(.design-old)) #deltaTable th:nth-child(n+2):nth-child(-n+4) { text-align: right; }
:where(html:not(.design-old)) #deltaTable td:nth-child(n+2):nth-child(-n+4) {
    font: 600 var(--v2-fs-md) var(--v2-font-display); font-stretch: 84%; font-variant-numeric: tabular-nums;
}

/* ---- Stints table ---- */
:where(html:not(.design-old)) #stintScheduleTable td {
    height: 38px; padding-top: 3px; padding-bottom: 3px;
    font: 600 var(--v2-fs-sm) var(--v2-font-display); font-stretch: 90%;
    font-variant-numeric: tabular-nums;
}
:where(html:not(.design-old)) #stintScheduleTable td:first-child { color: var(--text-3); }
html:not(.design-old) #stintScheduleTable .start-time { color: var(--text-2); font-family: var(--v2-font-display); width: auto; white-space: nowrap; }
html:not(.design-old) #stintScheduleTable .end-time-input,
html:not(.design-old) #stintScheduleTable .laps-input {
    min-height: 28px; height: 28px; padding: 0 8px;
    font: 600 var(--v2-fs-sm) var(--v2-font-display); font-stretch: 90%;
    text-align: center; letter-spacing: 0;
}
html:not(.design-old) #stintScheduleTable .laps-input { width: 56px; }

/* Stint type chip: the JS colors it with var(--accent…) inline. Standard is
   the normal case, so it goes neutral; Fuel saving and Wet keep their warn /
   info color as a tinted tag. */
:where(html:not(.design-old)) .stint-type-btn[data-type="standard"] { --accent: var(--text-2); --accent-dim: transparent; }
:where(html:not(.design-old)) .stint-type-btn[data-type="standard"] { border-color: var(--v2-line-2) !important; }
:where(html:not(.design-old)) .stint-type-btn {
    min-width: 48px; height: 24px; min-height: 24px; padding: 0 8px;
    border-radius: var(--v2-r-sm); box-shadow: none;
    font: 700 var(--v2-fs-xs)/1 var(--v2-font-display); letter-spacing: var(--v2-track-caps);
}

/* Tire chip: quiet when nothing goes on, a neutral tag when tires do. */
:where(html:not(.design-old)) .tire-chip {
    min-width: 0; height: 24px; padding: 0 8px; gap: 4px;
    border-radius: var(--v2-r-sm);
    background: none; border-color: transparent; color: var(--text-4);
    font-family: var(--v2-font-display);
}
:where(html:not(.design-old)) .tire-chip.has-tires {
    background: var(--v2-raise); border-color: var(--v2-line-2); color: var(--text-hi, var(--text));
}
:where(html:not(.design-old)) .tire-chip-num { font-size: var(--v2-fs-sm); }
:where(html:not(.design-old)) .tire-chip-label { font-size: 10px; letter-spacing: var(--v2-track-caps); color: var(--text-3); }

/* Driver chip: the driver's color comes inline as the background. A raised
   neutral fill covers it (an inset shadow paints over the background) and a
   dot inherits it, so a column of red and green capsules becomes a column of
   names, each with its color. */
html:not(.design-old) #app .driver-chip {
    position: relative;
    justify-content: flex-start;
    min-width: 96px; max-width: 150px; height: 26px; min-height: 26px;
    padding: 0 10px 0 22px; margin: 0;
    border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-sm);
    background-clip: padding-box !important; /* the inline background shorthand resets it */
    box-shadow: inset 0 0 0 999px var(--v2-raise);
    color: var(--text-hi, var(--text));
    font: 600 var(--v2-fs-sm) var(--v2-font-display); letter-spacing: 0;
    text-shadow: none;
}
html:not(.design-old) #app .driver-chip::before {
    content: ""; position: absolute; left: 8px; top: 50%;
    width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
    background: inherit;
}
html:not(.design-old) #app button.driver-chip:hover { box-shadow: inset 0 0 0 999px var(--v2-overlay); filter: none; border-color: var(--line-3); }
html:not(.design-old) #app .driver-chip.empty { color: var(--text-3); }
html:not(.design-old) #app .driver-chip.empty::before { background: none; box-shadow: inset 0 0 0 1px var(--text-4); }

/* ======================================================================
   5. PLAN › EVENT — race at a glance
   ====================================================================== */
html:not(.design-old) #eventOverview { gap: var(--s3); margin-bottom: var(--s4); }
html:not(.design-old) #eventOverview .ev-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(--s4);
    gap: 4px;
}
/* When is the card to look at: start, countdown, flag. */
html:not(.design-old) #eventOverview .ev-card.ev-when { box-shadow: inset 3px 0 0 var(--accent), var(--v2-shadow-1); }
html:not(.design-old) #eventOverview .ev-k {
    font: 600 var(--v2-fs-xs) var(--v2-font-display); font-stretch: 92%;
    letter-spacing: var(--v2-track-caps); text-transform: uppercase; color: var(--text-3);
}
html:not(.design-old) #eventOverview .ev-main {
    font: 600 var(--v2-fs-md)/1.3 var(--v2-font-display);
    color: var(--text-hi, var(--text));
}
html:not(.design-old) #eventOverview .ev-sub { font: 400 var(--v2-fs-sm)/1.4 var(--v2-font-ui); letter-spacing: 0; margin-top: 0; color: var(--text-3); }
html:not(.design-old) #eventOverview .ev-count {
    font: 700 var(--v2-fs-lg)/1.1 var(--v2-font-display); font-stretch: 84%;
    font-variant-numeric: tabular-nums;
}
html:not(.design-old) #eventOverview .ev-card a { color: var(--accent); text-underline-offset: 2px; }
html:not(.design-old) #eventOverview .ev-map {
    background: var(--v2-inset); border: 1px solid var(--v2-line); border-radius: var(--v2-r-md); padding: 8px;
    box-sizing: border-box;
}

/* ======================================================================
   6. PLAN › STINTS — stats, timeline, driver share
   ====================================================================== */
html:not(.design-old) #stintsOverview { gap: var(--s2); margin-bottom: var(--s4); }
html:not(.design-old) #stintsOverview .sov-stats { gap: 2px var(--s5); font-size: var(--v2-fs-sm); color: var(--text-3); align-items: baseline; }
html:not(.design-old) #stintsOverview .sov-stats b {
    font: 700 var(--v2-fs-lg) var(--v2-font-display); font-stretch: 84%;
    font-variant-numeric: tabular-nums; margin-right: 3px; color: var(--text-hi, var(--text));
}
html:not(.design-old) #stintsOverview .sov-stats .is-bad b { color: var(--crit); }
/* Timeline: a card holding an inset track. */
html:not(.design-old) #stintsOverview .sov-tl {
    padding: var(--s4) var(--s3) var(--s2);
    background: var(--v2-panel); border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md); box-shadow: var(--v2-shadow-1);
}
html:not(.design-old) #stintsOverview .sov-band { height: 28px; background: var(--v2-inset); border-radius: var(--v2-r-sm); }
/* Segment fills and states live in stints-overview.css. */
html:not(.design-old) #stintsOverview .sov-seg { font: 700 var(--v2-fs-xs)/28px var(--v2-font-display); letter-spacing: .02em; }
html:not(.design-old) #stintsOverview .sov-axis { font-family: var(--v2-font-display); color: var(--text-4); margin-top: 4px; }
html:not(.design-old) #stintsOverview .sov-sharebox summary { font-family: var(--v2-font-display); font-weight: 600; color: var(--text-2); }
html:not(.design-old) #stintsOverview .sov-bar { background: var(--v2-inset); }

/* ======================================================================
   7. PLAN › TIRES — controls, life chart, schedule
   ====================================================================== */
html:not(.design-old) #sub11 .tov-top { gap: var(--s3); margin-bottom: var(--s4); }
html:not(.design-old) #sub11 .tov-bar,
html:not(.design-old) #sub11 .tov-inputs {
    padding: var(--s4); gap: var(--s3);
    background: var(--v2-panel); border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md); box-shadow: var(--v2-shadow-1);
}
/* The summary line is what this tab is for: the rail and the number face. */
html:not(.design-old) #sub11 .tov-bar { box-shadow: inset 3px 0 0 var(--accent), var(--v2-shadow-1); }
html:not(.design-old) #sub11 .tov-summary { font: 500 var(--v2-fs-md) var(--v2-font-display); color: var(--text-2); }
html:not(.design-old) #sub11 .tov-summary b {
    font-size: var(--v2-fs-lg); font-weight: 700; font-stretch: 84%; color: var(--text-hi, var(--text));
}
html:not(.design-old) #sub11 .tov-summary .tov-crit,
html:not(.design-old) #sub11 .tov-summary .tov-crit b { color: var(--crit); }
html:not(.design-old) #sub11 .tire-stat > label,
html:not(.design-old) #sub11 .tire-stat-label,
html:not(.design-old) #sub11 .ti-label {
    font: 600 var(--v2-fs-xs) var(--v2-font-display); letter-spacing: var(--v2-track-caps);
    text-transform: uppercase; color: var(--text-3); text-decoration: none;
}
html:not(.design-old) #sub11 .tire-stat input { width: 72px; min-height: 34px; height: 34px; text-align: center; font-weight: 600; }
html:not(.design-old) #sub11 .tire-stat-unit { font-size: var(--v2-fs-sm); color: var(--text-4); }
html:not(.design-old) #sub11 .tire-stat-val { font: 700 var(--v2-fs-md) var(--v2-font-display); font-variant-numeric: tabular-nums; }
html:not(.design-old) #sub11 .tire-stat-val.fresh,
html:not(.design-old) #sub11 .tire-stat-val.scrub { color: var(--text-hi, var(--text)); }
html:not(.design-old) #sub11 .tov-pool { color: var(--text-3); font-size: var(--v2-fs-sm); padding-top: var(--s3); border-top: 1px solid var(--v2-line); }
html:not(.design-old) #sub11 .tov-inputs input { min-height: 34px; height: 34px; font-weight: 600; }
/* Chart: an inset well, the lines do the talking. */
html:not(.design-old) #sub11 .tov-chart {
    padding: var(--s3) var(--s4);
    background: var(--v2-inset); border: 1px solid var(--v2-line); border-radius: var(--v2-r-md);
}
html:not(.design-old) #sub11 .tov-head { font-family: var(--v2-font-display); margin-bottom: var(--s2); }
html:not(.design-old) #sub11 .tov-head > span:first-child { font-weight: 600; color: var(--text-3); letter-spacing: var(--v2-track-caps); }
html:not(.design-old) #sub11 .tov-axis text { fill: var(--text-4); font-family: var(--v2-font-display); }
html:not(.design-old) #sub11 .tov-grid-l { stroke: var(--v2-line); }
html:not(.design-old) #sub11 .tov-tip { background: var(--v2-overlay); border: 0; box-shadow: var(--v2-shadow-pop); border-radius: var(--v2-r-sm); font-family: var(--v2-font-display); }

/* Schedule: v2 header (no accent tint), status colors for life, a light tint
   on fitted corners instead of a solid block. The JS writes var(--accent)
   inline for healthy life; healthy is a status, so it maps to --dx-good here
   (Monza and Fuji have a red accent). */
html:not(.design-old) #sub11 #tireScheduleTable thead th { background-color: var(--v2-raise); background-image: none; }
html:not(.design-old) #tireScheduleTable td {
    --accent: var(--dx-good);
    --info-dim: color-mix(in srgb, var(--info) 9%, transparent);
    --warn-dim: color-mix(in srgb, var(--warn) 9%, transparent);
    height: 38px; padding: 3px 10px;
    font: 600 var(--v2-fs-sm) var(--v2-font-display); font-stretch: 90%;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
html:not(.design-old) #tireScheduleTable td:first-child { color: var(--text-3); }
html:not(.design-old) #tireScheduleTable td > div { font-size: var(--v2-fs-xs); }
html:not(.design-old) #tireScheduleTable .tire-override {
    height: 22px; min-height: 22px; padding: 0 7px; margin-left: 8px;
    border-radius: var(--v2-r-sm);
    font: 700 10px/1 var(--v2-font-display); letter-spacing: var(--v2-track-caps);
}
html:not(.design-old) #tireScheduleTable .tire-override.keep { background: none; border: 1px solid var(--v2-line-2); color: var(--text-3); }
html:not(.design-old) #tireScheduleTable .tire-override.fresh { background: color-mix(in srgb, var(--info) 16%, transparent); border: 1px solid color-mix(in srgb, var(--info) 45%, transparent); color: var(--info); }
html:not(.design-old) #tireScheduleTable .tire-override.scrub { background: color-mix(in srgb, var(--warn) 16%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); }
/* Pinned = you set it (the label also carries a pin). */
html:not(.design-old) #tireScheduleTable .tire-override.pinned { box-shadow: 0 0 0 1px var(--text-3); }
html:not(.design-old) #tireScheduleTable .rec-pill,
html:not(.design-old) #tireScheduleTable td > .tov-say { font: 600 var(--v2-fs-sm) var(--v2-font-display); }
html:not(.design-old) #tireScheduleTable .driver-chip { min-width: 84px; }

/* ======================================================================
   8. PLAN › STRATEGY — option cards
   ====================================================================== */
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-now,
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-best { font-size: var(--v2-fs-sm); color: var(--text-3); }
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-now b,
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-best b { color: var(--text-hi, var(--text)); }
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-group { margin: 0 0 var(--s4); }
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-gh-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3); margin: 0 0 var(--s2); }
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-gh-row .so-best { cursor: help; }
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-gh {
    margin: 0; font: 650 var(--v2-fs-md) var(--v2-font-display); font-stretch: 94%;
    color: var(--text-hi, var(--text));
}
/* Compact cards: no stretching to the tallest neighbor. */
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-cards { gap: var(--s3); align-items: start; }
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-card {
    padding: var(--s3) var(--s4); gap: var(--s2);
    background: var(--v2-panel); border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md); box-shadow: var(--v2-shadow-1);
}
/* Your plan is the one to look at: rail and a raised surface, not an outline. */
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-card.is-plan,
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-card.is-best { border-color: var(--v2-line); }
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-card.is-plan { box-shadow: inset 3px 0 0 var(--accent), var(--v2-shadow-1); background: var(--v2-raise); border-color: var(--v2-line-2); }
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-card.is-quiet { background: var(--v2-inset); box-shadow: none; }
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-name { font: 650 var(--v2-fs-md)/1.15 var(--v2-font-display); font-stretch: 94%; color: var(--text-hi, var(--text)); }
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-card.is-quiet .so-name { color: var(--text-3); }
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-what { font-size: var(--v2-fs-sm); color: var(--text-3); margin-top: calc(-1 * var(--s1)); }
/* Badges as v2 pills: the first ("Your plan") accent, a second ("Best") good. */
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-badge {
    display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
    border-radius: var(--v2-r-pill); border: 1px solid rgba(var(--accent-rgb), .4);
    background: var(--v2-wash); color: var(--accent);
    font: 600 var(--v2-fs-xs)/1 var(--v2-font-display); letter-spacing: .06em; text-transform: uppercase;
}
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-badge + .so-badge,
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-card:not(.is-plan) .so-badge {
    background: color-mix(in srgb, var(--dx-good) 14%, transparent);
    border-color: color-mix(in srgb, var(--dx-good) 40%, transparent); color: var(--dx-good);
}
/* Numbers: caps label above, value in the number face, between hairlines. */
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-nums { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: var(--s2) var(--s4); padding: var(--s2) 0; border-top: 1px solid var(--v2-line); border-bottom: 1px solid var(--v2-line); }
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-nums dt {
    font: 600 var(--v2-fs-xs) var(--v2-font-display); font-stretch: 92%;
    letter-spacing: var(--v2-track-caps); color: var(--text-3);
}
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-nums dd {
    font: 700 var(--v2-fs-lg)/1.1 var(--v2-font-display); font-stretch: 84%;
    font-variant-numeric: tabular-nums; color: var(--text-hi, var(--text));
}
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-nums div:last-child dd { font-size: var(--v2-fs-md); font-weight: 600; }
/* Difference vs your plan: normal-size text on the baseline, so it never reads as an exponent. */
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-d {
    display: inline-block; vertical-align: baseline; margin-left: 6px; white-space: nowrap;
    font: 600 var(--v2-fs-sm)/1 var(--v2-font-display); font-stretch: 92%; color: var(--text-2);
}
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-risks { margin: 0; padding: 0; font-size: var(--v2-fs-sm); line-height: 1.4; color: var(--text-2); }
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-math .so-risks { padding-left: 18px; margin: var(--s1) 0 var(--s2); }
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-use { min-height: var(--v2-h-sm); padding: 0 12px; font-size: var(--v2-fs-sm); border-color: var(--v2-line-2); color: var(--text); }
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-levers summary,
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-fs-more summary { font-family: var(--v2-font-display); font-weight: 600; }
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-pick { border-radius: var(--v2-r-sm); background: var(--v2-raise); border-color: var(--v2-line-2); min-height: 28px; font-family: var(--v2-font-display); }
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-whatif { background: var(--v2-panel); border-radius: var(--v2-r-md); }
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-skel-row span { background: var(--v2-panel); border-color: var(--v2-line); }
html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-pickme { font: 600 var(--v2-fs-sm) var(--v2-font-display); color: var(--warn); }
html.plan-gated:not(.design-old) .so-gate { background: var(--v2-panel); border-color: var(--v2-line); border-radius: var(--v2-r-md); box-shadow: inset 3px 0 0 var(--accent), var(--v2-shadow-1); }

/* ======================================================================
   9. DRIVERS — roster and availability
   ====================================================================== */
:where(html:not(.design-old)) #rosterTable td { height: 48px; }
:where(html:not(.design-old)) #rosterTable input:not([type="color"]) { min-height: 34px; height: 34px; font-size: var(--v2-fs-md); }
:where(html:not(.design-old)) .avail-intro { font-size: var(--v2-fs-sm); color: var(--text-3); }
:where(html:not(.design-old)) .av-cell { font-family: var(--v2-font-display); font-variant-numeric: tabular-nums; }
:where(html:not(.design-old)) .av-hour { font: 600 var(--v2-fs-sm) var(--v2-font-display); font-variant-numeric: tabular-nums; }
:where(html:not(.design-old)) .av-stints { font-family: var(--v2-font-display); color: var(--text-3); font-variant-numeric: tabular-nums; }
:where(html:not(.design-old)) .av-day-btn {
    min-height: 24px; padding: 0 8px; border-radius: var(--v2-r-sm);
    background: none; border: 1px solid var(--v2-line-2); color: var(--text-3);
    font: 600 var(--v2-fs-xs) var(--v2-font-display); letter-spacing: .04em;
}

/* ======================================================================
   10. LOBBY
   ====================================================================== */
html:not(.design-old) #lobby { background: var(--v2-page) !important; font-family: var(--v2-font-ui) !important; }
:where(html:not(.design-old)) .lobby-headline {
    font: 650 clamp(28px, 3.4vw, 40px)/1.1 var(--v2-font-display); font-stretch: 94%;
    letter-spacing: -.01em; color: var(--text-hi, var(--text));
}
:where(html:not(.design-old)) .lobby-lede { font-size: var(--v2-fs-md); color: var(--text-2); line-height: 1.55; }
:where(html:not(.design-old)) .lobby-badge {
    font: 600 var(--v2-fs-xs) var(--v2-font-display); letter-spacing: var(--v2-track-caps);
    background: var(--v2-wash); border-color: rgba(var(--accent-rgb), .4); border-radius: var(--v2-r-pill);
}
:where(html:not(.design-old)) .lobby-points li { border-left-color: var(--v2-line-2); }
:where(html:not(.design-old)) .lobby-points b { font: 600 var(--v2-fs-md) var(--v2-font-display); color: var(--text-hi, var(--text)); }
:where(html:not(.design-old)) .lobby-points span { font-size: var(--v2-fs-sm); color: var(--text-3); }
:where(html:not(.design-old)) .lobby-card {
    background: var(--v2-panel);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    box-shadow: inset 0 3px 0 var(--accent), var(--v2-shadow-2);
    padding: var(--s5);
    text-align: left;
}
:where(html:not(.design-old)) .lobby-card-title {
    font: 600 var(--v2-fs-xs) var(--v2-font-display); letter-spacing: var(--v2-track-caps);
    text-transform: uppercase; color: var(--text-3); border: 0; padding: 0; margin: 0 0 var(--s3);
}
:where(html:not(.design-old)) .lobby-btn-primary {
    min-height: var(--v2-h-lg); border-radius: var(--v2-r-md);
    font: 700 16px var(--v2-font-display); letter-spacing: .01em;
}
:where(html:not(.design-old)) .lobby-divider { font: 600 var(--v2-fs-xs) var(--v2-font-display); letter-spacing: var(--v2-track-caps); text-transform: uppercase; color: var(--text-4); gap: var(--s2); }
:where(html:not(.design-old)) .lobby-line { background: var(--v2-line); }
:where(html:not(.design-old)) .lobby-input {
    min-height: var(--v2-h-lg); height: var(--v2-h-lg); padding: 0 14px;
    border-radius: var(--v2-r-md); color: var(--text-hi, var(--text));
    font: 600 16px var(--v2-font-display); letter-spacing: .04em;
}
:where(html:not(.design-old)) .lobby-btn-secondary {
    min-height: var(--v2-h-lg); padding: 0 20px; border-radius: var(--v2-r-md);
    background: var(--v2-raise); border: 1px solid var(--v2-line-2); color: var(--text-hi, var(--text));
    font: 700 15px var(--v2-font-display);
}
:where(html:not(.design-old)) .lobby-btn-secondary:hover { background: var(--v2-overlay); border-color: var(--line-3); }
:where(html:not(.design-old)) .lobby-aside { font-size: var(--v2-fs-sm); color: var(--text-3); }

/* ======================================================================
   11. PHONE
   ====================================================================== */
@media (max-width: 600px) {
    :where(html:not(.design-old)) .plan-jump a { padding: 0 12px; font-size: 14px; }
    :where(html:not(.design-old)) .field-grid.setup-row,
    :where(html:not(.design-old)) .field-grid.adv-row { padding: var(--s3); gap: var(--s3); }
    :where(html:not(.design-old)) #app td { height: 40px; }
    :where(html:not(.design-old)) #availabilityTable td { height: 30px; }
    html:not(.design-old) #stintsOverview .sov-stats { gap: 2px var(--s4); }
    html:not(.design-old) #stintsOverview .sov-stats b { font-size: var(--v2-fs-md); }
    html:not(.design-old) #stintsOverview .sov-tl { padding: var(--s3) var(--s2) var(--s1); }
    html:not(.design-old) #sub11 .tov-bar,
    html:not(.design-old) #sub11 .tov-inputs { padding: var(--s3); }
    html:not(.design-old) :is(#strategyOptions, .strat-pop) .so-card { padding: var(--s3); }
    :where(html:not(.design-old)) .lobby-card { padding: var(--s4); }
}

/* Event cards: wrap and grow so a short last row never leaves a gap. */
:where(html:not(.design-old)) .ev-ov { display: flex; flex-wrap: wrap; }
:where(html:not(.design-old)) .ev-ov > .ev-card { flex: 1 1 220px; }
:where(html:not(.design-old)) .ev-ov > .ev-race { flex: 2 1 380px; }
/* Wide screens: the track and car card is one column plus a little, not half the row. */
@media (min-width: 1700px) { :where(html:not(.design-old)) .ev-ov > .ev-race { flex: 1 1 400px; } }
/* Event inputs: five columns at 1024 clipped the date, time and track controls. */
:where(html:not(.design-old)) .field-grid.setup-row { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Phones: the section bar scrolls sideways, so fade the edge that has more. */
@media (max-width: 760px) {
    :where(html:not(.design-old)) .plan-jump {
        background:
            linear-gradient(to right, var(--v2-inset) 30%, transparent) left center / 28px 100% no-repeat local,
            linear-gradient(to left, var(--v2-inset) 30%, transparent) right center / 28px 100% no-repeat local,
            linear-gradient(to right, color-mix(in srgb, var(--accent) 45%, transparent), transparent) left center / 14px 100% no-repeat scroll,
            linear-gradient(to left, color-mix(in srgb, var(--accent) 45%, transparent), transparent) right center / 14px 100% no-repeat scroll,
            var(--v2-inset);
    }
}

/* The schedule fills the page width at every size (the columns share the extra), instead of hugging 830px
   with the right half empty on a wide screen. Below 1250px the driver column also gets a little more. */
html:not(.design-old) #sub10 .table-wrap:has(> #stintScheduleTable) { width: auto; }
html:not(.design-old) #stintScheduleTable { width: 100%; }
@media (max-width: 1249px) {
    html:not(.design-old) #stintScheduleTable :is(th, td):nth-child(7) { width: 112px; }
}