/* ══════════════════════════════════════════════════════════════════════════
   Subito Video — David's Dearest Design System
   Palette (2026-09-09, "Kuhles Papier"): cool off-white (#FAFBFD), deep ink
   (#0F2138), blue accent (#1F5FD0). Replaces the earlier warm creme + orange
   pairing, which read too close to Claude's own palette and whose orange
   accent failed WCAG UI contrast (2.77, below the 3.0 floor) on that ground.
   Font: Lato (Google Fonts)
   Aesthetic: Apple-clean, minimal, generous whitespace
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hidden attribute always wins ──────────────────────────────────────── */
[hidden] { display: none !important; }

/* ── Design tokens ──────────────────────────────────────────────────────── */
/* LIGHT THEME (2026-07-06, David's call): token NAMES are kept from the dark
   era so every var() reference keeps working — but the VALUES flipped:
   --navy is now the off-white page ground, --navy-light is the card surface,
   --white is the navy INK. Video viewers/canvases stay dark on purpose
   (judging footage against a white surround misleads).

   SECOND FLIP (2026-09-09, "Kuhles Papier"): --orange's VALUE moves from
   warm terracotta to blue — same trick, same reason. It is now the general
   UI accent (buttons, links, focus rings, tinted panels). --tool-mark is a
   NEW, separate token that keeps the original orange: it colours ONLY the
   literal crop rectangle drawn on the video canvas (app.js, hardcoded
   #e8723a — canvas fillStyle/strokeStyle can't read CSS vars, so that stays
   a literal hex, intentionally identical to this token) and the timeline
   dots that mark a keyframe's saved position of that same rectangle. That
   split is the whole idea behind this palette: blue is the surface, orange
   is the tool — never mix the two roles back together. */
:root {
  /* Core palette */
  --navy:       #FAFBFD;                    /* page background (cool off-white) */
  --navy-light: #ffffff;                    /* cards / panels / inputs */
  --navy-mid:   #EDF1F6;                    /* deeper panel / hover */
  --orange:     #1F5FD0;                    /* general accent (was warm orange; now blue) */
  --orange-deep: #17469E;                   /* hover: same hue, darker (house rule) */
  --orange-hover: #17469E;
  --orange-glow: rgba(31, 95, 208, 0.10);
  --tool-mark:  #e8723a;                    /* the crop rectangle, and ONLY the crop rectangle */
  --white:      #0F2138;                    /* primary ink (brand navy) */
  --accent-ink: #ffffff;                    /* text/icons drawn ON --orange's fill. The old
                                                warm, LIGHT orange read fine with dark ink on
                                                top (5.96:1); the new deep blue does not
                                                (2.78:1, ink was nearly invisible) — buttons
                                                need real white, not the --white ink token. */
  --off-white:  #f5f6f8;
  --text:       #1c2942;                    /* body ink */
  --text-dim:   #5d6b83;                    /* secondary ink */
  --border:     rgba(15, 33, 56, 0.13);
  --border-hover: rgba(15, 33, 56, 0.28);

  /* Semantic */
  --success:    #34c77b;
  --danger:     #ef4444;

  /* Spacing & shape */
  --radius:     12px;
  --radius-sm:  8px;
  --radius-xs:  6px;
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography */
  --font:       'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:       'SF Mono', 'Menlo', 'Consolas', monospace;
}

/* ── Reset & base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--navy);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 2rem 5rem;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
header {
  text-align: center;
  margin-bottom: 3rem;
}

header h1 {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--white);
}

header h1::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--orange);
  margin: 0.6rem auto 0;
  border-radius: 2px;
}

header .subtitle {
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 300;
  margin-top: 0.6rem;
  letter-spacing: 0.3px;
}

/* ── Steps ───────────────────────────────────────────────────────────────── */
.step h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.4rem;
}

/* ── Substeps ────────────────────────────────────────────────────────────── */
.substep {
  margin-bottom: 1.5rem;
}

.substep-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.substep-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 0.82rem;
  flex-shrink: 0;
}

.substep-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}

.substep-actions {
  margin-top: 1.2rem;
}

/* ── Upload card ─────────────────────────────────────────────────────────── */
.input-row {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.input-card {
  flex: 1 1 300px;
  background: var(--navy-light);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
  transition: border-color var(--transition), background var(--transition);
  cursor: pointer;
}

.input-card:hover {
  border-color: var(--border-hover);
}

/* A video dragged over a screen that will take it: the whole window is the
   target, and says so. pointer-events:none keeps the page underneath as the
   thing the drop actually lands on. */
body.drop-ready .input-card {
  border-color: var(--orange);
  background: var(--orange-glow);
}
body.drop-ready::after {
  content: 'Drop your video to upload';
  position: fixed;
  inset: 12px;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px dashed var(--orange);
  border-radius: var(--radius);
  background: rgba(250, 251, 253, 0.9);
  color: var(--white);
  font-family: var(--font);
  font-size: 1.35rem;
  font-weight: 700;
  pointer-events: none;
}

.card-icon {
  color: var(--orange);
  margin-bottom: 0.5rem;
}

.card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
}

.card-hint {
  color: var(--text-dim);
  font-size: 0.82rem;
}

/* ── Status bar ──────────────────────────────────────────────────────────── */
.status-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 0.9rem 1.2rem;
  background: var(--navy-light);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 0.88rem;
  border: 1px solid var(--border);
}

/* ── Upload progress bar ─────────────────────────────────────────────────── */
.upload-progress-bar {
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  background: var(--navy-light);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.upload-progress-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.upload-progress-info p {
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 600;
}

.upload-size {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-dim);
}

.upload-track {
  margin: 0 0 0.4rem;
}

.upload-pct {
  font-size: 1rem;
  font-weight: 900;
  color: var(--orange);
  text-align: right;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(31, 95, 208, 0.2);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Video player ────────────────────────────────────────────────────────── */
.video-player-wrapper {
  position: relative;
  margin: 0.8rem 0 0.5rem;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
  line-height: 0;
}

.video-player {
  display: block;
  width: 100%;
  max-height: 65vh;
  border-radius: var(--radius-sm);
  outline: none;
}

#select-player-wrapper {
  position: relative;
}

#frame-canvas {
  position: absolute;
  top: 0;
  left: 0;
  cursor: crosshair;
  user-select: none;
  touch-action: none;
  z-index: 2;
}

