/* ====================================================
   Music Video tool styles for /tools/music-video/

   Loaded after /css/site.css. Shared design tokens, base reset,
   and body baseline come from site.css. This file contains the
   tool chrome (nav, hero, footer) plus the component styles the
   Music Video Stage 1 UI needs.

   Several component classes (drop-zone, slider-card, toggle-row,
   toggle-switch, preview play-btn, error-card) mirror the
   conventions already established by song-reel.css and
   video-sync.css. They are repeated here so this tool stays
   self-contained and visually consistent with the rest of the
   social tools page family. A later cleanup can move the truly
   shared component styles into a dedicated shared file.

   Stage-1-specific selectors (waveform with corner brackets,
   marker labels, snap toggle, segment status line, marker-match
   badge, fade grid, next-stages card) are unique to this tool
   and live only here.
   ==================================================== */


/* ====================================================
   Drifted palette (matches /tools/index.html)

   The Music Video page uses the same drifted palette as the
   other tool pages so a user switching between them sees no
   visual jump. The DRIFT comments and the canonicalization
   plan in specs/DESIGN-tools-page-extraction.md and TASKS.md
   apply here too.
   ==================================================== */

/* DRIFT: differs from /css/site.css canonical (e.g., --void: #0a0a0b
   vs canonical #0d0d0b; --parchment: #e8e0d0 vs #f4f1ea;
   --gold: #c9a84c vs #c9a96e). Resolve in the palette
   canonicalization task tracked in TASKS.md. */
:root {
  --void: #0a0a0b;
  --ink: #141416;
  --ink-light: #1e1e22;
  --ink-raised: #28282d;
  --parchment: #e8e0d0;
  --parchment-dim: rgba(232,224,208,0.65);
  --parchment-faint: rgba(232,224,208,0.35);
  --parchment-trace: rgba(232,224,208,0.12);
  --hazel: #6b7c4a;
  --hazel-glow: rgba(107,124,74,0.12);
  --hazel-dim: rgba(107,124,74,0.4);
  --gold: #c9a84c;
  --gold-bright: #d9b85c;
  --gold-dim: #7a6530;
  --gold-faint: rgba(201,168,76,0.10);
  --gold-glow: rgba(201,168,76,0.25);
  --labradorite: #5878a0;
  --rule: rgba(201,168,76,0.15);
  --danger: #c97e7e;
}

/* DRIFT: see :root above. */
[data-theme="light"] {
  --void: #f4f0e8;
  --ink: #faf7f2;
  --ink-light: #ffffff;
  --ink-raised: #ebe4d4;
  --parchment: #28221a;
  --parchment-dim: rgba(40,34,26,0.72);
  --parchment-faint: rgba(40,34,26,0.45);
  --parchment-trace: rgba(40,34,26,0.18);
  --hazel: #4a6230;
  --hazel-glow: rgba(74,98,48,0.10);
  --hazel-dim: rgba(74,98,48,0.40);
  --gold: #9a6e10;
  --gold-bright: #b07f1c;
  --gold-dim: #6e5010;
  --gold-faint: rgba(154,110,16,0.08);
  --gold-glow: rgba(154,110,16,0.25);
  --labradorite: #385870;
  --rule: rgba(40,34,26,0.14);
  --danger: #b54848;
}

