/* Program C — lap comparison workspace. Plain CSS (no SCSS/DartSass step). Driver = solid --ghostai-series-driver,
   Reference = dashed --ghostai-series-reference, loss (behind) = --ghostai-delta-loss, gain (ahead) =
   --ghostai-delta-gain; colour is always paired with sign/label text (accessibility).

   T136-D: every colour here is a design-system token. This file used to be ~190 dark literals with no light variant,
   so the whole Compare tab stayed dark under the light skin; and it drew the driver amber / the reference blue while
   the Charts and Scene tabs (and the rotation panel below) drew the driver in the accent — the same amber meant
   "driver" in one chart and "reference" in the next. The pair is now the one defined in _ghostai.tokens.scss for
   every lap-bench view. */

.cmp-workspace { display: flex; flex-direction: column; gap: 12px; color: var(--ghostai-color-text-primary); }
/* The workspace is focusable so keyboard frame-stepping (← →) works after clicking anywhere in it, including a chart.
   The moving cursor is the feedback; the interactive children keep their own focus rings, so the container's is off. */
.cmp-workspace:focus { outline: none; }

.cmp-workspace__status { padding: 16px; border-radius: 8px; background: var(--ghostai-color-surface);
  border: 1px solid var(--ghostai-color-border); font-size: 14px; }
.cmp-workspace__status--error { border-color: var(--tds-error-border); }
.cmp-workspace__status--unavailable { border-color: var(--tds-warning-border); }

.cmp-workspace__header { display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline; padding: 12px 14px;
  background: var(--ghostai-color-surface); border: 1px solid var(--ghostai-color-border); border-radius: 8px; }
.cmp-metric { display: flex; flex-direction: column; gap: 2px; }
.cmp-metric__k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ghostai-color-text-muted); }
/* Times and gaps are read against each other: mono, tabular figures (DS rule "numbers"). */
.cmp-metric__v { font-size: 18px; font-family: var(--ghostai-font-numeric); font-variant-numeric: tabular-nums; }
.cmp-metric--delta .cmp-metric__v { font-weight: 600; }
.cmp-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--ghostai-color-surface-2);
  color: var(--ghostai-color-text-secondary); align-self: center; }

.cmp-workspace__warnings { margin: 0; padding: 8px 14px 8px 30px; font-size: 12px; color: var(--tds-warning-text);
  background: var(--tds-warning-bg); border: 1px solid var(--tds-warning-border); border-radius: 8px; }

/* UX Option A (ADR-0024): insight row pairs the map (left) with the Coach panel (right); charts sit below full-width.
   On mobile the row collapses to one column, giving the ordering map → coach → charts → segment table. */
.cmp-workspace__insight { display: grid; grid-template-columns: minmax(300px, 55%) 1fr; gap: 12px; align-items: start; }
/* Offset by the shell header like its neighbours (T80, #2612). It was `top: 8px`, which put the track map behind the
   header for exactly the reason the frame bars were — pre-existing, and the odd one out once the bars were fixed. */
.cmp-workspace__map { position: sticky; top: calc(var(--ghostai-bench-shell-top, 0px) + 8px); background: var(--ghostai-color-bg);
  border: 1px solid var(--ghostai-color-border); border-radius: 8px; padding: 6px; }