/* ── Transport bar ───────────────────────────────────────────────────────── */
.transport-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.transport-left,
.transport-right {
  flex-shrink: 0;
}

.transport-scrubber {
  flex: 1;
}

/* .transport-btn is styled with every other button — see "Buttons" below. */
.transport-btn svg {
  display: block;
}

/* Timecode */
.timecode {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--orange);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* ── Frame nav ───────────────────────────────────────────────────────────── */
.frame-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.frame-label {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* ── IO panel ────────────────────────────────────────────────────────────── */
.io-panel {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--navy-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.2rem;
  margin-bottom: 1rem;
}

.io-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.io-group label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dim);
  min-width: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.io-tc {
  font-size: 0.82rem;
  min-width: 7.5rem;
  background: var(--navy);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
}

.io-sep {
  color: var(--text-dim);
  font-size: 1rem;
}

.io-duration {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--orange);
  font-weight: 700;
}

.btn-clear {
  color: var(--text-dim);
  font-size: 0.72rem;
  padding: 0.2rem 0.5rem;
}

/* ── Scrubber ────────────────────────────────────────────────────────────── */
.scrubber {
  flex: 1;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--navy-mid);
  outline: none;
  cursor: pointer;
  transition: background var(--transition);
}

.scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--orange);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(31, 95, 208, 0.4);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.scrubber::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--orange);
  cursor: pointer;
  border: none;
  box-shadow: 0 0 8px rgba(31, 95, 208, 0.4);
}

.scrubber:active::-webkit-slider-thumb {
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(31, 95, 208, 0.6);
}

/* ── Scene-cut markers on the scrubber ───────────────────────────────────── */
.scrubber-track-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
.scrubber-track-wrapper .scrubber {
  position: relative;
  z-index: 1;
}
.scene-markers {
  position: absolute;
  left: 7px;           /* half of scrubber thumb (14px / 2) */
  right: 7px;
  top: 50%;
  height: 14px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}
.scene-marker {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--orange);
  border-radius: 1px;
  opacity: 0.7;
}
.scene-label {
  font-size: 0.75rem;
  color: var(--orange);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* ── Panels (shared style for ref-frames, comments) ──────────────────────── */
.panel {
  background: var(--navy-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  margin-top: 1rem;
}

.panel-header {
  margin-bottom: 0.7rem;
}

.panel-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.15rem;
}

/* ── Reference frames ────────────────────────────────────────────────────── */
#ref-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.ref-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  background: var(--navy-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 0.4rem;
}

.ref-item-primary {
  border-color: var(--orange);
  background: var(--orange-glow);
}

.ref-thumb {
  height: 56px;
  width: auto;
  border-radius: 4px;
  display: block;
  object-fit: cover;
}

.ref-label {
  font-size: 0.7rem;
  color: var(--orange);
  font-family: var(--mono);
}

.ref-remove {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--danger);
  color: var(--white);
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 0.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform var(--transition);
}

.ref-remove:hover {
  transform: scale(1.15);
}

/* ── Global notes ─────────────────────────────────────────────────────────── */
.global-notes-group {
  margin-bottom: 0.8rem;
}

.global-notes-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.35rem;
}

.global-notes-input {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--navy);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.85rem;
  line-height: 1.5;
  outline: none;
  resize: vertical;
  min-height: 2.5rem;
  transition: border-color var(--transition);
}

.global-notes-input:focus {
  border-color: var(--orange);
}

.global-notes-input::placeholder {
  color: var(--text-dim);
}

.comment-section-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.7rem 0 0.6rem;
}

.comment-section-divider::before,
.comment-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.divider-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* ── Director's comments (timestamped) ───────────────────────────────────── */
.comment-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.comment-tc {
  flex-shrink: 0;
  font-size: 0.78rem;
  min-width: 6.5rem;
  background: var(--navy);
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  text-align: center;
}

.comment-input {
  flex: 1;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--navy);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.85rem;
  outline: none;
  transition: border-color var(--transition);
}
.comment-input:focus {
  border-color: var(--orange);
}
.comment-input::placeholder {
  color: var(--text-dim);
}

#comments-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.comment-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  background: var(--navy-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  position: relative;
}

.comment-item-tc {
  flex-shrink: 0;
  font-size: 0.75rem;
  min-width: 6rem;
}

.comment-item-text {
  flex: 1;
  font-size: 0.82rem;
  color: var(--text);
}

.comment-item .ref-remove {
  position: static;
  flex-shrink: 0;
}

/* ── Selection actions ───────────────────────────────────────────────────── */
#selection-actions {
  margin-top: 1.2rem;
}

