/* dash.css — the Dashboard page (dash.html). Colours are app.css tokens so
 * every theme works; the two below are the only additions. */
:root {
    /* "Better than target" must read green even where --accent is red (Monza, Fuji). */
    --dx-good: #4ade80;
    --dx-best: #c084fc;   /* session-best lap, the timing-screen purple */
    --dx-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
[data-theme="daylight"] { --dx-good: var(--accent); --dx-best: #7a2fc0; }

/* One screen, never scrolls: the bar, then the grid fills the rest (100dvh).
 * The dashboard is the first tab of live.html: html[data-view="dash"] (js/race-tabs.js) shows it
 * and hides the other tabs' DOM (which stays in the page, so live.js keeps running), except the
 * banners that matter, the one bar and the connection popover. */
html[data-view="dash"], html[data-view="dash"] body { height: 100%; overflow: hidden; }
html[data-view="dash"] body { background: var(--bg); color: var(--text); margin: 0; padding: 0; display: flex; flex-direction: column; height: calc(100dvh / var(--z, 1)); }
html[data-view="dash"].in-frame body { background: transparent; }
html[data-view="dash"] .live-shell { flex: none; height: auto; }
html[data-view="dash"] .live-shell > :not(.companion-banner, .demo-banner, .live-posters, .dx-bar, .dx-tv-exit, .live-ready:not(.is-inline)) { display: none !important; }
/* Per-tab controls in the one bar: presets and Edit layout on the Dashboard; Debrief on the others. */
html:not([data-view="dash"]) .dx-dash-only { display: none !important; }
html:not([data-view="dash"]) .dx-view { display: none; }
.dx-view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* Auto-fit (dash.js dashZoom): the bar and the grid scale with the window, so big screens need no browser zoom. */
/* The other tabs (Timing, Schedule, Tires...) scale by the same factor, so the whole Race view grows as one. */
.dx-bar, .dx, html:not([data-view="dash"]) .live-scroll, .live-shell > :is(.companion-banner, .demo-banner, .live-posters) { zoom: var(--dx-z, 1); }
.dx-size { width: 100%; } .dx-size button { flex: 1 1 0; }
html.in-frame .dx-brand, html.in-frame .dx-site, html.in-frame .dx-room, html.in-frame .dx-tools .theme-picker, html.in-frame .dx-tools .eh-wrap { display: none; }   /* the planner header has these */
/* Registered tiles (DASH-TILES-API.md): the body fills the tile under its heading */
.dt-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.dx button, .dx-bar button { margin: 0; min-height: 0; }

/* ---- top bar ---- */
.dx-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 4px 12px; min-height: 40px; box-sizing: border-box; flex: none; background: var(--panel); border-bottom: 1px solid var(--line);
}
.dx-sum { flex: 1 1 0; font: 600 13px var(--dx-mono); color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-fitnote { font-size: var(--fs-micro); color: var(--text-3); white-space: nowrap; background: none; border: 0; padding: 0; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.dx-fitnote[hidden] { display: none; }
.dx-fitpop { margin: 48px 12px auto auto; width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh / var(--z, 1) - 64px); overflow-y: auto; box-sizing: border-box; padding: 10px 12px; background: var(--panel); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--radius); }
.dx-fitpop ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.dx-fitpop li { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-small); color: var(--text-2); }
.dx-fitpop li .dx-btn { height: auto; min-height: 28px; padding: 4px 10px; text-align: left; }
.dx-brand { color: var(--text); text-decoration: none; font-weight: 800; letter-spacing: .04em; line-height: 1.1; }
.dx-brand { font-size: 13px; }
.dx-brand small { display: block; color: var(--text-3); font-weight: 500; font-size: var(--fs-micro); letter-spacing: 0; }
.dx-room { font-family: var(--dx-mono); color: var(--accent); font-weight: 700; }
.dx-conn { font-size: var(--fs-small); color: var(--text-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-conn::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--text-4); vertical-align: 1px; }
.dx-conn[data-state="live"]::before { background: var(--dx-good); }
.dx-conn[data-state="stale"]::before { background: var(--warn); }
.dx-conn[data-state="off"]::before { background: var(--crit); }
.dx-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dx-tools .live-conn { max-width: 26ch; }

