/* Incident review (Admin, Race control, Incident review). Driver A is always
   --tel-lap-a (blue), driver B always --tel-lap-b (orange): the telemetry
   viewer's pair, which reads apart for red-green colour blindness. */

/* Pedal colours, the same on the charts, the readouts and the top-down
   graphic: green throttle, crimson brake (bluer and darker than driver B's
   orange so the two do not read as one). Always paired with THR / BRK. */
.incident-review { --pedal-throttle: #2fd27a; --pedal-brake: #e8263f; --ir-a: var(--tel-lap-a); --ir-b: var(--tel-lap-b); display: grid; gap: 1rem; min-width: 0; }
.incident-review > * { min-width: 0; }
.incident-review .btn { min-height: 44px; }
.incident-review .btn-sm { min-height: 36px; }
.incident-review .ir-a { color: var(--ir-a); }
.incident-review .ir-b { color: var(--ir-b); }

/* ---- the header facts (top of the rail on desktop) ---- */
.ir-head { display: grid; gap: .3rem; }
.ir-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; }
.ir-nav-step { display: flex; gap: .4rem; }
.ir-title { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.75rem; line-height: 1.1; }
.ir-where { color: var(--ink-muted); font-size: .875rem; }
.ir-drivers { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: 1rem; }
.ir-driver { display: inline-flex; align-items: center; gap: .4rem; }
.ir-driver-a strong { color: var(--ir-a); }
.ir-driver-b strong { color: var(--ir-b); }
.ir-driver-meta { color: var(--ink-muted); font-size: .875rem; }
.ir-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; flex: none; }
.ir-driver-a .ir-swatch, .ir-camera-a .ir-swatch, .ir-swatch-a { background: var(--ir-a); }
/* B's swatch is a ring, not a fill, so the two read apart without colour. */
.ir-driver-b .ir-swatch, .ir-camera-b .ir-swatch, .ir-swatch-b { background: transparent; border: 3px solid var(--ir-b); }
.ir-others { color: var(--ink-muted); font-size: .875rem; }
.ir-who { display: grid; gap: .1rem; font-size: .9375rem; font-weight: 600; }
.ir-empty { color: var(--ink-muted); padding: 1rem; }