.selection-buttons {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* ── Format chooser ──────────────────────────────────────────────────────── */
.format-chooser {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.format-label {
  font-size: 0.82rem;
  color: var(--text-dim);
  white-space: nowrap;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.format-options {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.format-option {
  cursor: pointer;
}

.format-option input[type="radio"] {
  display: none;
}

.format-pill {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim);
  transition: all var(--transition);
  cursor: pointer;
}

.format-option input[type="radio"]:checked + .format-pill {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--orange-glow);
}

.format-pill:hover {
  border-color: var(--border-hover);
}

/* ── Progress ────────────────────────────────────────────────────────────── */
.progress-track {
  width: 100%;
  height: 6px;
  background: var(--navy-light);
  border-radius: 3px;
  overflow: hidden;
  margin: 1.5rem 0 0.6rem;
}

.progress-fill {
  height: 100%;
  background: var(--orange);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.progress-pct {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--orange);
}

/* ── Preview container ───────────────────────────────────────────────────── */
.preview-container {
  margin: 1.5rem 0;
  text-align: center;
}

.preview-player-wrap {
  display: inline-block;
  max-width: 400px;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.preview-video {
  display: block;
  width: 100%;
  border-radius: var(--radius-sm);
}

/* ── Download row ────────────────────────────────────────────────────────── */
.download-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
}

/* Download / share buttons share the button system; they only grow to fill
   the row so the result screen's actions line up as one band. */
.btn-download { flex: 1 1 200px; }
/* The source-clip download is the secondary action on the result screen —
   outlined like every other secondary button (it used to be white text on a
   pale grey fill). */
.btn-download.btn-download-source {
  color: var(--text);
  background: var(--navy-light);
  border-color: var(--border);
}
.btn-download.btn-download-source:hover {
  color: var(--orange);
  background: var(--orange-glow);
  border-color: var(--orange);
  box-shadow: none;
}

.done-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ── Scene-by-Scene Crop Editor ──────────────────────────────────────────── */
.scene-crops-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.scene-crop-card {
  background: rgba(10, 22, 40, 0.04);
  border: 1px solid rgba(10, 22, 40, 0.08);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.scene-crop-card .scene-info {
  flex: 0 0 auto;
  min-width: 90px;
  text-align: center;
}
.scene-crop-card .scene-info .scene-num {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--orange);
  margin-bottom: 0.25rem;
}
.scene-crop-card .scene-info .scene-dur {
  font-size: 0.75rem;
  color: var(--text-dim);
}
.scene-crop-canvas-wrap {
  position: relative;
  flex: 1;
  cursor: grab;
  overflow: hidden;
  border-radius: 4px;
  user-select: none;
}
.scene-crop-canvas-wrap canvas {
  display: block;
  width: 100%;
}
.scene-crop-preview {
  flex: 0 0 auto;
  width: 80px;
  border-radius: 4px;
  overflow: hidden;
}
.scene-crop-preview canvas {
  display: block;
  width: 100%;
}
.scene-crops-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.btn-scene-mode {
  background: rgba(10, 22, 40, 0.10);
  border: 1px solid var(--orange);
  color: var(--orange);
}
.btn-scene-mode:hover {
  background: var(--orange);
  color: var(--accent-ink);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/* ─── Buttons: one style, two tones, two sizes ───────────────────────────
   Every button on every screen shares one shape (6px radius, a 1px border
   that is transparent on the filled tone so heights match), one face (Lato
   700, 0.9rem) and one padding. Tones: filled accent for the single primary
   action of a screen, outlined for everything else (.btn-quiet-danger tints
   a destructive one). Compact size: .btn-sm, the transport steppers and the
   keyframe-list buttons. David, 14 Sep: "all the buttons should have the same
   style" — the draft button had no base class and rendered as a bare browser
   button, and filled buttons sat 2px shorter than outlined ones. */
.btn-accent, .btn-secondary, .btn-download,
.transport-btn, .keyframe-row .kf-jump, .keyframe-row .kf-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2px;
  white-space: nowrap;
  color: var(--text);
  background: var(--navy-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition);
}
.btn-secondary:hover, .transport-btn:hover, .keyframe-row .kf-jump:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--orange-glow);
}
.btn-secondary:active, .transport-btn:active { background: rgba(31, 95, 208, 0.18); }

.btn-accent, .btn-download {
  color: var(--accent-ink);
  background: var(--orange);
  border-color: var(--orange);
}
.btn-accent:hover, .btn-download:hover {
  color: var(--accent-ink);
  background: var(--orange-hover);
  border-color: var(--orange-hover);
  box-shadow: 0 2px 12px rgba(31, 95, 208, 0.3);
}

.btn-sm, .transport-btn, .keyframe-row .kf-jump, .keyframe-row .kf-delete {
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  min-height: 30px;
}
.transport-btn { min-width: 32px; }

/* ── Hints ───────────────────────────────────────────────────────────────── */
.hint {
  color: var(--text-dim);
  font-size: 0.82rem;
  line-height: 1.5;
}
.hint strong {
  color: var(--text);
  font-weight: 700;
}

/* ── Error banner ────────────────────────────────────────────────────────── */
#error-banner {
  background: var(--danger);
  color: var(--white);
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0 0;
  font-size: 0.88rem;
}

#error-banner p { flex: 1; }

#btn-dismiss-error {
  background: transparent;
  border: none;
  color: var(--white);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity var(--transition);
}
#btn-dismiss-error:hover { opacity: 1; }

/* ── Keyboard help ───────────────────────────────────────────────────────── */
.keyboard-help {
  margin-top: 2.5rem;
  padding: 0.6rem 1rem;
  background: var(--navy-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  color: var(--text-dim);
  text-align: center;
}

.keyboard-help kbd {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  background: var(--navy);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--orange);
  margin: 0 0.1rem;
}

/* ── Back-to-range link button ───────────────────────────────────────────── */
/* (the quick-export back link is a compact secondary button now) */

/* ── Scene coverage label ───────────────────────────────────────────────── */
.coverage-label {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
}
.coverage-label.all-covered {
  color: var(--success);
}
.coverage-label.has-uncovered {
  color: var(--orange);
}

/* ── Scene markers: coverage coloring ───────────────────────────────────── */
.scene-marker.covered {
  background: var(--success);
  opacity: 0.8;
}
.scene-marker.uncovered {
  background: var(--orange);
  opacity: 0.9;
}

/* ── Modal overlay ──────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 40, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.modal-dialog {
  background: var(--navy-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 2.5rem;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.6rem;
}

.modal-body {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.modal-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* ── Session list ───────────────────────────────────────────────────────── */
.session-list-panel {
  margin-top: 1.5rem;
}

#session-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.session-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem;
  background: var(--navy-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  transition: border-color var(--transition);
}
.session-card:hover {
  border-color: var(--border-hover);
}

.session-card-info {
  flex: 1;
}

.session-card-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--white);
}

.session-card-date {
  font-size: 0.72rem;
  color: var(--text-dim);
}

.session-card .btn-secondary {
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
}

.session-card .btn-danger-sm {
  background: none;
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: var(--radius-xs);
  padding: 0.3rem 0.6rem;
  font-size: 0.72rem;
  font-family: var(--font);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.session-card .btn-danger-sm:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* ── Save session button ────────────────────────────────────────────────── */
.btn-save-session {
  margin-left: auto;
}

/* ── Quick Export ───────────────────────────────────────────────────────── */
.btn-quick-export {
  background: transparent;
  border: 1.5px solid var(--orange);
  color: var(--orange);
}
.btn-quick-export:hover {
  background: var(--orange-glow);
}

.qe-dimension-chooser {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
}

.qe-crop-hint {
  margin-top: 0.4rem;
  color: var(--orange);
  font-weight: 600;
}

.qe-crop-info {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.6rem;
  padding: 0.5rem 0.8rem;
  background: var(--navy-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}

.qe-crop-dims {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--orange);
  font-weight: 700;
}

#qe-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #app { padding: 1.5rem 1rem 3rem; }
  header h1 { font-size: 1.6rem; }
  .input-row { flex-direction: column; }
  .io-panel { flex-direction: column; align-items: flex-start; }
  .io-sep { display: none; }
  .frame-nav { flex-wrap: wrap; }
  .selection-buttons { flex-direction: column; }
  .download-row { flex-direction: column; }
  .done-actions { flex-direction: column; }
}