/* Section tabs: a compact segmented control in the bar (js/race-tabs.js). */
.race-tabs { display: flex; align-items: center; gap: 2px; min-width: 0; padding: 2px; overflow-x: auto; scrollbar-width: none;
    background: var(--v2-inset, var(--panel-2)); border: 1px solid var(--v2-line, var(--line)); border-radius: var(--v2-r-md, 8px); }
.race-tabs::-webkit-scrollbar { display: none; }
.race-tabs .subtab { flex: 0 0 auto; height: 28px; padding: 0 11px; font-size: 13px; line-height: 1; white-space: nowrap; cursor: pointer;
    background: none; border: 0; border-radius: var(--v2-r-sm, 6px); color: var(--text-2); box-shadow: none; }
.race-tabs .subtab:hover { color: var(--text-hi, var(--text)); background: var(--v2-hover, var(--surface-1)); }
.race-tabs .subtab.active { color: var(--text-hi, var(--text)); background: var(--v2-overlay, var(--surface-2)); box-shadow: inset 0 -2px 0 var(--accent); }
.race-tabs .subtab.has-badge::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--crit); vertical-align: 1px; }
.race-tabs .subtab:focus-visible { outline: none; box-shadow: var(--v2-focus, var(--ring)); }
/* Keep the bar to one row as long as it can: the brand goes first, then everything tightens. */
@media (max-width: 1800px) {
    .dx-bar .dx-brand { display: none; }
    .dx-bar { gap: 8px; }
    .dx-tools { gap: 4px; }
    .race-tabs .subtab { padding: 0 8px; }
    .dx-bar .dx-btn, .dx-bar .dx-seg button { padding: 0 7px; }
    .dx-bar .dx-seg button { font-size: 11px; }
    /* The pill keeps its colored dot; the words stay for screen readers and in the checklist it opens. */
    .dx-tools .live-conn { min-width: 0; padding: 3px 8px; }
    .dx-tools .live-conn .lc-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* One row on a desktop: the tabs and the summary give way (the tabs scroll) before anything wraps. */
@media (min-width: 1340px) { .dx-bar, .dx-tools { flex-wrap: nowrap; } .dx-tools > * { flex: none; } }
@media (min-width: 1801px) { .race-tabs { flex-shrink: 0; } }
/* In the planner (in-frame) the bar has fewer controls: one row from 1200px. */
@media (min-width: 1200px) { html.in-frame .dx-bar, html.in-frame .dx-tools { flex-wrap: nowrap; } html.in-frame .dx-tools > * { flex: none; } }
@media (max-width: 1450px) {
    .race-tabs .subtab { padding: 0 7px; }
    .dx-bar { gap: 6px; padding-left: 8px; padding-right: 8px; }
    .dx-bar .dx-fitnote { flex: none; }
    .dx-bar .help-q, .dx-bar .theme-caret { display: none; }   /* the pill still opens its checklist; the guide has the help */
    .dx-tools .live-conn { padding: 3px 5px; }
    .dx-bar .dx-seg button { padding: 0 6px; }
}
/* Other tabs: the bar stays put and the tab's content scrolls under it. */
html:not([data-view="dash"]) .live-scroll { padding-top: 12px; }
.dx-btn, .dx-seg button {
    height: 28px; padding: 0 10px; font-size: 12px; border-radius: 7px;
    background: var(--surface-1); border: 1px solid var(--line-2); color: var(--text-2);
}
a.dx-btn { display: inline-flex; align-items: center; box-sizing: border-box; text-decoration: none; }
.dx-seg { display: inline-flex; }
.dx-seg button { border-radius: 0; }
.dx-seg button:first-child { border-radius: 8px 0 0 8px; }
.dx-seg button:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
.dx-seg button + button { margin-left: -1px; }   /* three-way segs (Timing: My class / All / Provisional) */
.dx-seg button[aria-pressed="true"], .dx-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 700; }
.dx-seg-sm button { height: 24px; padding: 0 8px; font-size: 11px; }

