/* v2-dash.css — v2 "timing screen" look for the dashboard view (live.html
 * html[data-view="dash"]; dash.html redirects there) and debrief.html.
 * Loads after v2.css. Everything is scoped under html:not(.design-old):
 * :where() for zero specificity where source order is enough, the plain
 * prefix where a later file (dash-race-tiles.css) or a dash.css state rule
 * (.dx-seg button[aria-pressed]) has to be beaten.
 * Sizes stay close to dash.css: the packing engine measures tiles, so the
 * dashboard still never scrolls. */

/* ======================================================================
   DASHBOARD
   ====================================================================== */
:where(html:not(.design-old)) .dx-sum { font-family: var(--v2-font-display); font-variant-numeric: tabular-nums; font-stretch: 90%; font-size: 14px; color: var(--text-hi, var(--text)); }
:where(html:not(.design-old)) .dx-room { font-family: var(--v2-font-display); font-stretch: 90%; letter-spacing: .06em; }
:where(html:not(.design-old)) .dx-brand { font-family: var(--v2-font-display); font-stretch: 94%; }

/* Preset switch: the v2 segmented control (raised + accent underline, not a filled block). */
html:not(.design-old) .dx-seg button[aria-pressed="true"] {
    background: var(--v2-overlay); color: var(--text-hi, var(--text)); border-color: transparent;
    box-shadow: inset 0 -2px 0 var(--accent), var(--v2-shadow-1); font-weight: 650;
}
/* Toggles (Edit layout, TV) when on: a wash, not a second primary. */
html:not(.design-old) .dx-btn[aria-pressed="true"] {
    background: var(--v2-wash); color: var(--accent); border-color: transparent; font-weight: 650;
}

/* ---- tiles: one panel surface, hairline, caps header ---- */
:where(html:not(.design-old)) .dc,
:where(html:not(.design-old)) .dv-tile {
    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)) .dh,
:where(html:not(.design-old)) .dh-t,
:where(html:not(.design-old)) .dv-tile > span,
:where(html:not(.design-old)) .lbl,
:where(html:not(.design-old)) .pl-grid > div > span,
:where(html:not(.design-old)) .tw-row.tw-head {
    font-family: var(--v2-font-display);
    font-weight: 600;
    font-stretch: 92%;
    letter-spacing: var(--v2-track-caps);
    text-transform: uppercase;
    color: var(--text-3);
}
:where(html:not(.design-old)) .dh,
:where(html:not(.design-old)) .dh-t,
:where(html:not(.design-old)) .dv-tile > span { font-size: var(--v2-fs-xs); color: var(--text-2); }
/* Tile title strip: a hairline under the header separates the name from the numbers. */
:where(html:not(.design-old)) .dc > .dh { padding-bottom: 5px; border-bottom: 1px solid var(--v2-line); margin-bottom: 7px; align-items: baseline; }
:where(html:not(.design-old)) .dh .sub,
:where(html:not(.design-old)) .legend { font-family: var(--v2-font-ui); font-stretch: 100%; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--text-4); font-size: 12px; }

/* ---- numbers: condensed, tabular, bold ---- */
:where(html:not(.design-old)) .num,
:where(html:not(.design-old)) .pl-grid b,
:where(html:not(.design-old)) .pl-grid small,
:where(html:not(.design-old)) .en-row b,
:where(html:not(.design-old)) .kv b,
:where(html:not(.design-old)) .ty .t-big,
:where(html:not(.design-old)) .ty .t-h span,
:where(html:not(.design-old)) .tw-r,
:where(html:not(.design-old)) .al-log time,
:where(html:not(.design-old)) .rd-log time,
:where(html:not(.design-old)) .rt-num,
:where(html:not(.design-old)) .rt-laps,
:where(html:not(.design-old)) .rt-end {
    font-family: var(--v2-font-display);
    font-variant-numeric: tabular-nums lining-nums;
    font-stretch: 84%;
    letter-spacing: -.005em;
}
:where(html:not(.design-old)) .pl-grid b,
:where(html:not(.design-old)) .ty .t-big { font-weight: 700; line-height: 1.05; }

