/* ====================================================
   Song Reel tool styles for /tools/song-reel/

   Loaded after /css/site.css. Shared design tokens, base reset,
   and body baseline come from site.css. This file contains the
   site chrome (nav, hero, footer) and the component styles the
   Song Reel UI needs.

   Some component classes (drop-zone, option-btn, slider-card,
   toggle-switch, swatch, color-swatches, preview-card, btn-primary)
   are also used by the Photo Border tool and live in that tool's
   stylesheet too. Stage 3 will land its own Video Sync stylesheet,
   and a later cleanup can move shared component styles into a
   dedicated shared file.

   Song Reel-specific selectors (the audio scrubber with corner
   brackets, the text overlay form, position picker, duration
   presets, render result, MP4/WebM note) are unique to this tool
   and live only here for now.
   ==================================================== */


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

   The Song Reel page uses the same drifted palette as the tabs
   page and the Photo Border page so a user switching between
   them sees no visual jump. The DRIFT comments and the
   canonicalization plan in specs/DESIGN-tools-page-extraction.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
   ==================================================== */
.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; }
/* Visible deploy stamp so the live build is verifiable without
   devtools. Format: Build YYYY-MM-DD (N). Bump on every push that
   changes this page. Same pattern used by the Music Video tool. */
.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: 1320px; 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 (file upload). Song Reel uses two: photo and audio.
   ==================================================== */
.upload-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 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; }


/* ====================================================
   Editor grid: preview + render summary on the left, settings
   (including trim song) on the right.

   The right column holds the workflow in natural order: pick the
   orientation, pick which section of the song, then polish (feather,
   motion, fade, text). The left column holds the sticky preview and
   a live render-summary card so the user can see at a glance what
   the export will be.

   Trim song was previously a sibling of preview in the left column.
   That layout produced a visual bug where the trim waveform scrolled
   underneath the sticky preview. Moving trim into the right column
   resolves it.

   On desktop the preview is sticky inside its column, so it stays
   pinned at the top of the viewport while the user scrolls through
   right-column controls. Sticky disables at the single-column
   breakpoint below 880px where vertical space is limited.
   ==================================================== */
.editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 2.5rem;
  margin-bottom: 2.5rem;
  align-items: start;
}
.preview-and-summary {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}
.preview-section { min-width: 0; }
.render-summary-section { min-width: 0; }
.trim-section { min-width: 0; }

@media (min-width: 881px) {
  /* Make the whole left-column stack (preview + summary) sticky as
     a unit. Previously only .preview-section was sticky, which let
     the summary scroll up and disappear behind the pinned preview. */
  .preview-and-summary {
    position: sticky;
    top: 1rem;
    align-self: flex-start;
  }
}

@media (max-width: 880px) {
  .editor-grid { grid-template-columns: 1fr; gap: 2rem; }
  .preview-and-summary { gap: 1.5rem; }
}


/* ====================================================
   Render summary card

   Compact, informational card under the sticky preview. Shows the
   current configuration in a definition-list pattern so the user
   can see at a glance what the export will look like. Updates
   reactively from JS on every state change.
   ==================================================== */
.summary-card {
  background: rgba(244,241,234,0.03);
  border: 0.5px solid var(--parchment-trace);
  border-radius: 8px;
  padding: 1.2rem 1.3rem;
}
.summary-empty {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--parchment-dim);
  margin: 0;
  line-height: 1.5;
}
.summary-list {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0.55rem;
  margin: 0;
}
.summary-list dt {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--parchment-faint);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  align-self: baseline;
  white-space: nowrap;
}
.summary-list dd {
  font-size: 0.92rem;
  color: var(--parchment);
  margin: 0;
  line-height: 1.45;
  word-break: break-word;
}
.summary-list dd .muted {
  color: var(--parchment-dim);
}


/* ====================================================
   Preview card, frame, play button, time display
   ==================================================== */
.preview-card { background: rgba(244,241,234,0.03); border: 0.5px solid var(--parchment-trace); border-radius: 8px; padding: 1.4rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.preview-frame { background: #000; border-radius: 4px; overflow: hidden; box-shadow: 0 12px 50px rgba(0,0,0,0.55); position: relative; }
.preview-frame canvas { display: block; }
.preview-controls { display: flex; align-items: center; gap: 1rem; width: 100%; padding-top: 0.4rem; }
.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; }
.time-display { flex: 1; }
.time-display .now { font-size: 1.0rem; color: var(--parchment); font-variant-numeric: tabular-nums; }
.time-display .dims { font-size: 0.78rem; letter-spacing: 0.1em; color: var(--parchment-faint); text-transform: uppercase; margin-top: 0.25rem; }


/* ====================================================
   Orientation picker, motion presets, feather toggle
   ==================================================== */
.settings-stack { display: flex; flex-direction: column; gap: 2rem; }
.option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 0.55rem; }
.option-btn { padding: 0.95rem 0.8rem; background: rgba(244,241,234,0.025); color: var(--parchment-dim); border: 0.5px solid var(--parchment-trace); border-radius: 6px; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.85rem; letter-spacing: 0.04em; text-align: center; transition: all 0.2s; }
.option-btn:hover { color: var(--parchment); border-color: var(--hazel-dim); }
.option-btn.active { color: var(--parchment); border-color: var(--gold-dim); background: var(--gold-faint); }
.option-btn .hint { font-size: 0.72rem; color: var(--parchment-faint); font-weight: 300; letter-spacing: 0.02em; }
.option-btn.active .hint { color: var(--gold); }
.option-btn.motion-option { align-items: flex-start; text-align: left; gap: 0.25rem; }
.option-btn.motion-option .label { font-size: 0.95rem; }