html, body { font-size: 1.05rem; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
button:disabled { cursor: not-allowed; opacity: 0.4; }
input, select { font-family: inherit; }


/* ====================================================
   Theme toggle (component styling; behavior in /scripts/site.js)
   ==================================================== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--parchment-dim);
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, transform 0.25s;
}
.theme-toggle:hover { color: var(--gold); border-color: var(--gold-dim); }
.theme-toggle:active { transform: scale(0.95); }
.theme-toggle svg { display: block; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }


/* ====================================================
   Navigation
   ==================================================== */
.tool-nav {
  position: relative;
  z-index: 10;
  padding: 2rem 8vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tool-nav a { color: var(--parchment-faint); text-decoration: none; font-size: 1.0rem; letter-spacing: 0.08em; transition: color 0.3s; }
.tool-nav a:hover { color: var(--hazel); }
.tool-nav .home { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--parchment); letter-spacing: 0.05em; }
.tool-nav-right { display: flex; align-items: center; gap: 1.2rem; }


/* ====================================================
   Hero with build stamp

   The build stamp is a small monospace-feel line below the
   subtag so Chris can verify which deployed build is loaded
   in the browser without opening devtools.
   ==================================================== */
.tool-hero { padding: 4vh 8vw 5vh; text-align: center; border-bottom: 1px solid var(--rule); }
.tool-hero .eyebrow { display: inline-block; padding: 5px 16px; background: var(--gold-faint); color: var(--gold); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 20px; margin-bottom: 1.4rem; }
.tool-hero h1 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.15; color: var(--parchment); margin-bottom: 1rem; letter-spacing: -0.005em; }
.tool-hero .subtag { font-family: 'Source Sans 3', sans-serif; font-weight: 300; font-size: 1.15rem; color: var(--parchment-dim); max-width: 620px; margin: 0 auto; line-height: 1.65; }
.tool-hero .build-stamp {
  margin-top: 1.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--parchment-faint);
  font-variant-numeric: tabular-nums;
}


/* ====================================================
   Privacy banner
   ==================================================== */
.privacy-banner {
  max-width: 880px;
  margin: 2.4rem auto 0;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: rgba(122,140,94,0.06);
  border: 0.5px solid var(--hazel-dim);
  border-radius: 999px;
  color: var(--parchment-dim);
  font-size: 0.92rem;
  line-height: 1.45;
  text-align: left;
}
.privacy-banner svg { color: var(--hazel); flex-shrink: 0; }
.privacy-banner strong { color: var(--parchment); font-weight: 500; }


/* ====================================================
   Main container, section tags, helper text
   ==================================================== */
main.tool { padding: 4vh 8vw 8vh; max-width: 1080px; margin: 0 auto; }
.section-tag { display: block; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--parchment-faint); margin-bottom: 1rem; }
.tool-section { margin-bottom: 3rem; }
.helper-text { font-size: 0.95rem; color: var(--parchment-dim); margin-bottom: 1rem; line-height: 1.6; }


/* ====================================================
   Drop zones (audio + video upload)

   The audio track and video source drop zones share one
   upload-row in the consolidated "Your media" section. The
   grid is two-column on desktop and collapses to one column
   on narrow viewports. Style mirrors song-reel.css so the
   visual feel matches the rest of the tool family.
   ==================================================== */
.upload-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.drop-zone { background: rgba(244,241,234,0.025); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 0.5px dashed var(--parchment-trace); border-radius: 8px; padding: 1.6rem 1.8rem; cursor: pointer; display: flex; align-items: center; gap: 1.1rem; transition: border-color 0.3s, background 0.3s; }
.drop-zone:hover, .drop-zone.dragover { border-color: var(--gold-glow); background: rgba(244,241,234,0.05); }
.drop-zone.has-file { border-style: solid; border-color: var(--hazel-dim); }
.drop-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--void); border-radius: 4px; border: 1px solid var(--rule); color: var(--parchment-faint); flex-shrink: 0; transition: color 0.3s, border-color 0.3s; }
.drop-zone.has-file .drop-icon { color: var(--gold); border-color: var(--gold-dim); }
.drop-text { flex: 1; min-width: 0; }
.drop-label { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--parchment-faint); margin-bottom: 0.3rem; }
.drop-name { font-size: 1.0rem; color: var(--parchment-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-zone.has-file .drop-name { color: var(--parchment); }

.loading-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1.1rem; background: var(--ink); border-radius: 4px; color: var(--parchment-dim); font-size: 0.95rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; transform-origin: center; }


/* ====================================================
   Waveform with segment brackets

   The waveform itself draws into .waveform-canvas. The gold
   corner-bracket handles (.waveform-handle .left/.right) sit
   on top of the canvas, and the highlighted region between
   them drags as a unit. Marker lines and labels are absolutely
   positioned children of .waveform-markers, layered above the
   canvas but below the handles so the corner brackets always
   read clearly.

   Slightly taller than the Song Reel scrubber (110px vs 96px)
   because the marker labels need vertical room above the
   region.
   ==================================================== */
.waveform-wrap { margin-top: 0.5rem; }
.waveform { position: relative; width: 100%; height: 110px; background: var(--ink); border-radius: 10px; border: 1px solid var(--rule); overflow: visible; user-select: none; -webkit-user-select: none; touch-action: none; }
.waveform-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 10px; pointer-events: none; }

