/* FPV Lap Studio — The Darkroom.
   A printing darkroom under amber safelight: bench-black ground with a warm
   glow and felt grain, one typewriter mono at every size, enamel-white plate
   for the one action, LED amber digits, kraft label chips, footage untinted
   on white print mats. Safelight red means danger and nothing else. */

@font-face {
  font-family: "Spline Sans Mono";
  src: url("fonts/SplineSansMono-Regular.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("fonts/SplineSansMono-Italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --bench: #171009;
  --bench-2: #1f150b;
  --bench-3: #291c0e;
  --bench-4: #33230f;
  --line: #3a2a15;
  --line-strong: #4f3a1e;
  --ink: #f2e7d1;
  --ink-2: #c4ad87;
  --ink-3: #98835f;
  --amber: #e8920a;
  --amber-soft: rgba(232, 146, 10, 0.16);
  --led: #ffb02e;
  --led-bed: #0d0906;
  --enamel: #efe7d6;
  --enamel-ink: #241708;
  --enamel-edge: #c9bda4;
  --kraft: #d9c7a2;
  --kraft-ink: #33240f;
  --kraft-line: #a8946c;
  --red: #ff5a47;
  --red-surface: #331109;
  --red-line: #6b2317;
  --mat: #f4efe4;
  --marker: #e8920a;
  --marker-sel: #f2e7d1;
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  --led-glow: 0 0 6px rgba(255, 176, 46, 0.55), 0 0 18px rgba(232, 146, 10, 0.25);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background-color: var(--bench);
  /* the safelight: a warm glow from above, felt grain over everything */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.91 0 0 0 0 0.57 0 0 0 0 0.04 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% -20%, rgba(232, 146, 10, 0.13), rgba(232, 146, 10, 0.03) 45%, transparent 70%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Spline Sans Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  caret-color: var(--amber);
}
::selection { background: var(--amber-soft); color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: var(--r-sm); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bench); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; border: 2px solid var(--bench); }
::-webkit-scrollbar-thumb:hover { background: #614a28; }

svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ------- masthead: wordmark over the station rail, centered on the bench.
   No bar, no border — the safelight glow is the header's ground. ------- */
header {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px;
  padding: 34px 24px 0;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--amber);
}
.brand-mark { width: 18px; height: 18px; color: var(--amber); stroke-width: 2; flex: none; }
.stepper { display: flex; gap: 2px; list-style: none; flex-wrap: wrap; justify-content: center; }
.stepper li {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 11px; border-radius: var(--r-md);
  color: var(--ink-3); font-size: 0.75rem; user-select: none;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: color 0.15s, background 0.15s;
}
.stepper li .dot {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong);
  font-size: 0.6875rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.stepper li.active { color: var(--ink); background: var(--bench-3); }
.stepper li.active .dot {
  background: var(--led-bed); border-color: var(--amber);
  color: var(--led); text-shadow: var(--led-glow);
}
.stepper li.done { color: var(--ink-2); cursor: pointer; }
.stepper li.done:hover { color: var(--ink); background: var(--bench-3); }
.stepper li.done .dot { border-color: var(--amber); color: var(--amber); }
@media (max-width: 1250px) {
  .stepper li { gap: 0; padding: 5px 5px; }
  .stepper li .step-label { display: none; }
}