/* ====================================================
   Toggle switch
   ==================================================== */
.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); }


/* ====================================================
   Color swatches (fade-to-color picker)
   ==================================================== */
.color-swatches {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: 0.7rem;
  padding: 0.4rem 0.2rem;
}
.swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--rule);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s, transform 0.1s;
  position: relative;
}
.swatch:hover { border-color: var(--hazel-dim); }
.swatch.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--void), 0 0 0 3px var(--gold);
}
.swatch-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
.swatch-input-wrap.active::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 2px var(--void) inset;
  pointer-events: none;
}
.color-input {
  width: 32px;
  height: 32px;
  border: 2px solid var(--rule);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  background: transparent;
  overflow: hidden;
}
.color-input::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
.color-input::-webkit-color-swatch { border: none; border-radius: 50%; }
.color-input::-moz-color-swatch { border: none; border-radius: 50%; }
.swatch-label {
  margin-left: 0.4rem;
  font-size: 0.78rem;
  color: var(--parchment-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* ====================================================
   Sliders (motion speed, fade duration, fade width)
   ==================================================== */
.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); }
input[type="range"]:disabled::-webkit-slider-thumb { background: var(--parchment-faint); }
input[type="range"]:disabled::-moz-range-thumb { background: var(--parchment-faint); }


/* ====================================================
   Text overlay form (text-field, position-grid, color toggle)

   These selectors are Song Reel-specific.
   ==================================================== */
.text-field { width: 100%; padding: 0.7rem 0.9rem; background: rgba(244,241,234,0.035); border: 0.5px solid var(--parchment-trace); border-radius: 6px; color: var(--parchment); font-size: 0.95rem; font-family: inherit; outline: none; transition: border-color 0.2s; }
.text-field:focus { border-color: var(--gold-dim); }
.text-field::placeholder { color: var(--parchment-faint); }
.position-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.4rem; margin-top: 0.5rem; }
.position-btn { padding: 0.6rem 0.4rem; background: rgba(244,241,234,0.025); color: var(--parchment-dim); border: 0.5px solid var(--parchment-trace); border-radius: 5px; font-size: 0.82rem; letter-spacing: 0.04em; text-align: center; transition: all 0.2s; font-family: inherit; cursor: pointer; }
.position-btn:hover { color: var(--parchment); border-color: var(--hazel-dim); }
.position-btn.active { color: var(--parchment); border-color: var(--gold-dim); background: var(--gold-faint); }
.color-toggle-row { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.color-toggle-btn { flex: 1; padding: 0.6rem; background: rgba(244,241,234,0.025); border: 0.5px solid var(--parchment-trace); border-radius: 5px; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--parchment-dim); text-align: center; transition: all 0.2s; font-family: inherit; cursor: pointer; }
.color-toggle-btn:hover { color: var(--parchment); border-color: var(--hazel-dim); }
.color-toggle-btn.active { color: var(--parchment); border-color: var(--gold-dim); background: var(--gold-faint); }


/* ====================================================
   Apple Photos style audio trimmer with corner brackets

   The Song Reel audio waveform draws into .scrubber-canvas. The
   gold corner-bracket handles (.scrubber-handle .left/.right) sit
   on top, and the highlighted region (.scrubber-region) drags as
   a unit. Chevrons nudge the selection by one second.
   ==================================================== */