:where(html:not(.design-old)) .pl-grid b { font-size: 18px; }

:where(html:not(.design-old)) .ty .t-big { font-size: var(--v2-fs-lg); }
:where(html:not(.design-old)) .en-row b { font-size: 14px; font-weight: 650; }

/* Sub-cells are recessed instrument wells, not boxes inside boxes. */
:where(html:not(.design-old)) .pl-grid div,
:where(html:not(.design-old)) .ty,
:where(html:not(.design-old)) .eh-msg,
:where(html:not(.design-old)) .ho-note {
    background: var(--v2-inset);
    border: 0;
    border-radius: var(--v2-r-sm);
}

:where(html:not(.design-old)) .ty .t-h b { font-family: var(--v2-font-display); font-stretch: 92%; font-weight: 700; color: var(--text-hi, var(--text)); }

/* Bars and meters: inset tracks with square-ish ends, like a timing screen. */
:where(html:not(.design-old)) .bar { background: var(--v2-inset); border-radius: 2px; box-shadow: inset 0 0 0 1px var(--v2-line); }
:where(html:not(.design-old)) .bar i { border-radius: 2px; }

/* Status lines inside tiles: a left rail in the state color, not a pill box. */

:where(html:not(.design-old)) .pl-head b,
:where(html:not(.design-old)) .eh-driver b { font-family: var(--v2-font-display); font-stretch: 94%; font-weight: 700; }

/* ---- glanceable number tiles ---- */
:where(html:not(.design-old)) .dv-tile > b { font-weight: 700; letter-spacing: -.02em; color: var(--text-hi, var(--text)); }
:where(html:not(.design-old)) .dv-tile > small { font-family: var(--v2-font-display); font-stretch: 90%; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-3); }
html:not(.design-old)[data-preset="driver"] .dv-tile > span { font-size: var(--v2-fs-sm); }
/* Gear is a reading, not a state: ink, with the rev bar carrying the color. */

/* The box call is the one thing to look at when it fires. */

:where(html:not(.design-old)) .dv-next.is-soon { border-color: var(--v2-line); box-shadow: inset 0 3px 0 var(--warn), var(--v2-shadow-1); }
:where(html:not(.design-old)) .ho { border-color: var(--v2-line); box-shadow: inset 0 3px 0 var(--warn), var(--v2-shadow-1); }

/* ---- critical banner: a solid strip, the loudest thing on the screen ---- */
:where(html:not(.design-old)) .dx-crit {
    border: 0; border-radius: var(--v2-r-sm);
    background: var(--crit); color: var(--v2-page);
    font-family: var(--v2-font-display); font-stretch: 90%; font-weight: 700;
    font-size: 18px; letter-spacing: .04em; text-transform: uppercase;
    line-height: 38px; padding: 0 14px 0 34px; position: relative;
    box-shadow: var(--v2-shadow-2);
}
:where(html:not(.design-old)) .dx-crit::before {
    content: ''; position: absolute; left: 14px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
    border-radius: 50%; background: currentColor; animation: v2dx-blink 1s steps(2, start) infinite;
}
@keyframes v2dx-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { :where(html:not(.design-old)) .dx-crit::before { animation: none; } }
:where(html:not(.design-old)) .dx-pitmsg { border: 1px solid var(--v2-line); border-radius: var(--v2-r-md); background: var(--v2-panel); box-shadow: inset 5px 0 0 var(--info), var(--v2-shadow-2); padding-left: 18px; }
:where(html:not(.design-old)) .dx-pitmsg b { font-family: var(--v2-font-display); font-stretch: 90%; font-weight: 700; letter-spacing: -.01em; }
:where(html:not(.design-old)) .dx-offline { border: 0; border-radius: var(--v2-r-sm); box-shadow: inset 3px 0 0 var(--warn); font-family: var(--v2-font-display); font-stretch: 92%; }

