/* Program C — lap comparison workspace. Plain CSS (no SCSS/DartSass step). Actual = amber, Reference = blue,
   loss (behind) = red, gain (ahead) = green; colour is always paired with sign/label text (accessibility). */

.cmp-workspace { display: flex; flex-direction: column; gap: 12px; color: #e2e8f0; }
/* 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: #0f172a; border: 1px solid #1e293b; font-size: 14px; }
.cmp-workspace__status--error { border-color: #7f1d1d; }
.cmp-workspace__status--unavailable { border-color: #92400e; }

.cmp-workspace__header { display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline; padding: 12px 14px;
  background: #0f172a; border: 1px solid #1e293b; 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: #94a3b8; }
.cmp-metric__v { font-size: 18px; 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: #1e293b; color: #cbd5e1; align-self: center; }

.cmp-workspace__warnings { margin: 0; padding: 8px 14px 8px 30px; font-size: 12px; color: #fcd34d;
  background: rgba(120, 53, 15, .25); border: 1px solid #92400e; 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; }
.cmp-workspace__map { position: sticky; top: 8px; background: #0b1120; border: 1px solid #1e293b; border-radius: 8px; padding: 6px; }
.cmp-workspace__coach { min-width: 0; }
.cmp-workspace__charts { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

@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: #0f172a;
  border: 1px solid #1e293b; 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: #64748b; margin-right: 6px; }
.cmp-focusbar__wholelap, .cmp-focusbar__back { background: none; border: 1px solid #334155; color: #7dd3fc;
  border-radius: 6px; padding: 2px 10px; font-size: 12px; cursor: pointer; }
.cmp-focusbar__wholelap:hover, .cmp-focusbar__back:hover { border-color: #7dd3fc; }
.cmp-focusbar__back { margin-left: auto; }
.cmp-focusbar__current { color: #e2e8f0; font-weight: 600; }

/* coach panel */
.coach-panel { background: #0f172a; border: 1px solid #1e293b; 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: #94a3b8; }
.coach-panel__hint { margin: 0; color: #94a3b8; font-size: 12px; }
.coach-panel__analyze { align-self: flex-start; background: #0369a1; border: 1px solid #0284c7; color: #f0f9ff;
  border-radius: 6px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.coach-panel__analyze:hover { background: #0284c7; }
.coach-panel__status { padding: 8px 10px; border-radius: 6px; background: #0b1120; border: 1px solid #1e293b; font-size: 12px; }
.coach-panel__status--error { border-color: #7f1d1d; }
.coach-panel__status--unavailable { border-color: #92400e; }
.coach-panel__status--clean { border-color: #14532d; color: #86efac; }
.coach-panel__warnings { margin: 0; padding: 6px 10px 6px 26px; font-size: 11px; color: #fcd34d;
  background: rgba(120, 53, 15, .25); border: 1px solid #92400e; border-radius: 6px; }
.coach-panel__summary { margin: 0; font-size: 12px; color: #94a3b8; }
.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: #0b1120;
  border: 1px solid #1e293b; border-radius: 6px; padding: 8px 10px; color: #e2e8f0; }
.coach-finding--row { cursor: pointer; }
.coach-finding--row:hover, .coach-finding--row:focus-visible { border-color: #38bdf8; 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: #94a3b8; }
.coach-finding__loss { margin-left: auto; font-variant-numeric: tabular-nums; color: #f87171; font-weight: 600; }
.coach-finding__severity { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px;
  border-radius: 999px; background: #1e293b; color: #cbd5e1; flex-shrink: 0; }
.coach-finding__severity--critical { background: rgba(239, 68, 68, .25); color: #fca5a5; }
.coach-finding__severity--warning { background: rgba(245, 158, 11, .25); color: #fcd34d; }
.coach-finding__severity--info { background: rgba(56, 189, 248, .18); color: #7dd3fc; }
.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: #cbd5e1; }
.coach-finding__stats { display: flex; gap: 16px; margin: 0; font-size: 11px; }
.coach-finding__stats dt { color: #64748b; 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: #94a3b8; }
.coach-finding__seam { font-size: 10px; color: #a855f7; border: 1px solid #a855f7; 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 #1e293b; 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: #94a3b8; font-variant-numeric: tabular-nums; }
.coach-panel__back { align-self: flex-start; background: none; border: 1px solid #334155; color: #7dd3fc;
  border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; margin-top: 4px; }
.coach-panel__back:hover { border-color: #7dd3fc; }
.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: #0f172a; border: 1px solid #1e293b; 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 #334155; border-radius: 6px; overflow: hidden; }
.vdyn__mode { background: none; border: none; color: #94a3b8; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.vdyn__mode--active { background: #0369a1; color: #f0f9ff; }
.vdyn__empty { padding: 10px; color: #64748b; 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: #1e293b; stroke: #475569; }
.vdyn__glass { fill: #0b1120; }
.vdyn__wheel { fill: #334155; }
.vdyn__dial, .vdyn__gpad { fill: #0b1120; stroke: #334155; }
.vdyn__gpad--off { opacity: .55; }
.vdyn__needle { stroke: #fbbf24; stroke-width: 2.4; stroke-linecap: round; }
.vdyn__arc { fill: none; stroke: #334155; stroke-width: 2; }
.vdyn__yaw-dot { fill: #2dd4bf; }
.vdyn__gaxis { stroke: #1e293b; stroke-width: 1; }
.vdyn__gdot { fill: #fbbf24; }
.vdyn__barframe { fill: #0b1120; stroke: #334155; }
.vdyn__throttle { fill: #4ade80; }
.vdyn__brake { fill: #f87171; }
.vdyn__bar--neg { opacity: .55; stroke: #e2e8f0; stroke-width: .6; stroke-dasharray: 2 1.5; }
.vdyn__label { fill: #64748b; font-size: 8px; text-anchor: middle; }
.vdyn__value { fill: #e2e8f0; font-size: 9px; text-anchor: middle; }
.vdyn__na { fill: #64748b; font-size: 10px; text-anchor: middle; }
.vdyn__stats { display: flex; gap: 16px; margin: 0; font-size: 11px; justify-content: center; }
.vdyn__stats dt { color: #64748b; 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: #fcd34d; }
.vdyn__caveat { margin: 0; font-size: 11px; color: #94a3b8; }
.vdyn__snapshots { display: flex; flex-wrap: wrap; gap: 6px; }
.vdyn__snapshot { background: none; border: 1px solid #334155; color: #cbd5e1; border-radius: 999px;
  padding: 2px 10px; font-size: 11px; cursor: pointer; }
.vdyn__snapshot:hover, .vdyn__snapshot:focus-visible { border-color: #38bdf8; outline: none; }

/* charts */
.cmp-chart { background: #0f172a; border: 1px solid #1e293b; 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: #e2e8f0; font-weight: 600; }
.cmp-chart__unit { color: #64748b; }
.cmp-chart__ref-missing { color: #94a3b8; font-style: italic; margin-left: auto; }
.cmp-chart__readout { margin-left: auto; color: #cbd5e1; font-variant-numeric: tabular-nums; }
.cmp-chart__empty { height: 40px; display: flex; align-items: center; color: #64748b; font-size: 12px; }
.cmp-chart__svg { width: 100%; height: 108px; display: block; }
.cmp-chart__svg:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }

.cmp-chart__primary { fill: none; stroke: #fbbf24; stroke-width: 2; vector-effect: non-scaling-stroke; }
.cmp-chart__reference { fill: none; stroke: #60a5fa; stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.cmp-chart__zero { stroke: #475569; stroke-width: 1; vector-effect: non-scaling-stroke; }
.cmp-chart__loss { fill: rgba(239, 68, 68, .22); stroke: none; }
.cmp-chart__gain { fill: rgba(34, 197, 94, .22); stroke: none; }
.cmp-chart__seam, .cmp-map__seam { stroke: #a855f7; fill: #a855f7; stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.cmp-chart__startfinish { stroke: #64748b; stroke-width: 1; stroke-dasharray: 6 3; vector-effect: non-scaling-stroke; }
.cmp-chart__cursor { stroke: #e2e8f0; 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 white 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 — amber is the driver's own trace, 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. */
.cmp-chart__cursor--pinned { stroke: #ffffff; 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: #e2e8f0; }
.cmp-chart__cursor-dot--pinned { fill: #ffffff; }
/* The pin head: drawn only while pinned, in the top margin where no data goes. */
.cmp-chart__cursor-pin { fill: #ffffff; stroke: #0b1120; 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 */
.cmp-scrubbar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #0f172a;
  border: 1px solid #1e293b; 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 an accent rail on the leading edge make the mode visible peripherally. */
.cmp-scrubbar.is-pinned { border-color: #b45309; background: #1c1508; box-shadow: inset 3px 0 0 0 #fbbf24; }
.cmp-scrubbar__btn { background: #0b1120; border: 1px solid #334155; color: #cbd5e1; border-radius: 6px;
  min-width: 30px; padding: 3px 8px; font-size: 12px; cursor: pointer; font-variant-numeric: tabular-nums; }
.cmp-scrubbar__btn:hover:not(:disabled) { border-color: #7dd3fc; color: #e2e8f0; }
.cmp-scrubbar__btn:disabled { opacity: .4; cursor: default; }
.cmp-scrubbar__clear { margin-left: 4px; color: #7dd3fc; }
/* 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: #b45309; color: #fbbf24; }
.cmp-scrubbar__unpin:hover:not(:disabled) { border-color: #fbbf24; color: #fde68a; }
.cmp-scrubbar__readout { display: inline-flex; align-items: baseline; gap: 8px; margin-left: 4px; flex-wrap: wrap; }
.cmp-scrubbar__frame { color: #e2e8f0; font-weight: 600; font-variant-numeric: tabular-nums; }
.cmp-scrubbar__state { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; }
/* 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: #0f172a; background: #fbbf24; font-weight: 700; border-radius: 4px;
  padding: 1px 6px; }
.cmp-scrubbar__why { color: #fcd34d; font-size: 11px; }
.cmp-scrubbar__hint { color: #64748b; }

/* 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: rgba(148, 163, 184, .08); 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: rgba(252, 211, 77, .10);
  stroke: rgba(252, 211, 77, .28);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.cmp-chart__marker { stroke: var(--cmp-marker, #94a3b8); stroke-width: 1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; opacity: .9; }
.cmp-map__marker { fill: var(--cmp-marker, #94a3b8); stroke: #0b1120; 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: #f87171; }
.cmp-chart__marker--turn-in, .cmp-chart__marker--yaw-onset,
.cmp-map__marker--turn-in, .cmp-map__marker--yaw-onset { --cmp-marker: #38bdf8; }
.cmp-chart__marker--min-speed, .cmp-chart__marker--apex-like,
.cmp-map__marker--min-speed, .cmp-map__marker--apex-like { --cmp-marker: #c084fc; }
.cmp-chart__marker--throttle-pickup, .cmp-chart__marker--full-throttle,
.cmp-map__marker--throttle-pickup, .cmp-map__marker--full-throttle { --cmp-marker: #4ade80; }
.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: #2dd4bf; }

/* map */
.cmp-map__svg { width: 100%; height: auto; display: block; }
.cmp-map__empty { padding: 24px; text-align: center; color: #64748b; font-size: 12px; }
.cmp-map__actual { fill: none; stroke: #fbbf24; stroke-width: 2; vector-effect: non-scaling-stroke; }
.cmp-map__reference { fill: none; stroke: #60a5fa; stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.cmp-map__actual-halo { fill: rgba(251, 191, 36, .3); }
.cmp-map__actual-marker { fill: #fbbf24; }
.cmp-map__ref-marker { fill: #60a5fa; }

/* 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 #1e293b; font-variant-numeric: tabular-nums; }
.cmp-segments th:first-child, .cmp-segments td:first-child { text-align: left; }
.cmp-segments__join td { background: rgba(168, 85, 247, .08); }
.cmp-segments__row { cursor: pointer; }
.cmp-segments__row:hover td { background: rgba(56, 189, 248, .06); }
.cmp-segments__row:focus-visible { outline: 2px solid #38bdf8; outline-offset: -2px; }
.cmp-segments__row--focused td { background: rgba(56, 189, 248, .12); }
.cmp-seam-tag { font-size: 10px; color: #a855f7; margin-left: 6px; }

.cmp-loss { color: #f87171; }
.cmp-gain { color: #4ade80; }

/* markers legend */
.cmp-workspace__legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 6px 10px; list-style: none;
  background: #0f172a; border: 1px solid #1e293b; border-radius: 8px; font-size: 11px; color: #cbd5e1; }
.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, #94a3b8); }

/* 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: #0f172a; border: 1px solid #1e293b; border-radius: 8px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.cmp-cap--empty { color: #94a3b8; }
.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: #94a3b8; 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 #1e293b;
  vertical-align: top; }
.cmp-cap__table thead th { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; }
.cmp-cap__row--refused { color: #94a3b8; }
.cmp-cap__ch { font-weight: 600; white-space: nowrap; }
.cmp-cap__unit { color: #64748b; 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: #64748b; }
.cmp-cap__delta { white-space: nowrap; font-weight: 600; }
.cmp-cap__delta--offered { color: #7dd3fc; }
.cmp-cap__delta--refused { color: #fcd34d; }
.cmp-cap__why { color: #cbd5e1; 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: #94a3b8;
  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: #94a3b8;
}
.cmp-cap__prov-absent {
  display: block;
  margin-top: 4px;
  color: #fcd34d;
}