/* TV mode: no chrome, a quiet exit button in the corner */
.dx-tv-exit { display: none; }
html.tv .dx-bar { display: none; }
html.tv .dx-tv-exit {
    display: block; position: fixed; right: 10px; top: 4px; z-index: 5; opacity: .15;
    height: 24px; min-height: 0; margin: 0; padding: 0 10px; font-size: 12px;
    background: var(--panel); border: 1px solid var(--line); color: var(--text-3); border-radius: 6px;
}
html.tv .dx-tv-exit:hover, html.tv .dx-tv-exit:focus-visible { opacity: 1; }
html.tv .dx-hint { display: none; }
html.tv .dx { padding-top: 32px; }   /* a strip for Exit TV, so it never covers the top-right tile's sub-line */

/* ---- shared ---- */
.dx { padding: 8px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; box-sizing: border-box; }
.dx > * { flex: none; }
.dx.is-stale .dx-grid { opacity: .45; filter: grayscale(.6); }
.dx-offline { margin: 0 0 6px; padding: 4px 12px; font-size: 13px; border-radius: var(--radius); border: 1px solid var(--warn); background: var(--warn-dim); color: var(--warn); font-weight: 600; }
.dc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; min-width: 0; display: flex; flex-direction: column; }
.dc > * { flex: none; }
/* Registered tiles (DashTiles) fill their tile; without this the body sized to its content and fitGrid hid tiles it didn't need to. */
.dc > .dt-body { flex: 1 1 auto; min-height: 0; }
.dh, .dh-t { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 0 0 6px; }
.dh { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dh-t { margin: 0; }
.dh .sub { font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--text-4); }
.lbl, .eh-cell span { font-size: 10px; color: var(--text-3); letter-spacing: .08em; text-transform: uppercase; }
.num, .eh-cell b { font-family: var(--dx-mono); font-variant-numeric: tabular-nums; }
.dx-empty { color: var(--text-3); font-size: var(--fs-small); margin: 4px 0; }
.dx-hint { color: var(--text-4); font-size: var(--fs-micro); margin: 8px 0 0; }
.bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 3px; }
.bg-accent { background: var(--accent); } .bg-info { background: var(--info); } .bg-good { background: var(--dx-good); }
.bg-crit { background: var(--crit); } .bg-warn { background: var(--warn); } .bg-muted { background: var(--text-4); }
.c-good { color: var(--dx-good); } .c-bad { color: var(--crit); } .c-warn { color: var(--warn); } .c-best { color: var(--dx-best); } .c-dim { color: var(--text-4); }


