/*
 * Session telemetry workspace styles (TelemetryWorkspace / TelemetryTrackMap / TelemetryChannelChart).
 * Shipped as a linked static stylesheet (this app links _content/Telemetry.SharedComponents/*.css and does not
 * include the per-component scoped-CSS bundle), using unique tel-* class names so no scoping is required.
 */

/* ── Workspace layout ─────────────────────────────────────────────────────── */
.tel-ws {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    width: 100%;
    max-width: 100%;
}

.tel-ws__map {
    position: sticky;
    top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tel-ws__axis-note {
    font-size: 0.68rem;
    color: var(--ghostai-text-muted, #8b95a7);
    text-align: right;
    padding-right: 4px;
}

.tel-ws__charts {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--ghostai-border, #26304a);
    border-radius: 10px;
    overflow: hidden;
    background: var(--ghostai-surface, #131a2b);
}

.tel-ws--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 200px;
    padding: 24px;
    border: 1px dashed var(--ghostai-border, #26304a);
    border-radius: 10px;
    background: var(--ghostai-surface, #131a2b);
}

.tel-ws__empty-title {
    font-weight: 600;
    color: var(--ghostai-text, #e6ebf5);
}

.tel-ws__empty-msg {
    font-size: 0.82rem;
    color: var(--ghostai-text-muted, #8b95a7);
}

/* ── Track map ────────────────────────────────────────────────────────────── */
.tel-map {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--ghostai-surface, #131a2b);
    border-radius: 10px;
    border: 1px solid var(--ghostai-border, #26304a);
}

.tel-map__svg {
    width: 100%;
    height: auto;
    display: block;
    background: var(--ghostai-bg, #0b1020);
    border-radius: 8px;
}

.tel-map__unavailable {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    font-style: italic;
    color: var(--ghostai-text-muted, #8b95a7);
}

.tel-map__path {
    fill: none;
    stroke: var(--ghostai-text-muted, #8b95a7);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    opacity: 0.85;
}

.tel-map__startfinish {
    fill: none;
    stroke: var(--ghostai-text, #e6ebf5);
    stroke-width: 2;
}

.tel-map__dir {
    fill: var(--ghostai-text-muted, #8b95a7);
}

.tel-map__cursor-halo {
    fill: var(--ghostai-primary, #6d5dfc);
    opacity: 0.25;
}

.tel-map__cursor {
    fill: var(--ghostai-series-driver);
    stroke: var(--ghostai-bg, #0b1020);
    stroke-width: 1.5;
}

.tel-map__cursor--pinned {
    stroke-width: 2;
}

.tel-map__cursor-halo--pinned {
    opacity: 0.4;
}

.tel-map__details {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 2px 4px;
    min-height: 20px;
}

.tel-map__stat {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.tel-map__stat-k {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ghostai-text-muted, #8b95a7);
}

.tel-map__stat-v {
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    color: var(--ghostai-text, #e6ebf5);
}

.tel-map__hint {
    font-size: 0.74rem;
    font-style: italic;
    color: var(--ghostai-text-muted, #8b95a7);
}

/* ── Channel charts ───────────────────────────────────────────────────────── */
.tel-chart {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px 8px;
    border-bottom: 1px solid var(--ghostai-border, #26304a);
    background: var(--ghostai-surface, #131a2b);
}

.tel-chart:last-child {
    border-bottom: none;
}

.tel-chart__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-height: 18px;
}

.tel-chart__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ghostai-text, #e6ebf5);
    text-transform: uppercase;
}

.tel-chart__readout {
    font-family: var(--ghostai-font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    color: var(--ghostai-accent, #00d4ff);
}

.tel-chart__badge {
    font-size: 0.66rem;
    color: var(--ghostai-text-muted, #8b95a7);
    border: 1px solid var(--ghostai-border, #26304a);
    border-radius: 999px;
    padding: 0 6px;
}

.tel-chart__unavailable {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 4px 6px;
    font-size: 0.74rem;
    font-style: italic;
    color: var(--ghostai-text-muted, #8b95a7);
    background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(139, 149, 167, 0.06) 6px, rgba(139, 149, 167, 0.06) 12px);
    border-radius: 6px;
}

.tel-chart__svg {
    width: 100%;
    height: 96px;
    display: block;
}

.tel-chart__axis {
    stroke: var(--ghostai-border, #26304a);
    stroke-width: 1;
}

.tel-chart__ytick {
    fill: var(--ghostai-text-muted, #8b95a7);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.tel-chart__trace {
    fill: none;
    stroke: var(--ghostai-series-driver);
    stroke-width: 1.4;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.tel-chart__cursor {
    stroke: var(--ghostai-primary, #6d5dfc);
    stroke-width: 1;
    stroke-dasharray: 3 2;
}

/* A pinned selection reads as a solid committed line; a hover preview stays dashed.

   The two used to differ by half a pixel of stroke and a dash pattern — a distinction that holds up under comparison
   and disappears under a glance. A pin is a MODE (the pointer no longer moves the selection), so it has to be
   readable without one: weight, dash, and a pin head the preview does not draw at all. */
.tel-chart__cursor--pinned {
    stroke-width: 2;
    stroke-dasharray: none;
}

.tel-chart__cursor-dot {
    fill: var(--ghostai-primary, #6d5dfc);
}

.tel-chart__cursor-dot--pinned {
    fill: var(--ghostai-accent, #00d4ff);
}

/* The pin head: drawn only while pinned, in the top pad where no data goes. Its width comes from
   SessionTelemetryPlot.PinHeadHalfWidth — the same constant the workspace releases the pin on, so what looks
   clickable and what is clickable stay one number. */
.tel-chart__cursor-pin {
    fill: var(--ghostai-accent, #00d4ff);
    stroke: var(--ghostai-bg, #0b1020);
    stroke-width: 0.5;
}

/* The driver's own corner markers (#1407 Wave 2). Quieter than the cursor on purpose: the cursor is what the
   driver is actively moving, a marker is standing annotation, and an annotation that competes with the pointer
   makes the chart harder to read rather than richer. Long dashes distinguish a marker from the cursor's short
   ones at a glance, without needing colour to carry the difference. */
.tel-chart__marker-line {
    stroke: var(--ghostai-text-muted, #8b94a7);
    stroke-width: 1;
    stroke-dasharray: 6 3;
    opacity: 0.55;
}

.tel-chart__marker-dot {
    fill: var(--ghostai-text-muted, #8b94a7);
    opacity: 0.8;
}

/* Hovering one brings it forward — the <title> tooltip is the only place the marker key, corner and confidence
   are readable, so the thing being inspected should not stay washed out while it is inspected. */
.tel-chart__marker:hover .tel-chart__marker-line,
.tel-chart__marker:hover .tel-chart__marker-dot {
    opacity: 1;
}

/* ── Frame scrub toolbar ─────────────────────────────────────────────────── */
.tel-ws__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.tel-ws__charts {
    cursor: crosshair;
}

/* While a pin holds, the pointer says so where the hand is: a crosshair means "your movement picks the frame", and
   that stops being true the moment something is pinned. */
.tel-ws__charts.is-pinned {
    cursor: pointer;
}

/* Sticky, and that is the point of it (T79-05). This bar is the only way out of a pin, and it sat at the top of a
   column whose charts run to several thousand pixels — measured at 8,595 px above the bottom trace on a real lap. A
   driver reading that trace had to scroll back up past every chart to reach Unpin, which is indistinguishable from
   there being no Unpin. Sticking it to the top of the viewport keeps document and tab order exactly as they read
   while putting it beside whatever chart is actually on screen.

   Opaque background, because charts scroll underneath it: a see-through toolbar over a moving trace is unreadable
   exactly when it is being read. The charts below carry `scroll-margin-top` so anything scrolled to by keyboard
   lands below this bar rather than behind it. */
.tel-ws__scrubbar {
    position: sticky;
    top: var(--ghostai-bench-sticky-top, 0px);
    z-index: 6;
    display: flex;
    align-items: center;
    /* Wraps rather than overflowing: at 390 px the readout and both exits do not fit on one line, and a bar that
       scrolls sideways hides the exit as effectively as a bar 8,595 px away. */
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 10px;
    background: var(--ghostai-surface, #151a2e);
    border: 1px solid var(--ghostai-border, #262c44);
    border-radius: 8px;
    font-size: 12px;
}

.tel-ws__charts > * {
    scroll-margin-top: calc(var(--ghostai-bench-sticky-top, 0px) + 4rem);
}

/* Pinned restyles the WHOLE bar, not one word inside it. The complaint was never that the word was wrong — it was
   that nobody read it. A tinted border and an accent rail on the leading edge make the mode visible peripherally,
   which is the only way a driver who did not mean to pin ever notices they have. */
.tel-ws__scrubbar.is-pinned {
    border-color: var(--ghostai-accent, #00d4ff);
    box-shadow: inset 3px 0 0 0 var(--ghostai-accent, #00d4ff);
}

/* 44 CSS px in both directions, at every zoom and on every one of these buttons. Unpin and Clear are the way out of
   a mode, and a way out that needs a 22 px target is one a thumb misses — the small drawn pin head on the chart must
   not be the only thing that releases a pin. The number is the WCAG 2.5.5 target size, and it is asserted in the
   browser against the real bounding box rather than against this rule. */
.tel-ws__scrub-btn {
    background: var(--ghostai-bg, #0b1020);
    border: 1px solid var(--ghostai-border, #262c44);
    color: var(--ghostai-text, #e6e9f2);
    border-radius: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.tel-ws__scrub-btn:hover {
    border-color: var(--ghostai-accent, #00d4ff);
}

.tel-ws__scrub-clear {
    margin-left: 4px;
    color: var(--ghostai-accent, #00d4ff);
}

/* The way out of the mode, styled as the leading action of the bar it appears in — it exists only while pinned. */
.tel-ws__scrub-unpin {
    margin-left: auto;
    border-color: var(--ghostai-accent, #00d4ff);
    color: var(--ghostai-accent, #00d4ff);
}

.tel-ws__scrub-readout {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-left: 4px;
    flex-wrap: wrap;
}

.tel-ws__scrub-frame {
    color: var(--ghostai-text, #e6e9f2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tel-ws__scrub-state {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ghostai-text-muted, #8b95a7);
}

/* Not colour alone: the pinned state keeps its word, gains a chip, and is the only one followed by a sentence. */
.tel-ws__scrub-state--pinned {
    color: var(--ghostai-bg, #0b1020);
    background: var(--ghostai-accent, #00d4ff);
    font-weight: 700;
    border-radius: 4px;
    padding: 1px 6px;
}

.tel-ws__scrub-why {
    font-size: 11px;
    color: var(--ghostai-accent, #00d4ff);
}

.tel-ws__scrub-hint {
    color: var(--ghostai-text-muted, #8b95a7);
}

/* ── Tablet / mobile: stack map above charts; nothing scrolls horizontally ─── */
@media (max-width: 900px) {
    .tel-ws {
        grid-template-columns: minmax(0, 1fr);
    }

    .tel-ws__map {
        position: static;
    }
}

/* ── Dynamics Lab (#1407) ─────────────────────────────────────────────────────────────────────────────────────────
   Global, prefixed classes: the Web host did not link the Blazor scoped-CSS bundle until T136-D, so a .razor.css file here was
   inert; shared styles stay global (DESIGN_SYSTEM_RULES.md). Colours come from --ghostai-color-* — the tokens that actually exist; the seven --ghostai-* names the rest of
   this file uses were never defined and silently fall back to their literals. */

.tel25 { display: flex; flex-direction: column; gap: 0.75rem; }

.tel25__top {
    display: grid;
    /* The scene takes two thirds: a car and its force vectors need the room, and the map only needs to be navigable. */
    grid-template-columns: 2fr 1fr;
    gap: 0.75rem;
    align-items: stretch;
}

@media (max-width: 900px) {
    /* Below this the two-thirds split leaves the scene too narrow to read, so the map moves underneath it. */
    .tel25__top { grid-template-columns: 1fr; }
}

.tel25__scene,
.tel25__map {
    background: var(--ghostai-color-surface-2, #161b22);
    border: 1px solid var(--ghostai-color-border, #30363d);
    border-radius: 6px;
    overflow: hidden;
}

.tel25-scene { display: flex; flex-direction: column; height: 100%; }

.tel25-scene__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--ghostai-color-border, #30363d);
}

.tel25-scene__cameras,
.tel25-scene__zoom,
.tel25-scene__transport { display: flex; gap: 0.25rem; align-items: center; }

.tel25-scene__btn {
    background: transparent;
    border: 1px solid var(--ghostai-color-border, #30363d);
    border-radius: 4px;
    color: var(--ghostai-color-text-muted, #8b949e);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    padding: 0.2rem 0.5rem;
}

.tel25-scene__btn:hover { color: var(--ghostai-color-text-primary, #e6edf3); }

/* The selected camera, rate and repeat state, marked exactly the way the Values/Differences toggle marks its own
   selection — raised surface, accent border, brightened label. Deliberately identical to `.tel-strip__mode.is-active`
   rather than merely similar: they are the same kind of control on the same page, and a driver should not have to
   learn two ways of reading "this one is on".

   It used to flood the button with `--ghostai-color-accent` and force `#fff` on top. That rule was written against a
   `#1f6feb` fallback, but the real token wins and the theme defines the accent as `#00d4ff` — white on cyan is about
   1.3:1, so the ACTIVE button was the one you could not read, and the view you had selected was the hardest to see. */
.tel25-scene__btn.is-active {
    background: var(--ghostai-color-surface-raised, #1a2130);
    border-color: var(--ghostai-color-accent, #4c8dff);
    color: var(--ghostai-color-text-primary, #e6edf3);
}

.tel25-scene__btn:focus-visible {
    outline: 2px solid var(--ghostai-color-accent, #4c8dff);
    outline-offset: 2px;
}

.tel25-scene__btn--rate { min-width: 2.6rem; }

/* A control at the end of its range stays visible rather than disappearing: a button that vanishes at the closest zoom
   reads as a layout that moved, not as a limit that was reached. */
.tel25-scene__btn:disabled { opacity: 0.4; cursor: default; }
.tel25-scene__btn:disabled:hover { color: var(--ghostai-color-text-muted, #8b949e); }

.tel25-scene__btn--zoom { min-width: 1.9rem; font-size: 0.9rem; line-height: 1; padding: 0.2rem 0.4rem; }
.tel25-scene__btn--zoom-level { min-width: 2.9rem; font-variant-numeric: tabular-nums; }

.tel25-scene__rate-entry { display: inline-flex; align-items: center; gap: 0.3rem; }
.tel25-scene__rate-label { color: var(--ghostai-color-text-muted, #8b949e); font-size: 0.72rem; }
.tel25-scene__rate-entry input { width: 4.2rem; font: inherit; font-size: 0.78rem; }

/* The canvas sizes itself in CSS pixels; the renderer scales its backing store by devicePixelRatio. */
.tel25-scene__canvas { display: block; width: 100%; height: 100%; min-height: 320px; }

.tel25-scene__provenance {
    margin: 0;
    padding: 0.35rem 0.6rem;
    border-top: 1px solid var(--ghostai-color-border, #30363d);
    color: var(--ghostai-color-text-muted, #8b949e);
    font-size: 0.74rem;
    font-style: italic;
}

.tel25--empty {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.5rem;
    border: 1px dashed var(--ghostai-color-border, #30363d);
    border-radius: 6px;
}

.tel25__empty-title { color: var(--ghostai-color-text-primary, #e6edf3); font-weight: 600; }
.tel25__empty-msg { color: var(--ghostai-color-text-muted, #8b949e); font-size: 0.85rem; }

/* #1407 — the capability panel: what this lap carries, and for everything it does not, why not.
   An absent row is dimmed but never hidden. A channel that silently is not there is the thing this panel exists to
   stop, so filtering the table down to what worked would defeat it. */
.tel-cap {
    margin-top: 12px;
    border: 1px solid var(--ghostai-color-border, #30363d);
    border-radius: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    /* T136-D — the panel is the table's scroll box, so it must never grow past its container: measured at 375px the
       table widened the Session Details document. */
    min-width: 0;
    max-width: 100%;
}

.tel-cap:focus-visible {
    outline: 2px solid var(--ghostai-color-accent, #38bdf8);
    outline-offset: 2px;
}

.tel-cap__why {
    overflow-wrap: anywhere;
}

.tel-cap--empty {
    color: var(--ghostai-color-text-muted, #8b949e);
    font-size: 0.85rem;
}

.tel-cap__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.tel-cap__title {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ghostai-color-text-primary, #e6edf3);
}

.tel-cap__summary {
    margin: 0;
    font-size: 0.8rem;
    color: var(--ghostai-color-text-muted, #8b949e);
    font-variant-numeric: tabular-nums;
}

.tel-cap__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.tel-cap__table th,
.tel-cap__table td {
    text-align: left;
    padding: 4px 8px 4px 0;
    vertical-align: top;
}

.tel-cap__table thead th {
    color: var(--ghostai-color-text-muted, #8b949e);
    font-weight: 500;
    border-bottom: 1px solid var(--ghostai-color-border, #30363d);
}

.tel-cap__row--absent {
    color: var(--ghostai-color-text-muted, #8b949e);
}

.tel-cap__ch {
    font-weight: 500;
    color: inherit;
    white-space: nowrap;
}

.tel-cap__unit {
    color: var(--ghostai-color-text-muted, #8b949e);
    font-weight: 400;
    margin-left: 4px;
}

.tel-cap__why {
    color: var(--ghostai-color-text-muted, #8b949e);
    min-width: 18ch;
}

/* #1778 — which accepted corner definition the rotation series was measured from. A caption under the table rather
   than a column: it describes one channel's boundary set, not every row. */
.tel-cap__prov {
    margin: 8px 0 0;
    font-size: 0.75rem;
    color: var(--ghostai-color-text-muted, #8b949e);
    border-top: 1px solid var(--ghostai-color-border, #30363d);
    padding-top: 6px;
}

/* Geometry authored for a different car than the one driven. Not colour alone: the sentence says so, and the weight
   only draws the eye to a sentence that is already there. */
.tel-cap__prov-fallback {
    display: block;
    margin-top: 2px;
    color: var(--ghostai-color-text-primary, #e6edf3);
    font-weight: 500;
}

/* #1407 DYN-T124 — the overlay legend. Sits under the canvas rather than floating over it: a label overlapping the
   car would be covering the thing it names. Badges are words, not colours, so nothing here depends on hue alone. */
.tel25-scene__legend {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 0.72rem;
    color: var(--ghostai-color-text-muted, #8b949e);
}

.tel25-scene__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.tel25-scene__legend-swatch {
    width: 10px;
    height: 3px;
    border-radius: 2px;
    flex: none;
}

/* #3503 C7: a dashed overlay shows its dash in the legend too, so the legend glyph is the scene glyph. */
.tel25-scene__legend-swatch--dashed {
    width: 18px;
    border-radius: 0;
}

.tel25-scene__legend-label {
    color: var(--ghostai-color-text-primary, #e6edf3);
}

/* An entry that has an explanation says so, and says it the way every other help affordance on the web does: a cursor
   that changes and a small marker. Without one, a tooltip is only found by accident. */
.tel25-scene__legend-item--explained { cursor: help; }

.tel25-scene__legend-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    border: 1px solid var(--ghostai-color-border, #30363d);
    border-radius: 50%;
    font-size: 0.6rem;
    line-height: 1;
    opacity: 0.7;
}

.tel25-scene__legend-item--explained:hover .tel25-scene__legend-help {
    opacity: 1;
    border-color: var(--ghostai-color-accent, #4c8dff);
    color: var(--ghostai-color-text-primary, #e6edf3);
}

/* Announced, never shown: a `title` attribute is not reliably read out, so the same sentence is also here as text. */
.tel25-scene__legend-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tel25-scene__legend-badge {
    padding: 0 5px;
    border: 1px solid var(--ghostai-color-border, #30363d);
    border-radius: 999px;
    font-size: 0.66rem;
    text-transform: lowercase;
}

/* #1407 DYN-T120 — one car or two. The two panels are the same view twice, so they get identical boxes: a difference
   in what they show has to come from the driving, not from the layout. */
.tel25__panels {
    display: flex;
    gap: 8px;
    min-height: 0;
    flex: 1;
}

.tel25__panel {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.tel25__panel-title {
    font-size: 0.72rem;
    color: var(--ghostai-color-text-muted, #8b949e);
    padding-bottom: 3px;
}

.tel25-scene__modes {
    display: flex;
    gap: 4px;
}

/* The row above the panels: how many cars, and which body they wear. One row rather than two so the setup of the
   view reads as one decision and does not push the scene itself further down the page. */
.tel25-scene__setup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding-bottom: 6px;
}

/* Which car is drawn. Grouped apart from the 1/2-car buttons — one says how many laps are on screen, the other says
   what they look like, and buttons that sit in one run read as alternatives to each other. */
.tel25-scene__bodies {
    display: flex;
    gap: 4px;
}

.tel25-scene__transport--hidden {
    display: none;
}

/* #1407 DYN-T110 — the whole-lap map gains a reference line, a window band and a click target.
   Painted order matters and is set in the markup: the window band sits under both lines, and the driver's line over
   the reference, because the driver's lap is the one being read. */
.tel-map__svg--pickable {
    cursor: crosshair;
}

/* The measured track edges from the approved survey — the same road the close-up draws. Thin and faint: the driven
   line is what is being read, the edges are what it is read against. */
.tel-map__edge {
    fill: none;
    stroke: var(--ghostai-color-text-muted, #94a3b8);
    stroke-opacity: 0.55;
    stroke-width: 1;
    stroke-linejoin: round;
}

.tel-map__window {
    fill: none;
    stroke: var(--ghostai-color-accent, #4c8dff);
    stroke-opacity: 0.28;
    stroke-width: 9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tel-map__reference {
    fill: none;
    stroke: var(--ghostai-series-reference);
    stroke-opacity: 0.75;
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    stroke-linejoin: round;
}

/* Hollow, so where the two cars coincide the driver's solid marker reads as the one on top. */
.tel-map__reference-marker {
    fill: none;
    stroke: var(--ghostai-series-reference);
    stroke-width: 2;
}

/* #1407 DYN-T126 — a second lap on a channel chart, and the difference between them.
   The reference is dashed rather than merely paler: it is a different lap, not a fainter version of this one, and
   opacity alone would read as "the same trace, less certain". */
.tel-chart__trace--reference {
    stroke: var(--ghostai-series-reference);
    stroke-opacity: 0.85;
    stroke-dasharray: 4 3;
    stroke-width: 1.4;
}

.tel-chart__zero {
    stroke: var(--ghostai-color-text-muted, #8b949e);
    stroke-opacity: 0.55;
    stroke-width: 1;
    stroke-dasharray: 2 3;
}

/* #1407 Wave 2 — the phases the car actually drove, behind every trace.
   Deliberately low-contrast fills with no stroke: a band is context for the trace, and a bordered block at trace
   contrast competes with the very line it exists to explain. The hues follow what the driver is DOING rather than
   the phase's name — braking warm, rotation neutral, throttle cool — so a glance reads the corner's shape without
   reading any labels. */
.tel-chart__phase {
    stroke: none;
}

.tel-chart__phase--beforebraking {
    fill: #8b949e;
    fill-opacity: 0.07;
}

.tel-chart__phase--fullbraking {
    fill: #f0846b;
    fill-opacity: 0.16;
}

/* Trail braking is the same family as full braking and lighter, because it IS the same pedal on the way out. */
.tel-chart__phase--trailbraking {
    fill: #f0846b;
    fill-opacity: 0.09;
}

.tel-chart__phase--rotation {
    fill: #c79bf0;
    fill-opacity: 0.14;
}

.tel-chart__phase--coasting {
    fill: #8b949e;
    fill-opacity: 0.10;
}

.tel-chart__phase--exitthrottle {
    fill: #6bd08a;
    fill-opacity: 0.10;
}

/* And full throttle is the same family as exit throttle, stronger — the driver committed. */
.tel-chart__phase--exitfullthrottle {
    fill: #6bd08a;
    fill-opacity: 0.17;
}

/* #2343 — where the GAME braked, not the driver. Deliberately outside the .tel-chart__phase-- family: those are
   phases of the driver's own corner, and this is an input that was not his at all. Amber rather than the braking
   family's red, and outlined where a phase band never is, so it cannot be read as one more phase of a corner;
   strong enough to be seen on every channel at once, light enough that the trace on top stays the thing read. */
.tel-chart__penalty {
    stroke: #e3a84b;
    stroke-opacity: 0.55;
    stroke-width: 1;
    fill: #e3a84b;
    fill-opacity: 0.14;
}

/* The words for the same fact, above the charts. A driver who never hovers a band still has to be told the game
   braked, which is the whole reason the region is drawn (#2343). */
.tel-ws__penalties {
    border: 1px solid #e3a84b;
    border-radius: 8px;
    background: rgba(227, 168, 75, 0.08);
    padding: 6px 10px;
    font-size: 12px;
}

.tel-ws__penalties-title {
    display: block;
    font-weight: 600;
    color: var(--ghostai-text, #d7dce8);
}

.tel-ws__penalties-list {
    margin: 4px 0 0;
    padding-left: 18px;
    color: var(--ghostai-text-muted, #8b95a7);
}

/* A penalty this lap's frames cannot place. Said rather than hidden — the game did brake — but set apart, so a
   driver does not go looking on the traces for a region that was never drawn. */
.tel-ws__penalties-unplaced {
    font-style: italic;
    opacity: 0.85;
}

/* Why a requested difference is not on screen. Shown beside the label rather than instead of the chart: the values
   are still worth reading, and a blank panel would suggest the channel itself was missing. */
.tel-chart__delta-refusal {
    font-size: 0.68rem;
    color: var(--ghostai-color-text-muted, #8b949e);
    border: 1px solid var(--ghostai-color-border, #30363d);
    border-radius: 999px;
    padding: 0 6px;
}

/* Which way the subtraction ran, beside the trace that needs it. Muted and small: it is a key, not a reading, and it
   must not compete with the number in the same row. */
.tel-chart__sign {
    font-size: 0.68rem;
    color: var(--ghostai-color-text-muted, #8b949e);
    white-space: nowrap;
}

/* #1407 DYN-T126 — values or differences, for the whole strip at once. */
.tel-strip__modes {
    display: flex;
    gap: 4px;
    padding-bottom: 6px;
}

.tel-strip__mode {
    appearance: none;
    background: transparent;
    border: 1px solid var(--ghostai-color-border, #30363d);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.74rem;
    color: var(--ghostai-color-text-muted, #8b949e);
    cursor: pointer;
}

.tel-strip__mode.is-active {
    background: var(--ghostai-color-surface-raised, #1a2130);
    border-color: var(--ghostai-color-accent, #4c8dff);
    color: var(--ghostai-color-text-primary, #e6edf3);
}

.tel-strip__mode:focus-visible {
    outline: 2px solid var(--ghostai-color-accent, #4c8dff);
    outline-offset: 2px;
}

/* ── Rotation from entry (ROT-MY-01, #2471) ───────────────────────────────────────────────────────────────────────
   Each series is drawn on its OWN axis — metres from the entry, degrees since it — beneath the lap-axis rotation
   trace. The zero line is styled to be READ rather than merely present: it is the origin every number on the chart
   is measured from, so it is deliberately more visible than an ordinary gridline would be. */
.tel-strip__rotation-from-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 6px 0 10px;
}

.rfe {
    border: 1px solid var(--ghostai-border, #26304a);
    border-radius: 6px;
    padding: 6px 8px;
}

.rfe__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.rfe__title {
    margin: 0;
    font-size: 0.78rem;
    color: var(--ghostai-text-primary, #e6edf3);
}

.rfe__units {
    font-size: 0.66rem;
    color: var(--ghostai-text-muted, #8b95a7);
    font-variant-numeric: tabular-nums;
}

.rfe__svg {
    width: 100%;
    height: 120px;
    display: block;
}

.rfe__zero {
    stroke: var(--ghostai-text-muted, #8b95a7);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.rfe__curve {
    stroke: var(--ghostai-series-driver);
    stroke-width: 1.6;
}

.rfe__marker {
    stroke: var(--ghostai-color-accent, #4c8dff);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}

/* The end of an integral gap. Hollow on purpose: it marks where the DATA stopped, which is not a measurement. */
.rfe__gap {
    fill: none;
    stroke: var(--ghostai-text-muted, #8b95a7);
    stroke-width: 1.4;
}

/* Where the samples ran out with the corner still open. Hollow for the same reason as .rfe__gap. */
.rfe__cut {
    fill: none;
    stroke: var(--ghostai-text-muted, #8b95a7);
    stroke-width: 1.4;
    stroke-dasharray: 2 2;
}

.rfe__truncated {
    margin: 4px 0 0;
    font-size: 0.72rem;
    color: var(--ghostai-text-muted, #8b95a7);
}

.rfe__phase {
    fill: rgba(139, 149, 167, 0.07);
}

.rfe__phase--mid {
    fill: rgba(76, 141, 255, 0.08);
}

.rfe__tip {
    display: flex;
    gap: 14px;
    margin: 4px 0 0;
    font-size: 0.72rem;
    color: var(--ghostai-text-muted, #8b95a7);
    font-variant-numeric: tabular-nums;
}

.rfe__tip dt {
    display: inline;
    margin-right: 4px;
}

.rfe__tip dd {
    display: inline;
    margin: 0;
    color: var(--ghostai-text-primary, #e6edf3);
}

/* The table is the copyable form of the same points, and it is long. Scrolled rather than truncated: a reader who
   opens it is after a number, and a table that silently stopped at twenty rows would answer the wrong question. */
.rfe__table {
    display: block;
    max-height: 170px;
    overflow-y: auto;
    width: 100%;
    margin-top: 4px;
    border-collapse: collapse;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

.rfe__data { margin-top: 4px; }

.rfe__caption {
    cursor: pointer;
    text-align: left;
    padding: 2px 0;
    font-size: 0.68rem;
    color: var(--ghostai-text-muted, #8b95a7);
}

.rfe__table th,
.rfe__table td {
    text-align: right;
    padding: 1px 8px 1px 0;
    color: var(--ghostai-text-primary, #e6edf3);
}

.rfe__table th {
    color: var(--ghostai-text-muted, #8b95a7);
    font-weight: 500;
}

.rfe__unavailable {
    margin: 4px 0 0;
    padding: 6px;
    font-size: 0.74rem;
    font-style: italic;
    color: var(--ghostai-text-muted, #8b95a7);
    background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(139, 149, 167, 0.06) 6px, rgba(139, 149, 167, 0.06) 12px);
    border-radius: 6px;
}

/* The shared cursor, on this chart's own axis. Overlaid rather than drawn inside the plot's <svg> so a cursor move
   re-renders one small element instead of the whole curve on every pointer tick. */
.rfe__cursor-overlay {
    width: 100%;
    height: 120px;
    display: block;
    margin-top: -120px;
    pointer-events: none;
}

.rfe__cursor {
    stroke: var(--ghostai-accent, #00d4ff);
    stroke-width: 1;
    stroke-dasharray: 2 3;
    opacity: 0.7;
}

.rfe__cursor.is-pinned {
    stroke-dasharray: none;
    opacity: 1;
}

/* ── Dynamics Lab frame bar (T80, #2612) ──────────────────────────────────────────────────────────────────────────
   The Lab had no frame bar at all. A pin is entered here by clicking the map, by clicking a chart, and by simply
   letting the replay run — the transport pins every frame it draws — and until now the only way back out was knowing
   that Escape does it. Drivers who did not know reported that hovering had stopped working, which is the same report
   the other two tabs produced before #1756/#1769 gave them this bar.

   Same shape and the same words as `.tel-ws__scrubbar`, because these are three tabs of one bench and a pin must not
   mean three different things across them. Its own prefix rather than a shared class: this view uses the
   --ghostai-color-* tokens, which are the ones that actually exist, and the tel-ws bar's literals are a separate
   debt not worth mixing into this change. */
.tel25__scrubbar {
    position: sticky;
    top: var(--ghostai-bench-sticky-top, 0px);
    z-index: 6;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 10px;
    /* Opaque: the charts scroll underneath it. */
    background: var(--ghostai-color-surface-2, #161b22);
    border: 1px solid var(--ghostai-color-border, #30363d);
    border-radius: 6px;
    font-size: 12px;
}

/* Pinned restyles the WHOLE bar rather than one word inside it. The complaint was never that the word was wrong — it
   was that nobody read it. */
.tel25__scrubbar.is-pinned {
    border-color: var(--ghostai-color-accent, #4c8dff);
    box-shadow: inset 3px 0 0 0 var(--ghostai-color-accent, #4c8dff);
}

/* 44 CSS px each way — WCAG 2.5.5. The drawn pin head on a chart is about five pixels across; it cannot be the only
   way to release a pin, and this is the explicit target that is not. */
.tel25__scrub-btn {
    background: var(--ghostai-color-surface, #0d1117);
    border: 1px solid var(--ghostai-color-border, #30363d);
    color: var(--ghostai-color-text-primary, #e6edf3);
    border-radius: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.tel25__scrub-btn:hover {
    border-color: var(--ghostai-color-accent, #4c8dff);
}

.tel25__scrub-btn:focus-visible {
    outline: 2px solid var(--ghostai-color-accent, #4c8dff);
    outline-offset: 2px;
}

/* The way out of the mode, at the trailing edge of the bar it appears in — it exists only while pinned. */
.tel25__scrub-unpin {
    margin-left: auto;
    border-color: var(--ghostai-color-accent, #4c8dff);
    color: var(--ghostai-color-accent, #4c8dff);
}

.tel25__scrub-clear {
    margin-left: 4px;
    color: var(--ghostai-color-accent, #4c8dff);
}

.tel25__scrub-readout {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-left: 4px;
    flex-wrap: wrap;
    min-width: 0;
}

.tel25__scrub-frame {
    color: var(--ghostai-color-text-primary, #e6edf3);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tel25__scrub-state {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ghostai-color-text-muted, #8b949e);
}

/* Not colour alone: the pinned state keeps its word, gains a chip, and is the only one followed by a sentence. */
.tel25__scrub-state--pinned {
    color: var(--ghostai-color-surface, #0d1117);
    background: var(--ghostai-color-accent, #4c8dff);
    font-weight: 700;
    border-radius: 4px;
    padding: 1px 6px;
}

.tel25__scrub-why {
    font-size: 11px;
    color: var(--ghostai-color-accent, #4c8dff);
}

.tel25__scrub-hint {
    color: var(--ghostai-color-text-muted, #8b949e);
}

/* While a pin holds, the pointer says so where the hand is: a crosshair means "your movement picks the frame", and
   that stops being true the moment something is pinned. */
.tel25__charts.is-pinned {
    cursor: pointer;
}

.tel25__charts > * {
    scroll-margin-top: calc(var(--ghostai-bench-sticky-top, 0px) + 4rem);
}

/* ── Lap bench zoom (T92, #2634) ─────────────────────────────────────────── */

/* The charts full width, for a host that shows the map elsewhere. */
.tel-ws--full {
    grid-template-columns: minmax(0, 1fr);
}

/* A finger's horizontal drag must reach the page as pointer events (to pan a zoomed window), while a vertical one
   still scrolls the page and a pinch still zooms it natively. */
.tel-ws__charts {
    touch-action: pan-y pinch-zoom;
}

/* Lives on <body> while a mouse drags, fixed over the charts' box by the scrubber script — outside the Blazor-rendered
   tree. Top, height, left and width are set per move. */
.tel-ws__brush {
    position: fixed;
    z-index: 50;
    pointer-events: none;
    background: color-mix(in srgb, var(--ghostai-accent, #00d4ff) 18%, transparent);
    border-inline: 1px solid var(--ghostai-accent, #00d4ff);
}

.tel-ws__scrub-range {
    font-variant-numeric: tabular-nums;
}

/* Design canvas (2026-10-21, Charts-Settings) — the charts under a "Wykresy" heading whose ⚙ opens the driver's
   layout: beside the charts on a computer (≥ 1280 px), above them on a tablet, a sheet from the bottom on a phone.
   "Więcej wykresów (n)" is one wide button under the charts shown at once. */
.tel-strip__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 6px 10px 2px;
}

.tel-strip__title { font-size: 15px; font-weight: 700; }

.tel-strip__settings {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--ghostai-color-accent, #38bdf8);
    background: transparent;
    color: var(--ghostai-color-accent, #38bdf8);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.tel-strip__body { display: flex; flex-direction: column; gap: 8px; }
.tel-strip__charts { min-width: 0; display: flex; flex-direction: column; }
.tel-strip__body.has-settings > .tel-settings { order: -1; }

@media (min-width: 1280px) {
    .tel-strip__body.has-settings {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
        align-items: start;
    }

    .tel-strip__body.has-settings > .tel-settings { order: 0; position: sticky; top: 72px; }
}

.tel-strip__more--wide { align-self: stretch; text-align: center; font-weight: 600; }
.tel-strip__more--wide[aria-expanded="false"]::after { content: " ▾"; }
.tel-strip__more--wide[aria-expanded="true"]::after { content: " ▴"; }

/* The driver's chart layout (TelemetryChannelSettings). */
.tel-settings {
    margin: 0 10px 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--ghostai-border, #262c44);
    background: var(--ghostai-color-surface, #131a2e);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tel-settings__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tel-settings__title { margin: 0; flex: 1; font-size: 17px; font-weight: 700; }
.tel-settings__note { margin: 0; font-size: 12px; color: var(--ghostai-color-text-muted, #94a3b8); }

.tel-settings__link {
    min-height: 36px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--ghostai-color-accent, #38bdf8);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.tel-settings__done { display: none; }

.tel-settings__profiles { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.tel-settings__profiles small { color: var(--ghostai-color-text-muted, #94a3b8); }

.tel-settings__chip,
.tel-settings__stepper button {
    min-height: 32px;
    min-width: 36px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--ghostai-border, #262c44);
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.tel-settings__chip[aria-pressed="true"] {
    border-color: var(--ghostai-color-accent, #38bdf8);
    color: var(--ghostai-color-accent, #38bdf8);
}

.tel-settings__stepper button:disabled,
.tel-settings__arrows button:disabled { opacity: 0.35; cursor: default; }

.tel-settings__count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--ghostai-border, #262c44);
    border-radius: 10px;
    font-weight: 600;
}

.tel-settings__stepper { display: inline-flex; align-items: center; gap: 8px; }
.tel-settings__stepper b { min-width: 24px; text-align: center; font-family: var(--ghostai-font-numeric); font-variant-numeric: tabular-nums; }

.tel-settings__list { margin: 0; padding: 0; list-style: none; max-height: 480px; overflow-y: auto; }

.tel-settings__section {
    padding: 12px 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ghostai-color-text-muted, #94a3b8);
}

.tel-settings__row {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid var(--ghostai-border, #262c44);
    cursor: grab;
}

.tel-settings__row.is-dragged { opacity: 0.5; }
.tel-settings__grip { color: var(--ghostai-color-text-muted, #94a3b8); width: 14px; }
.tel-settings__name { flex: 1; min-width: 64px; font-size: 14px; font-weight: 600; overflow-wrap: break-word; }
.tel-settings__row.is-hidden .tel-settings__name { opacity: 0.55; }

/* "Od razu / Więcej / Ukryj" — one segmented control per chart. */
.tel-settings__places {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--ghostai-border, #262c44);
    border-radius: 8px;
}

.tel-settings__places button,
.tel-settings__arrows button {
    min-height: 36px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.tel-settings__places button[aria-pressed="true"] {
    background: var(--ghostai-color-accent, #38bdf8);
    color: var(--ghostai-color-on-accent, #04111f);
}

/* Only "Od razu" is the accent; a chart behind More or hidden is pressed in a quieter tone (the canvas). */
.tel-settings__places button[data-testid="tel-settings-place-more"][aria-pressed="true"],
.tel-settings__places button[data-testid="tel-settings-place-hidden"][aria-pressed="true"] {
    background: var(--ghostai-color-surface-raised, #2a3352);
    color: inherit;
}

.tel-settings__arrows { display: inline-flex; }
.tel-settings__arrows button { min-width: 32px; padding: 0; }

/* A phone: the panel is a sheet from the bottom, over the page. */
@media (max-width: 760px), (max-width: 1000px) and (max-height: 500px) {
    .tel-strip__body.has-settings > .tel-settings {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 60;
        margin: 0;
        max-height: 85vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -12px 32px rgb(0 0 0 / 0.45);
    }

    .tel-strip__body.has-settings > .tel-settings::before {
        content: "";
        align-self: center;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--ghostai-border, #262c44);
    }

    .tel-settings__done { display: inline-block; font-weight: 700; }
    .tel-settings__list { max-height: none; overflow: visible; }
    .tel-settings__arrows button { min-width: 28px; }
}

.tel-strip__more {
    align-self: flex-start;
    min-height: 44px;
    margin: 6px 10px;
    padding: 0 12px;
    border: 1px solid var(--ghostai-border, #262c44);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* ── T136-D: tyre temperatures over the compound's bands ─────────────────────
   Band colours come from the design tokens (--ghostai-tyre-band-*, _ghostai.tokens.scss); the fallbacks are the
   same values for a host that does not load ghostai-theme.css. The band is the BACKGROUND, faint, so the four
   wheel lines stay readable on it; the four lines differ by weight and dash, never by a band colour. */
.tel-chart--tyres {
    --tel-tyre-cold: var(--ghostai-tyre-band-cold, #3b82f6);
    --tel-tyre-warming: var(--ghostai-tyre-band-warming, #00d4ff);
    --tel-tyre-optimum: var(--ghostai-tyre-band-optimum, #22c55e);
    --tel-tyre-hot: var(--ghostai-tyre-band-hot, #f97316);
    --tel-tyre-overheated: var(--ghostai-tyre-band-overheated, #ef4444);
    --tel-tyre-unknown: var(--ghostai-text-muted, #8b95a7);
}

.tel-tyre__svg {
    height: 120px;
}

.tel-tyre-band {
    opacity: 0.16;
}

.tel-tyre-band--cold { fill: var(--tel-tyre-cold); }
.tel-tyre-band--warming { fill: var(--tel-tyre-warming); }
.tel-tyre-band--optimum { fill: var(--tel-tyre-optimum); }
.tel-tyre-band--hot { fill: var(--tel-tyre-hot); }
.tel-tyre-band--overheated { fill: var(--tel-tyre-overheated); }

.tel-tyre-trace {
    fill: none;
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.tel-tyre-trace--fl { stroke: var(--ghostai-color-text-primary, #f8fafc); }
.tel-tyre-trace--fr { stroke: var(--ghostai-color-text-primary, #f8fafc); stroke-dasharray: 6 3; }
.tel-tyre-trace--rl { stroke: var(--ghostai-color-text-secondary, #cbd5e1); stroke-width: 1.2; }
.tel-tyre-trace--rr { stroke: var(--ghostai-color-text-secondary, #cbd5e1); stroke-width: 1.2; stroke-dasharray: 2 3; }

.tel-tyre__dot {
    stroke: var(--ghostai-bg, #0b1020);
    stroke-width: 0.8;
}

/* A state as a fill (dots, swatches) and as a chip (readout). */
.tel-tyre-state--cold { --tel-tyre-state: var(--tel-tyre-cold); }
.tel-tyre-state--warming { --tel-tyre-state: var(--tel-tyre-warming); }
.tel-tyre-state--optimum { --tel-tyre-state: var(--tel-tyre-optimum); }
.tel-tyre-state--hot { --tel-tyre-state: var(--tel-tyre-hot); }
.tel-tyre-state--overheated { --tel-tyre-state: var(--tel-tyre-overheated); }
.tel-tyre-state--unknown { --tel-tyre-state: var(--tel-tyre-unknown); }

circle.tel-tyre__dot { fill: var(--tel-tyre-state); }

.tel-tyre__readout {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: auto;
}

.tel-tyre__chip {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid var(--tel-tyre-state);
    background: color-mix(in srgb, var(--tel-tyre-state) 18%, transparent);
    color: var(--ghostai-text, #e6ebf5);
}

.tel-tyre__imbalance {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    color: var(--ghostai-text-muted, #8b95a7);
}

.tel-tyre__imbalance-caption {
    color: var(--ghostai-text, #e6ebf5);
    font-weight: 600;
}

.tel-tyre__imbalance .is-warn,
.tel-tyre__warn {
    color: var(--tel-tyre-hot);
    font-weight: 600;
}

/* The tyre chart's key is a popup behind a "Legenda" button in the chart's head, like the scene's. */
.tel-chart--tyres { position: relative; }
.tel-chart__legend-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ghostai-color-border, #30363d); border-radius: 8px; background: none; color: var(--ghostai-color-text-primary, #e6edf3); font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.tel-chart__legend-btn.is-active { border-color: var(--ghostai-color-accent, #58a6ff); color: var(--ghostai-color-accent, #58a6ff); }
.tel-chart__legend-btn:focus-visible { outline: 2px solid var(--ghostai-color-accent, #58a6ff); outline-offset: 2px; }
.tel-chart__legend-pop { position: absolute; top: 52px; right: 8px; z-index: 5; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; width: min(380px, calc(100% - 16px)); max-height: min(70vh, 420px); overflow-y: auto; padding: 12px 14px; border: 1px solid var(--ghostai-color-border, #30363d); border-radius: 12px; background: var(--ghostai-color-surface, #0d1117); }
.tel-chart__legend-pop .tel-tyre__legend { flex-direction: column; align-items: flex-start; }

.tel-tyre__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    font-size: 0.7rem;
    color: var(--ghostai-text-muted, #8b95a7);
}

.tel-tyre__legend-title {
    color: var(--ghostai-text, #e6ebf5);
    font-weight: 600;
}

.tel-tyre__legend-item,
.tel-tyre__legend-wheel {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tel-tyre__legend-wheels {
    display: inline-flex;
    gap: 10px;
    margin-left: auto;
}

.tel-tyre__swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--tel-tyre-state);
}

.tel-tyre__note {
    font-size: 0.68rem;
    color: var(--ghostai-text-muted, #8b95a7);
}

/* #3504 C8 — Diff mode: the "where you lose time" list under the scene. Colours only from tokens. */
.tel25-scene__btn.is-unavailable { opacity: 0.55; cursor: not-allowed; }
.tel25-diff { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--ghostai-color-border); border-radius: 12px; background: var(--ghostai-color-surface); min-width: 0; }
.tel25-diff__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.tel25-diff__title { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--ghostai-color-text-primary); }
.tel25-diff__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 0.75rem; color: var(--ghostai-color-text-secondary); }
.tel25-diff__legend li { display: inline-flex; align-items: center; gap: 6px; }
.tel25-diff__swatch { width: 18px; height: 4px; border-radius: 2px; }
.tel25-diff__lanes, .tel25-diff__empty { margin: 0; font-size: 0.75rem; color: var(--ghostai-color-text-muted); }
.tel25-diff__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tel25-diff__item { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 1px solid var(--ghostai-color-border); border-radius: 8px; background: var(--ghostai-color-surface-2); color: var(--ghostai-color-text-primary); font: inherit; font-size: 0.8125rem; text-align: left; cursor: pointer; }
.tel25-diff__item:hover, .tel25-diff__item:focus-visible { border-color: var(--ghostai-color-border-strong); }
.tel25-diff__where { font-family: var(--ghostai-font-numeric); font-variant-numeric: tabular-nums; font-weight: 600; }
.tel25-diff__what { overflow-wrap: anywhere; color: var(--ghostai-color-text-secondary); }
.tel25-diff__time { font-family: var(--ghostai-font-numeric); font-variant-numeric: tabular-nums; }
.tel25-diff__item--worse .tel25-diff__time { color: var(--ghostai-track-diff-worse); }
.tel25-diff__item--better .tel25-diff__time { color: var(--ghostai-track-diff-better); }
.tel25-diff__item--neutral .tel25-diff__time { color: var(--ghostai-color-text-muted); }

/* #3488 C2 — the relief control and the lap's elevation strip under the scene. Colours only from tokens. */
.tel25-scene__relief { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--ghostai-color-text-secondary); }
.tel25-scene__relief input[type=range] { width: 96px; accent-color: var(--ghostai-color-accent); }
.tel25-scene__relief-value { min-width: 2.2em; font-family: var(--ghostai-font-numeric); font-variant-numeric: tabular-nums; color: var(--ghostai-color-text-primary); }
/* The elevation strip is a channel chart now (.tel-chart): it has no styles of its own. */

/* #3490 C4 — the canvas's stage (so the HUD can sit over it) and the car's HUD. Colours only from tokens. */
/* The stage takes the canvas's old place in the column — it grows, and holds the canvas's 320 px floor — so the legend
   below keeps its room; the canvas fills the stage. */
.tel25-scene__stage { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 320px; }
.tel25-scene__stage > .tel25-scene__canvas { flex: 1 1 auto; height: auto; min-height: 0; }
.tel25-hud { position: absolute; top: 8px; right: 8px; max-width: calc(100% - 16px); padding: 6px 8px; border: 1px solid var(--ghostai-color-border); border-radius: 10px; background: color-mix(in srgb, var(--ghostai-color-bg) 82%, transparent); color: var(--ghostai-color-text-secondary); font-size: 0.6875rem; }
.tel25-hud__summary { cursor: pointer; font-weight: 600; color: var(--ghostai-color-text-primary); list-style: revert; }
.tel25-hud__body { display: flex; gap: 8px; margin-top: 4px; }
.tel25-hud__gauge { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 84px; }
.tel25-hud__svg { width: 64px; height: 64px; }
.tel25-hud__dial { fill: none; stroke: var(--ghostai-color-border); stroke-width: 1; }
.tel25-hud__horizon { stroke: var(--ghostai-color-accent); stroke-width: 2; stroke-linecap: round; }
.tel25-hud__reticle { fill: none; stroke: var(--ghostai-color-text-primary); stroke-width: 1.5; }
.tel25-hud__axis { stroke: var(--ghostai-color-text-muted); stroke-width: 1; stroke-dasharray: 2 2; }
.tel25-hud__arc { fill: none; stroke: var(--ghostai-color-warning); stroke-width: 3; }
.tel25-hud__travel { stroke: var(--ghostai-color-warning); stroke-width: 1.5; }
.tel25-hud__wheel { stroke: var(--ghostai-color-text-primary); stroke-width: 1; }
.tel25-hud__caption { display: flex; flex-direction: column; align-items: center; text-align: center; font-variant-numeric: tabular-nums; }
.tel25-hud__badge { padding: 0 4px; border-radius: 6px; border: 1px solid var(--ghostai-color-border); color: var(--ghostai-color-text-muted); }
.tel25-hud__none { margin: 4px 0 0; color: var(--ghostai-color-text-muted); }
/* #3574 — the host's "recalculate the session" offer beside an unknown roll: a text button, wraps on a phone. */
.tel25-hud__recover { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 2px 0 0; padding: 0; border: 0; background: none; color: var(--ghostai-color-accent); font: inherit; text-decoration: underline; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.tel25-hud__recover:focus-visible { outline: 2px solid var(--ghostai-color-accent); outline-offset: 2px; }
@media (max-width: 480px) {
    .tel25-hud__body { gap: 4px; }
    .tel25-hud__gauge { width: 68px; }
    .tel25-hud__svg { width: 52px; height: 52px; }
}

/* ── #3491 C5 — the pro replay (DYN-DEC-022) ─────────────────────────────────────────────────────────────────────────
   Laid out as the owner-approved mockup: the canvas with its controls and HUD over it, the playback bar under it and an
   aside with the legend and the "measured or derived?" panel. One set of markup, re-flowed by the scene's OWN width (a
   container query), never the window's: the scene is full width on a page, half width in split view and narrow in a
   place panel. Colours only from --ghostai-* tokens; every text pair is held to 4.5:1 by ReplayChromePaletteTests.
   Every control is at least 44 × 44 CSS px (WCAG 2.5.5). These rules come last and win over the older ones above. */

.tel25-scene { container: tel25-scene / inline-size; display: block; height: auto; }

.tel25-scene__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stage" "transport" "aside" "note";
    gap: 12px;
    align-content: start;
    height: 100%;
}

.tel25-scene__stage { grid-area: stage; position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 0; }

.tel25-scene__view {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-xl);
    background: var(--ghostai-color-surface-2);
    overflow: hidden;
}

/* A definite height: a canvas sized "auto" takes its bitmap's aspect, which the renderer sets from the canvas's own size —
   a loop with no fixed point. */
.tel25-scene__view > .tel25-scene__canvas { flex: none; width: 100%; height: 300px; min-height: 0; }

/* Buttons: every one a touch target. */
.tel25-scene__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: var(--ghostai-touch-target);
    min-height: var(--ghostai-touch-target);
    padding: 0 12px;
    border-radius: var(--ghostai-radius-lg);
    font-size: 0.8125rem;
    color: var(--ghostai-color-text-secondary);
}

/* A segmented choice (camera, rate): the chosen one is FILLED, as in the mockup — with the replay's own on-accent pair,
   which clears 4.5:1 on both skins where white on the light accent did not. */
.tel25-scene__btn--seg { border-color: transparent; font-weight: 600; }
.tel25-scene__btn--seg.is-active { background: var(--ghostai-replay-on-bg); border-color: transparent; color: var(--ghostai-replay-on-fg); }
.tel25-scene__btn--seg:hover:not(.is-active) { color: var(--ghostai-color-text-primary); }

.tel25-scene__icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tel25-scene__icon--solid { fill: currentColor; stroke: none; }

/* The camera and zoom over the picture's corners. The bar spans the picture but lets the pointer through, so a click on
   the scene still reaches the canvas everywhere except on a control. */
.tel25-scene__toolbar {
    position: absolute;
    inset: 10px;
    z-index: 2;
    display: block;
    padding: 0;
    border: 0;
    pointer-events: none;
}

.tel25-scene__cameras,
.tel25-scene__zoom {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-xl);
    background: var(--ghostai-replay-hud-bg);
    backdrop-filter: blur(8px);
    pointer-events: auto;
}

.tel25-scene__cameras { top: 0; }
.tel25-scene__cameras .tel25-scene__btn { min-width: 52px; font-size: 0.875rem; }
.tel25-scene__zoom { bottom: 0; }

.tel25-scene__btn--zoom { min-width: var(--ghostai-touch-target); padding: 0; border-color: transparent; font-size: 1.25rem; color: var(--ghostai-color-text-primary); }
.tel25-scene__btn--zoom-level { padding: 0 6px; border-color: transparent; font-family: var(--ghostai-font-numeric); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

/* ── The driver's panels (DynamicsLabHud): speed, gear and gap top-left with the chips under them, pedals and wheel
   bottom-left above the dock. Layout "D" (DYN-DEC-024): each is a panel of its own, with a cog and a "?". */
.tel25-drive { position: absolute; inset: 10px; z-index: 1; pointer-events: none; color: var(--ghostai-color-text-primary); }

.tel25-drive__top { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: min(100%, 620px); }

.tel25-pane { position: relative; pointer-events: auto; }

.tel25-drive__primary {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-xl);
    background: var(--ghostai-replay-hud-bg);
    backdrop-filter: blur(8px);
}

.tel25-drive__metric { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; }
.tel25-drive__metric + .tel25-drive__metric { border-left: 1px solid var(--ghostai-color-border); }
.tel25-drive__metric--speed { min-width: 116px; }
.tel25-drive__metric--gear { align-items: center; }

.tel25-drive__eyebrow {
    font-size: var(--ghostai-type-eyebrow);
    font-weight: 600;
    letter-spacing: var(--ghostai-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ghostai-color-text-secondary);
}

.tel25-drive__value { font-family: var(--ghostai-font-numeric); font-size: 2.25rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.tel25-drive__value--gear { color: var(--ghostai-replay-accent-text); }
.tel25-drive__value--gap { font-size: 1.5rem; line-height: 1.5; }
.tel25-drive__unit { margin-left: 6px; font-family: var(--ghostai-font-sans); font-size: 0.875rem; font-weight: 400; color: var(--ghostai-color-text-secondary); }

/* A difference under (or beside) its value: a number first, a colour only when it reaches its threshold. */
.tel25-drive__delta { font-family: var(--ghostai-font-numeric); font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ghostai-color-text-secondary); }

.tel25-drive__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.tel25-drive__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-pill);
    background: var(--ghostai-replay-hud-bg);
    backdrop-filter: blur(8px);
    font-size: 0.75rem;
}

/* A chip whose difference counts: outlined in the difference's own colour, red loses and green gains. */
.tel25-drive__chip.is-differing { border-color: var(--tel25-chip-edge); box-shadow: inset 0 0 0 1px var(--tel25-chip-edge); }
.tel25-drive__chip-key { color: var(--ghostai-color-text-secondary); }
.tel25-drive__chip-value,
.tel25-drive__chip-delta { font-family: var(--ghostai-font-numeric); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Value and difference are two spans with their own colour, and the value keeps its width while it changes. */
.tel25-drive__chip-value { display: inline-block; min-width: 4.5ch; text-align: right; }
.tel25-drive__chip-delta { display: inline-block; min-width: 5ch; text-align: right; white-space: nowrap; }

.tel25-drive__why { margin: 0; max-width: 34em; padding: 6px 10px; border: 1px solid var(--ghostai-color-border); border-radius: var(--ghostai-radius-lg); background: var(--ghostai-replay-hud-bg); backdrop-filter: blur(8px); font-size: 0.75rem; color: var(--ghostai-color-text-secondary); pointer-events: auto; }

.tel25-drive__inputs {
    position: absolute;
    left: 0;
    bottom: 56px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-xl);
    background: var(--ghostai-replay-hud-bg);
    backdrop-filter: blur(8px);
}

.tel25-drive__pedals { display: flex; align-items: flex-end; gap: 10px; }
.tel25-drive__pedal { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tel25-drive__pedal .tel25-drive__delta { font-size: 0.6875rem; }
/* The bar's own track is solid, so a fill is read against it and not against whatever the scene paints behind the panel. */
.tel25-drive__bar { position: relative; display: flex; align-items: flex-end; width: 14px; height: 64px; border-radius: 4px; background: var(--ghostai-color-surface-2); overflow: hidden; }
.tel25-drive__fill { display: block; width: 100%; height: var(--tel25-fill, 0%); }
.tel25-drive__fill--throttle { background: var(--ghostai-track-overlay-throttle); }
.tel25-drive__fill--brake { background: var(--ghostai-track-overlay-brake); }
/* Diff: grey as far as driver and reference agree, the difference's colour across the rest. */
.tel25-drive__seg { position: absolute; left: 0; right: 0; bottom: var(--tel25-from, 0%); height: var(--tel25-size, 0%); }
.tel25-drive__seg--same { background: color-mix(in srgb, var(--ghostai-color-text-secondary) 55%, transparent); }
.tel25-drive__pedal-label { font-size: 0.6875rem; color: var(--ghostai-color-text-secondary); }

.tel25-drive__wheel { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-left: 12px; border-left: 1px solid var(--ghostai-color-border); }
.tel25-drive__pedals + .tel25-drive__wheel { margin-left: 0; }
.tel25-drive__inputs > .tel25-drive__wheel:first-child { padding-left: 0; border-left: 0; }
.tel25-drive__wheel-svg { width: 62px; height: 62px; }
.tel25-drive__wheel-rim { fill: none; stroke: var(--ghostai-color-text-primary); stroke-width: 5; stroke-linecap: round; }
.tel25-drive__wheel-mark { fill: var(--ghostai-color-accent); }
.tel25-drive__rim-same { fill: none; stroke: color-mix(in srgb, var(--ghostai-color-text-secondary) 70%, transparent); stroke-width: 4; }
.tel25-drive__rim-gap { fill: none; stroke-width: 5; }
/* The caption is three fixed slots (value line, difference line, name): nothing in it changes the size of the panel or
   moves the wheel, whatever the angle, the side or whether a difference is shown. */
.tel25-drive__wheel-caption { display: flex; flex-direction: column; align-items: center; width: 9.5em; font-size: 0.6875rem; text-align: center; color: var(--ghostai-color-text-secondary); }
.tel25-drive__wheel-value { display: flex; justify-content: center; align-items: baseline; gap: 0.35em; height: 1.25em; white-space: nowrap; font-family: var(--ghostai-font-numeric); font-variant-numeric: tabular-nums; }
.tel25-drive__wheel-angle { display: inline-block; min-width: 4ch; text-align: right; }
.tel25-drive__wheel-side { display: inline-block; min-width: 5.5ch; text-align: left; font-family: var(--ghostai-font-sans); }
.tel25-drive__wheel-deltaline { display: flex; justify-content: center; height: 1.25em; }
.tel25-drive__wheel-name { height: 1.25em; }
.tel25-drive__delta { display: inline-block; min-width: 5ch; text-align: center; white-space: nowrap; }
.tel25-drive__pedal-deltaline { display: flex; justify-content: center; height: 1.25em; }
.tel25-drive__wheel-value { font-family: var(--ghostai-font-numeric); color: var(--ghostai-color-text-primary); font-variant-numeric: tabular-nums; }

/* A panel's own cog and "?": a full touch target, drawn light so it does not compete with the values. */
.tel25-pane__tools { display: inline-flex; align-items: center; align-self: center; }
.tel25-pane__tool { display: inline-flex; align-items: center; justify-content: center; width: var(--ghostai-touch-target); height: var(--ghostai-touch-target); padding: 0; border: 0; border-radius: var(--ghostai-radius-lg); background: none; color: var(--ghostai-color-text-secondary); cursor: pointer; }
.tel25-pane__tool:hover,
.tel25-pane__tool.is-active { color: var(--ghostai-color-text-primary); }
.tel25-pane__tool:focus-visible { outline: 2px solid var(--ghostai-color-accent); outline-offset: -2px; }

/* A popup: a panel's settings or legend, the scene's "Panele" and "Legenda". Solid, because it is read, not glanced at. */
.tel25-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-sizing: border-box;
    width: min(320px, calc(100cqw - 24px));
    max-height: min(70vh, 460px);
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-xl);
    background: var(--ghostai-color-surface);
    color: var(--ghostai-color-text-primary);
    font-size: 0.8125rem;
    pointer-events: auto;
}

.tel25-pop--up { top: auto; bottom: calc(100% + 6px); }
.tel25-pop--legend { width: min(360px, calc(100cqw - 24px)); gap: 10px; }
.tel25-pop__title { font-size: var(--ghostai-type-eyebrow); font-weight: 600; letter-spacing: var(--ghostai-tracking-eyebrow); text-transform: uppercase; color: var(--ghostai-color-text-secondary); }
.tel25-pop__title--sub { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--ghostai-color-border); }
.tel25-pop__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--ghostai-touch-target); font-weight: 500; cursor: pointer; }
.tel25-pop__switch { appearance: none; flex: none; position: relative; width: 44px; height: 24px; margin: 0; border-radius: 12px; background: var(--ghostai-color-border-strong); cursor: pointer; transition: background 0.15s; }
.tel25-pop__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ghostai-color-text-primary); transition: transform 0.15s; }
.tel25-pop__switch:checked { background: var(--ghostai-replay-on-bg); }
.tel25-pop__switch:checked::after { transform: translateX(20px); background: var(--ghostai-replay-on-fg); }
.tel25-pop__switch:focus-visible { outline: 2px solid var(--ghostai-color-accent); outline-offset: 2px; }
.tel25-pop__note { padding-top: 8px; border-top: 1px solid var(--ghostai-color-border); font-size: 0.75rem; color: var(--ghostai-color-text-muted); }
.tel25-pop__text { margin: 0; line-height: 1.45; color: var(--ghostai-color-text-secondary); }
.tel25-pop__text strong { color: var(--ghostai-color-text-primary); font-weight: 600; }
.tel25-pop__swatch { display: inline-block; width: 12px; height: 12px; margin: 0 6px 0 0; border-radius: 3px; vertical-align: -1px; }
.tel25-pop__text--diff .tel25-pop__swatch:not(:first-child) { margin-left: 12px; }
@media (prefers-reduced-motion: reduce) {
    .tel25-pop__switch, .tel25-pop__switch::after { transition: none; }
}

/* The dock, bottom-left of the picture: "Legenda" and "Panele". */
.tel25-scene__dock { position: absolute; left: 0; bottom: 0; display: flex; gap: 6px; pointer-events: auto; }
.tel25-scene__btn--dock { border: 1px solid var(--ghostai-color-border); border-radius: var(--ghostai-radius-xl); background: var(--ghostai-replay-hud-bg); backdrop-filter: blur(8px); color: var(--ghostai-color-text-primary); font-weight: 600; }
.tel25-scene__btn--dock.is-active { border-color: var(--ghostai-replay-accent-text); color: var(--ghostai-replay-accent-text); }

/* There is no aside any more (the legends and the admin's sources are popups): the picture takes the whole width at
   every size. */
.tel25-scene .tel25-scene__layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "transport" "note"; }

/* The scene's one settings popup: a tab per subject. */
.tel25-scene__btn--cog { min-width: var(--ghostai-touch-target); padding: 0; }
.tel25-pop--tabs { width: min(440px, calc(100cqw - 24px)); gap: 10px; }
.tel25-pop__tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--ghostai-radius-lg); background: var(--ghostai-color-surface-2); }
.tel25-pop__tab { min-height: var(--ghostai-touch-target); padding: 0 10px; border: 0; border-radius: var(--ghostai-radius-lg); background: none; color: var(--ghostai-color-text-secondary); font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.tel25-pop__tab:hover { color: var(--ghostai-color-text-primary); }
.tel25-pop__tab.is-active { background: var(--ghostai-replay-on-bg); color: var(--ghostai-replay-on-fg); }
.tel25-pop__tab:focus-visible { outline: 2px solid var(--ghostai-color-accent); outline-offset: -2px; }
.tel25-pop__panel { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tel25-pop .tel25-sources { padding: 0; }
.tel25-pop .tel25-sources__row:first-child { border-top: 0; }
.tel25-body__grid--views { grid-template-columns: minmax(0, 1fr); }

/* The column beside the scene (the body panel over the track map). With both switched off it is not rendered and the
   scene takes its room. */
.tel25__top--solo { grid-template-columns: minmax(0, 1fr); }
.tel25__side { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.tel25__side > .tel25__map { flex: 1 1 auto; }

/* The C4 gauges: under the cameras on the right, on the replay's HUD backing. */
.tel25-hud {
    top: 72px;
    right: 10px;
    z-index: 1;
    max-width: calc(100% - 20px);
    background: var(--ghostai-replay-hud-bg);
    backdrop-filter: blur(8px);
    border-radius: var(--ghostai-radius-xl);
}

.tel25-hud__summary { box-sizing: border-box; min-width: var(--ghostai-touch-target); min-height: var(--ghostai-touch-target); padding: 12px 6px; line-height: 20px; }
.tel25-hud__badge { color: var(--ghostai-color-text-secondary); }

/* ── The playback bar. */
.tel25-scene__transport {
    grid-area: transport;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "scrub" "main" "tools";
    align-items: center;
    gap: 12px 20px;
    padding: 12px 14px;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-xl);
    background: var(--ghostai-color-surface);
}

.tel25-scene__transport-main { grid-area: main; display: flex; align-items: center; gap: 6px; }
.tel25-scene__transport-tools { grid-area: tools; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }

.tel25-scene__btn--icon { padding: 0; color: var(--ghostai-color-text-primary); }

.tel25-scene__btn--play {
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: var(--ghostai-radius-pill);
    background: var(--ghostai-replay-on-bg);
    color: var(--ghostai-replay-on-fg);
}

.tel25-scene__btn--play:hover { color: var(--ghostai-replay-on-fg); filter: brightness(1.08); }

.tel25-scene__rates { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--ghostai-radius-lg); background: var(--ghostai-color-surface-2); }
.tel25-scene__btn--rate { min-width: 48px; padding: 0 6px; font-family: var(--ghostai-font-numeric); font-variant-numeric: tabular-nums; font-weight: 500; }

.tel25-scene__rate-entry { gap: 6px; }
.tel25-scene__rate-label { font-size: 0.75rem; color: var(--ghostai-color-text-muted); }
.tel25-scene__rate-entry input {
    box-sizing: border-box;
    width: 4.75rem;
    min-height: var(--ghostai-touch-target);
    padding: 0 8px;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-lg);
    background: var(--ghostai-color-input-bg);
    color: var(--ghostai-color-text-primary);
    font-family: var(--ghostai-font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
}

.tel25-scene__rate-entry input:focus-visible { outline: 2px solid var(--ghostai-color-accent); outline-offset: 2px; }

.tel25-scene__btn--loop { padding: 0 14px; border-color: var(--ghostai-color-border); font-weight: 600; }
.tel25-scene__btn--loop.is-active { background: transparent; border-color: var(--ghostai-color-border-strong); color: var(--ghostai-replay-accent-text); }

/* The scrub: a range input laid over the lap's speed profile — the input is the control, the profile is its face. */
.tel25-scrub { grid-area: scrub; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tel25-scrub__track { position: relative; height: 56px; border-radius: var(--ghostai-radius-lg); background: var(--ghostai-color-surface-2); overflow: hidden; }
.tel25-scrub__track:focus-within { outline: 2px solid var(--ghostai-color-accent); outline-offset: 2px; }
.tel25-scrub__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tel25-scrub__corner { fill: var(--ghostai-color-accent); fill-opacity: 0.1; }
.tel25-scrub__reference { fill: none; stroke: var(--ghostai-series-reference); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.tel25-scrub__speed { fill: none; stroke: var(--ghostai-series-driver); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tel25-scrub__played { fill: var(--ghostai-color-accent); fill-opacity: 0.1; }
.tel25-scrub__head { fill: var(--ghostai-color-text-primary); }
.tel25-scrub__corners { position: absolute; inset: 4px 0 auto 0; pointer-events: none; }
.tel25-scrub__corner-label { position: absolute; top: 0; padding-left: 4px; font-family: var(--ghostai-font-numeric); font-variant-numeric: tabular-nums; font-size: 0.625rem; color: var(--ghostai-color-text-secondary); }
.tel25-scrub__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tel25-scrub__caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 0.75rem; color: var(--ghostai-color-text-muted); }
.tel25-scrub__this { color: var(--ghostai-replay-accent-text); }
.tel25-scrub__vs { margin: 0 0.3em; }
.tel25-scrub__ref { color: var(--ghostai-series-reference); }
.tel25-scrub__time { font-family: var(--ghostai-font-numeric); color: var(--ghostai-color-text-secondary); font-variant-numeric: tabular-nums; }

/* ── The aside: the collapsible legend and the "measured or derived?" panel. */
.tel25-scene__aside { grid-area: aside; display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.tel25-panel { min-width: 0; border: 1px solid var(--ghostai-color-border); border-radius: var(--ghostai-radius-xl); background: var(--ghostai-color-surface); }

.tel25-panel__summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 14px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ghostai-color-text-primary);
    cursor: pointer;
    list-style: none;
}

.tel25-panel__summary::-webkit-details-marker { display: none; }

/* The fold's chevron: down when open, right when closed. */
.tel25-panel__summary::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-left: 2px;
    border-right: 2px solid var(--ghostai-color-text-secondary);
    border-bottom: 2px solid var(--ghostai-color-text-secondary);
    transform: rotate(-45deg);
}

.tel25-panel[open] > .tel25-panel__summary::after { transform: rotate(45deg); }
.tel25-panel__summary:focus-visible { outline: 2px solid var(--ghostai-color-accent); outline-offset: -2px; border-radius: var(--ghostai-radius-xl); }
.tel25-panel__title { min-width: 0; }
.tel25-panel__meta { margin-left: auto; font-size: 0.75rem; font-weight: 400; color: var(--ghostai-color-text-muted); }

.tel25-pop .tel25-scene__legend { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--ghostai-color-text-secondary); }
.tel25-pop .tel25-scene__legend-item { gap: 10px; }
.tel25-pop .tel25-scene__legend-swatch { width: 20px; height: 4px; }
.tel25-pop .tel25-scene__legend-label { flex: 1 1 auto; min-width: 0; }
.tel25-pop .tel25-scene__legend-badge { padding: 1px 7px; border-color: var(--ghostai-replay-accent-text); color: var(--ghostai-replay-accent-text); font-size: 0.6875rem; }
.tel25-pop .tel25-scene__surfaces { padding: 0; }

.tel25-sources { display: grid; margin: 0; padding: 0 14px 14px; list-style: none; font-size: 0.8125rem; }
.tel25-sources__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 9px 0; border-top: 1px solid var(--ghostai-color-border); }
.tel25-sources__what { color: var(--ghostai-color-text-primary); overflow-wrap: anywhere; }
.tel25-sources__badge { align-self: start; max-width: 12em; padding: 2px 8px; border: 1px solid currentColor; border-radius: var(--ghostai-radius-pill); font-size: 0.6875rem; font-weight: 600; text-align: center; }
.tel25-sources__badge--measured { color: var(--ghostai-replay-measured-text); }
.tel25-sources__badge--derived { color: var(--ghostai-replay-accent-text); }
.tel25-sources__badge--assumed { border-style: dashed; border-color: var(--ghostai-color-text-muted); color: var(--ghostai-color-text-secondary); }
.tel25-sources__from { grid-column: 1 / -1; font-size: 0.75rem; color: var(--ghostai-color-text-muted); }

.tel25-scene__provenance { grid-area: note; border-top: 0; padding: 0 2px; }

/* ── Wide scene: the HUD over the picture, a taller canvas, and the playback bar in two rows. */
@container tel25-scene (min-width: 600px) {
    .tel25-scene__view > .tel25-scene__canvas { height: clamp(420px, 60vh, 620px); }
    .tel25-scene__transport { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "main scrub" "tools tools"; }
    .tel25-scene__aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* The mockup's desktop: the aside beside the picture, as tall as the picture and scrolling inside itself — its height is
   taken from the stage (height 0, min-height 100 %), so a long legend never stretches the canvas. */
@container tel25-scene (min-width: 1100px) {
    .tel25-scene__layout { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "stage aside" "transport transport" "note note"; }
    .tel25-scene__aside { display: flex; height: 0; min-height: 100%; overflow-y: auto; }
}

@container tel25-scene (min-width: 1180px) {
    .tel25-scene__transport { grid-template-columns: auto minmax(220px, 1fr) auto; grid-template-areas: "main scrub tools"; }
    .tel25-scene__transport-tools { flex-wrap: nowrap; }
}

/* ── Narrow scene (a phone, a split panel, a place panel): the readout and the gauges leave the picture and become a
   card under it, so nothing covers the car; the camera and zoom stay on the picture's corners. */
@container tel25-scene (max-width: 599.98px) {
    .tel25-drive {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 12px 14px;
        border: 1px solid var(--ghostai-color-border);
        border-radius: var(--ghostai-radius-xl);
        background: var(--ghostai-color-surface);
        pointer-events: auto;
    }

    .tel25-drive__top { position: static; max-width: none; }

    .tel25-drive__primary,
    .tel25-drive__inputs { position: relative; bottom: auto; flex-wrap: wrap; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; }

    .tel25-drive__metric { padding: 0 12px 0 0; min-width: 0; }
    .tel25-drive__metric + .tel25-drive__metric { padding-left: 12px; }
    .tel25-drive__value { font-size: 1.875rem; }
    .tel25-drive__unit { display: none; }
    .tel25-drive__chip { border-color: transparent; background: var(--ghostai-color-surface-2); backdrop-filter: none; }
    .tel25-drive__chip.is-differing { border-color: var(--tel25-chip-edge); }
    .tel25-drive__why { border: 0; padding: 0; background: none; backdrop-filter: none; }
    .tel25-drive__wheel-svg { width: 48px; height: 48px; }
    .tel25-pane__tools { margin-left: auto; }

    .tel25-hud { position: static; max-width: none; backdrop-filter: none; background: var(--ghostai-color-surface); }

    .tel25-scene__cameras { max-width: 100%; flex-wrap: wrap; justify-content: flex-end; }
    .tel25-scene__cameras .tel25-scene__btn { min-width: 48px; padding: 0 8px; }
}


/* ── "Nadwozie i koła" (DynamicsLabBodyPanel, DYN-DEC-024): above the track map. Laid out by its OWN width. */
.tel25-body { container: tel25-body / inline-size; position: relative; display: flex; flex-direction: column; gap: 10px; padding: 10px 14px 12px; border: 1px solid var(--ghostai-color-border); border-radius: var(--ghostai-radius-lg); background: var(--ghostai-color-surface-2); color: var(--ghostai-color-text-primary); }
.tel25-body__head { position: relative; display: flex; align-items: center; gap: 8px; min-height: var(--ghostai-touch-target); }
.tel25-body__title { margin: 0; font-size: 0.875rem; font-weight: 600; }
.tel25-body__plan { padding: 1px 8px; border: 1px solid var(--ghostai-replay-accent-text); border-radius: var(--ghostai-radius-pill); font-size: 0.6875rem; color: var(--ghostai-replay-accent-text); white-space: nowrap; }
.tel25-body__tools { margin-left: auto; }
.tel25-pop--end { left: auto; right: 0; }

.tel25-body__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 1.25fr) minmax(0, 1fr); gap: 10px; align-items: stretch; }
.tel25-body__grid--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tel25-body__column { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tel25-body__tile { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 8px 10px; border: 1px solid var(--ghostai-color-border); border-radius: var(--ghostai-radius-lg); background: var(--ghostai-color-surface); }
.tel25-body__wheel-name { font-size: var(--ghostai-type-eyebrow); font-weight: 600; letter-spacing: var(--ghostai-tracking-eyebrow); text-transform: uppercase; color: var(--ghostai-color-text-secondary); }
.tel25-body__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 0.75rem; }
.tel25-body__label { color: var(--ghostai-color-text-secondary); text-transform: lowercase; }
.tel25-body__value { margin-left: auto; font-family: var(--ghostai-font-numeric); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ghostai-color-text-primary); }
.tel25-body__delta { font-family: var(--ghostai-font-numeric); font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.tel25-body__views { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
.tel25-body__view { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tel25-body__svg { display: block; width: 100%; height: auto; max-height: 150px; }
.tel25-body__svg--teaser { max-width: 180px; opacity: 0.55; }
.tel25-body__ground { stroke: var(--ghostai-color-text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.tel25-body__shape { fill: color-mix(in srgb, var(--ghostai-color-text-primary) 86%, var(--ghostai-color-bg)); stroke: var(--ghostai-color-bg); stroke-width: 1.5; stroke-linejoin: round; }
.tel25-body__glass { fill: var(--ghostai-color-bg); opacity: 0.7; }
.tel25-body__line { fill: none; stroke: color-mix(in srgb, var(--ghostai-color-text-primary) 86%, var(--ghostai-color-bg)); stroke-width: 3; stroke-linecap: round; }
/* The reference's body: an outline, dashed, in the reference's own colour. */
.tel25-body__reference { fill: none; stroke: var(--ghostai-series-reference); stroke-width: 1.5; stroke-dasharray: 4 3; }
.tel25-body__wheel { fill: var(--ghostai-track-car-tyre); stroke: var(--ghostai-color-text-secondary); stroke-width: 1; }
.tel25-body__arrow { fill: none; stroke: var(--ghostai-replay-accent-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tel25-body__caption { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; font-size: 0.75rem; color: var(--ghostai-color-text-secondary); font-variant-numeric: tabular-nums; }
.tel25-body__note,
.tel25-body__about,
.tel25-body__none { margin: 0; font-size: 0.75rem; line-height: 1.45; color: var(--ghostai-color-text-muted); }
.tel25-body__about { color: var(--ghostai-color-text-secondary); font-size: 0.8125rem; }
.tel25-body__locked { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tel25-body__upgrade { border: 1px solid var(--ghostai-replay-accent-text); color: var(--ghostai-replay-accent-text); font-weight: 600; text-decoration: none; }
.tel25-body__key { display: inline-block; width: 22px; height: 0; margin-right: 8px; vertical-align: middle; border-top: 2px solid var(--ghostai-color-text-primary); }
.tel25-body__key--reference { border-top: 2px dashed var(--ghostai-series-reference); }

/* A narrow column (a phone, where the column goes under the scene at its full width this does not apply): the two
   drawings side by side over the four tiles. */
@container tel25-body (max-width: 380px) {
    .tel25-body__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tel25-body__views { grid-column: 1 / -1; order: -1; flex-direction: row; }
    .tel25-body__view { flex: 1 1 0; min-width: 0; }
}

/* Differences on the tyre chart, and the shared "the reference does not record" line. */
.tel-tyre__chip--diff .tel-tyre__chip-delta { font-family: var(--ghostai-font-numeric); font-variant-numeric: tabular-nums; }
.tel-ref-missing { margin: 4px 0 0; font-size: 0.75rem; color: var(--ghostai-color-text-secondary); }

.rfe__info { margin-left: auto; }
.rfe__info > summary { cursor: pointer; width: 1.25rem; height: 1.25rem; border: 1px solid currentColor; border-radius: 50%; text-align: center; font-size: 0.75rem; line-height: 1.1rem; list-style: none; }
.rfe__info > p { margin: 4px 0 0; font-size: 0.75rem; color: var(--ghostai-color-text-secondary); }

/* Camera diagnostics (admin, off by default): a corner strip over the scene with the numbers that expose judder. */
.tel25-diag { position: absolute; left: 8px; bottom: 8px; z-index: 5; max-width: 90%; padding: 6px 8px; border-radius: 6px; background: var(--ghostai-replay-hud-bg); color: var(--ghostai-color-text-primary); font: 11px/1.35 var(--ghostai-font-technical); pointer-events: none; }
.tel25-diag__text { margin: 0; white-space: pre; font: inherit; }
.tel25-diag__save { margin-top: 4px; pointer-events: auto; font: inherit; cursor: pointer; }