/* ─── Manual keyframe mode ──────────────────────────────────────────── */

#manual-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  cursor: grab;
  touch-action: none;
}
#manual-canvas:active { cursor: grabbing; }

.manual-position-readout {
  margin: 0.75rem 0;
  padding: 0.5rem 0.85rem;
  background: rgba(31, 95, 208, 0.08);
  border: 1px solid rgba(31, 95, 208, 0.25);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.95rem;
}
.manual-position-readout strong {
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}

.keyframe-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.keyframe-marker {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  background: var(--tool-mark);   /* the box's own saved position, not general UI */
  border: 2px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.keyframe-list {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.keyframe-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(10, 22, 40, 0.03);
  border: 1px solid rgba(10, 22, 40, 0.08);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--text);
  transition: background var(--transition);
}
.keyframe-row:hover {
  background: rgba(31, 95, 208, 0.06);
  border-color: rgba(31, 95, 208, 0.2);
}
.keyframe-row .kf-time {
  font-variant-numeric: tabular-nums;
  color: var(--orange);
  min-width: 6.5em;
}
.keyframe-row .kf-pct {
  color: var(--text-dim);
  flex: 1;
  font-variant-numeric: tabular-nums;
}
/* Jump / Delete are compact buttons from the button system; Delete tints red
   on hover like every other destructive control. */
.keyframe-row .kf-delete:hover {
  color: #a33c2a;
  border-color: rgba(163, 60, 42, 0.55);
  background: rgba(163, 60, 42, 0.07);
}

.btn-manual-mode {
  /* same orange family as other accent buttons — keeps the row consistent */
}

/* ─── Resume-last-video banner ──────────────────────────────────────── */
.resume-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1rem;
  background: rgba(31, 95, 208, 0.08);
  border: 1px solid rgba(31, 95, 208, 0.3);
  border-radius: var(--radius);
}
.resume-text { display: flex; flex-direction: column; gap: 0.15rem; }
.resume-filename { color: var(--text-dim); font-size: 0.9rem; word-break: break-all; }
.resume-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
@media (max-width: 640px) {
  .resume-banner { flex-direction: column; align-items: stretch; }
}

/* ─── Watermark toggle ──────────────────────────────────────────────── */
.wm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-dim);
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
}
.wm-toggle input { accent-color: var(--orange); cursor: pointer; }

/* ─── Manual punch-in (zoom) control ────────────────────────────────── */
.manual-zoom-row {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0.5rem 0 0.25rem;
}
.manual-zoom-row label { color: var(--text-dim); font-size: 0.9rem; white-space: nowrap; }
.manual-zoom-row input[type="range"] { flex: 1; max-width: 320px; accent-color: var(--orange); }
.manual-zoom-val { font-variant-numeric: tabular-nums; color: var(--orange); min-width: 3em; }

/* ─── "How it works" list in manual mode ────────────────────────────── */
.how-list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  color: var(--text-dim);
  font-size: 0.9rem;
}
.how-list li {
  position: relative;
  padding: 0.15rem 0 0.15rem 1.1rem;
  line-height: 1.5;
}
.how-list li::before {
  content: '\203A';           /* › */
  position: absolute;
  left: 0.2rem;
  color: var(--orange);
  font-weight: 700;
}
.how-list strong { color: var(--text); }

/* ─── Live "result" preview (PiP) ───────────────────────────────────── */
/* Editing canvas + live result, side by side — the result is a first-class
   panel now, not a corner thumbnail ("it's just like a tiny thing in the
   corner" — David). */
.manual-editor-row {
  display: flex;
  gap: 0.9rem;
  align-items: stretch;
}
.manual-editor-row .video-player-wrapper { flex: 1; min-width: 0; }
.manual-live-wrap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.6rem;
  background: #05090f;             /* dark well — judge the clip against neutral */
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
#manual-live-preview {
  height: 100%;
  max-height: 46vh;
  width: auto;
  display: block;
  border: 1px solid var(--orange);
  border-radius: 4px;
  background: #000;
  min-height: 0;
}
.manual-live-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1;
  white-space: nowrap;
}

/* ─── Manual options row (shape + safe zones) ───────────────────────── */
.manual-options-row {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin: 0.4rem 0 0.25rem;
}
.manual-options-row > label { color: var(--text-dim); font-size: 0.9rem; }
.manual-aspect-select {
  background: var(--navy-light);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 0.3rem 0.5rem;
  font-family: var(--font);
  font-size: 0.88rem;
}

/* ─── Title input ───────────────────────────────────────────────────── */
.manual-title-row { display: flex; flex-direction: column; gap: 0.3rem; max-width: 480px; }
.manual-title-row > label { color: var(--text-dim); font-size: 0.9rem; }
.manual-title-input {
  background: var(--navy-light);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  font-family: var(--font);
  font-size: 0.95rem;
}
.manual-title-input:focus { outline: none; border-color: var(--orange); }

/* On phones the editor stacks: video on top, live result below it */
@media (max-width: 700px) {
  .manual-editor-row { flex-direction: column; align-items: stretch; }
  .manual-live-wrap { flex-direction: row; justify-content: center; }
  #manual-live-preview { height: 30vh; max-height: 30vh; }
  .manual-live-label { writing-mode: vertical-rl; }
}

/* ─── Camera-cut markers on the manual timeline ─────────────────────── */
.scene-cut-line {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 1.5px;
  background: #51617e;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
  pointer-events: none;
}
.legend-cut {
  color: #51617e;
  font-weight: 700;
}

/* ─── Clip-range readout in manual mode ─────────────────────────────── */
.manual-range-readout {
  display: block;
  margin-top: 0.3rem;
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* ─── Pre-export summary (what exactly will export) ─────────────────── */
.manual-export-summary {
  margin-top: 0.7rem;
  padding: 0.55rem 0.8rem;
  background: var(--navy-light);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-xs);
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.45;
}
.manual-export-summary strong { color: var(--text); }
.manual-export-summary:empty { display: none; }