/* ===== TILE GRID: dash.js sets each tile's order, data-size, is-off and is-held (standIns: hidden tiles keep the grid still) ===== */
.dx-grid { display: grid; gap: 8px; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); grid-auto-flow: row dense; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.dx-grid > [data-tile] { min-height: 0; overflow: hidden; container-type: size; box-sizing: border-box; }
.dx-grid > [data-tile="map"]:is([data-size="l"], [data-size="xl"]), .dx-grid > [data-tile="timing"]:is([data-size="l"], [data-size="xl"]) { grid-row: span 2; }
.dx-grid > [data-size="s"] { grid-column: span 3; }
.dx-grid > [data-size="m"] { grid-column: span 4; }
.dx-grid > [data-size="l"] { grid-column: span 6; }
.dx-grid > [data-size="xl"] { grid-column: span 12; }
.dx-grid > .is-off, html:not(.dx-editing) .dx-grid > .is-fit { display: none; }
/* Hidden for now (handover not due, brake failure Off): keeps its cell so nothing reflows; is-held hands it to a stand-in. */
html:not(.dx-editing) .dx-grid > :is(.is-idle, .is-brake-off) { visibility: hidden; }
.dx-grid > .is-held { display: none; }
.tile-ctl { display: none; }
html.dx-editing .dx-grid { overflow-y: auto; grid-auto-rows: minmax(150px, auto); }   /* editing: every chosen tile, scrolling inside the grid */
html.dx-editing .dx-grid > [data-tile] { outline: 2px dashed var(--line-2); outline-offset: -2px; cursor: grab; }
html.dx-editing .dx-grid > [data-tile]:focus-within { outline: 2px solid var(--accent); }
html.dx-editing .dx-grid > [data-tile].is-dragging { opacity: .5; }
.dx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.dx-editing .tile-ctl { display: flex; flex: none; width: 100%; align-items: center; gap: 4px; margin: -4px 0 8px; flex-wrap: wrap; }
.tile-ctl .tile-nm { flex: 1 1 auto; font-size: var(--fs-micro); font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; }
.tile-ctl button { height: 28px; min-width: 32px; padding: 0 8px; font-size: 12px; border-radius: 6px; background: var(--surface-1); border: 1px solid var(--line-2); color: var(--text-2); }
.dx-tray { margin: 0 0 6px; padding: 6px 10px; max-height: 30dvh; overflow-y: auto; border: 1px dashed var(--accent); border-radius: var(--radius); background: var(--panel); }
.dx-tray-h { margin: 0 0 8px; color: var(--text-2); font-size: var(--fs-small); }
.dx-tray-list, .dx-tray-act { display: flex; gap: 6px; flex-wrap: wrap; }
.dx-tray-act { margin-top: 10px; justify-content: flex-end; }