.waveform-markers { position: absolute; inset: 0; pointer-events: none; }
.marker-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed var(--parchment-faint);
  opacity: 0.7;
}
.marker-line.full { border-left-color: var(--hazel-dim); }
.marker-label {
  position: absolute;
  top: -22px;
  transform: translateX(-50%);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--parchment-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.marker-label.full { color: var(--hazel); }

.waveform-region {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(201,168,76,0.06);
  cursor: grab;
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  z-index: 2;
}
.waveform-region.dragging { cursor: grabbing; }

.waveform-handle { position: absolute; top: -6px; bottom: -6px; width: 18px; cursor: ew-resize; display: flex; align-items: center; justify-content: center; z-index: 3; }
.waveform-handle.left { transform: translateX(-9px); }
.waveform-handle.right { transform: translateX(-9px); }
.waveform-handle::before, .waveform-handle::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid var(--gold); }
.waveform-handle.left::before { top: 0; left: 0; border-right: none; border-bottom: none; border-top-left-radius: 4px; }
.waveform-handle.left::after { bottom: 0; left: 0; border-right: none; border-top: none; border-bottom-left-radius: 4px; }
.waveform-handle.right::before { top: 0; right: 0; border-left: none; border-bottom: none; border-top-right-radius: 4px; }
.waveform-handle.right::after { bottom: 0; right: 0; border-left: none; border-top: none; border-bottom-right-radius: 4px; }
.waveform-handle .grip { width: 3px; height: 36px; background: var(--gold); border-radius: 2px; z-index: 1; }

.waveform-playhead { position: absolute; top: 4px; bottom: 4px; width: 2px; background: var(--parchment); pointer-events: none; z-index: 4; box-shadow: 0 0 4px rgba(244,241,234,0.5); }

.waveform-ticks { position: relative; height: 14px; margin-top: 32px; }
.waveform-tick { position: absolute; top: 0; width: 1px; background: var(--parchment-faint); }
.waveform-tick.major { height: 8px; background: var(--parchment-dim); }
.waveform-tick.minor { height: 4px; }


/* ====================================================
   Snap toggle row

   Shares the toggle-row pattern from song-reel.css. A modifier
   hint sits in the secondary label line ("Hold Shift to
   disable").
   ==================================================== */
.snap-row { margin-top: 1.6rem; display: flex; gap: 1rem; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: rgba(244,241,234,0.025); border: 0.5px solid var(--parchment-trace); border-radius: 6px; padding: 0.95rem 1.2rem; }
.toggle-label { display: flex; flex-direction: column; gap: 0.2rem; }
.toggle-label .label-main { font-size: 0.95rem; color: var(--parchment); }
.toggle-label .label-hint { font-size: 0.78rem; color: var(--parchment-faint); }
.toggle-switch { position: relative; width: 44px; height: 24px; background: var(--rule); border-radius: 12px; cursor: pointer; flex-shrink: 0; transition: background 0.25s; }
.toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--parchment-dim); border-radius: 50%; transition: transform 0.25s, background 0.25s; }
.toggle-switch.on { background: var(--gold-dim); }
.toggle-switch.on::after { transform: translateX(20px); background: var(--gold); }


/* ====================================================
   Status line and marker-match badge

   Shows the current segment in/out and duration. When the
   duration exactly matches a platform marker (within ~0.05s),
   the badge appears with the marker label so the user gets
   immediate feedback that they have landed on a meaningful
   length.
   ==================================================== */
.status-line {
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  background: rgba(244,241,234,0.025);
  border: 0.5px solid var(--parchment-trace);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
  color: var(--parchment-dim);
  font-variant-numeric: tabular-nums;
}
.status-segment strong { color: var(--parchment); font-weight: 400; }
.status-duration { color: var(--gold); margin-left: 0.4rem; }
.marker-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  background: var(--gold-faint);
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}