/* ---- timing tower: broadcast rows ---- */
:where(html:not(.design-old)) .tw-row { font-family: var(--v2-font-display); font-stretch: 92%; font-size: 13px; border-radius: 2px; }
:where(html:not(.design-old)) .tw-row.tw-head { font-size: 10px; border-bottom: 1px solid var(--v2-line); border-radius: 0; }
:where(html:not(.design-old)) .tw-row:nth-child(even) { background: var(--v2-zebra); }
:where(html:not(.design-old)) .tw-row > :first-child { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-hi, var(--text)); }
:where(html:not(.design-old)) .tw-name { color: var(--text); font-weight: 550; }
:where(html:not(.design-old)) .tw-r { font-size: 13px; font-weight: 600; }
:where(html:not(.design-old)) .tw-row.tw-me { background: var(--v2-wash); box-shadow: inset 3px 0 0 var(--accent); }
:where(html:not(.design-old)) .tw-in { border-radius: 2px; font-family: var(--v2-font-display); letter-spacing: .04em; }

/* ---- track map and canvases: recessed screens ---- */
:where(html:not(.design-old)) .mp-wrap { background: var(--v2-inset); border-radius: var(--v2-r-sm); box-shadow: inset 0 0 0 1px var(--v2-line); }
:where(html:not(.design-old)) .mp-msg { font-family: var(--v2-font-display); font-stretch: 92%; letter-spacing: .04em; }


/* ---- weather, alerts, radio ---- */

:where(html:not(.design-old)) .al-log,
:where(html:not(.design-old)) .rd-log { border-top-color: var(--v2-line); }
:where(html:not(.design-old)) .rd-form input { background: var(--v2-inset); border-color: var(--v2-line-2); border-radius: var(--v2-r-sm); min-height: 0; font-family: var(--v2-font-display); }
:where(html:not(.design-old)) .rd-quick .dx-btn,
:where(html:not(.design-old)) .rd-form .dx-btn,
:where(html:not(.design-old)) .tile-ctl button,
:where(html:not(.design-old)) .dx-tray .dx-btn,
:where(html:not(.design-old)) .dx-pitmsg .dx-btn,
:where(html:not(.design-old)) .mp-x {
    background: var(--v2-raise); border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-sm);
    color: var(--text); box-shadow: var(--v2-shadow-1);
}

/* ---- edit layout: drafting chrome ---- */
html:not(.design-old).dx-editing .dx-grid > [data-tile] { outline: 1px dashed var(--v2-line-2); outline-offset: -1px; }
html:not(.design-old).dx-editing .dx-grid > [data-tile]:hover { outline-color: var(--text-3); }
html:not(.design-old).dx-editing .dx-grid > [data-tile]:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
html:not(.design-old).dx-editing .tile-ctl { background: var(--v2-inset); border-radius: var(--v2-r-sm); padding: 4px 4px 4px 8px; box-sizing: border-box; }
:where(html:not(.design-old)) .tile-ctl .tile-nm { font-family: var(--v2-font-display); font-stretch: 92%; color: var(--text-hi, var(--text)); }
:where(html:not(.design-old)) .dx-tray { background: var(--v2-overlay); border: 0; border-radius: var(--v2-r-md); box-shadow: inset 3px 0 0 var(--accent), var(--v2-shadow-pop); padding: 10px 12px; }
html:not(.design-old) #dxDone { background: var(--accent); color: var(--ink); border-color: var(--accent); font-weight: 700; }
:where(html:not(.design-old)) .dx-fitpop { background: var(--v2-overlay); border: 0; border-radius: var(--v2-r-md); box-shadow: var(--v2-shadow-pop); }