/* ─── Manual timeline: dim what's OUTSIDE the export range ──────────── */
.range-shade {
  position: absolute;
  top: -5px;
  bottom: -5px;
  background: rgba(10, 22, 40, 0.22);
  border-radius: 2px;
  pointer-events: none;
}
.keyframe-marker.outside {
  background: transparent;
  border: 2px solid var(--tool-mark);
  opacity: 0.55;
}
.kf-outside-badge {
  font-size: 0.72rem;
  color: var(--orange);
  border: 1px solid rgba(31, 95, 208, 0.45);
  border-radius: 4px;
  padding: 0.05rem 0.4rem;
  margin-left: 0.5rem;
  white-space: nowrap;
}

/* ═══ Accessibility pass (2026-07-06) ═══════════════════════════════════ */

/* Visible keyboard focus everywhere interactive — arts-org users include
   keyboard and switch users; the browser default was being wiped by resets. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect "reduce motion": kill spinners/transitions; busy state is still
   communicated by the status text next to them. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══ Mobile polish (2026-07-06) ════════════════════════════════════════ */

/* Fingers need bigger targets than mouse pointers (Apple HIG: 44pt min). */
@media (pointer: coarse) {
  .transport-btn, .btn-secondary, .btn-accent, .btn-download, .kf-jump, .kf-delete {
    min-height: 44px;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }
  .scrubber { height: 28px; }
  input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; }
}

/* Keyboard-shortcut help is meaningless on touch devices */
@media (hover: none) and (pointer: coarse) {
  .keyboard-help { display: none !important; }
}

/* Narrow screens: control rows wrap instead of overflowing */
@media (max-width: 700px) {
  .io-panel { flex-wrap: wrap; gap: 0.5rem; }
  .substep-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .substep-actions > button, .action-group > button { flex: 1 1 45%; }
  .transport-bar { flex-wrap: wrap; }
  .frame-nav { flex-wrap: wrap; }
  #app { padding: 1.2rem 0.8rem 3rem; }
}

/* ─── Motion-quality hint badges ────────────────────────────────────── */
.kf-warn-badge { color: #17469E; border-color: rgba(23, 70, 158, 0.55); }
.kf-info-badge { color: var(--text-dim); border-color: var(--border); }

/* ─── First-visit intro ─────────────────────────────────────────────── */
header { position: relative; }
.help-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--navy-light);
  color: var(--text-dim);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.help-btn:hover { color: var(--orange); border-color: var(--orange); }
.intro-card {
  background: var(--navy-light);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.6rem;
}
.intro-card h3 { color: var(--text); font-size: 1rem; margin-bottom: 0.5rem; }
.intro-steps { margin: 0 0 0.8rem 1.2rem; display: grid; gap: 0.45rem; }
.intro-steps li { color: var(--text-dim); font-size: 0.92rem; }
.intro-steps li strong, .intro-steps li em { color: var(--text); }

/* ═══ iOS touch behaviour (David's phone test, 2026-07-12) ══════════════ */

/* Rapid taps on small controls (1f/1s steppers) triggered Safari's
   double-tap ZOOM. touch-action:manipulation keeps taps + scroll but
   disables double-tap-to-zoom on the controls themselves. */
button, select, input[type="range"], input[type="checkbox"], label, a {
  touch-action: manipulation;
}
/* Finger-drags on the scene cards must pan the CROP, not the page */
.scene-crop-canvas-wrap, .scene-crop-canvas-wrap canvas { touch-action: none; }

/* No gray tap-flash; no long-press text-selection magnifier on controls */
body { -webkit-tap-highlight-color: transparent; }
.transport-btn, .frame-nav, .substep-actions button, .marks {
  -webkit-user-select: none;
  user-select: none;
}

/* iOS auto-zooms the page when focusing inputs with font-size < 16px —
   the title input was 15.2px, which zoomed the whole page in portrait. */
@media (pointer: coarse) {
  input[type="text"], select { font-size: 16px; }
}

/* Pull-to-refresh mid-edit loses nothing (projects persist) but is jarring */
html, body { overscroll-behavior-y: contain; }