/* ====================================================
   Preview play button and time display

   Mirrors the song-reel preview-controls pattern: large gold
   circular play button on the left, time and filename on the
   right.
   ==================================================== */
.preview-row {
  /* The preview row and the fade grid both sit inside the
     consolidated Audio Segment section, stacked under the
     status line, so each carries its own top margin. */
  margin-top: 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.3rem;
  background: rgba(244,241,234,0.025);
  border: 0.5px solid var(--parchment-trace);
  border-radius: 8px;
}
.play-btn { width: 46px; height: 46px; border-radius: 50%; background: var(--gold); color: var(--void); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s, transform 0.1s; }
.play-btn:hover { background: var(--gold-bright); }
.play-btn:active { transform: scale(0.96); }
.play-btn svg { display: block; }
.preview-time { flex: 1; min-width: 0; }
.preview-time .now { font-size: 1.0rem; color: var(--parchment); font-variant-numeric: tabular-nums; }
.preview-time .dims { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--parchment-faint); margin-top: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ====================================================
   Fade controls (two-column grid of slider cards)
   ==================================================== */
.fade-grid {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.slider-card { background: rgba(244,241,234,0.025); border: 0.5px solid var(--parchment-trace); border-radius: 6px; padding: 1.1rem 1.3rem; }
.slider-card-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.85rem; }
.slider-card-label { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--parchment-dim); }
.slider-card-value { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.slider-card-extremes { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.75rem; color: var(--parchment-faint); letter-spacing: 0.04em; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: var(--rule); outline: none; border-radius: 1px; margin: 0.4rem 0; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); cursor: pointer; border: 2px solid var(--void); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); cursor: pointer; border: 2px solid var(--void); }


/* ====================================================
   Video sources list (Stage 2)

   The drop zone reuses the .drop-zone pattern from the audio
   section above. Rows below it list each loaded source with
   a colored letter badge, filename, duration, and a remove
   button. Letters are assigned A through J in load order and
   do not renumber when a source is removed (so existing clip
   references stay stable).

   Each source's color is assigned at the JS layer via inline
   style on .source-letter (the badge). The palette rotates
   through gold, hazel, labradorite, parchment-dim, then
   variant tints for sources 5 through 10.
   ==================================================== */
.source-warning {
  margin-top: 0.8rem;
  padding: 0.75rem 1rem;
  background: rgba(201,168,76,0.08);
  border: 1px solid var(--gold-dim);
  border-radius: 6px;
  color: var(--gold);
  font-size: 0.88rem;
  line-height: 1.45;
}