/* ---- race tiles (dash-race-tiles.js, rt-); plain prefix: that file loads after this one ---- */
html:not(.design-old) .rt-pill {
    font-family: var(--v2-font-display); font-size: var(--v2-fs-xs); font-weight: 650; font-stretch: 92%;
    letter-spacing: var(--v2-track-caps); border-radius: 2px; padding: 2px 6px; border-color: var(--v2-line-2);
}
html:not(.design-old) .rt-live .rt-pill { color: var(--ink); }
html:not(.design-old) .rt-sched li { border-bottom-color: var(--v2-line); font-family: var(--v2-font-display); font-stretch: 92%; }
html:not(.design-old) .rt-sched li.rt-live { background: var(--v2-wash); box-shadow: inset 3px 0 0 var(--accent); padding-left: 8px; padding-right: 8px; }
html:not(.design-old) .rt-drv { font-weight: 650; color: var(--text-hi, var(--text)); }
html:not(.design-old) .rt-wet { font-family: var(--v2-font-display); font-weight: 650; letter-spacing: .04em; border-radius: 2px; }
html:not(.design-old) .rt-ready b { font-family: var(--v2-font-display); font-stretch: 94%; font-weight: 650; }
html:not(.design-old) .rt-rivals > * + * { border-top-color: var(--v2-line) !important; }

/* ======================================================================
   DEBRIEF — screen only; the print sheet in debrief.css keeps its ink look.
   ====================================================================== */