/* ------- layout ------- */
main { max-width: 1060px; margin: 0 auto; padding: 44px 24px 64px; }
.screen { display: flex; flex-direction: column; min-height: calc(100vh - 224px); }
.screen > .nav-row, #upload-done .nav-row { margin-top: auto; padding-top: 32px; }
#upload-done { display: flex; flex-direction: column; flex: 1; }
.screen h1 {
  font-size: 2.75rem; font-weight: 300; letter-spacing: -0.015em;
  line-height: 1.15; margin-bottom: 10px;
  text-align: center;
}
@media (max-width: 900px) { .screen h1 { font-size: 2.125rem; } }
.screen h2 { font-size: 1.0625rem; font-weight: 600; }
.lead {
  color: var(--ink-2); font-style: italic; font-weight: 350;
  margin: 0 auto 36px; max-width: 58ch;
  text-align: center;
}
.hidden { display: none !important; }
.muted { color: var(--ink-2); }
.small { font-size: 0.75rem; }
.center { text-align: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--bench-3); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 9px 18px; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  font-family: inherit; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
  text-decoration: none;
}
.btn:hover { background: var(--bench-4); border-color: #614a28; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { background: var(--bench-3); border-color: var(--line-strong); }
.btn.primary {
  background: var(--enamel); border-color: var(--enamel);
  border-bottom-color: var(--enamel-edge);
  color: var(--enamel-ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.btn.primary:hover:not(:disabled) { background: #fbf5e7; border-color: #fbf5e7; border-bottom-color: var(--enamel-edge); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--bench-3); color: var(--ink); border-color: transparent; }
.btn.small { padding: 5px 11px; font-size: 0.6875rem; gap: 6px; }
.btn.big { padding: 12px 26px; font-size: 0.8125rem; }
.btn.danger { background: transparent; border-color: var(--red-line); color: var(--red); }
.btn.danger:hover { background: var(--red-surface); border-color: var(--red-line); }
.btn-icon { width: 15px; height: 15px; flex: none; }
.btn-group { display: inline-flex; gap: 8px; align-items: center; }
.btn-group.seg { gap: 0; border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; }
.btn-group.seg .btn {
  border: none; border-radius: 0; background: var(--bench-2);
  font-variant-numeric: tabular-nums; min-width: 44px; letter-spacing: 0;
}
.btn-group.seg .btn + .btn { border-left: 1px solid var(--line); }
.btn-group.seg .btn:hover { background: var(--bench-4); }
.nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; gap: 12px; flex-wrap: wrap; }
.nav-row.center-row { justify-content: center; }

.banner {
  border-radius: var(--r-md); padding: 11px 14px; margin: 18px 0;
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.8125rem; line-height: 1.55;
}
.banner-icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.banner.warn { background: var(--red-surface); border: 1px solid var(--red-line); color: #ff9a7d; }
.banner.info { background: var(--bench-2); border: 1px solid var(--line); color: var(--ink-2); }
.banner.error {
  background: var(--red-surface); border: 1px solid var(--red-line); color: var(--red);
  align-items: center; justify-content: space-between;
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  min-width: 340px; max-width: 90vw; z-index: 60;
  box-shadow: var(--shadow-pop);
}
.banner.error > span { flex: 1; }

.progress-wrap {
  background: var(--led-bed); border: 1px solid var(--line);
  border-radius: var(--r-sm); height: 8px;
  overflow: hidden; margin: 14px 0 8px;
}
.progress-wrap.big { max-width: 420px; margin: 26px auto 12px; }
.progress-bar {
  height: 100%; width: 0%;
  background: var(--amber);
  box-shadow: var(--led-glow);
  transition: width 0.4s ease;
}

/* footage is a print: untinted, on a white paper mat.
   The mat is a border (not padding) so absolutely-positioned overlays and
   the ROI canvas keep image-exact coordinates inside. */
.frame-panel {
  position: relative; border-radius: var(--r-sm); overflow: hidden;
  border: 8px solid var(--mat); background: #0a0a0a;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}
.frame-panel img { width: 100%; display: block; aspect-ratio: 16 / 9; background: #0a0a0a; }

/* ------- screen 1: the film-loading plate ------- */
.dropzone {
  display: flex; flex-direction: column; align-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  padding: 76px 20px 60px; text-align: center;
  /* a loading tray with film sprocket edges, sunk into the bench */
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, var(--bench-4) 8px 14px) 7px 9px / 22px 8px repeat-x,
    repeating-linear-gradient(90deg, transparent 0 8px, var(--bench-4) 8px 14px) 7px calc(100% - 9px) / 22px 8px repeat-x,
    var(--bench-2);
  background-repeat: repeat-x, repeat-x, no-repeat;
  box-shadow: inset 0 4px 18px rgba(0, 0, 0, 0.45);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dropzone.drag {
  border-color: var(--amber);
  box-shadow: inset 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 0 3px var(--amber-soft);
}
.dz-icon { width: 34px; height: 34px; color: var(--ink-3); margin-bottom: 16px; }
.dropzone.drag .dz-icon { color: var(--amber); }
.dz-text { font-size: 1.0625rem; font-weight: 500; margin-bottom: 4px; }
.dz-sub { color: var(--ink-3); font-size: 0.75rem; margin-bottom: 14px; font-style: italic; }
.dz-formats {
  color: var(--ink-3); font-size: 0.6875rem; margin-top: 24px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
/* the loaded roll: a small print centered on the bench, caption beneath */
.video-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
  background: var(--bench-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px 26px 18px;
  max-width: 440px; margin: 10px auto 0;
}
.video-card img {
  width: 100%; max-width: 340px; display: block; background: #0a0a0a;
  border: 6px solid var(--mat); border-radius: var(--r-sm);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}
.vc-name { font-weight: 600; font-size: 0.9375rem; overflow-wrap: anywhere; }
.vc-meta { color: var(--ink-2); font-size: 0.75rem; font-variant-numeric: tabular-nums; margin-top: 3px; }

/* ------- screen 2: crop station ------- */
.roi-area { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.canvas-wrap { flex: 1 1 620px; }
.canvas-wrap canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  cursor: crosshair;
}
.roi-side { width: 250px; }
.zoom-label {
  color: var(--ink-2); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px;
}
#roi-zoom { background: #0a0a0a; border: 4px solid var(--mat); border-radius: var(--r-sm); width: 100%; }
.roi-side .small { margin-top: 8px; font-style: italic; }

/* ------- screen 3: expose station ------- */
.scrub-area input[type=range] { margin: 16px 0 10px; }
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%;
  height: 22px; background: transparent; cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: var(--bench-4);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--amber); border: 3px solid var(--bench);
  box-shadow: 0 0 0 1px var(--amber);
  margin-top: -6px;
}
input[type=range]::-moz-range-track {
  height: 4px; border-radius: 2px; background: var(--bench-4);
}
input[type=range]::-moz-range-thumb {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--amber); border: 3px solid var(--bench);
  box-shadow: 0 0 0 1px var(--amber);
}
.scrub-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }

/* every time readout is an LED instrument, and instruments are LARGE */
.time-chip {
  background: var(--led-bed); border: 1px solid var(--line);
  padding: 8px 20px; border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums; font-size: 1.625rem; font-weight: 600;
  line-height: 1.2; color: var(--led); text-shadow: var(--led-glow);
}

/* ------- processing: the developer tray IS the screen ------- */
.processing { text-align: center; padding: 24px 0 40px; }
.dev-tray {
  max-width: 820px; margin: 0 auto 26px;
  background: var(--bench-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); padding: 16px;
  box-shadow: inset 0 4px 18px rgba(0, 0, 0, 0.55);
}
.proc-pct {
  display: inline-block; margin: 18px auto 4px;
  background: var(--led-bed); border: 1px solid var(--line);
  padding: 6px 24px; border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums; font-size: 2.5rem; font-weight: 600;
  line-height: 1.15; color: var(--led); text-shadow: var(--led-glow);
}
.dev-tray img {
  width: 100%; display: block; aspect-ratio: 16 / 9; border: 6px solid var(--mat);
  border-radius: var(--r-sm); background: #0a0a0a;
  filter: brightness(0.15) contrast(0.4) sepia(0.6);
  transition: filter 0.7s ease;
}
.dev-tray.empty { display: none; }
.processing h2 { font-weight: 500; font-size: 1.0625rem; }
.processing .muted { font-size: 0.8125rem; margin-top: 4px; font-style: italic; }

/* ------- screen 4: develop the laps ------- */
.lap-preview { max-width: 640px; margin: 0 auto 18px; }
.lap-preview-time {
  position: absolute; top: 10px; left: 10px;
  background: var(--led-bed); padding: 3px 10px; border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums; font-size: 0.875rem; font-weight: 600;
  color: var(--led); text-shadow: var(--led-glow);
  border: 1px solid rgba(0, 0, 0, 0.6);
}
.timeline-wrap { margin: 6px 0 4px; }
/* the flight as a film strip: sprocket holes top and bottom */
.timeline {
  position: relative; height: 68px;
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, var(--bench-3) 8px 14px) 7px 5px / 22px 7px repeat-x,
    repeating-linear-gradient(90deg, transparent 0 8px, var(--bench-3) 8px 14px) 7px calc(100% - 5px) / 22px 7px repeat-x,
    var(--bench-2);
  background-repeat: repeat-x, repeat-x, no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: copy;
}
.tl-track {
  position: absolute; left: 14px; right: 14px; top: 50%; height: 4px;
  transform: translateY(-50%);
  background: var(--bench-4); border-radius: 2px;
}
.tl-marker {
  position: absolute; top: 14px; bottom: 14px; width: 22px;
  transform: translateX(-50%); cursor: grab; z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.tl-marker::before {
  content: ""; width: 3px; height: 100%;
  background: var(--marker); border-radius: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: transform 0.1s, background 0.1s, box-shadow 0.1s;
}
.tl-marker:hover::before { transform: scaleX(1.67); }
.tl-marker.selected::before {
  background: var(--marker-sel); transform: scaleX(1.67);
  box-shadow: 0 0 0 1.5px var(--amber), 0 1px 3px rgba(0, 0, 0, 0.5);
}
.tl-marker:active { cursor: grabbing; }
.tl-times {
  display: flex; justify-content: space-between; color: var(--ink-3);
  font-size: 0.6875rem; padding: 4px 6px; font-variant-numeric: tabular-nums;
}
/* lap chips are kraft bottle labels; the fastest is an LED readout */
.lap-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  background: var(--kraft); color: var(--kraft-ink);
  border: 1px solid var(--kraft-line);
  box-shadow: inset 0 0 0 2px var(--kraft), inset 0 0 0 3px var(--kraft-line);
  border-radius: var(--r-sm); padding: 5px 13px; font-size: 0.75rem;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.chip .chip-time { font-variant-numeric: tabular-nums; font-weight: 700; }
.chip.fastest {
  background: var(--led-bed); color: var(--led); border-color: var(--line-strong);
  box-shadow: none; text-shadow: var(--led-glow);
}
.chip.fastest .chip-time { color: var(--led); }
.chip .chip-bolt { width: 12px; height: 12px; align-self: center; }
.marker-tools {
  margin-top: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  background: var(--bench-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 10px 14px;
  font-size: 0.8125rem;
}
#marker-label {
  background: var(--led-bed); border: 1px solid var(--line);
  padding: 4px 14px; border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums; font-size: 1.375rem; font-weight: 600;
  color: var(--led); text-shadow: var(--led-glow);
}

/* ------- screen 5: frame the print ------- */
.layout-area { display: flex; gap: 22px; flex-wrap: wrap; }
.layout-stage { flex: 1 1 620px; }
.layout-stage canvas, .layout-stage .ov-el { z-index: 2; }
.ov-el { position: absolute; cursor: grab; user-select: none; touch-action: none; }
.ov-el:active { cursor: grabbing; }
.ov-el:hover { outline: 1.5px dashed var(--amber); outline-offset: 4px; }
#ov-bar { padding: 6px; background: rgba(0, 0, 0, 0.45); border-radius: 4px; }
.ov-bar-fill { width: 100%; height: 12px; border: 1px solid #fff; position: relative; }
/* sizes of #ov-bar / #ov-laps children are set inline by app.js from the
   render's own metrics (src/overlay-draw.js) so the preview is 1:1 */
.ov-bar-fill::after {
  content: ""; position: absolute; inset: 1px; width: 63%;
  background: #ffb400;
}
.ov-bar-label { color: #fff; text-align: center; font-size: 12px; margin: 0; }
#ov-laps {
  background: rgba(0, 0, 0, 0.45); border-radius: 4px;
  padding: 8px 12px; color: #fff; white-space: pre; line-height: 1.45;
  width: max-content;
}
#ov-laps .fresh { color: #ffe14d; }
.layout-side { width: 240px; display: flex; flex-direction: column; gap: 14px; }
.field {
  display: flex; flex-direction: column; gap: 6px; font-size: 0.6875rem;
  color: var(--ink-2); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.field input, .field select {
  background: var(--bench-3); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 8px 11px; font-size: 0.8125rem; font-family: inherit; font-weight: 400;
  letter-spacing: normal; text-transform: none;
  transition: border-color 0.15s;
}
.field input:hover, .field select:hover { border-color: #614a28; }
.field input:focus-visible, .field select:focus-visible {
  outline: none; border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-soft);
}
.field input::placeholder { color: var(--ink-3); }
.field select { cursor: pointer; }

/* radio throttle cap (issue #2) */
.roi-options { margin-top: 14px; max-width: 520px; }
.roi-options .cap-field { flex-direction: row; align-items: center; gap: 12px; }
.roi-options .cap-input { display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8125rem; letter-spacing: normal; text-transform: none; font-weight: 400; }
.roi-options .cap-input input { width: 5.5em; }
.roi-options p { margin: 6px 0 0; }

.toggles {
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px;
}
.toggles legend {
  font-size: 0.6875rem; color: var(--ink-2); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 0 4px;
}
.toggle { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; cursor: pointer; }
.toggle input { accent-color: var(--amber); width: 15px; height: 15px; margin: 0; cursor: pointer; }
.toggle input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.toggle:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

/* ------- screen 6: print options ------- */
.sub-h {
  font-size: 0.75rem; color: var(--ink-2); margin: 26px 0 10px;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.card-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
/* options are unlit labels on the bench; the chosen one is the kraft label
   pasted on the bottle */
.choice {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--bench-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 13px 15px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.choice:hover { border-color: var(--kraft-line); background: var(--bench-3); }
.choice:has(input:checked) {
  background: var(--kraft); border-color: var(--kraft-line);
  box-shadow: inset 0 0 0 2px var(--kraft), inset 0 0 0 3px var(--kraft-line);
}
.choice:has(input:checked) b { color: var(--kraft-ink); }
.choice:has(input:checked) span { color: #5a462a; }
.choice:has(input:focus-visible) { outline: 2px solid var(--amber); outline-offset: 2px; }
.choice input { margin-top: 4px; accent-color: var(--kraft-ink); }
.choice div { display: flex; flex-direction: column; gap: 2px; }
.choice b { font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.03em; text-transform: uppercase; }
.choice span { color: var(--ink-2); font-size: 0.75rem; line-height: 1.5; }
#card-custom { margin-top: 18px; }

/* ------- result: the print hangs on the drying line ------- */
.drying-line {
  position: relative; max-width: 860px; margin: 26px auto 10px;
  padding-top: 34px;
}
/* the line itself, and two clips holding the print */
.drying-line::before {
  content: ""; position: absolute; top: 8px; left: -40px; right: -40px;
  height: 2px; background: var(--line-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.drying-line::after {
  content: ""; position: absolute; top: 2px; left: 18%; right: 18%; height: 30px;
  background: linear-gradient(90deg,
    var(--kraft-line) 0 10px, transparent 10px calc(100% - 10px),
    var(--kraft-line) calc(100% - 10px));
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}
#result-video, .print-tag {
  width: 100%; margin: 0; background: #0a0a0a; display: block;
  border: 10px solid var(--mat); border-radius: var(--r-sm);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}
/* the ProRes case: a matted sheet with a kraft tag instead of a preview */
.print-tag {
  background: var(--bench-2); aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
}
.print-tag span {
  background: var(--kraft); color: var(--kraft-ink);
  border: 1px solid var(--kraft-line);
  box-shadow: inset 0 0 0 2px var(--kraft), inset 0 0 0 3px var(--kraft-line);
  border-radius: var(--r-sm); padding: 8px 18px;
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ------- dev screen jumper (only injected on /?dev=1) ------- */
.dev-bar {
  position: fixed; left: 16px; bottom: 16px; z-index: 70;
  display: flex; align-items: center; gap: 4px;
  background: var(--bench-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); padding: 5px 8px;
  box-shadow: var(--shadow-pop);
}
.dev-bar-label {
  color: var(--ink-3); font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; margin-right: 4px;
}
.dev-bar .btn { min-width: 30px; padding: 4px 7px; }

/* ======= hardening + reveal (critique round) ======= */

/* stepper stations are real buttons now */
.stepper li { padding: 0; }
.stepper li button {
  all: unset; display: flex; align-items: center; gap: 8px;
  padding: 5px 11px; border-radius: var(--r-md);
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
  cursor: default;
}
.stepper li.done button { cursor: pointer; }
.stepper li button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* prints never push the controls off the first viewport */
.scrub-area .frame-panel, .lap-preview {
  width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto;
}
.scrub-area .frame-panel img { max-height: 44vh; width: auto; max-width: 100%; }
.lap-preview img { max-height: 36vh; width: auto; max-width: 100%; }
/* the two working screens keep their lead short so the instrument stays above the fold */
#screen-3 .lead, #screen-4 .lead { margin-bottom: 22px; }

/* jog / nudge buttons at a usable height */
.btn.small { padding: 8px 12px; }
.btn-group.seg .btn { min-height: 34px; }

/* timeline markers are focusable sliders */
button.tl-marker { background: none; border: 0; padding: 0; font: inherit; }
button.tl-marker:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: var(--r-sm); }
.tl-ghost {
  position: absolute; top: 14px; bottom: 14px; width: 0;
  border-left: 2px dashed var(--ink-2); transform: translateX(-50%);
  pointer-events: none; z-index: 1;
}
.add-tools {
  margin-top: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  background: var(--bench-2); border: 1px dashed var(--kraft-line);
  border-radius: var(--r-md); padding: 8px 14px; font-size: 0.8125rem;
}
.add-tools #add-label { font-variant-numeric: tabular-nums; }

/* the fastest lap as an instrument */
.lap-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.lap-row .lap-chips { margin-top: 0; }
.fastest-readout {
  display: inline-flex; align-items: baseline; gap: 10px;
  background: var(--led-bed); border: 1px solid var(--line);
  padding: 6px 16px; border-radius: var(--r-sm);
  color: var(--led); text-shadow: var(--led-glow);
}
.fastest-readout .fr-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); text-shadow: none; }
.fastest-readout .fr-time { font-variant-numeric: tabular-nums; font-size: 1.625rem; font-weight: 600; line-height: 1.2; }

/* result: lap recap hangs under the print */
.result-laps { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 26px auto 8px; }
.result-laps .fastest-readout .fr-time { font-size: 2.5rem; }
.result-laps .lap-chips { justify-content: center; margin-top: 0; }

/* non-blocking notice with undo (bottom-right, never over the work) */
.notice {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  background: var(--kraft); color: var(--kraft-ink);
  border: 1px solid var(--kraft-line);
  box-shadow: inset 0 0 0 2px var(--kraft), inset 0 0 0 3px var(--kraft-line), var(--shadow-pop);
  border-radius: var(--r-sm); padding: 10px 14px; font-size: 0.8125rem;
  max-width: 420px;
}
.notice .btn { background: var(--kraft-ink); color: var(--kraft); border-color: var(--kraft-ink); }
.notice .btn:hover { background: #4a3418; border-color: #4a3418; }
/* errors move to the corner too, out of the timeline's way */
.banner.error { left: auto; right: 24px; transform: none; min-width: 320px; max-width: 480px; }

/* inline confirmation for Start over */
.confirm-row { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#cancel-job { margin-top: 18px; }


/* ------- analyse mode (issue #4): mode cards on screen 1, the Analysis screen ------- */
.mode-choice { margin-top: 18px; }
.mode-choice .choice { align-items: flex-start; }
.an-stage { aspect-ratio: 16 / 9; cursor: pointer; }
.an-stage video, .an-stage img { width: 100%; height: 100%; display: block; object-fit: contain; background: #0a0a0a; }
.an-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); font-style: italic; background: rgba(10, 10, 10, 0.6);
}
.an-transport { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.an-transport .btn { min-width: 40px; justify-content: center; }
.an-seek-wrap { position: relative; flex: 1; min-width: 0; padding-top: 6px; }
.an-seek-wrap input[type=range] { width: 100%; margin: 0; }
.an-ticks { position: absolute; left: 0; right: 0; top: 0; height: 6px; pointer-events: none; }
.an-ticks i { position: absolute; top: 0; width: 1px; height: 6px; background: var(--amber); }
.an-clock {
  font-variant-numeric: tabular-nums; color: var(--led); text-shadow: var(--led-glow);
  font-weight: 600; font-size: 0.9375rem; min-width: 7ch; text-align: right;
}
.an-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.an-chart { position: relative; min-width: 0; }
.an-graph {
  display: block; width: 100%; height: 120px; cursor: crosshair;
  background: var(--led-bed); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.an-overlay { cursor: default; }
.an-chart-cap { margin-top: 3px; font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.an-tip {
  position: absolute; top: 6px; right: 6px; pointer-events: none; z-index: 2;
  background: var(--kraft); color: var(--kraft-ink); border: 1px solid var(--kraft-line);
  border-radius: var(--r-sm); padding: 2px 7px; font-size: 0.6875rem; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.an-legend { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; min-width: 0; }
.an-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; flex: 1; min-width: 0; }
.an-chip {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none;
  font-size: 0.6875rem; font-variant-numeric: tabular-nums; color: var(--ink-2);
  padding: 2px 7px 2px 5px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bench-2); line-height: 1.4;
}
.an-chip input { margin: 0; width: 12px; height: 12px; accent-color: var(--amber); }
.an-chip i { width: 14px; height: 3px; border-radius: 2px; background: var(--c); box-shadow: 0 0 5px var(--c); }
.an-chip.off { opacity: 0.45; }
.an-chip.off i { box-shadow: none; }
.an-chip.hot, .an-chip:hover { border-color: var(--line-strong); background: var(--bench-3); color: var(--ink); }
.an-chip:focus-within { outline: 2px solid var(--amber); outline-offset: 1px; }
.an-legend-btns { display: flex; gap: 4px; flex: none; }
.an-legend-btns .btn.small { padding: 2px 8px; font-size: 0.6875rem; min-height: 0; }
.an-help { margin-top: 6px; font-size: 0.6875rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.an-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.an-readout { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.an-throttle, .an-lapnow {
  background: var(--led-bed); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 14px 8px; color: var(--led); text-shadow: var(--led-glow);
}
.an-pct, .an-laptime { font-variant-numeric: tabular-nums; font-size: 2.5rem; font-weight: 600; line-height: 1.1; }
.an-lapno { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); text-shadow: none; }
.an-label { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); text-shadow: none; margin-top: 4px; }
.an-bar { height: 10px; background: var(--bench-2); border: 1px solid var(--line); border-radius: var(--r-sm); margin-top: 6px; overflow: hidden; }
.an-bar-fill { height: 100%; width: 0; background: var(--amber); box-shadow: var(--led-glow); transition: width 0.05s linear; }
.an-bar-fill.full { background: var(--led); }

.an-table-wrap { max-height: calc(100vh - 470px); min-height: 120px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bench-2); }
.an-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.an-table th {
  position: sticky; top: 0; background: var(--bench-3); color: var(--ink-3);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--line);
}
.an-table th:first-child, .an-table td:first-child { text-align: left; }
.an-table td { padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.an-table td.an-t { color: var(--ink); font-weight: 600; }
.an-table tbody tr { cursor: pointer; }
.an-table tbody tr:hover { background: var(--bench-3); }
.an-table tbody tr.current { background: var(--amber-soft); }
.an-table tbody tr.current td { color: var(--ink); }
.an-table tbody tr.best td.an-t { color: var(--led); text-shadow: var(--led-glow); }
.an-table .chip-bolt { width: 11px; height: 11px; vertical-align: -1px; margin-left: 4px; color: var(--led); }
.an-table tbody tr:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.an-table th.an-chk, .an-table td.an-chk { width: 26px; padding-left: 8px; padding-right: 2px; text-align: left; }
.an-table td.an-chk input { margin: 0; width: 12px; height: 12px; vertical-align: -1px; accent-color: var(--amber); cursor: pointer; }
.an-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: 0; }
.an-table tbody tr.dim td:not(.an-chk) { opacity: 0.4; }
.an-table tbody tr.hot { background: var(--bench-3); }

.an-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.an-sum {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--kraft); color: var(--kraft-ink); border: 1px solid var(--kraft-line);
  box-shadow: inset 0 0 0 2px var(--kraft), inset 0 0 0 3px var(--kraft-line);
  border-radius: var(--r-sm); padding: 8px 10px;
}
.an-sum-label { font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.an-sum-val { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.an-sum.led { background: var(--led-bed); color: var(--led); border-color: var(--line-strong); box-shadow: none; text-shadow: var(--led-glow); }
.an-sum.led .an-sum-label { color: var(--ink-2); text-shadow: none; opacity: 1; }
.an-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px;
  background: var(--kraft); color: var(--kraft-ink); border: 1px solid var(--kraft-line);
  box-shadow: inset 0 0 0 2px var(--kraft), inset 0 0 0 3px var(--kraft-line);
  border-radius: var(--r-sm); padding: 6px 12px;
}
.an-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 3px 0; border-bottom: 1px dashed var(--kraft-line); min-width: 0; }
.an-stat:nth-last-child(-n+2) { border-bottom: 0; }
.an-stat-label { font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; line-height: 1.25; }
.an-stat-val { font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* throttle skipped on screen 2: laps-only view */
body.no-throttle #an-throttle-box, body.no-throttle .an-thr { display: none !important; }
body.no-throttle .an-readout { grid-template-columns: 1fr; }
body.no-throttle .an-charts, body.no-throttle .an-legend, body.no-throttle .an-stats,
body.no-throttle .an-chk, body.no-throttle .an-swatch { display: none !important; }

/* ======= the Analysis console =======
   One bench-wide instrument console, no page scroll on a laptop: the track
   ring is the instrument on the left, the print (video) with its transport
   and throttle traces in the centre, the live readouts and lap table on the
   right. Everything the pilot scrubs against stays in view. */
main:has(#screen-analyse:not(.hidden)) { max-width: 1680px; padding-top: 18px; padding-bottom: 22px; }
.screen.analyse { min-height: 0; --p-density: 1; }
.screen.analyse > .nav-row { margin-top: calc(14px * var(--p-density)); padding-top: 0; }
.an-console {
  display: grid;
  grid-template-columns: minmax(232px, 286px) minmax(0, 1fr) minmax(296px, 352px);
  gap: calc(18px * var(--p-density));
  align-items: start;
}
.an-h { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); }
.an-hint { font-size: 0.6875rem; font-style: italic; color: var(--ink-3); line-height: 1.4; }

/* centre: the print, sized by the height budget so the console never scrolls */
.an-player { min-width: 0; display: flex; flex-direction: column; gap: calc(10px * var(--p-density)); }
.an-stage {
  aspect-ratio: 16 / 9; cursor: pointer; width: 100%;
  max-height: calc(100vh - 470px); min-height: 220px;
}
.an-transport { display: flex; align-items: center; gap: 12px; }
.an-transport .btn { min-width: 40px; justify-content: center; }
.an-seek-wrap { position: relative; flex: 1; min-width: 0; padding-top: 6px; }
.an-seek-wrap input[type=range] { width: 100%; margin: 0; }
.an-ticks { position: absolute; left: 0; right: 0; top: 0; height: 6px; pointer-events: none; }
.an-ticks i { position: absolute; top: 0; width: 1px; height: 6px; background: var(--amber); }
.an-clock {
  font-variant-numeric: tabular-nums; color: var(--led); text-shadow: var(--led-glow);
  font-weight: 600; font-size: 0.9375rem; min-width: 7ch; text-align: right;
}
.an-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.an-chart { position: relative; min-width: 0; }
.an-graph {
  display: block; width: 100%; height: clamp(72px, 11vh, 120px); cursor: crosshair;
  background: var(--led-bed); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.an-overlay { cursor: default; }
.an-chart-cap { margin-top: 3px; font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.an-tip {
  position: absolute; top: 6px; right: 6px; pointer-events: none; z-index: 2;
  background: var(--kraft); color: var(--kraft-ink); border: 1px solid var(--kraft-line);
  border-radius: var(--r-sm); padding: 2px 7px; font-size: 0.6875rem; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.an-legend { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.an-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; flex: 1; min-width: 0; }
.an-chip {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none;
  font-size: 0.6875rem; font-variant-numeric: tabular-nums; color: var(--ink-2);
  padding: 2px 7px 2px 5px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bench-2); line-height: 1.4;
}
.an-chip input { margin: 0; width: 12px; height: 12px; accent-color: var(--amber); }
.an-chip i { width: 14px; height: 3px; border-radius: 2px; background: var(--c); box-shadow: 0 0 5px var(--c); }
.an-chip.off { opacity: 0.45; }
.an-chip.off i { box-shadow: none; }
.an-chip.hot, .an-chip:hover { border-color: var(--line-strong); background: var(--bench-3); color: var(--ink); }
.an-chip:focus-within { outline: 2px solid var(--amber); outline-offset: 1px; }
.an-legend-btns { display: flex; gap: 4px; flex: none; }
.an-legend-btns .btn.small { padding: 2px 8px; font-size: 0.6875rem; min-height: 0; }
.an-help { font-size: 0.6875rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* left: the track ring instrument */
.an-instr { display: flex; flex-direction: column; gap: calc(10px * var(--p-density)); min-width: 0; }
.an-instr-head { display: flex; flex-direction: column; gap: 2px; }
.ring-body { display: flex; flex-direction: column; gap: calc(10px * var(--p-density)); min-width: 0; }
.ring-svg { width: 100%; max-width: 262px; height: auto; display: block; margin: 0 auto; stroke: none; }
.ring-svg .scene { stroke: var(--bench); stroke-width: 1.5; cursor: pointer; transition: filter 0.15s; }
.ring-svg .scene:hover, .ring-svg .scene.hot { filter: brightness(1.35); }
.ring-svg .scene-num { fill: var(--ink); font-size: 8px; font-weight: 600; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.ring-svg .profile { stroke: var(--bench); stroke-width: 0.5; }
.ring-svg .gate { stroke: var(--ink); stroke-width: 2; }
.ring-svg .gate-label { fill: var(--ink-2); font-size: 7px; letter-spacing: 0.1em; text-anchor: middle; }
.ring-svg .head { fill: var(--led-bed); stroke: var(--ink); stroke-width: 1.5; pointer-events: none; }
.ring-svg .centre { fill: var(--led); font-size: 14px; font-weight: 600; text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; }
.ring-svg .centre-label { fill: var(--ink-3); font-size: 6px; letter-spacing: 0.12em; text-anchor: middle; }
.ring-table-wrap { overflow: auto; max-height: calc(100vh - 640px); min-height: 96px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bench-2); }
.ring-table { border-collapse: collapse; width: 100%; font-size: 0.625rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ring-table th, .ring-table td { padding: 3px 3px; text-align: right; border-bottom: 1px solid var(--line); }
.ring-table th:last-child, .ring-table td:last-child { padding-right: 6px; }
.ring-table thead th { position: sticky; top: 0; background: var(--bench-2); color: var(--ink-3); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.5625rem; }
.ring-table th:first-child, .ring-table td:first-child { text-align: left; padding-left: 6px; }
.ring-table td { color: var(--ink-2); }
.ring-table td:first-child { color: var(--ink); }
.ring-table td.best { color: var(--led); text-shadow: var(--led-glow); font-weight: 600; }
.ring-table tbody tr { cursor: pointer; }
.ring-table tbody tr:hover, .ring-table tr.hot td { background: var(--bench-3); }
.ring-table th.poor { color: var(--red); cursor: help; }
.ring-table tfoot td { color: var(--ink-2); border-bottom: none; border-top: 1px solid var(--line-strong); }
.ring-table .swatch { display: none; }
.ring-foot { display: flex; flex-direction: column; gap: 6px; }
.ring-foot .fastest-readout { align-self: flex-start; padding: 4px 12px; }
.ring-foot .fastest-readout .fr-time { font-size: 1.375rem; }

/* right: live readouts, the lap table, the summary strip */
.an-side { display: flex; flex-direction: column; gap: calc(10px * var(--p-density)); min-width: 0; }
.an-readout { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.an-pct, .an-laptime { font-size: clamp(1.625rem, 2.6vh, 2.25rem); }
.an-table-wrap { max-height: calc(100vh - 560px); min-height: 136px; }
.an-summary { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.an-sum { padding: 6px 9px; }
.an-sum-val { font-size: 1rem; }
.an-stats { grid-template-columns: 1fr; gap: 0; padding: 4px 10px; }
.an-stat:nth-last-child(-n+2) { border-bottom: 1px dashed var(--kraft-line); }
.an-stat:last-child { border-bottom: 0; }
.an-stat { padding: 2px 0; }

/* the console folds: three columns → two (ring drops below the print) → one */
@media (max-width: 1180px) {
  .an-console { grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); }
  .an-instr { grid-column: 1; grid-row: 2; }
  .an-instr .ring-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: start; }
  .ring-foot { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; }
  .an-stage { max-height: none; }
  .an-table-wrap, .ring-table-wrap { max-height: 320px; }
}
@media (max-width: 820px) {
  .an-console { grid-template-columns: 1fr; }
  .an-instr { grid-row: auto; order: 2; }
  .an-instr .ring-body { grid-template-columns: 1fr; }
  .an-charts { grid-template-columns: 1fr; }
}
@media (max-height: 820px) {
  .screen.analyse { --p-density: 0.7; }
  .an-help { display: none; }
  .an-throttle, .an-lapnow { padding: 8px 12px; }
  .an-pct, .an-laptime { font-size: 1.5rem; }
  .an-label { margin-top: 2px; }
  .an-table td, .an-table th { padding: 4px 8px; }
  .an-sum { padding: 4px 8px; }
  .an-sum-val { font-size: 0.9375rem; }
  .an-stat { padding: 1px 0; }
  .ring-foot .fastest-readout .fr-time { font-size: 1.125rem; }
  .an-table-wrap { max-height: calc(100vh - 600px); }
  .ring-table-wrap { max-height: calc(100vh - 600px); }
}

/* looping one place of one lap: a kraft note under the transport, the range on the seek bar */
.an-loop {
  display: flex; align-items: center; gap: 10px; margin-top: -2px;
  background: var(--kraft); color: var(--kraft-ink); border: 1px solid var(--kraft-line);
  box-shadow: inset 0 0 0 2px var(--kraft), inset 0 0 0 3px var(--kraft-line);
  border-radius: var(--r-sm); padding: 4px 6px 4px 12px; font-size: 0.75rem;
}
.an-loop-label { font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; font-size: 0.6875rem; }
.an-loop-what { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-loop .btn.small { padding: 2px 8px; font-size: 0.6875rem; min-height: 0; color: var(--kraft-ink); }
.an-loop .btn.small:hover { background: rgba(51, 36, 15, 0.12); color: var(--kraft-ink); }
.an-ticks b { position: absolute; top: 0; bottom: -14px; background: var(--amber-soft); border-left: 1px solid var(--amber); border-right: 1px solid var(--amber); pointer-events: none; }
.ring-svg .scene.loop { stroke: var(--ink); stroke-width: 2.5; }
.ring-table td.loop { outline: 1px solid var(--amber); outline-offset: -1px; }
.ring-play { align-self: flex-start; padding: 2px 10px; font-size: 0.6875rem; min-height: 0; }
.ring-play.on { background: var(--amber); color: var(--ink); }
.an-ticks b.dim { opacity: 0.35; }

/* slow motion: a segmented speed switch beside play; the lit segment is the current rate */
.an-speed .btn { min-width: 0; min-height: 0; padding: 6px 9px; font-size: 0.6875rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.an-speed .btn.on { background: var(--led-bed); color: var(--led); text-shadow: var(--led-glow); }
.an-speed .btn.on:hover { background: var(--led-bed); }