.source-list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.source-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.9rem;
  background: rgba(244,241,234,0.025);
  border: 0.5px solid var(--parchment-trace);
  border-radius: 6px;
  transition: border-color 0.2s, background 0.2s;
}
.source-row:hover { border-color: var(--hazel-dim); }
.source-letter {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 500;
  /* Letter color stays fixed because the badge background colors are
     hardcoded jewel tones. Theme-dependent --void inverts to light in
     light mode and would lose contrast on those backgrounds. */
  color: #1a1a16;
  letter-spacing: 0;
}
.source-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.source-name {
  font-size: 0.95rem;
  color: var(--parchment);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.source-duration {
  font-size: 0.78rem;
  color: var(--parchment-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.source-remove {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  color: var(--parchment-dim);
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.source-remove:hover { color: var(--danger); border-color: var(--danger); background: rgba(201,126,126,0.08); }


/* ====================================================
   Timeline (Stage 2)

   The track represents the audio segment duration. Tick
   marks at the bottom give time orientation. The clip block
   sits on the upper half of the track, draggable to slide
   (interior) or resize (right edge). The block uses the
   source's assigned color at full opacity so it reads
   clearly against the dim track.
   ==================================================== */
.timeline-wrap {
  margin-top: 0.5rem;
}
.timeline-track {
  position: relative;
  width: 100%;
  height: 64px;
  background: var(--ink);
  border-radius: 8px;
  border: 1px solid var(--rule);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.timeline-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.timeline-tick {
  position: absolute;
  bottom: 0;
  width: 1px;
  background: var(--parchment-faint);
}
.timeline-tick.major { height: 10px; background: var(--parchment-dim); }
.timeline-tick.minor { height: 5px; }
.timeline-tick-label {
  position: absolute;
  bottom: 12px;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--parchment-faint);
  transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.timeline-clips { position: absolute; inset: 0; }

.timeline-clip {
  position: absolute;
  top: 8px;
  bottom: 28px;
  border-radius: 5px;
  cursor: grab;
  display: flex;
  align-items: center;
  padding: 0 0.55rem;
  /* See note on .source-letter: the clip background is the source's
     fixed jewel-tone color, so the foreground stays a fixed dark. */
  color: #1a1a16;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.timeline-clip.selected {
  box-shadow: 0 0 0 2px var(--parchment), 0 2px 6px rgba(0,0,0,0.35);
}
.timeline-clip.dragging { cursor: grabbing; }
.timeline-clip-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.timeline-clip-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
}
.timeline-clip-resize.right { right: 0; background: linear-gradient(to right, transparent, rgba(0,0,0,0.28)); }

/* Crossfade overlap band on the timeline. Sits above the two
   overlapping clip blocks (z-index 3) so the dissolve reads at a
   glance; pointer-events: none keeps the resize handles and the
   clip-block drags reachable underneath. */
.timeline-crossfade-band {
  position: absolute;
  top: 8px;
  bottom: 28px;
  pointer-events: none;
  z-index: 3;
  background: repeating-linear-gradient(
    45deg,
    rgba(201,168,76,0.55),
    rgba(201,168,76,0.55) 4px,
    rgba(201,168,76,0.18) 4px,
    rgba(201,168,76,0.18) 8px
  );
  border-left: 1px dashed rgba(201,168,76,0.95);
  border-right: 1px dashed rgba(201,168,76,0.95);
  border-radius: 2px;
}
.timeline-clip-resize.left { left: 0; background: linear-gradient(to left, transparent, rgba(0,0,0,0.28)); }
.timeline-clip-resize.right:hover { background: linear-gradient(to right, transparent, rgba(0,0,0,0.5)); }
.timeline-clip-resize.left:hover { background: linear-gradient(to left, transparent, rgba(0,0,0,0.5)); }

.timeline-readout {
  margin-top: 0.7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--parchment-dim);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.timeline-readout strong { color: var(--parchment); font-weight: 400; margin-left: 0.4rem; }
.timeline-summary { color: var(--gold); }

.timeline-controls {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.btn-add-clip {
  padding: 0.7rem 1.3rem;
  background: var(--gold);
  color: var(--void);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 4px;
  transition: background 0.2s, transform 0.1s;
}
.btn-add-clip:hover:not(:disabled) { background: var(--gold-bright); }
.btn-add-clip:active:not(:disabled) { transform: scale(0.98); }

.source-picker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.source-picker-label {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--parchment-dim);
}
.source-picker-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: #1a1a16;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s;
}
.source-picker-btn:hover { transform: scale(1.08); }
.source-picker-btn:focus { box-shadow: 0 0 0 2px var(--parchment); outline: none; }


/* ====================================================
   Composition preview (Stage 3 part 2)

   A canvas that plays the whole timeline clip by clip against
   the master audio. Sits in the Timeline section under the
   Add Clip control. The stage is a fixed 16:9 black box; the
   canvas is letterboxed inside it. An empty-state message
   shows when no clip is on the timeline yet.
   ==================================================== */
.composition-preview {
  margin-top: 1.6rem;
}
.composition-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  border: 0.5px solid var(--parchment-trace);
  display: flex;
  align-items: center;
  justify-content: center;
}
.composition-stage canvas {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.composition-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--parchment-dim);
}
.composition-controls {
  margin: 0.9rem auto 0;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem;
  background: rgba(244,241,234,0.025);
  border: 0.5px solid var(--parchment-trace);
  border-radius: 6px;
}


/* ====================================================
   Clip detail (Stage 2)

   Two-column on desktop: source preview video and play
   controls on the left, clip configuration form on the
   right. Stacks to one column on narrow viewports so the
   preview doesn't shrink past usefulness.
   ==================================================== */
.clip-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
}
@media (max-width: 880px) {
  .clip-detail-grid { grid-template-columns: 1fr; gap: 1.4rem; }
}