/* ---- video: one player, a camera switch ---- */
.ir-video-cell { display: flex; flex-direction: column; gap: .35rem; min-width: 0; min-height: 0; }
.ir-camera { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.ir-camera-label { color: var(--ink-muted); font-size: .8125rem; margin-right: .15rem; }
.ir-camera-btn.is-chosen { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.ir-sync-note { color: var(--warm); font-size: .8125rem; }
.ir-unsynced-tag { margin-left: .35rem; font-size: .6875rem; font-weight: 600; color: var(--ink-muted); border: 1px solid var(--edge-strong); border-radius: 2px; padding: 0 .3rem; }
.ir-transport-sub { justify-content: space-between; flex-wrap: wrap; gap: .25rem .75rem; }
.ir-fine-sync { display: flex; align-items: center; gap: .3rem; }
.ir-fine-sync[hidden] { display: none; }
.ir-fine-sync .btn { min-height: 28px; padding: .15rem .5rem; font-size: .75rem; }
.ir-shift { font-size: .75rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ir-video-box { position: relative; flex: none; width: 100%; aspect-ratio: var(--ir-video-aspect, 16 / 9); max-width: 100%; margin-inline: auto; background: #000; border-radius: var(--radius); overflow: hidden; }
.ir-player { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.ir-player[hidden] { display: none; }

/* ---- track view ---- */
.ir-track-cell { min-width: 0; min-height: 0; display: flex; position: relative; }
.ir-view-switch { position: absolute; right: 10px; bottom: 40px; display: flex; gap: 4px; z-index: 2; }
.ir-view-switch .btn { min-height: 32px; padding: .25rem .6rem; background: rgba(8,9,11,.8); }
.ir-view-note:empty { display: none; }
.ir-view-note { position: absolute; left: 10px; bottom: 66px; color: var(--warm); font-size: .8125rem; background: rgba(8,9,11,.8); padding: .2rem .5rem; border-radius: 3px; }
.ir-topdown canvas[hidden] { display: none; }
.ir-3d { position: absolute; inset: 0; border-radius: var(--radius); overflow: hidden; background: #0d1014; }
.ir-3d[hidden] { display: none; }
.ir-3d canvas { display: block; touch-action: none; }
.ir-3d-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ir-3d-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ir-3d-tag { position: absolute; left: 0; top: 0; padding: 1px 6px 1px 5px; font: 700 11px var(--font-text); color: #f2f4f6; background: rgba(8,9,11,.82); border-left: 3px solid #888; border-radius: 3px; white-space: nowrap; transition: opacity .15s; }
.ir-3d-tag.is-other { font-size: 10px; font-weight: 600; color: #c9ced5; border-left-color: #6b727b; }
.ir-3d-badge { margin-left: 6px; padding: 0 5px; border-radius: 2px; background: #ff4a3d; color: #0b0c0e; font: 800 11px var(--font-text); }
.ir-3d-badge.is-off { background: #e5b567; }
.ir-3d-badge[hidden] { display: none; }
.ir-3d-chips { position: absolute; left: 8px; top: 8px; display: flex; flex-wrap: nowrap; gap: 6px; max-width: calc(100% - 16px); overflow: hidden; }
.ir-3d-chip-group { display: flex; flex: none; border-radius: 4px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); background: rgba(8,9,11,.72); }
.ir-3d-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 2px 8px; border: 0; background: transparent; color: #c9ced5; font: 600 11px var(--font-text); cursor: pointer; }
.ir-3d-chip + .ir-3d-chip { border-left: 1px solid rgba(255,255,255,.12); }
.ir-3d-chip.is-chosen { background: rgba(188,235,33,.18); color: #f2f4f6; box-shadow: inset 0 -2px 0 var(--accent); }
.ir-3d-chip:disabled { opacity: .45; cursor: default; }
.ir-3d-chip .ir-swatch { width: 8px; height: 8px; }
.ir-3d-chip-text { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ir-3d-reset { flex: none; border: 1px solid rgba(255,255,255,.18); border-radius: 4px; background: rgba(8,9,11,.72); }
.ir-3d-reset[hidden] { display: none; }
.ir-3d-fps[hidden] { display: none; }
.ir-3d-presets { position: absolute; left: 8px; top: 8px; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 16px); }
.ir-3d-presets .btn { min-height: 30px; padding: .2rem .55rem; font-size: .75rem; background: rgba(8,9,11,.8); }
.ir-3d-preset.is-chosen { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.ir-3d-note { position: absolute; left: 8px; bottom: 8px; font-size: .75rem; color: #c9ced5; background: rgba(8,9,11,.78); padding: .15rem .5rem; border-radius: 3px; }
.ir-3d-note[hidden] { display: none; }
.ir-3d-fps { position: absolute; right: 8px; top: 8px; font-size: .6875rem; color: #6b727b; }
.ir-view-btn.is-chosen { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.ir-topdown { flex: 1; min-width: 0; min-height: 0; position: relative; }
.ir-topdown-canvas { display: block; width: 100%; border-radius: var(--radius); }

/* ---- transport ---- */
.ir-transport { display: grid; gap: .2rem; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius); padding: .4rem .6rem; }
.ir-transport-row { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.ir-transport .ir-play { min-width: 4.5rem; }
.ir-time { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 4.6rem; text-align: center; }
.ir-scrub { position: relative; flex: 1; min-width: 80px; display: flex; align-items: center; }
.ir-scrubber { flex: 1; width: 100%; min-width: 80px; min-height: 36px; accent-color: var(--accent); }
.ir-ticks { position: absolute; left: 8px; right: 8px; top: 0; height: 9px; pointer-events: none; }
.ir-tick { position: absolute; top: 0; width: 9px; height: 9px; margin-left: -4.5px; padding: 0; border: 0; border-radius: 2px; background: #ff4a3d; cursor: pointer; pointer-events: auto; }
.ir-tick.is-off { background: #e5b567; }
.ir-tick.is-other { opacity: .6; }
.ir-angle-note { position: absolute; left: 10px; bottom: 40px; margin: 0; font-size: .75rem; color: #c9ced5; background: rgba(8,9,11,.75); padding: .15rem .5rem; border-radius: 3px; pointer-events: none; }
.ir-rates { display: flex; gap: .25rem; }
.ir-rate.is-chosen { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.ir-readout { display: flex; flex-wrap: nowrap; gap: 0 1.1rem; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-size: .8125rem; font-variant-numeric: tabular-nums; min-height: 1.2rem; color: var(--ink-muted); }
.ir-readout > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.ir-transport-sub { flex-wrap: nowrap !important; }
.ir-readout-when { display: none; }

/* ---- charts: labels sit in the left gutter ---- */
.ir-charts-cell { min-width: 0; min-height: 0; overflow-y: auto; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius); padding: .25rem .25rem 0; }
.ir-charts { display: grid; gap: 2px; min-width: 0; }
.ir-chart { position: relative; }
.ir-chart-label { position: absolute; left: 4px; top: 2px; z-index: 1; max-width: 64px; font-size: .6875rem; line-height: 1.15; color: var(--ink-muted); display: flex; align-items: flex-start; gap: .25rem; pointer-events: none; }
.ir-chart-label .ir-swatch { width: 8px; height: 8px; margin-top: 2px; }
.ir-chart-label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ir-sync-details { position: relative; }
.ir-sync-details > summary { list-style: none; cursor: pointer; min-height: 28px; padding: .15rem .55rem; font-size: .75rem; }
.ir-sync-details > summary::-webkit-details-marker { display: none; }
.ir-sync-details[open] > .ir-fine-sync { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 6; background: var(--surface); border: 1px solid var(--edge-strong); border-radius: var(--radius); padding: .4rem; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.ir-contact-line, .ir-playhead { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; }
.ir-contact-line { border-left: 2px dashed var(--danger); }
.ir-playhead { border-left: 2px solid var(--ink); }

/* ---- rail ---- */
.ir-rail { display: grid; gap: .75rem; align-content: start; min-width: 0; }
.ir-side { display: grid; gap: .75rem; min-width: 0; }
.ir-side .ir-ruling-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Desktop: one screen, no page scroll. The workspace takes the viewport
   height under the app's own header (the script sets --ir-top from where the
   workspace starts); panels shrink to fit. */
.ir-workspace { width: 100%; max-width: 2400px; margin-inline: auto; }
.ir-workspace > *, .ir-rail > * { min-width: 0; }
.ir-charts-cell, .ir-track-cell, .ir-video-cell { overflow: hidden; }
.ir-rail .ir-where, .ir-rail .ir-drivers, .ir-rail .ir-who { overflow-wrap: anywhere; }
.ir-rail .btn { white-space: normal; }
@media (min-width: 1100px) {
  .ir-workspace {
    display: grid; gap: .6rem; height: calc(100dvh - var(--ir-top, 120px) - 12px); min-height: 560px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) clamp(320px, 22vw, 360px);
    grid-template-rows: minmax(0, 1fr) auto clamp(200px, 27vh, 268px);
    grid-template-areas: "video track rail" "transport transport rail" "charts charts rail";
  }
  .ir-video-cell { grid-area: video; }
  .ir-track-cell { grid-area: track; }
  .ir-transport { grid-area: transport; }
  .ir-charts-cell { grid-area: charts; }
  .ir-rail { grid-area: rail; overflow-y: auto; min-height: 0; padding-right: 2px; }
  /* Old clips are very wide strips (1920x264): give the video the full width
     at its own height and the track view the rest of the row height. */
  .ir-workspace.is-strip {
    grid-template-rows: auto minmax(0, 1fr) auto clamp(200px, 27vh, 268px);
    grid-template-areas: "video video rail" "track track rail" "transport transport rail" "charts charts rail";
  }
  .ir-workspace.is-strip .ir-video-box { max-height: 24vh; }
  .ir-workspace.is-wide:not(.is-strip) { grid-template-rows: auto auto minmax(0, 1fr); }
  .ir-workspace.is-wide .ir-video-cell { justify-content: flex-start; }
  .ir-rail .btn.ir-rule { min-height: 52px; font-size: 1rem; }
}

/* Narrow: one column, transport stuck to the bottom of the viewport. */
@media (max-width: 1099px) {
  .ir-workspace { display: flex; flex-direction: column; gap: .75rem; }
  .ir-rail { display: contents; }
  .ir-head { order: 0; }
  .ir-video-cell { order: 1; }
  .ir-video-box { aspect-ratio: 16 / 9; flex: none; }
  .ir-transport { order: 2; position: sticky; top: 0; bottom: 0; z-index: 5; box-shadow: 0 -6px 16px rgba(0,0,0,.45); }
  .ir-track-cell { order: 3; height: min(70vh, 460px); }
  .ir-charts-cell { order: 4; overflow: visible; }
  .ir-side { order: 5; }
  .ir-rates .ir-rate:not(.is-chosen) { padding-inline: .5rem; }
  .ir-transport-row { flex-wrap: wrap; }
  .ir-angle-note { bottom: 84px; right: 10px; }
  .ir-transport .ir-scrub { order: 5; flex-basis: 100%; }
  .ir-rates { margin-left: auto; }
}

.ir-ruling { display: grid; gap: .75rem; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius); padding: .75rem; }
.ir-ruling-head { display: flex; align-items: baseline; gap: .75rem; }
.ir-ruling-head h2 { font-size: 1.25rem; font-weight: 700; }
.ir-saved { color: var(--pb); font-weight: 700; }
.ir-ruling-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.btn.ir-rule { min-height: 64px; font-size: 1.0625rem; white-space: normal; text-align: center; }
.btn.ir-rule-a { border-left: 6px solid var(--ir-a); }
.btn.ir-rule-b { border-left: 6px solid var(--ir-b); }
.btn.ir-rule.is-chosen { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 2px var(--accent-ink) inset; }
.btn.ir-rule.is-chosen:hover { background: var(--accent-hover); }
.ir-ai-pending { color: var(--ink-muted); }
.ir-note { display: grid; gap: .5rem; justify-items: start; }
.ir-note textarea { width: 100%; min-height: 44px; padding: 10px 12px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--edge-strong); border-radius: var(--radius); }
.ir-ai { padding: 1rem; display: grid; gap: .35rem; border-color: var(--accent-edge); }
.ir-ai-label { font-size: 1rem; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.ir-ai-ruling { font-size: 1.5rem; font-weight: 700; font-family: var(--font-display); }
.ir-match.is-same { color: var(--pb); }
.ir-match.is-different { color: var(--warm); }
.ir-ai-banner { padding: .75rem 1rem; border-radius: var(--radius); border: 1px solid; border-left-width: 6px; }
.ir-ai-banner-head { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.ir-ai-banner-kind { font-size: .9375rem; font-weight: 600; }
.ir-ai-banner.is-agrees { color: var(--pb); border-color: var(--pb); background: color-mix(in srgb, var(--pb) 14%, var(--surface)); }
.ir-ai-banner.is-disagrees { color: var(--warm); border-color: var(--warm); background: color-mix(in srgb, var(--warm) 14%, var(--surface)); }
.ir-ai-rule { color: var(--ink-muted); }
.ir-last-changed { margin-left: auto; font-size: .8125rem; color: var(--ink-muted); }
.ir-ai-wrap { display: grid; gap: .75rem; }
.ir-ask-again { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; margin-top: .25rem; }
.ir-ask-reason { font-size: .875rem; color: var(--ink-muted); }
.ir-versions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem 1rem; margin-top: 1rem; }
.ir-run-count { font-size: .875rem; color: var(--ink-muted); }
.ir-next .btn { width: 100%; }
.btn.ir-big { min-height: 56px; font-size: 1.125rem; padding-inline: 2.5rem; }

.ir-facts summary { cursor: pointer; padding: 1rem; font-weight: 700; }
.ir-facts ul { padding: 0 1rem 1rem 2rem; list-style: disc; display: grid; gap: .35rem; }
.ir-unknown { color: var(--ink-muted); }

.ir-tally { font-size: 1.125rem; }
.ir-list { list-style: none; padding: 0; }
.ir-row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 30rem) auto; gap: .75rem; align-items: center; padding: .75rem 1rem; border-top: 1px solid var(--edge); }
.ir-row:first-child { border-top: 0; }
.ir-row-n { font-weight: 700; color: var(--ink-muted); }
.ir-row-where { color: var(--ink-muted); font-size: .875rem; }
.ir-row-rulings { font-size: .9375rem; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }
.ir-match { font-weight: 700; font-size: .875rem; }
.ir-race-row { grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 30rem) auto; }
.ir-race-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.ir-race-failed { color: var(--warm); overflow-wrap: anywhere; }

@media (max-width: 700px) {
  /* A 1920x264 strip is 50px tall at phone width: crop the sides (the
     followed car is in the middle) so it fills the 16:9 box. */
  .ir-player { object-fit: cover; }
  .ir-ruling-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ir-row { grid-template-columns: 2rem minmax(0, 1fr); }
  .ir-row-rulings, .ir-row .btn { grid-column: 2; }
  .ir-row .btn { justify-self: start; }
}

/* Tall or squarish space (portrait monitors, tall windows): one column that
   uses the height. Video at its own aspect, a landscape track view, the
   transport, the ruling as a full-width band, then the charts, which scroll
   inside their box when the height runs out. */
.ir-workspace.is-tall {
  display: flex !important; flex-direction: column; gap: .6rem;
  height: calc(100dvh - var(--ir-top, 120px) - 12px); min-height: 0;
}
.ir-workspace.is-tall .ir-rail { display: contents; }
.ir-workspace.is-tall .ir-head { order: 0; }
.ir-workspace.is-tall .ir-video-cell { order: 1; flex: none; }
.ir-workspace.is-tall .ir-track-cell { order: 2; flex: none; height: auto; }
.ir-workspace.is-tall .ir-transport { order: 3; position: static; box-shadow: none; }
.ir-workspace.is-tall .ir-side { order: 4; flex: none; }
.ir-workspace.is-tall .ir-side .ir-ruling { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-auto-flow: row dense; align-items: start; }
.ir-workspace.is-tall .ir-side .ir-ruling > * { grid-column: 1; }
.ir-workspace.is-tall .ir-side .ir-ruling > .ir-ai,
.ir-workspace.is-tall .ir-side .ir-ruling > .ir-next, .ir-workspace.is-tall .ir-side .ir-ruling > .ir-ai-pending { grid-column: 2; grid-row: span 1; }
.ir-workspace.is-tall .ir-side .ir-ruling-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ir-workspace.is-tall .ir-side .btn.ir-rule { min-height: 48px; font-size: .9375rem; }
.ir-workspace.is-tall .ir-charts-cell { order: 5; flex: 1 1 auto; min-height: 220px; overflow-y: auto; }
.ir-workspace.is-tall .ir-transport-row { flex-wrap: nowrap; }
.ir-workspace.is-tall .ir-transport .ir-scrub { order: 0; flex-basis: auto; }