/* ─── Client-brief paste box ────────────────────────────────────────── */
.brief-box { margin-top: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; max-width: 560px; }
.brief-box > label { color: var(--text-dim); font-size: 0.9rem; }
.brief-box textarea {
  background: var(--navy-light);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  font-family: var(--font);
  font-size: 0.95rem;
  resize: vertical;
}
.brief-box textarea:focus { outline: none; border-color: var(--orange); }
.brief-box .btn-sm { align-self: flex-start; }
.brief-result { display: flex; flex-direction: column; gap: 0.35rem; }
.brief-clip-row {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  background: var(--navy-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 0.4rem 0.65rem;
  font-size: 0.9rem;
}
.brief-clip-row .bc-title { font-weight: 700; color: var(--text); }
.brief-clip-row .bc-time { font-family: var(--mono); color: var(--text-dim); font-size: 0.84rem; }
.brief-clip-row.used { border-color: var(--success); }
.brief-clip-row.used .bc-title::after { content: " ✓"; color: var(--success); }
.brief-note { color: var(--text-dim); font-size: 0.85rem; }
@media (pointer: coarse) { .brief-box textarea { font-size: 16px; } }

.build-stamp { text-align: center; color: var(--text-dim); font-size: 0.72rem; opacity: 0.7; margin-top: 2rem; }

/* Undo/Redo disable themselves when there's nothing to do */
.substep-actions button:disabled { opacity: 0.4; cursor: default; }
.substep-actions button:disabled:hover { border-color: var(--border); background: var(--navy-light); }

/* Export receipt — what the server actually applied */
.export-receipt {
  color: var(--text-dim);
  font-size: 0.88rem;
  margin: 0.3rem 0 0.8rem;
}
.export-receipt strong { color: var(--text); }

/* Pre-export warnings — advisory, never blocking */
.export-warnings {
  margin-top: 0.5rem;
  padding: 0.55rem 0.85rem;
  background: rgba(31, 95, 208, 0.07);
  border: 1px solid rgba(31, 95, 208, 0.35);
  border-radius: var(--radius-xs);
  color: var(--text-dim);
  font-size: 0.86rem;
}
.export-warnings strong { color: var(--text); }
.export-warnings ul { margin: 0.25rem 0 0 1.1rem; display: grid; gap: 0.15rem; }

/* Compare exported clip vs editing preview */
.compare-wrap {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.4rem;
  padding: 0.6rem; background: #05090f; border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin-bottom: 0.8rem;
}
#compare-canvas { height: 40vh; max-height: 380px; width: auto; display: block;
  border: 1px solid var(--orange); border-radius: 4px; background: #000; }
.compare-label { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }

/* ─── Guided tour (coach marks) ─────────────────────────────────────── */
.tour-veil {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: rgba(10, 22, 40, 0.45); z-index: 9000;
}
body.tour-open { overflow-x: hidden; }
.tour-ring {
  position: absolute; z-index: 9001; pointer-events: none;
  border: 2px solid var(--orange); border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(10, 22, 40, 0.45), 0 0 18px rgba(31, 95, 208, 0.55);
}
.tour-pop {
  position: absolute; z-index: 9002; width: min(340px, calc(100vw - 24px));
  background: var(--navy-light); color: var(--text);
  border: 1px solid var(--border); border-top: 3px solid var(--orange);
  border-radius: var(--radius-sm); padding: 0.85rem 1rem;
  box-shadow: 0 12px 34px rgba(10, 22, 40, 0.22);
}
.tour-pop h4 { margin: 0.15rem 0 0.35rem; font-size: 1rem; color: var(--white); }
.tour-pop .tour-text { margin: 0; font-size: 0.9rem; color: var(--text); line-height: 1.5; }
.tour-count {
  margin: 0; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim);
}
.tour-actions { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.8rem; }
@media (prefers-reduced-motion: reduce) { .tour-ring { box-shadow: 0 0 0 9999px rgba(10,22,40,0.45); } }
.tour-more { margin: 0.55rem 0 0; font-size: 0.78rem; color: var(--text-dim); }
.feedback-link { color: var(--orange); text-decoration: none; }
.feedback-link:hover { text-decoration: underline; }