.clip-detail-left { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.source-preview-wrap {
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  border: 0.5px solid var(--parchment-trace);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.source-preview-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.source-preview-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem;
  background: rgba(244,241,234,0.025);
  border: 0.5px solid var(--parchment-trace);
  border-radius: 6px;
}

.clip-detail-right { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.clip-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.clip-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.clip-field-label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--parchment-faint);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
}
.clip-input, .clip-select {
  width: 100%;
  padding: 0.6rem 0.85rem;
  background: rgba(244,241,234,0.04);
  border: 0.5px solid var(--parchment-trace);
  border-radius: 5px;
  color: var(--parchment);
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  font-variant-numeric: tabular-nums;
}
.clip-input:focus, .clip-select:focus { border-color: var(--gold-dim); background: rgba(244,241,234,0.07); }
.clip-select { cursor: pointer; }

.btn-danger {
  margin-top: 0.4rem;
  align-self: flex-start;
  padding: 0.6rem 1.1rem;
  background: transparent;
  color: var(--danger);
  border: 1px solid rgba(201,126,126,0.4);
  border-radius: 5px;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.btn-danger:hover { color: #fff; background: var(--danger); border-color: var(--danger); }


/* ====================================================
   Next stages info card

   Visual reminder that earlier stages are intentionally
   narrow and that further work is coming. References the
   design doc so a future reader can find the full spec.
   ==================================================== */
.next-stages-card {
  background: rgba(244,241,234,0.025);
  border: 0.5px solid var(--parchment-trace);
  border-left: 2px solid var(--hazel);
  border-radius: 6px;
  padding: 1rem 1.3rem;
}
.next-stages-card p { font-size: 0.92rem; color: var(--parchment-dim); margin: 0; line-height: 1.6; }
.next-stages-card code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.85rem; background: var(--ink); padding: 0.1rem 0.4rem; border-radius: 3px; color: var(--parchment); }


/* ====================================================
   Error card
   ==================================================== */
.error-card { padding: 0.9rem 1.2rem; background: rgba(201,126,126,0.08); border: 1px solid rgba(201,126,126,0.3); border-radius: 4px; font-size: 0.95rem; color: var(--danger); }


/* ====================================================
   Empty state and footer
   ==================================================== */
.placeholder-state { text-align: center; padding: 3rem 1rem; color: var(--parchment-dim); font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-style: italic; }

footer.tool-footer { padding: 3rem 8vw; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; color: var(--parchment-faint); font-size: 0.95rem; }
footer.tool-footer a { color: var(--parchment-faint); text-decoration: none; letter-spacing: 0.06em; transition: color 0.3s; }
footer.tool-footer a:hover { color: var(--hazel); }
.footer-privacy {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: 0.4rem;
  color: var(--hazel);
}
.footer-privacy svg { flex-shrink: 0; }


/* ====================================================
   Visibility utilities
   ==================================================== */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }


/* ====================================================
   Responsive
   ==================================================== */