.scrubber-wrap { margin-top: 1rem; }
.scrubber { position: relative; width: 100%; height: 96px; background: var(--ink); border-radius: 10px; border: 1px solid var(--rule); overflow: visible; user-select: none; -webkit-user-select: none; touch-action: none; }
.scrubber-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 10px; pointer-events: none; }
.scrubber-region { position: absolute; top: 0; bottom: 0; background: rgba(201,169,110,0.06); cursor: grab; border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }
.scrubber-region.dragging { cursor: grabbing; }
.scrubber-handle { position: absolute; top: -6px; bottom: -6px; width: 18px; cursor: ew-resize; display: flex; align-items: center; justify-content: center; z-index: 3; }
.scrubber-handle.left { transform: translateX(-9px); }
.scrubber-handle.right { transform: translateX(-9px); }
.scrubber-handle::before, .scrubber-handle::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid var(--gold); }
.scrubber-handle.left::before { top: 0; left: 0; border-right: none; border-bottom: none; border-top-left-radius: 4px; }
.scrubber-handle.left::after { bottom: 0; left: 0; border-right: none; border-top: none; border-bottom-left-radius: 4px; }
.scrubber-handle.right::before { top: 0; right: 0; border-left: none; border-bottom: none; border-top-right-radius: 4px; }
.scrubber-handle.right::after { bottom: 0; right: 0; border-left: none; border-top: none; border-bottom-right-radius: 4px; }
.scrubber-handle .grip { width: 3px; height: 36px; background: var(--gold); border-radius: 2px; z-index: 1; }
.scrubber-playhead { position: absolute; top: 4px; bottom: 4px; width: 2px; background: var(--parchment); pointer-events: none; z-index: 2; box-shadow: 0 0 4px rgba(244,241,234,0.5); }
.scrubber-chevron { position: absolute; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: var(--ink-raised); border: 1px solid var(--rule); border-radius: 50%; color: var(--parchment-dim); font-size: 0.85rem; transition: color 0.2s, border-color 0.2s; z-index: 4; }
.scrubber-chevron:hover { color: var(--gold); border-color: var(--gold-dim); }
.scrubber-chevron.left { left: -36px; }
.scrubber-chevron.right { right: -36px; }
@media (max-width: 600px) { .scrubber-chevron.left { left: 4px; } .scrubber-chevron.right { right: 4px; } }
.scrubber-ticks { position: relative; height: 14px; margin-top: 8px; }
.scrubber-tick { position: absolute; top: 0; width: 1px; background: var(--parchment-faint); }
.scrubber-tick.major { height: 8px; background: var(--parchment-dim); }
.scrubber-tick.minor { height: 4px; }
.scrubber-readout { display: flex; justify-content: space-between; margin-top: 0.7rem; font-size: 0.85rem; color: var(--parchment-dim); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.scrubber-readout strong { color: var(--parchment); font-weight: 400; margin-left: 0.4rem; }
.scrubber-readout .selected-time { color: var(--gold); }
.duration-presets { display: flex; gap: 0.55rem; margin-top: 1rem; flex-wrap: wrap; }
.duration-presets button { padding: 0.45rem 1rem; background: transparent; color: var(--parchment-dim); border: 0.5px solid var(--parchment-trace); border-radius: 4px; font-size: 0.85rem; letter-spacing: 0.06em; transition: all 0.2s; }
.duration-presets button:hover:not(:disabled) { color: var(--gold); border-color: var(--gold-dim); }


/* ====================================================
   Export / render panel and result
   ==================================================== */
.export-card { background: rgba(244,241,234,0.025); border: 0.5px solid var(--parchment-trace); border-radius: 8px; padding: 1.8rem; display: flex; flex-direction: column; gap: 1.4rem; }
.export-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.export-header .summary { flex: 1; min-width: 240px; }
.export-header .summary .tag { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--parchment-faint); margin-bottom: 0.5rem; }
.export-header .summary .figure { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; color: var(--parchment); line-height: 1.2; }
.export-header .summary .figure .secondary { color: var(--parchment-faint); font-size: 1.2rem; }
.btn-primary { padding: 0.95rem 1.8rem; background: var(--gold); color: var(--void); font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; border-radius: 4px; display: inline-flex; align-items: center; gap: 0.7rem; 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-secondary { padding: 0.85rem 1.4rem; background: transparent; color: var(--gold); border: 1px solid var(--gold-dim); border-radius: 4px; text-decoration: none; display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; align-self: flex-start; transition: all 0.2s; }
.btn-secondary:hover { color: var(--void); background: var(--gold); border-color: var(--gold); }
.progress-track { height: 2px; background: var(--rule); border-radius: 1px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--gold); transition: width 0.2s; width: 0; }
.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); }
.export-result { padding-top: 0.5rem; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 1rem; }
.export-result video { width: 100%; max-height: 480px; border-radius: 4px; background: #000; margin-top: 1rem; object-fit: contain; }
.export-note { font-size: 0.85rem; color: var(--parchment-faint); line-height: 1.55; }


/* ====================================================
   Empty state
   ==================================================== */
.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
   ==================================================== */
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; }
  .upload-row { grid-template-columns: 1fr; }
  .export-header { flex-direction: column; gap: 1rem; }
  .btn-primary { width: 100%; justify-content: center; }
  .settings-stack { gap: 1.5rem; }
  .scrubber-handle { width: 28px; }
  .scrubber-chevron.left { left: 4px; }
  .scrubber-chevron.right { right: 4px; }
}

@media (max-width: 480px) {
  .option-grid { grid-template-columns: 1fr 1fr; }
  .settings-stack { gap: 1.2rem; }
  .swatch, .swatch-input-wrap { width: 40px; height: 40px; }
  .color-input { width: 40px; height: 40px; }
  .duration-presets button { padding: 0.6rem 0.8rem; min-height: 44px; }
  .position-btn, .color-toggle-btn { min-height: 44px; }
  .drop-zone { padding: 1.2rem 1.2rem; }
}