/* Typeable START/END boxes */
input.io-tc {
  background: var(--navy-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 0.25rem 0.5rem;
  width: 8.5rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--orange);
  text-align: center;
}
input.io-tc:focus { outline: none; border-color: var(--orange); background: #fff; }
input.io-tc.bad { border-color: var(--danger); }
@media (pointer: coarse) { input.io-tc { font-size: 16px; } }

/* ─── Help vs action ────────────────────────────────────────────────────
   Buttons DO things. Help is written as quiet text links, never as a button
   sitting in a row of actions — David: "nobody will look for something there,
   we need clearer differentiation." */
.help-strip {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.83rem;
}
.help-strip a, .intro-links a {
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.help-strip a:hover, .intro-links a:hover { color: var(--orange); }
.intro-links { margin-left: 0.6rem; font-size: 0.85rem; color: var(--text-dim); }

/* ─── Sponsors ──────────────────────────────────────────────────────────
   Concert-programme register: understated, generous whitespace, no banner-ad
   visual language. Cards are quiet until hovered. */
#sponsor-strip { margin: 2.2rem auto 0; text-align: center; }
#sponsor-spotlight { margin: 2rem auto 0; text-align: center; }
.sponsor-head {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 0.7rem;
}
.sponsor-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}
.sponsor-card {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg, #fff);
  color: var(--text);
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
a.sponsor-card:hover { border-color: var(--orange); color: var(--orange); }
.sponsor-invite {
  border-style: dashed;
  color: var(--text-dim);
  font-style: italic;
}

/* ─── Editor action groups ──────────────────────────────────────────────
   Editing-software convention: tools grouped by kind, not one flat row.
   "Do it yourself" (the core action) / "Let the app help" (assistants) /
   "Fix mistakes" (history). Each group gets a whisper-quiet label so a
   first-time user knows what kind of thing each button is. */
/* One group per row, everything left-aligned — the three groups used to sit
   side by side and wrap unevenly, with "Fix mistakes" pushed to the right. */
.action-groups {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 1.2rem;
}
.action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.action-group-label {
  flex-basis: 100%;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.btn-quiet-danger { color: #a33c2a; border-color: rgba(163, 60, 42, 0.35); }
.btn-quiet-danger:hover { color: #a33c2a; border-color: rgba(163, 60, 42, 0.55); background: rgba(163, 60, 42, 0.07); }

/* Action rows: same flex rhythm on desktop as mobile (was mobile-only,
   leaving desktop rows to whitespace-dependent inline flow). */
.substep-actions, .scene-crops-actions, .done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
@media (max-width: 700px) {
  .action-group-history { margin-left: 0; }
  .action-groups { gap: 1rem; }
}

/* ─── Stale-version nudge ─────────────────────────────────────────────── */
.stale-banner {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(10, 22, 40, 0.12);
  padding: 0.6rem 0.9rem;
  font-size: 0.88rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  z-index: 300;
  max-width: min(92vw, 480px);
}
.stale-dismiss {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 0.2rem;
}

/* ─── Keyframes outside the clip ─────────────────────────────────────────
   These belong to a different shot and are ignored when framing. Saying so
   plainly — with one click to clear them — is the way out of a stale
   keyframe that survives refreshes because it was hand-adjusted. */
.kf-stray-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin: 0.9rem 0 0.2rem;
  padding: 0.6rem 0.85rem;
  background: rgba(31, 95, 208, 0.07);
  border: 1px solid rgba(31, 95, 208, 0.28);
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--text);
}

/* ─── Keys & links page ──────────────────────────────────────────────── */
.keys-table { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.6rem; }
.keys-row {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
}
.keys-row-off { opacity: 0.45; }
.keys-label { min-width: 110px; color: var(--text-dim); font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.08em; }
.keys-val { flex: 1 1 220px; font-size: 0.92rem; word-break: break-all; }
.keys-code { font-weight: 700; letter-spacing: 0.1em; flex: 0 1 auto; }
.keys-uses { color: var(--text-dim); font-size: 0.8rem; white-space: nowrap; }
.keys-form { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-top: 0.6rem; }
.keys-form .manual-title-input { max-width: 260px; }

/* ─── Continue on another device ─────────────────────────────────────── */
.handoff-box {
  margin-top: 0.8rem; padding: 0.9rem 1rem;
  border: 1px solid rgba(31, 95, 208, 0.3);
  background: rgba(31, 95, 208, 0.06);
  border-radius: 10px; max-width: 460px;
}
.handoff-box p { margin: 0 0 0.6rem; font-size: 0.88rem; color: var(--text-dim); }
.handoff-code {
  font-size: 1.7rem; letter-spacing: 0.28em; font-weight: 700;
  color: var(--orange); margin-bottom: 0.7rem;
}
.handoff-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ─── Unfinished upload ──────────────────────────────────────────────── */
.resume-upload-bar {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  margin: 1rem auto 0; max-width: 560px;
  padding: 0.7rem 0.95rem;
  background: rgba(31, 95, 208, 0.07);
  border: 1px solid rgba(31, 95, 208, 0.28);
  border-radius: 10px; font-size: 0.9rem; color: var(--text);
}

/* ─── Comfortable tap targets for inline links ───────────────────────────
   Footer and help links sat at 14-17px tall on a phone — fine for a mouse,
   fiddly for a thumb, and this audience skews older. Padding enlarges the
   target without changing how the text looks. */
.help-strip a, .intro-links a, .feedback-link, .build-stamp a {
  display: inline-block;
  padding: 0.45rem 0.15rem;
}
@media (max-width: 700px) {
  .help-strip a, .intro-links a, .feedback-link, .build-stamp a {
    padding: 0.55rem 0.25rem;
  }
}

/* ─── Export all clips ───────────────────────────────────────────────── */
.batch-panel {
  margin-top: 1.1rem; padding: 0.9rem 1rem;
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
}
.batch-head { margin: 0 0 0.6rem; font-size: 0.88rem; color: var(--text-dim); }
.batch-panel { margin-top: 0.9rem; }
.batch-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.7rem; }
/* Shown at the top of the editor while one clip of a batch is being checked */
.batch-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem;
  margin: 0 0 1rem; padding: 0.6rem 0.9rem;
  border: 1px solid rgba(31, 95, 208, 0.3); background: rgba(31, 95, 208, 0.06);
  border-radius: var(--radius-sm); font-size: 0.9rem; color: var(--text-dim);
}
.batch-bar strong { color: var(--text); }
.batch-bar .batch-bar-fill { flex: 1 1 auto; }
.batch-row {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.5rem 0; border-top: 1px solid var(--border); font-size: 0.9rem;
}
.batch-row:first-of-type { border-top: none; }
.batch-name {
  flex: 1 1 12rem;
  min-width: 8rem;
  font-weight: 700;
  font-family: var(--font);
  font-size: 0.92rem;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  padding: 0.25rem 0.4rem;
}
.batch-name:hover { border-color: var(--border); }
.batch-name:focus {
  background: var(--navy-light);
  border-color: var(--orange);
  outline: none;
}
.batch-time { color: var(--text-dim); font-size: 0.85rem; }
.batch-state { color: var(--orange); font-size: 0.85rem; min-width: 7rem; }

/* ─── Brand line ─────────────────────────────────────────────────────────
   "Subito Video by David's Dearest" — the second word sits lighter so the
   name reads as one mark rather than two equal words, and the byline is
   quiet enough not to compete with the subtitle below it. */
.brand-light { font-weight: 300; color: var(--text-dim); }
.brand-by {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── Caption ideas (per-code feature; see invites.FEATURES) ───────────────── */
.caption-box {
  margin: 1.4rem 0 0;
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--navy-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 44rem;
}
.caption-h {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
}
.caption-box label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 0.3rem;
}
.caption-context {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 16px;                 /* below this, iOS zooms the page on focus */
  color: var(--text);
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: vertical;
}
.caption-context:focus { border-color: var(--orange); outline: none; }
.caption-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.caption-controls label { margin: 0; }
.caption-select {
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--navy-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}
.caption-list {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.caption-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  line-height: 1.45;
}
.caption-list li span { flex: 1; }
.caption-copy {
  flex: none;
  padding: 0.25rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--orange);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.caption-copy:hover { border-color: var(--orange); background: var(--orange-glow); }
@media (max-width: 700px) {
  .caption-controls { gap: 0.4rem 0.6rem; }
  .caption-controls .btn-accent { width: 100%; }
}

/* ── Numbered keyframes (25 Sep) ─────────────────────────────────────────────
   Each keyframe carries a number — 1, 2, 3 in time order — and it is the SAME
   number on the timeline, in the list, beside the timecode and in every
   message. The chips are the keyframe's own mark, so they wear the tool
   orange like the crop box and the dots on the line (blue is the surface,
   orange is the tool). Dark ink on that orange is 5.96:1 — white would fail. */
.transport-scrubber { padding-bottom: 28px; }   /* room for the numbers below the handle */

.kf-num-chip {
  position: absolute;
  /* Below the scrubber's HANDLE (14px, so 7px under the line's centre) plus a
     4px gap — measured in the browser: just "below the line" left the chip
     overlapping the handle's lower edge, so grabbing the handle low jumped to
     a keyframe instead of dragging. */
  top: calc(50% + 11px);
  transform: translateX(-50%);
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 0;
  border-radius: 9px;
  background: var(--tool-mark);
  color: var(--white);                   /* the ink token — dark navy */
  font: 700 11px/18px var(--font, 'Lato', sans-serif);
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
  pointer-events: auto;                  /* the container stays click-through for the scrubber */
  z-index: 2;
  box-shadow: 0 1px 2px rgba(15, 33, 56, 0.25);
}
.kf-num-chip:hover { filter: brightness(1.08); }
.kf-num-chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.kf-num-chip.is-current {
  box-shadow: 0 0 0 2px var(--navy-light), 0 0 0 4px var(--tool-mark);
}

.keyframe-row .kf-num {
  flex: none;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: 0;
  border-radius: 13px;
  background: var(--tool-mark);
  color: var(--white);
  font: 700 0.8rem/26px var(--font, 'Lato', sans-serif);
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
}
.keyframe-row .kf-num:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.keyframe-row .kf-time { cursor: pointer; }
.keyframe-row.is-current {
  background: rgba(232, 114, 58, 0.10);
  border-color: var(--tool-mark);
}

.on-keyframe {
  margin-right: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: rgba(232, 114, 58, 0.14);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

@media (pointer: coarse) {
  /* A fingertip needs more than 18px; the list's Jump buttons stay the
     full-size touch target, these are the quick way. */
  .transport-scrubber { padding-bottom: 46px; }
  /* The touch handle is 26px (13px under the centre), so the chip starts 17px down. */
  .kf-num-chip { top: calc(50% + 17px); min-width: 28px; height: 28px; border-radius: 14px;
                 font-size: 13px; line-height: 28px; }
  .keyframe-row .kf-num { min-width: 36px; height: 36px; border-radius: 18px; line-height: 36px; }
}

@media (max-width: 700px) {
  /* On a phone the transport row is one line: the "Keyframe 2" label beside the
     timecode took half the scrubber's width (measured 191px -> 100px). The ring
     on the timeline number, the lit list row and the hint above the list
     already say which keyframe you are on, so the label steps aside here. */
  .transport-right .on-keyframe { display: none; }
}

/* ── Your videos (last 7 days) ─────────────────────────────────────────────── */
.library-panel {
  margin: 0 0 1.2rem;
  padding: 0.9rem 1rem;
  background: var(--navy-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.library-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.75rem; margin-bottom: 0.6rem; }
.library-head strong { color: var(--white); font-size: 1rem; }
.library-list { display: grid; gap: 0.4rem; }
.library-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.7rem;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.library-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.library-name { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-meta { font-size: 0.8rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* ── Markers on the choose-the-part screen ─────────────────────────────────
   Notes on the timeline, so the SURFACE blue — the orange belongs to the
   framing tool alone. Same layout as the keyframe numbers in the editor: a
   dot on the line, the number hanging below the scrubber's handle. White on
   this blue is 5.8:1. */
.range-marks { position: absolute; inset: 0; pointer-events: none; }
.range-mark-dot {
  position: absolute;
  top: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--orange);             /* the accent token: blue in this palette */
  box-shadow: 0 0 0 2px var(--navy-light);
}
.range-mark-chip {
  position: absolute;
  top: calc(50% + 11px);
  transform: translateX(-50%);
  min-width: 18px; height: 18px; padding: 0 4px;
  border: 0; border-radius: 4px;
  background: var(--orange);
  color: var(--accent-ink);
  font: 700 11px/18px var(--font);
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
}
.range-mark-chip:hover { background: var(--orange-deep); }
.range-mark-chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.marks-panel { margin: 0.9rem 0 0.2rem; }
.marks-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.marks-head .hint { margin: 0; }
.marks-list { display: grid; gap: 0.35rem; margin-top: 0.6rem; }
.mark-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: rgba(31, 95, 208, 0.04);
  border: 1px solid rgba(31, 95, 208, 0.14);
  border-radius: var(--radius-sm);
}
.mark-row.is-start, .mark-row.is-end { border-color: var(--orange); background: var(--orange-glow); }
.mark-num {
  flex: none;
  min-width: 26px; height: 26px; padding: 0 6px;
  border: 0; border-radius: 6px;
  background: var(--orange); color: var(--accent-ink);
  font: 700 0.8rem/26px var(--font);
  cursor: pointer;
}
.mark-time { font-family: var(--mono); font-size: 0.85rem; color: var(--text); cursor: pointer; min-width: 7.5em; }
.mark-role { font-size: 0.75rem; font-weight: 700; color: var(--orange); text-transform: uppercase;
             letter-spacing: 0.04em; min-width: 3em; }
.mark-row .mark-remove:hover { color: #a33c2a; border-color: rgba(163, 60, 42, 0.55); background: rgba(163, 60, 42, 0.07); }
.brief-list-head { margin-top: 0.2rem; }

@media (pointer: coarse) {
  .range-mark-chip { top: calc(50% + 17px); min-width: 28px; height: 28px; line-height: 28px; font-size: 13px; }
  .mark-num { min-width: 36px; height: 36px; line-height: 36px; }   /* as the keyframe list's numbers */
}

/* ─── Pan or Cut into a keyframe (27 Sep) ───────────────────────────────
   David: "the alternative between panning between keyframes and hard cuts
   that we set ourselves". Each keyframe row from the second on carries a
   two-way switch: how the picture gets TO this keyframe. The switch is a
   surface control, so it wears the blue; the cut itself, drawn on the
   timeline, is the box's own jump and wears the tool orange like the
   keyframe dots it sits under (blue is the surface, orange is the tool). */
.kf-arrive {
  flex: none;
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--navy-light);
}
.kf-arrive-btn {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: 700 0.75rem/1 var(--font);
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.kf-arrive-btn + .kf-arrive-btn { border-left: 1px solid var(--border); }
.kf-arrive-btn:hover { color: var(--text); background: var(--navy-mid); }
.kf-arrive-btn.is-on { background: var(--orange); color: var(--accent-ink); }
.kf-arrive-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: -3px; border-radius: 999px; }

.user-cut-line {
  /* Taller than the keyframe dot it runs through (14px), or the dot hides it
     completely (measured 27 Sep: same height, invisible). It rises well
     above the dot and stops just short of the number chip below. */
  position: absolute;
  top: -11px;
  bottom: -7px;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 1.5px;
  background: var(--tool-mark);
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
  pointer-events: none;
}

@media (pointer: coarse) {
  .kf-arrive-btn { min-height: 44px; padding: 0 0.95rem; font-size: 0.85rem; }
}

@media (max-width: 700px) {
  /* A keyframe row on a phone: number, time, position, Jump and Delete on
     the first line; Pan / Cut and any hint ("fast pan to 3") on a second
     line. On one line a row was wider than the phone and slid the WHOLE page
     sideways (measured 27 Sep at 378px, as soon as a row carried a hint). */
  .keyframe-row { flex-wrap: wrap; column-gap: 0.5rem; row-gap: 0; }
  .keyframe-row::after { content: ''; order: 1; flex-basis: 100%; height: 0; }
  .keyframe-row .kf-arrive,
  .keyframe-row .kf-outside-badge { order: 2; margin-top: 0.45rem; }
  .keyframe-row .kf-outside-badge { margin-left: 0; }
  .keyframe-row .kf-time { min-width: 0; }
  .keyframe-row .kf-pct { white-space: nowrap; }
}