@media (max-width: 768px) {
  .tool-nav { padding: 1.4rem 5vw; }
  main.tool { padding: 3vh 5vw 6vh; }
  .waveform-handle { width: 28px; }
  .status-line { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .drop-zone { padding: 1.2rem 1.2rem; }
  .marker-label { font-size: 0.6rem; }
  .timeline-track { height: 56px; }
  .timeline-clip { font-size: 0.7rem; padding: 0 0.4rem; }
  .clip-field-row { grid-template-columns: 1fr; gap: 1rem; }
  .source-row { gap: 0.7rem; padding: 0.65rem 0.75rem; }
  .source-letter { width: 28px; height: 28px; font-size: 1rem; }
  .btn-add-clip { width: 100%; text-align: center; }
}


/* ====================================================
   Export (Stage 4): aspect selection, framing canvas,
   render button, per-result rows

   The aspect toggles are inline checkboxes styled to look
   like the option-btn family so the visual chrome stays
   continuous with the rest of the tool. The framing canvas
   shows a still of the 16:9 composition stage; the
   focused aspect's region is outlined in gold while the
   rest is dimmed. Tabs above the canvas switch which
   aspect is being framed.
   ==================================================== */
.export-aspects {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
}
.aspect-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  background: rgba(244,241,234,0.025);
  border: 0.5px solid var(--parchment-trace);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.aspect-toggle:hover { border-color: var(--hazel-dim); }
.aspect-toggle input[type="checkbox"] { accent-color: var(--gold); margin: 0; }
.aspect-toggle:has(input:checked) { border-color: var(--gold-dim); background: var(--gold-faint); }
.aspect-toggle .aspect-label { font-family: 'Cormorant Garamond', serif; font-size: 1rem; color: var(--parchment); letter-spacing: 0.02em; }
.aspect-toggle .aspect-hint { font-size: 0.78rem; color: var(--parchment-faint); letter-spacing: 0.04em; }

.export-framing { margin-bottom: 1.4rem; }
.framing-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}
.framing-tab {
  padding: 0.4rem 0.85rem;
  background: rgba(244,241,234,0.025);
  border: 0.5px solid var(--parchment-trace);
  border-radius: 4px;
  color: var(--parchment-dim);
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.framing-tab:hover { color: var(--parchment); border-color: var(--hazel-dim); }
.framing-tab.active { color: var(--parchment); border-color: var(--gold-dim); background: var(--gold-faint); }

.framing-stage-wrap {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  border: 0.5px solid var(--parchment-trace);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.framing-stage-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: ew-resize;
  touch-action: none;
}
.framing-hint {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--parchment-faint);
  text-align: center;
}

.export-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.btn-primary {
  padding: 0.7rem 1.5rem;
  background: var(--gold);
  color: #1a1a16;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 4px;
  transition: background 0.2s, transform 0.1s;
}
.btn-primary:hover:not(:disabled) { background: var(--gold-bright); }
.btn-primary:active:not(:disabled) { transform: scale(0.98); }
.btn-primary:disabled { cursor: not-allowed; opacity: 0.45; }
.export-progress {
  color: var(--parchment-dim);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
.export-progress span { color: var(--gold); }

.export-results {
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.export-result {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.9rem;
  background: rgba(244,241,234,0.025);
  border: 0.5px solid var(--parchment-trace);
  border-radius: 6px;
}
.export-result-aspect {
  flex-shrink: 0;
  width: 56px;
  padding: 0.25rem 0;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  color: var(--gold);
  background: var(--gold-faint);
  border: 0.5px solid var(--gold-dim);
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.export-result-name {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  color: var(--parchment);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-secondary {
  flex-shrink: 0;
  padding: 0.5rem 0.95rem;
  background: transparent;
  color: var(--gold);
  border: 0.5px solid var(--gold-dim);
  border-radius: 4px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.btn-secondary:hover { background: var(--gold); color: #1a1a16; }


/* ====================================================
   Per-clip transitions (Stage 3 part 2b: fade-from/to-black)

   The duration slider rows sit inside the clip detail panel
   next to their type selects; when the type is Cut the
   duration field dims and ignores pointer events so the
   control reads as inactive.

   Timeline-clip-fade overlays are gradient strips on the
   left and right edges of each clip block, sized to the
   fade fraction of the clip span. Pointer-events: none so
   they never steal clicks from the resize handles
   underneath.
   ==================================================== */
.trans-slider-row { display: flex; align-items: center; gap: 0.6rem; }
.trans-slider-row input[type="range"] { flex: 1; }
.trans-slider-value { font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--gold); min-width: 2.8em; text-align: right; }
.clip-field.is-disabled { opacity: 0.4; pointer-events: none; }
.timeline-clip-fade { position: absolute; top: 0; bottom: 0; pointer-events: none; z-index: 1; }
.timeline-clip-fade.left { left: 0; background: linear-gradient(to right, rgba(0,0,0,0.85), transparent); }
.timeline-clip-fade.right { right: 0; background: linear-gradient(to left, rgba(0,0,0,0.85), transparent); }