.cmp-workspace__coach { min-width: 0; }
.cmp-workspace__charts { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Anything scrolled to by keyboard lands below the sticky frame bar rather than behind it. */
.cmp-workspace__charts > * { scroll-margin-top: calc(var(--ghostai-bench-sticky-top, 0px) + 5rem); }

@media (max-width: 900px) {
  .cmp-workspace__insight { grid-template-columns: 1fr; }
  .cmp-workspace__map { position: static; }
}

/* focus bar: breadcrumb + the always-visible Whole lap return */
.cmp-focusbar { display: flex; align-items: center; gap: 12px; padding: 6px 10px; background: var(--ghostai-color-surface);
  border: 1px solid var(--ghostai-color-border); border-radius: 8px; font-size: 12px; }
.cmp-focusbar__breadcrumb { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cmp-focusbar__breadcrumb li + li::before { content: "›"; color: var(--ghostai-color-text-muted); margin-right: 6px; }
.cmp-focusbar__wholelap, .cmp-focusbar__back { background: none; border: 1px solid var(--tds-border-chrome);
  color: var(--tds-text-link); border-radius: 6px; padding: 2px 10px; font-size: 12px; cursor: pointer; }
.cmp-focusbar__wholelap:hover, .cmp-focusbar__back:hover { border-color: var(--tds-text-link); }
.cmp-focusbar__back { margin-left: auto; }
.cmp-focusbar__current { color: var(--ghostai-color-text-primary); font-weight: 600; }

/* coach panel */
.coach-panel { background: var(--ghostai-color-surface); border: 1px solid var(--ghostai-color-border); border-radius: 8px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.coach-panel__head { display: flex; align-items: baseline; gap: 8px; }
.coach-panel__title { margin: 0; font-size: 14px; }
.coach-panel__meta { margin-left: auto; font-size: 11px; color: var(--ghostai-color-text-muted); }
.coach-panel__hint { margin: 0; color: var(--ghostai-color-text-muted); font-size: 12px; }
.coach-panel__analyze { align-self: flex-start; background: var(--ghostai-color-primary); border: 1px solid var(--ghostai-color-primary);
  color: var(--tds-text-on-accent); border-radius: 6px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.coach-panel__analyze:hover { filter: brightness(1.1); }
.coach-panel__status { padding: 8px 10px; border-radius: 6px; background: var(--ghostai-color-bg);
  border: 1px solid var(--ghostai-color-border); font-size: 12px; }
.coach-panel__status--error { border-color: var(--tds-error-border); }
.coach-panel__status--unavailable { border-color: var(--tds-warning-border); }
.coach-panel__status--clean { border-color: var(--tds-success-border); color: var(--ghostai-color-success); }
.coach-panel__warnings { margin: 0; padding: 6px 10px 6px 26px; font-size: 11px; color: var(--tds-warning-text);
  background: var(--tds-warning-bg); border: 1px solid var(--tds-warning-border); border-radius: 6px; }
.coach-panel__summary { margin: 0; font-size: 12px; color: var(--ghostai-color-text-muted); }
.coach-panel__findings { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.coach-finding { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: var(--ghostai-color-bg);
  border: 1px solid var(--ghostai-color-border); border-radius: 6px; padding: 8px 10px; color: var(--ghostai-color-text-primary); }
.coach-finding--row { cursor: pointer; }
.coach-finding--row:hover, .coach-finding--row:focus-visible { border-color: var(--ghostai-color-accent); outline: none; }
.coach-finding__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.coach-finding__title { font-weight: 600; font-size: 13px; margin: 0; }
.coach-finding__where { font-size: 11px; color: var(--ghostai-color-text-muted); }
.coach-finding__loss { margin-left: auto; font-family: var(--ghostai-font-numeric); font-variant-numeric: tabular-nums;
  color: var(--ghostai-delta-loss); font-weight: 600; }
.coach-finding__severity { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px;
  border-radius: 999px; background: var(--ghostai-color-surface-2); color: var(--ghostai-color-text-secondary); flex-shrink: 0; }
.coach-finding__severity--critical { background: var(--tds-error-bg); color: var(--tds-error-text); }
.coach-finding__severity--warning { background: var(--tds-warning-bg); color: var(--tds-warning-text); }
.coach-finding__severity--info { background: var(--tds-accent-subtle); color: var(--tds-text-link); }
.coach-finding--detail { flex-direction: column; align-items: stretch; gap: 6px; }
.coach-finding__head { display: flex; align-items: center; gap: 8px; }
.coach-finding__message { margin: 0; font-size: 12px; color: var(--ghostai-color-text-secondary); }
.coach-finding__stats { display: flex; gap: 16px; margin: 0; font-size: 11px; }
.coach-finding__stats dt { color: var(--ghostai-color-text-muted); text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
.coach-finding__stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.coach-finding__related { margin: 0; font-size: 11px; color: var(--ghostai-color-text-muted); }
.coach-finding__seam { font-size: 10px; color: var(--ghostai-series-seam); border: 1px solid var(--ghostai-series-seam);
  border-radius: 999px; padding: 1px 6px; }
.coach-evidence { width: 100%; border-collapse: collapse; font-size: 11px; }
.coach-evidence th, .coach-evidence td { text-align: right; padding: 3px 6px; border-bottom: 1px solid var(--ghostai-color-border);
  font-variant-numeric: tabular-nums; }
.coach-evidence th:first-child, .coach-evidence td:first-child { text-align: left; }
.coach-panel__section-head { display: flex; align-items: baseline; gap: 10px; }
.coach-panel__section-gap { margin-left: auto; font-size: 12px; color: var(--ghostai-color-text-muted);
  font-family: var(--ghostai-font-numeric); font-variant-numeric: tabular-nums; }
.coach-panel__back { align-self: flex-start; background: none; border: 1px solid var(--tds-border-chrome); color: var(--tds-text-link);
  border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; margin-top: 4px; }
.coach-panel__back:hover { border-color: var(--tds-text-link); }
.coach-panel__section { display: flex; flex-direction: column; gap: 8px; }

/* vehicle dynamics panel (ADR-0024 §6 limited MVP — truthful channels only) */
.cmp-workspace__coach { display: flex; flex-direction: column; gap: 12px; }
.vdyn { background: var(--ghostai-color-surface); border: 1px solid var(--ghostai-color-border); border-radius: 8px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.vdyn__head { display: flex; align-items: center; gap: 10px; }
.vdyn__title { margin: 0; font-size: 14px; }
.vdyn__modes { margin-left: auto; display: inline-flex; border: 1px solid var(--tds-border-chrome); border-radius: 6px; overflow: hidden; }
.vdyn__mode { background: none; border: none; color: var(--ghostai-color-text-muted); padding: 3px 10px; font-size: 12px; cursor: pointer; }
.vdyn__mode--active { background: var(--ghostai-color-primary); color: var(--tds-text-on-accent); }
.vdyn__empty { padding: 10px; color: var(--ghostai-color-text-muted); font-size: 12px; }
.vdyn__stage { display: flex; flex-direction: column; gap: 6px; }
.vdyn__svg { width: 100%; max-width: 320px; height: auto; align-self: center; display: block; }
.vdyn__body { fill: var(--ghostai-color-surface-2); stroke: var(--ghostai-color-text-muted); }
.vdyn__glass { fill: var(--ghostai-color-bg); }
.vdyn__wheel { fill: var(--tds-border-chrome); }
.vdyn__dial, .vdyn__gpad { fill: var(--ghostai-color-bg); stroke: var(--tds-border-chrome); }
.vdyn__gpad--off { opacity: .55; }
/* The needle and the G dot are the driver's own car: the driver series colour. */
.vdyn__needle { stroke: var(--ghostai-series-driver); stroke-width: 2.4; stroke-linecap: round; }
.vdyn__arc { fill: none; stroke: var(--tds-border-chrome); stroke-width: 2; }
.vdyn__yaw-dot { fill: var(--ghostai-phase-unwind); }
.vdyn__gaxis { stroke: var(--ghostai-color-border); stroke-width: 1; }
.vdyn__gdot { fill: var(--ghostai-series-driver); }
.vdyn__barframe { fill: var(--ghostai-color-bg); stroke: var(--tds-border-chrome); }
.vdyn__throttle { fill: var(--ghostai-channel-throttle); }
.vdyn__brake { fill: var(--ghostai-channel-brake); }
.vdyn__bar--neg { opacity: .55; stroke: var(--ghostai-color-text-primary); stroke-width: .6; stroke-dasharray: 2 1.5; }
.vdyn__label { fill: var(--ghostai-color-text-muted); font-size: 8px; text-anchor: middle; }
.vdyn__value { fill: var(--ghostai-color-text-primary); font-size: 9px; text-anchor: middle; }
.vdyn__na { fill: var(--ghostai-color-text-muted); font-size: 10px; text-anchor: middle; }
.vdyn__stats { display: flex; gap: 16px; margin: 0; font-size: 11px; justify-content: center; }
.vdyn__stats dt { color: var(--ghostai-color-text-muted); text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
.vdyn__stats dd { margin: 0; font-variant-numeric: tabular-nums; text-align: center; }
.vdyn__gear--mismatch { color: var(--tds-warning-text); }
.vdyn__caveat { margin: 0; font-size: 11px; color: var(--ghostai-color-text-muted); }
.vdyn__snapshots { display: flex; flex-wrap: wrap; gap: 6px; }
.vdyn__snapshot { background: none; border: 1px solid var(--tds-border-chrome); color: var(--ghostai-color-text-secondary);
  border-radius: 999px; padding: 2px 10px; font-size: 11px; cursor: pointer; }
.vdyn__snapshot:hover, .vdyn__snapshot:focus-visible { border-color: var(--ghostai-color-accent); outline: none; }

/* charts */
.cmp-chart { background: var(--ghostai-color-surface); border: 1px solid var(--ghostai-color-border); border-radius: 8px; padding: 6px 8px; }
.cmp-chart--unavailable { opacity: .8; }
.cmp-chart__head { display: flex; gap: 8px; align-items: baseline; font-size: 12px; margin-bottom: 2px; }
.cmp-chart__label { color: var(--ghostai-color-text-primary); font-weight: 600; }
.cmp-chart__unit { color: var(--ghostai-color-text-muted); }
.cmp-chart__ref-missing { color: var(--ghostai-color-text-muted); font-style: italic; margin-left: auto; }
.cmp-chart__readout { margin-left: auto; color: var(--ghostai-color-text-secondary); font-family: var(--ghostai-font-numeric); font-variant-numeric: tabular-nums;
  font-variant-numeric: tabular-nums; }
.cmp-chart__empty { height: 40px; display: flex; align-items: center; color: var(--ghostai-color-text-muted); font-size: 12px; }
.cmp-chart__svg { width: 100%; height: 108px; display: block; }
.cmp-chart__svg:focus-visible { outline: 2px solid var(--ghostai-color-accent); outline-offset: 2px; }

.cmp-chart__primary { fill: none; stroke: var(--ghostai-series-driver); stroke-width: 2; vector-effect: non-scaling-stroke; }
.cmp-chart__reference { fill: none; stroke: var(--ghostai-series-reference); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.cmp-chart__zero { stroke: var(--ghostai-color-text-muted); stroke-opacity: .6; stroke-width: 1; vector-effect: non-scaling-stroke; }
.cmp-chart__loss { fill: var(--ghostai-delta-loss-fill); stroke: none; }
.cmp-chart__gain { fill: var(--ghostai-delta-gain-fill); stroke: none; }
.cmp-chart__seam, .cmp-map__seam { stroke: var(--ghostai-series-seam); fill: var(--ghostai-series-seam); stroke-width: 1;
  stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.cmp-chart__startfinish { stroke: var(--ghostai-color-text-muted); stroke-width: 1; stroke-dasharray: 6 3; vector-effect: non-scaling-stroke; }
.cmp-chart__cursor { stroke: var(--ghostai-chart-cursor); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* A pinned selection reads as a solid committed line; a hover preview is lighter and dashed.

   The two used to differ by #e2e8f0-dashed against #f8fafc-solid at 1.5px — two near-white lines on a dark chart,
   a distinction that survives a side-by-side screenshot comparison and nothing else. A pin is a MODE (the pointer
   stops moving the selection) and has to be legible at a glance.

   The difference is deliberately in FORM, not hue: full-strength against dimmed, solid against dashed, twice the
   weight, and a pin head at the top of the line that the hover cursor does not draw at all. Every hue on this chart
   is already spent on data — the accent is the driver's own trace, the lighter blue the reference, purple the seams,
   red/green the gap fills, and five more on the markers — so a coloured cursor would not read as a mode, it would
   read as one more channel. The cursor is the text colour: white on the dark skin, ink on the light one. */
.cmp-chart__cursor--pinned { stroke: var(--ghostai-chart-cursor); stroke-width: 2; opacity: 1; }
.cmp-chart:not(:has(.cmp-chart__cursor--pinned)) .cmp-chart__cursor { stroke-dasharray: 3 2; opacity: .7; }
.cmp-chart__cursor-dot { fill: var(--ghostai-chart-cursor); opacity: .85; }
.cmp-chart__cursor-dot--pinned { fill: var(--ghostai-chart-cursor); opacity: 1; }
/* The pin head: drawn only while pinned, in the top margin where no data goes. */
.cmp-chart__cursor-pin { fill: var(--ghostai-chart-cursor); stroke: var(--ghostai-color-bg); stroke-width: .5; }
/* The whole charts stack is one scrub surface — and while a pin holds it, the pointer says so where the hand is:
   crosshair means "your movement picks the frame", and it stops being true the moment something is pinned. */
.cmp-workspace__charts { cursor: crosshair; }
.cmp-workspace__charts.is-pinned { cursor: pointer; }

/* frame scrub toolbar

   Sticky (T80, #2612). This bar is the only way out of a pin, and it sat above a chart column several thousand pixels
   tall: a driver reading the bottom trace had to scroll back past every chart to reach Unpin, which is
   indistinguishable from there being no Unpin. Document and tab order are unchanged — only where it is painted.

   `--ghostai-bench-sticky-top` is how it clears the pair caption, which is itself sticky at the top of this tab and
   was written when nothing else was. The value is an approximation of that caption's height and it is allowed to be
   slightly wrong: the z-index below puts THIS bar on top, so an off-by-a-few-pixels offset covers a caption rather
   than burying a control. */
.cmp-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; background: var(--ghostai-color-surface);
  border: 1px solid var(--ghostai-color-border); 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. Border, tint and a caution-coloured rail on the leading edge make the mode visible
   peripherally. The tint is mixed over the opaque surface because the bar is sticky and content scrolls under it. */
.cmp-scrubbar.is-pinned { border-color: var(--ghostai-color-warning);
  background: color-mix(in srgb, var(--ghostai-color-warning) 12%, var(--ghostai-color-surface));
  box-shadow: inset 3px 0 0 0 var(--ghostai-color-warning); }
/* 44 CSS px each way — WCAG 2.5.5. Unpin and Clear are the way out of a mode, and the drawn pin head on the chart is
   a few pixels across; it must not be the only target that releases a pin. */
.cmp-scrubbar__btn { background: var(--ghostai-color-bg); border: 1px solid var(--tds-border-chrome); color: var(--ghostai-color-text-secondary);
  border-radius: 6px; min-width: 44px; min-height: 44px; padding: 3px 10px; font-size: 12px; cursor: pointer;
  font-variant-numeric: tabular-nums; }
.cmp-scrubbar__btn:hover:not(:disabled) { border-color: var(--tds-text-link); color: var(--ghostai-color-text-primary); }
.cmp-scrubbar__btn:disabled { opacity: .4; cursor: default; }
.cmp-scrubbar__clear { margin-left: 4px; color: var(--tds-text-link); }
/* The way out of the mode, styled as the primary action of the bar it appears in — it only exists while pinned. */
.cmp-scrubbar__unpin { margin-left: auto; border-color: var(--ghostai-color-warning); color: var(--ghostai-color-warning); }
.cmp-scrubbar__unpin:hover:not(:disabled) { border-color: var(--ghostai-color-warning); color: var(--ghostai-color-text-primary); }
.cmp-scrubbar__readout { display: inline-flex; align-items: baseline; gap: 8px; margin-left: 4px; flex-wrap: wrap; }
.cmp-scrubbar__frame { color: var(--ghostai-color-text-primary); font-weight: 600; font-family: var(--ghostai-font-numeric); font-variant-numeric: tabular-nums;
  font-variant-numeric: tabular-nums; }
.cmp-scrubbar__state { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ghostai-color-text-muted); }
/* Not colour alone: the pinned state keeps its word, gains a chip and is the only one with a sentence after it. */
.cmp-scrubbar__state--pinned { color: var(--ghostai-color-bg); background: var(--ghostai-color-warning); font-weight: 700;
  border-radius: 4px; padding: 1px 6px; }
.cmp-scrubbar__why { color: var(--tds-warning-text); font-size: 11px; }
.cmp-scrubbar__hint { color: var(--ghostai-color-text-muted); }

/* corner bands + re-based reference markers (Program C completion). Colour is only a hint — every marker carries a
   <title> label so the phase is never conveyed by colour alone. */
.cmp-chart__corner { fill: color-mix(in srgb, var(--ghostai-color-text-muted) 8%, transparent); stroke: none; }
/* No data of the driver's own here — the trace across this band is a held value, not a measurement. Hatched rather
   than merely tinted so it does not read as one more corner window, and warm-toned because it is a caveat. */
.cmp-chart__held {
  fill: color-mix(in srgb, var(--ghostai-color-warning) 10%, transparent);
  stroke: color-mix(in srgb, var(--ghostai-color-warning) 28%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.cmp-chart__marker { stroke: var(--cmp-marker, var(--ghostai-color-text-muted)); stroke-width: 1; stroke-dasharray: 3 2;
  vector-effect: non-scaling-stroke; opacity: .9; }
.cmp-map__marker { fill: var(--cmp-marker, var(--ghostai-color-text-muted)); stroke: var(--ghostai-color-bg); stroke-width: .5; }

.cmp-chart__marker--brake-start, .cmp-chart__marker--brake-peak, .cmp-chart__marker--brake-release-start,
.cmp-chart__marker--brake-release-end, .cmp-map__marker--brake-start, .cmp-map__marker--brake-peak,
.cmp-map__marker--brake-release-start, .cmp-map__marker--brake-release-end { --cmp-marker: var(--ghostai-phase-brake); }
.cmp-chart__marker--turn-in, .cmp-chart__marker--yaw-onset,
.cmp-map__marker--turn-in, .cmp-map__marker--yaw-onset { --cmp-marker: var(--ghostai-phase-turn-in); }
.cmp-chart__marker--min-speed, .cmp-chart__marker--apex-like,
.cmp-map__marker--min-speed, .cmp-map__marker--apex-like { --cmp-marker: var(--ghostai-phase-apex); }
.cmp-chart__marker--throttle-pickup, .cmp-chart__marker--full-throttle,
.cmp-map__marker--throttle-pickup, .cmp-map__marker--full-throttle { --cmp-marker: var(--ghostai-phase-throttle); }
.cmp-chart__marker--steering-unwind-start, .cmp-chart__marker--steering-unwind-end,
.cmp-map__marker--steering-unwind-start, .cmp-map__marker--steering-unwind-end { --cmp-marker: var(--ghostai-phase-unwind); }

/* map */
.cmp-map__svg { width: 100%; height: auto; display: block; }
.cmp-map__empty { padding: 24px; text-align: center; color: var(--ghostai-color-text-muted); font-size: 12px; }
.cmp-map__actual { fill: none; stroke: var(--ghostai-series-driver); stroke-width: 2; vector-effect: non-scaling-stroke; }
.cmp-map__reference { fill: none; stroke: var(--ghostai-series-reference); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.cmp-map__actual-halo { fill: color-mix(in srgb, var(--ghostai-series-driver) 30%, transparent); }
.cmp-map__actual-marker { fill: var(--ghostai-series-driver); }
/* Hollow like the Charts map's reference car, so where the two coincide the driver's solid marker reads on top. */
.cmp-map__ref-marker { fill: var(--ghostai-color-bg); stroke: var(--ghostai-series-reference); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* segment table */
.cmp-workspace__segments { overflow-x: auto; }
.cmp-segments { width: 100%; border-collapse: collapse; font-size: 12px; }
.cmp-segments th, .cmp-segments td { text-align: right; padding: 4px 8px; border-bottom: 1px solid var(--ghostai-color-border);
  font-variant-numeric: tabular-nums; }
.cmp-segments th:first-child, .cmp-segments td:first-child { text-align: left; }
.cmp-segments__join td { background: color-mix(in srgb, var(--ghostai-series-seam) 8%, transparent); }
.cmp-segments__row { cursor: pointer; }
.cmp-segments__row:hover td { background: var(--tds-row-hover); }
.cmp-segments__row:focus-visible { outline: 2px solid var(--ghostai-color-accent); outline-offset: -2px; }
.cmp-segments__row--focused td { background: var(--tds-row-selected); }
.cmp-seam-tag { font-size: 10px; color: var(--ghostai-series-seam); margin-left: 6px; }

.cmp-loss { color: var(--ghostai-delta-loss); }
.cmp-gain { color: var(--ghostai-delta-gain); }

/* markers legend */
.cmp-workspace__legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 6px 10px; list-style: none;
  background: var(--ghostai-color-surface); border: 1px solid var(--ghostai-color-border); border-radius: 8px; font-size: 11px;
  color: var(--ghostai-color-text-secondary); }
.cmp-legend__item { display: inline-flex; align-items: center; }
.cmp-legend__swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px;
  background: var(--cmp-marker, var(--ghostai-color-text-muted)); }

/* two-sided capability panel (#1407): per channel, what each lap carries and whether a difference is offered.
   A refused difference is styled as a statement (muted row + explicit words), never as an empty cell. */
.cmp-cap { background: var(--ghostai-color-surface); border: 1px solid var(--ghostai-color-border); border-radius: 8px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.cmp-cap--empty { color: var(--ghostai-color-text-muted); }
.cmp-cap__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.cmp-cap__title { margin: 0; font-size: 14px; }
.cmp-cap__summary { margin: 0 0 0 auto; color: var(--ghostai-color-text-muted); font-size: 11px; }
.cmp-cap__scroll { overflow-x: auto; }
.cmp-cap__table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cmp-cap__table th, .cmp-cap__table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--ghostai-color-border);
  vertical-align: top; }
.cmp-cap__table thead th { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--ghostai-color-text-muted); }
.cmp-cap__row--refused { color: var(--ghostai-color-text-muted); }
.cmp-cap__ch { font-weight: 600; white-space: nowrap; }
.cmp-cap__unit { color: var(--ghostai-color-text-muted); font-weight: 400; margin-left: 4px; }
.cmp-cap__side { white-space: nowrap; }
.cmp-cap__state { display: block; }
.cmp-cap__meta { display: block; font-size: 10px; color: var(--ghostai-color-text-muted); }
.cmp-cap__delta { white-space: nowrap; font-weight: 600; }
.cmp-cap__delta--offered { color: var(--tds-text-link); }
.cmp-cap__delta--refused { color: var(--tds-warning-text); }
.cmp-cap__why { color: var(--ghostai-color-text-secondary); min-width: 220px; }

/* Administrator-only evidence disclosure (#1437): the 16-row table is engineering evidence, so it folds away behind a
   control instead of occupying the page. The driver-facing count above it stays, and the per-channel reason now rides
   on each chart's own "Reference unavailable" label. */
.cmp-cap__evidence-summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--ghostai-color-text-muted);
  list-style: none;
}
.cmp-cap__evidence-summary::-webkit-details-marker { display: none; }
.cmp-cap__evidence-summary::before { content: "▸ "; }
.cmp-cap__evidence[open] > .cmp-cap__evidence-summary::before { content: "▾ "; }
.cmp-cap__evidence[open] > .cmp-cap__evidence-summary { margin-bottom: 6px; }

/* Rotation from corner entry: which reference the Synthetic series was read from, and what that build proves about
   its own capture continuity. Sits under the evidence table because it answers "which one was it?" rather than
   "how did I drive?" — the same reason the table itself is behind the disclosure. */
.cmp-cap__prov {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ghostai-color-text-muted);
}
.cmp-cap__prov-absent {
  display: block;
  margin-top: 4px;
  color: var(--tds-warning-text);
}

/* Rotation from corner entry, actual against the exact selected Synthetic Lap (#2471 AC-4). One chart per accepted
   corner, two curves on it. The two sides are told apart by colour AND by dash, never by colour alone: the same rule
   the gap traces above follow, and the only one that survives a monochrome print or a red-green reader. Same pair as
   the charts above (T136-D): it used to draw the driver cyan and the reference amber, one panel below a chart that
   drew the driver amber. */
.rfec {
  margin-top: 12px;
  border: 1px solid var(--ghostai-color-border);
  border-radius: 6px;
  padding: 8px 10px;
}
.rfec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.rfec__title {
  margin: 0;
  font-size: 13px;
  color: var(--ghostai-color-text-primary);
}
.rfec__units {
  font-size: 11px;
  color: var(--ghostai-color-text-muted);
  font-variant-numeric: tabular-nums;
}
.rfec__corner {
  margin-top: 10px;
}
.rfec__corner-title {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--ghostai-color-text-secondary);
}
.rfec__svg {
  width: 100%;
  height: 120px;
  display: block;
}
.rfec__zero {
  stroke: var(--ghostai-color-text-muted);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.rfec__curve {
  fill: none;
  stroke-width: 1.6;
}
.rfec__curve--actual {
  stroke: var(--ghostai-series-driver);
}
.rfec__curve--reference {
  stroke: var(--ghostai-series-reference);
  stroke-dasharray: 5 3;
}
.rfec__phase {
  fill: color-mix(in srgb, var(--ghostai-color-text-muted) 7%, transparent);
}
.rfec__phase--mid {
  fill: color-mix(in srgb, var(--ghostai-color-accent) 8%, transparent);
}
.rfec__sides {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 4px 0 0;
  font-size: 11px;
}
.rfec__side {
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.rfec__side-label {
  color: var(--ghostai-color-text-muted);
}
.rfec__side-label::before {
  content: "— ";
  font-weight: 700;
}
.rfec__side--reference .rfec__side-label::before {
  content: "- - ";
  color: var(--ghostai-series-reference);
}
.rfec__side--actual .rfec__side-label::before {
  color: var(--ghostai-series-driver);
}
.rfec__side-value {
  margin: 0;
  color: var(--ghostai-color-text-primary);
  font-family: var(--ghostai-font-numeric);
  font-variant-numeric: tabular-nums;
}
/* A side whose samples ran out mid-corner. Muted rather than alarming: the curve is real, it is just not all of
   the corner. */
.rfec__side-truncated {
  margin: 0;
  color: var(--ghostai-color-text-muted);
  font-size: 0.75rem;
}
/* A refused side is stated in the same row as a drawn one, so the asymmetry reads as a fact about this corner
   rather than as a missing half of the chart. */
.rfec__side-unavailable {
  margin: 0;
  color: var(--tds-warning-text);
}