/*
 * 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-accent, #00d4ff);
    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-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-accent, #00d4ff);
    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;
}

.tel-ws__scrubbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--ghostai-surface, #151a2e);
    border: 1px solid var(--ghostai-border, #262c44);
    border-radius: 8px;
    font-size: 12px;
}

/* 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);
}

.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: 30px;
    padding: 3px 8px;
    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: this host does not link the Blazor scoped-CSS bundle, so a .razor.css file here would be
   inert. 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;
}

.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;
}

.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;
}

.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: #7cc4ff;
    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: #7cc4ff;
    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: #7cc4ff;
    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;
}

/* 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;
}