/* ============================================================================
   caption-core.css — the VISUAL caption rules, shared verbatim by the editor
   preview (static/app-v2.html) and the offline overlay renderer
   (static/caption-overlay.html, burned into the MP4 by the render service).

   Whatever renders here is exactly what the exported video shows, so this file
   is the single source of truth for caption appearance. Keep it free of
   editor-only affordances (edit outline, drag cursor, hover transitions) —
   those live in app-v2-styles.css and load ONLY in the editor.
   ============================================================================ */

.caption-overlay {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 85%;
  text-align: center;
  color: white;
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 0, 0, 0.4);
  letter-spacing: -0.01em;
  line-height: 1.25;
  white-space: pre-wrap;
  padding: 4px 0;
  /* Vertically centre the text inside the box so a short caption's visual
     centre matches the element centre (which is what top:Y% positions). */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 22px;
}

/* 9:16 — social platforms overlay their own UI on portrait sides/bottom, so
   captions use a narrower box (85% → 70%). The renderer applies the same
   `.player-stage.portrait` ancestor for portrait output. */
.player-stage.portrait .caption-overlay { width: 70%; }

/* ── Karaoke active-word highlight (3 styles) ──────────────────────────────
   Shared so the editor preview and the burned-in render are identical. */
.karaoke-active { transition: color 0.08s, background 0.08s; }
.karaoke-active[data-style="color"] {
  color: var(--karaoke-color, #ffd700);
}
.karaoke-active[data-style="stroke"] {
  -webkit-text-stroke: 0.18em var(--karaoke-color, #ffd700);
  paint-order: stroke fill;
}
/* Box = filled rounded rectangle behind the active word, in the karaoke color;
   text keeps the caption color. */
.karaoke-active[data-style="box"] {
  background: var(--karaoke-color, #ffd700);
  border-radius: 0.22em;
  /* Vertical padding is set per-font by caption-core.js (centerActiveBox), which
     measures the glyph box and centres the pill on the ink for ANY font. This is
     just the fallback when measurement is unavailable. */
  padding: 0.12em 0.18em;
  /* Cancel the horizontal padding from the layout so the pill grows into the
     inter-word gaps WITHOUT pushing the neighbouring words sideways as the
     highlight advances word-by-word. */
  margin-left: -0.18em;
  margin-right: -0.18em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* Crisp text on the pill — the caption's drop shadow looks muddy here and
     haloes the box edges, so drop it for the boxed word. */
  text-shadow: none;
}