@media screen {
    :where(html:not(.design-old)) .db-brand { font-family: var(--v2-font-display); font-stretch: 94%; }
    :where(html:not(.design-old)) .db-room { font-family: var(--v2-font-display); font-stretch: 90%; letter-spacing: .06em; }
    :where(html:not(.design-old)) .db-btn {
        height: var(--v2-h-md); padding: 0 16px; border-radius: var(--v2-r-md);
        background: var(--v2-raise); border: 1px solid var(--v2-line-2); color: var(--text); box-shadow: var(--v2-shadow-1);
        font-family: var(--v2-font-display); font-size: 14px; font-weight: 600;
    }
    :where(html:not(.design-old)) .db-btn:hover { background: var(--v2-overlay); }
    :where(html:not(.design-old)) .db-share { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 700; }

    :where(html:not(.design-old)) .db { gap: var(--s5); padding-top: var(--s6); }
    :where(html:not(.design-old)) #dbBody { gap: var(--s5); }

    /* Headline: the verdict, big. */
    :where(html:not(.design-old)) .db-phase {
        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); margin-bottom: var(--s2);
    }
    :where(html:not(.design-old)) .db-head h1 {
        font-size: var(--v2-fs-xl); font-weight: 700; font-stretch: 88%; line-height: 1.02; letter-spacing: -.015em; max-width: 32ch;
    }
    :where(html:not(.design-old)) .db-sub { font-size: var(--v2-fs-md); color: var(--text-2); margin-top: var(--s3); }

    /* Cards */
    :where(html:not(.design-old)) .db-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); }
    :where(html:not(.design-old)) .db-card h2 { font-size: var(--v2-fs-lg); font-weight: 650; font-stretch: 94%; margin-bottom: var(--s3); }

    /* What to change: the one card to look at. */
    :where(html:not(.design-old)) .db-look { border-color: var(--v2-line); box-shadow: inset 3px 0 0 var(--accent), var(--v2-shadow-1); padding-left: var(--s5); }
    :where(html:not(.design-old)) .db-look ol { list-style: none; padding: 0; counter-reset: dbl; gap: 0; font-size: var(--v2-fs-md); }
    :where(html:not(.design-old)) .db-look li { counter-increment: dbl; position: relative; padding: var(--s3) 0 var(--s3) 44px; border-top: 1px solid var(--v2-line); }
    :where(html:not(.design-old)) .db-look li:first-child { border-top: 0; padding-top: 0; }
    :where(html:not(.design-old)) .db-look li:last-child { padding-bottom: 0; }
    :where(html:not(.design-old)) .db-look li::before {
        content: counter(dbl, decimal-leading-zero); position: absolute; left: 0;
        font-family: var(--v2-font-display); font-size: var(--v2-fs-lg); font-weight: 700; font-stretch: 84%;
        font-variant-numeric: tabular-nums; color: var(--accent); line-height: 1.1;
    }
    :where(html:not(.design-old)) .db-look li:not(:first-child)::before { top: var(--s3); }
    :where(html:not(.design-old)) .db-look li p { color: var(--text-hi, var(--text)); }
    /* Apply is secondary here: Share is the page's one primary. */
    :where(html:not(.design-old)) .db-apply .db-btn { height: var(--v2-h-sm); background: var(--v2-wash); color: var(--accent); border-color: rgba(var(--accent-rgb), .45); font-weight: 650; box-shadow: none; }
    :where(html:not(.design-old)) .db-apply .db-btn:hover { background: rgba(var(--accent-rgb), .2); }
    :where(html:not(.design-old)) .db-apply small { color: var(--text-4); }

    /* KPI row: one band of big numbers split by hairlines. */
    :where(html:not(.design-old)) .db-kpis { gap: 0; background: var(--v2-panel); border: 1px solid var(--v2-line); border-radius: var(--v2-r-md); box-shadow: var(--v2-shadow-1); overflow: hidden; }
    :where(html:not(.design-old)) .db-kpi { background: none; border: 0; border-radius: 0; box-shadow: inset 1px 0 0 var(--v2-line); padding: var(--s4); }
    :where(html:not(.design-old)) .db-kpi:first-child { box-shadow: none; }
    :where(html:not(.design-old)) .db-kpi span {
        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); margin-bottom: var(--s2);
    }
    :where(html:not(.design-old)) .db-kpi b {
        font-family: var(--v2-font-display); font-size: var(--v2-fs-xl); font-weight: 700; font-stretch: 84%;
        line-height: .95; letter-spacing: -.015em; font-variant-numeric: tabular-nums lining-nums; color: var(--text-hi, var(--text));
    }

    /* Chart */
    :where(html:not(.design-old)) .db-ch-ax { font-family: var(--v2-font-display); font-stretch: 88%; font-weight: 600; }
    :where(html:not(.design-old)) .db-ch-bar { opacity: 1; }
    :where(html:not(.design-old)) .db-legend { font-family: var(--v2-font-display); font-stretch: 92%; font-size: var(--v2-fs-sm); }
    :where(html:not(.design-old)) .db-legend i { border-radius: 2px; }

    /* Table */
    :where(html:not(.design-old)) .db-scroll { border-radius: var(--v2-r-sm); box-shadow: inset 0 0 0 1px var(--v2-line); }
    :where(html:not(.design-old)) .db-table { font-family: var(--v2-font-display); font-stretch: 90%; font-size: 14px; font-variant-numeric: tabular-nums lining-nums; }
    :where(html:not(.design-old)) .db-table th { background: var(--v2-raise); padding: 9px 12px; border-bottom: 1px solid var(--v2-line-2); }
    :where(html:not(.design-old)) .db-table td { padding: 8px 12px; border-bottom: 1px solid var(--v2-line); }
    :where(html:not(.design-old)) .db-table tr:nth-child(even) td { background: var(--v2-zebra); }
    :where(html:not(.design-old)) .db-table td:first-child { background: var(--v2-panel); font-weight: 700; color: var(--text-hi, var(--text)); }
    :where(html:not(.design-old)) .db-table tr:hover td { background: var(--v2-hover); }
    html:not(.design-old) .db-table tr.is-off td { background: var(--warn-dim); }
    html:not(.design-old) .db-table tr.is-off td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
    :where(html:not(.design-old)) .db-tag { font-family: var(--v2-font-display); font-size: 10px; letter-spacing: var(--v2-track-caps); border-radius: 2px; background: var(--v2-raise); box-shadow: inset 0 0 0 1px var(--v2-line); }
    :where(html:not(.design-old)) .db-tag.is-warn { background: var(--warn-dim); box-shadow: inset 0 0 0 1px var(--warn); }
    :where(html:not(.design-old)) .db-delta { font-size: 12px; }
    :where(html:not(.design-old)) .db-delta.is-good { color: var(--dx-good); }

    /* Drivers: small multiples on inset wells, numbers in the display face. */
    :where(html:not(.design-old)) .db-drivers { gap: var(--s3); }
    :where(html:not(.design-old)) .db-dcard { background: var(--v2-inset); border: 0; border-radius: var(--v2-r-md); padding: var(--s3) var(--s4); }
    :where(html:not(.design-old)) .db-dcard h3 { font-size: var(--v2-fs-lg); font-weight: 650; padding-bottom: var(--s2); border-bottom: 1px solid var(--v2-line); margin-bottom: var(--s2); }
    :where(html:not(.design-old)) .db-dcard h3 small { font-family: var(--v2-font-display); font-size: var(--v2-fs-xs); letter-spacing: .04em; color: var(--text-3); }
    :where(html:not(.design-old)) .db-dcard dl { gap: 5px; }
    :where(html:not(.design-old)) .db-dcard dl div { align-items: baseline; }
    :where(html:not(.design-old)) .db-dcard dt { font-family: var(--v2-font-display); font-size: var(--v2-fs-xs); font-weight: 600; font-stretch: 92%; letter-spacing: var(--v2-track-caps); text-transform: uppercase; }
    :where(html:not(.design-old)) .db-dcard dd { font-family: var(--v2-font-display); font-size: 17px; font-weight: 650; font-stretch: 86%; font-variant-numeric: tabular-nums; color: var(--text-hi, var(--text)); }
    :where(html:not(.design-old)) .db-dcard dd small { font-size: 12px; font-weight: 500; }
    :where(html:not(.design-old)) .db-sharebar { border-radius: 2px; background: var(--v2-panel); }
    :where(html:not(.design-old)) .db-sharebar span { border-radius: 2px; }

    :where(html:not(.design-old)) .db-empty { border: 1px dashed var(--v2-line-2); border-radius: var(--v2-r-md); background: var(--v2-panel); }
    :where(html:not(.design-old)) .db-toast { background: var(--v2-overlay); border: 0; border-radius: var(--v2-r-md); box-shadow: inset 3px 0 0 var(--accent), var(--v2-shadow-pop); font-family: var(--v2-font-display); }

    @media (max-width: 640px) {
        :where(html:not(.design-old)) .db { padding-top: var(--s5); }
        :where(html:not(.design-old)) .db-head h1 { font-size: 30px; }
        :where(html:not(.design-old)) .db-kpi { box-shadow: inset 1px 0 0 var(--v2-line), inset 0 1px 0 var(--v2-line); padding: var(--s3); }
        :where(html:not(.design-old)) .db-kpi b { font-size: 28px; }
        :where(html:not(.design-old)) .db-look { padding-left: var(--s4); }
        :where(html:not(.design-old)) .db-look li { padding-left: 34px; }
    }
}
/* Paper: keep the display face, drop screen depth (debrief.css sets the sizes). */
@media print {
    :where(html:not(.design-old)) .db-head h1,
    :where(html:not(.design-old)) .db-card h2,
    :where(html:not(.design-old)) .db-kpi b,
    :where(html:not(.design-old)) .db-table { font-family: var(--v2-font-display); font-variant-numeric: tabular-nums; }
}

/* Connection tile: the list was squeezed below its rows, so the last row ran into the footer line. */
:where(html:not(.design-old)) .rt-ready { flex: none; min-height: min-content; }