/* critical alerts and the pit message: the two things that must be seen */
.dx { position: relative; }
.dx > .dx-crit { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 5; margin: 0; box-shadow: 0 4px 16px rgba(0, 0, 0, .45); }   /* floats over the grid: an alert never moves the tiles */
html.design-old .dx > .dx-crit { background: linear-gradient(var(--crit-dim), var(--crit-dim)), var(--panel); }
.dx-crit { margin: 0 0 6px; padding: 0 12px; height: 38px; line-height: 34px; box-sizing: border-box; border-radius: 8px; border: 2px solid var(--crit); background: var(--crit-dim); color: var(--crit); font-weight: 800; font-size: 17px; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-crit div { display: inline; }
.dx-crit div + div::before { content: ' · '; }
.dx-pitmsg { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 6px; padding: 6px 12px; border-radius: var(--radius); border: 2px solid var(--info); background: var(--panel); }
.dx-pitmsg b { flex: 1 1 200px; font-size: clamp(20px, 3.5vw, 44px); line-height: 1.05; color: var(--info); overflow-wrap: anywhere; }
.dx-pitmsg .lbl { flex-basis: 100%; }
.dx-pitmsg .dx-btn { height: 36px; font-size: 15px; padding: 0 16px; }
.dx-crit[hidden], .dx-pitmsg[hidden], .dx-tray[hidden] { display: none; }

/* ===== GLANCEABLE TILES ===== */
.dv-tile {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 6px 12px; min-width: 0; display: flex; flex-direction: column; justify-content: center;
}
.dv-tile > span { font-size: 11px; color: var(--text-3); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.dv-tile > b { font-family: var(--dx-mono); font-variant-numeric: tabular-nums; font-size: clamp(18px, min(34cqh, 13cqw), 56px); line-height: 1.05; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-tile > small { color: var(--text-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-preset="driver"] .dv-tile > b { font-size: max(18px, min(44cqh, 18cqw)); }
html[data-preset="driver"] .dv-tile > small { font-size: clamp(12px, 9cqh, 20px); }

.dv-next.is-soon { border-color: var(--warn); }

/* ---- the headline call (dash.js renderHead): action first, one fact, the next stop, a warning when something is off ---- */
.ch { justify-content: flex-start; }
.ch .do-now { font-size: clamp(22px, min(22cqh, 5cqw), 40px); }
.ch .do-why { margin: 0; }
html[data-preset="driver"] .ch .do-now { font-size: clamp(28px, min(20cqh, 5cqw), 76px); }
html[data-preset="driver"] .ch .do-why, html[data-preset="driver"] .ch-next, html[data-preset="driver"] .ch-warn { font-size: clamp(14px, min(6cqh, 2.6cqw), 26px); }
.ch-next { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--text); }
.ch-warn { margin: 6px 0 0; padding: 4px 10px; border-radius: var(--v2-r-sm, 6px); font-size: 14px; font-weight: 600; color: var(--warn); background: var(--warn-dim); }
/* Layout lock: text never grows a tile (dash.js fits the grid to the screen, not the words). Long lines clip
   here, the whole text is in title=; lists and the plan scroll inside their tile. */
.ch .do-now, .ch .do-why, .ch-warn, .ty-temp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ch-next, .te-lim, .eh-driver .eh-aids, h2.dh .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
h2.dh { flex-wrap: nowrap; }
.ch.is-box { border-color: var(--crit); background: var(--crit-dim); }   /* the flash: .is-box in app.css */
.ch.is-box .do-now.is-urgent { color: var(--text); }   /* red on the red tint fails contrast */
.ch.is-warn { border-color: var(--warn); }
.ch.is-warn .do-now { color: var(--warn); }
.ch.is-stale .do-now { color: var(--text-4); }   /* no live data: the last call, greyed */
.ch details.explain { margin-top: auto; }
.ch details.explain[open] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ch details.explain[open] > .explain-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.ch .explain-body p { margin: 0 0 6px; }
.ch .explain-body .ch-h { margin-top: 10px; font-weight: 700; color: var(--text); }
.ch .explain-body .pl-grid { margin: 0 0 8px; }
.ch .al-log { margin: 8px 0 0; }
.ch .al-log:empty { display: none; }
.dx-grid > .ch:has(details.explain[open]) { grid-row: span 2; }   /* open: the reasons get room; fitGrid drops panels below if needed */
/* Before the start: the countdown card (and the connection checklist) only. */
html.dx-pre:not(.dx-editing) .dx-grid > [data-tile]:not([data-tile="callHead"]):not([data-tile="rtReady"]) { display: none; }
/* Raw telemetry for bug reports (?debug) */
.dx-debug { flex: none; max-height: 40vh; overflow: auto; }
.dx-debug pre { margin: 0; font-size: 11px; white-space: pre-wrap; }
/* The bar's More menu: Edit layout, Second screen, TV mode, Debrief after the flag, theme */
.dx-more { margin-left: 0; }
.dx-more > summary { height: 28px; box-sizing: border-box; display: inline-flex; align-items: center; padding: 0 10px; font-size: 12px; }
.dx-more .more-menu-list { position: fixed; left: auto; min-width: 200px; }   /* top / right: dash.js, under the button */
.dx-more .more-menu-list > .dx-btn { width: 100%; justify-content: flex-start; text-align: left; }
.dx-more .more-menu-list > .dx-btn[hidden], .dx-more .dx-fitnote[hidden] { display: none; }
.dx-more .theme-picker { padding-top: 4px; border-top: 1px solid var(--line); margin-top: 2px; }
.dx-bar .dx-more .theme-picker .theme-name, .dx-bar .dx-more .theme-caret { display: inline; }   /* in the menu there is room for the name */

/* ===== CARDS ===== */
.ev-head { display: flex; flex-direction: row; align-items: center; gap: 22px; flex-wrap: wrap; }
.eh-driver b { display: block; color: var(--accent); font-size: 18px; line-height: 1.1; }
.eh-driver small { color: var(--text-3); }
.eh-driver .eh-aids { display: block; color: var(--accent); }
.eh-cell b { display: block; font-size: 20px; }
.eh-clock { margin-left: auto; text-align: right; }
.eh-clock b { font-size: 24px; }

.en-row { display: grid; grid-template-columns: 34px minmax(40px, 1fr) auto; gap: 8px; align-items: center; margin: 3px 0; }
.en-row span { color: var(--text-3); font-size: var(--fs-small); }
.en-row b { font: 700 13px var(--dx-mono); text-align: right; }
.en-row .bar { height: 10px; }

.kv { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: 13px; }
.kv span { color: var(--text-3); } .kv b { font-family: var(--dx-mono); font-weight: 600; text-align: right; }

/* plan card */
.pl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pl-grid div { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px 6px; min-width: 0; }
.pl-grid > div > span { display: block; font-size: 10px; color: var(--text-3); letter-spacing: .08em; text-transform: uppercase; }
.pl-grid b { display: block; font: 700 14px var(--dx-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-grid small { display: block; font: 11px var(--dx-mono); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.pl-head b { font-size: 15px; color: var(--accent); }
.pl-head span { color: var(--text-3); font-size: var(--fs-small); }

/* tyres */
.dx-tyres { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ty-temp { margin: 4px 0 0; font-size: 12px; line-height: 1.3; color: var(--text-3); overflow-wrap: anywhere; }
.ty-temp:empty { display: none; }
/* Fuel and VE under the corners: one line each, the limiting one bright, full text in the hover. */
.ty-en { margin-top: 4px; }
.ty-en:empty { display: none; }
.te-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; align-items: baseline; font-size: 12px; line-height: 1.35; }
.te-row span { color: var(--text-3); }
.te-row b { font: 600 12px var(--dx-mono); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.te-row.is-lim b { color: var(--text); font-weight: 800; }
.te-lim { margin: 1px 0 0; font-size: 12px; font-weight: 700; }
@container (max-height: 180px) { .te-lim { display: none; } }   /* short tile: the bright row already says which runs out first */
.ty-temp .tt-verdict { color: var(--text); }
@container (max-height: 300px) { .ty .t-h { margin-bottom: 0; } }
.ty { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px 6px; min-width: 0; }
/* Corner flash: red = overheating or life < 15%, yellow = life < 30%. Reduced motion: static ring. */
.ty.fl-red { animation: tyFlR 1s steps(2, jump-none) infinite; } .ty.fl-yellow { animation: tyFlY 1.4s steps(2, jump-none) infinite; }
@keyframes tyFlR { 0% { box-shadow: inset 0 0 0 3px var(--crit); background: color-mix(in srgb, var(--crit) 18%, transparent); } 100% { box-shadow: none; } }
@keyframes tyFlY { 0% { box-shadow: inset 0 0 0 3px var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); } 100% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .ty.fl-red, .ty.fl-yellow { animation: none; } .ty.fl-red { box-shadow: inset 0 0 0 3px var(--crit); } .ty.fl-yellow { box-shadow: inset 0 0 0 3px var(--warn); } }
.ty .t-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; gap: 6px; }
.ty .t-h b { font-size: 13px; letter-spacing: .06em; }
.ty .t-h span { font: 600 12px var(--dx-mono); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ty .t-big { font: 800 18px var(--dx-mono); line-height: 1.1; }
.ty .t-big small { font-size: 13px; color: var(--text-3); font-weight: 600; }

/* lap */

/* weather */

/* timing tower */
.tw-h { align-items: center; }
#hoBody, #planBody { min-height: 0; overflow-y: auto; flex: 1 1 0; }
.tw { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.tw-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 54px 64px 34px 52px; gap: 6px; align-items: center; min-height: 22px; font-size: 12px; padding: 0 4px; border-radius: 5px; }
.tw-row.tw-head { min-height: 18px; font-size: 10px; color: var(--text-3); letter-spacing: .06em; text-transform: uppercase; }
.tw-row:nth-child(even) { background: var(--panel-2); }
.tw-row.tw-me { background: rgba(var(--accent-rgb), .16); box-shadow: inset 3px 0 0 var(--accent); }
.tw-row.tw-me .tw-name { color: var(--accent); font-weight: 700; }
.tw-r { font-family: var(--dx-mono); text-align: right; white-space: nowrap; }
.tw-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.tw-name small { color: var(--text-4); margin-left: 4px; }
html.race-adv .tw-row { grid-template-columns: 24px minmax(0, 1fr) 54px 58px repeat(3, 64px) 38px 30px; }   /* Advanced: 9 columns (dash.js renderTower) */
.tw-in { color: var(--ink); background: var(--warn); border-radius: 3px; font-weight: 800; font-size: 9px; padding: 1px 3px; }

/* short rows (laptops, 720p): tighter cards so fitGrid can keep more of them on screen */
@container (max-height: 210px) {
    .dh { margin-bottom: 3px; }

    .pl-grid div { padding: 1px 6px; }

    .en-row { margin: 1px 0; }

    .ty .t-big { font-size: 15px; }
    .ty .t-h { margin-bottom: 0; }

    .pl-head { margin-bottom: 2px; }
    .ho-wx, .ho-note { margin-top: 4px; }

}
@container (max-height: 210px) and (min-width: 300px) {   /* life % beside the I·M·O zones */
    .ty { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; }
    .ty > .t-h { grid-column: 1 / -1; }
}
@container (max-width: 559px) and (max-height: 240px) { #planCard .pl-grid small { display: none; } }   /* the value's color already says vs target */

/* ---- responsive: sizes collapse so nothing gets narrower than it can read ---- */
@media (max-width: 1250px) {
    .dx-grid > [data-size="m"] { grid-column: span 6; }
    .dx-grid > [data-size="l"] { grid-column: span 12; }
}
@media (min-width: 761px) and (max-width: 1250px) {   /* responsive: race — a 3-column tile is ~180px here, too narrow for 3 KPI cells */
    .dx-grid > [data-size="s"] { grid-column: span 4; }
}
@media (max-width: 760px) {
    .dx { padding: 6px 16px 8px; }
    .dx-sum { display: none; }   /* the Header tile and the ticker carry it on a phone */
    /* Tabs share the first row with the brand and scroll sideways, faded at the edge like the tools. */
    .race-tabs { flex: 1 1 0; padding-right: 24px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
    .race-tabs .subtab { min-height: 32px; }
    .dx-bar .dx-fitnote { order: 10; flex-basis: 100%; }   /* its own line under the tools: the tabs keep the first row */
    .dx-bar { gap: 8px; padding: 4px 16px; }
    .dx-fitnote { white-space: normal; }   /* wraps to its own line instead of running off the edge */
    .dx-tools { margin-left: 0; width: 100%; }
    /* v2 tools scroll sideways on a phone (v2.css): fade the right edge so a cut button reads as "more", and pad the end so the last one scrolls clear of the fade. */
    /* flex-end on a scroller puts the first buttons at a negative x that can't be scrolled to: start left, push right with an auto margin (0 once it overflows). */
    html:not(.design-old) .dx-tools { justify-content: flex-start; }
    html:not(.design-old) .dx-tools > :first-child { margin-left: auto; }
    html:not(.design-old) .dx-tools { padding-right: 24px; box-sizing: border-box;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
    .dx-grid > [data-size] { grid-column: span 12; }
    .dx-grid > [data-size="s"] { grid-column: span 6; }
    html:not(.dx-editing) .dx-grid > :is(.is-idle, .is-brake-off) { display: none; }   /* the scrolling list just closes up */
    /* Phone: every chosen panel at its own height, and the grid scrolls (dash.js fitGrid skips fitting here). */
    html:not(.dx-editing) .dx-grid { overflow-y: auto; grid-auto-rows: max-content; }
    html:not(.dx-editing) .dx-grid > [data-tile] { container-type: inline-size; grid-row: auto !important; }
    html:not(.dx-editing) .dx-grid :is(.tw, #hoBody, #planBody) { flex: none; max-height: 60svh; }
    html:not(.dx-editing) .dx-grid .mp-wrap { flex: none; height: 240px; }
    html:not(.dx-editing) .dx-grid .rt-wx .wx-chart { flex: none; height: 160px; }
    .dx-grid .rt-brakes { display: block; overflow-x: auto; min-width: 0; }   /* four corner columns: scroll inside the panel, not the page */
    html:not(.dx-editing) .ch .do-now { font-size: clamp(24px, 7.5cqw, 40px); }   /* the call stays the biggest thing on a phone */

    .ev-head { gap: 14px; }
}
@media (max-width: 420px) {
    .dv-tile { padding: 10px 12px; }
    .tw-row { grid-template-columns: 22px minmax(0, 1fr) 50px 58px 40px; }
    .tw-row > :nth-child(5) { display: none; }
    html.race-adv .tw-row { grid-template-columns: 22px minmax(0, 1fr) 50px 58px 36px 28px; }
    html.race-adv .tw-row > :nth-child(n+4):nth-child(-n+6) { display: none; }   /* phone: Leader, Last and Best stay in the wide view */
    .tw-name small { display: none; }

}
.eh-msg { flex: 1 1 260px; min-width: 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; }
.eh-msg b { display: block; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eh-msg[hidden] { display: none; }

/* alerts tile: advisory quiet, info as a small log */
.al-adv { margin: 0; padding-left: 18px; color: var(--text-2); font-size: var(--fs-small); }
.al-adv li + li { margin-top: 3px; }
.al-adv { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.al-log, .rd-log { list-style: none; margin: 6px 0 0; padding: 4px 0 0; border-top: 1px solid var(--line); font-size: var(--fs-micro); color: var(--text-3); flex: 1 1 0; min-height: 0; overflow-y: auto; }
.al-log:empty, .rd-log:empty { display: none; }
.al-log time, .rd-log time { font-family: var(--dx-mono); color: var(--text-4); margin-right: 4px; }

/* message driver */
.rd-quick { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.rd-form { display: flex; gap: 6px; }
.rd-form input { flex: 1 1 auto; min-width: 0; height: 28px; margin: 0; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-1); color: var(--text); font-size: 14px; }
.rd-log { font-size: var(--fs-small); color: var(--text-2); }

/* handover */
.ho { border-color: var(--warn); }
@container (min-width: 560px) { .ho .pl-grid, #planCard .pl-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@container (min-width: 900px) { .ho .pl-grid b { font-size: 17px; } }
.ho-wx, .ho-note { margin: 8px 0 0; font-size: var(--fs-small); color: var(--text-2); }
.ho-note { padding: 6px 10px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); }

/* track map: the canvas fills its tile; Expand pins it over the page */
.mp-h { align-items: center; }
.mp-h .dh-t .sub { margin-left: 6px; }
.mp-x { height: 24px !important; padding: 0 8px !important; font-size: 11px !important; }
.mp-wrap { position: relative; flex: 1 1 0; min-height: 0; }
.mp-can { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mp-msg { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: 0; padding: 0 12px; text-align: center; color: var(--text-3); font-size: var(--fs-small); pointer-events: none; }
.mp-msg[hidden] { display: none; }

/* Tire temps: tinted, not just underlined, so blue / green / yellow / red read at a glance. */

/* Readable floor: the small labels go no lower than 12px (auto-fit only scales up from here). */
.dx-grid :is(.dh, .dh-t, .lbl, .help-q, .dv-tile > span, .en-row span, .pl-head span, .pl-grid > div > span, .pl-grid small, .tw-row.tw-head,
    .tw-name small, .tw-in, .al-log, .al-adv, .rd-log, .ho-wx, .ho-note, .rt-pill, .rt-wet, .dx-hint, .dx-seg-sm button, details.explain > summary) { font-size: 12px; }
.dx-grid .mp-x { font-size: 12px !important; }
/* The same 12px floor on the other tabs (Timing, Schedule, Tires...): the size tokens, then the fixed-px labels. */
html:not([data-view="dash"]) .live-scroll { --fs-micro: 12px; --fs-small: 12px; --v2-fs-xs: 12px; }
html:not([data-view="dash"]) .live-scroll :is(.tm-driver small, .tm-stint small, .tm-make, .tm-rating i, .tm-tag, .tm-pitb, .tm-dot, .tm-chip,
    .lt-corner .lt-c, .pe-head, .status-pill, .stint-type-chip, .v2-pill, details.explain > summary) { font-size: 12px; }