/* subtitles.css: the look of Scarlet's subtitles (6 Nov 2026), loaded AFTER reel.css and glass.css so it overrides them without
   editing them. Everything here is scoped to p.x-voice[data-kit="on"], the attribute kit/subtitles.js sets only while it owns the
   card; without the engine (or when it hands the card back) reel.css and glass.css style the old line-by-line subtitle untouched.

   TOKENS (set on :root or the card to retune; all optional)
     --sub-lh        line height of a row                              1.42
     --sub-dim       opacity of words not yet spoken                   .45
     --sub-now       colour of the word being spoken (a hint of warmth) #f3d9a0 (night), #8a6420 (the cream era)
     --sub-word-ms   a word's brightening time                         150ms
     --sub-ch        the card's text width in characters, set per passage by the engine (the longest row + 1)
     --sub-fill      the glass fill behind the words (night)            rgba(9,14,26,.58)
   The engine drives --k (0..1 opacity) and --y (px) on each .x-voice__l layer; layers are never CSS-transitioned. */
:root{--sub-lh:1.42;--sub-dim:.45;--sub-word-ms:150ms;--sub-now:#f3d9a0;--sub-fill:rgba(9,14,26,.58)}
[data-era="light"]{--sub-now:#8a6420}

.x-capstack > .x-voice[data-kit="on"]{line-height:var(--sub-lh);text-wrap:initial;letter-spacing:.005em;flex-direction:column;align-items:center;flex-wrap:nowrap;gap:.3em}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .x-capstack > .x-voice[data-kit="on"]{background:var(--sub-fill)}
  [data-era="light"] .x-capstack > .x-voice[data-kit="on"]{background:rgba(250,244,230,.74)}   /* the cream era: pale glass, dark ink (glass.css now styles .ts only) */
}
/* the reserved box: two rows tall and one constant width for the whole passage, so nothing around it ever moves */
[data-era="light"] .x-capstack > .x-voice[data-kit="on"]{color:#16101e}
.x-voice[data-kit="on"] .x-voice__lines{
  display:grid;position:relative;justify-items:center;align-items:center;align-content:center;text-wrap:initial;
  width:calc(var(--sub-ch,40) * 1ch);max-width:100%;min-height:calc(2 * var(--sub-lh) * 1em);
}
.x-capstack > .x-voice[data-kit="on"] .x-voice__l,
.x-capstack > .x-voice[data-kit="on"] .x-voice__l.is-on{
  grid-area:1/1;width:100%;opacity:var(--k,0);transform:translateY(calc(var(--y,0) * 1px));transition:none;will-change:opacity,transform;
}
.x-voice[data-kit="on"] .x-sub__row{display:block;white-space:nowrap;text-align:center}
.x-voice[data-kit="on"] .x-sub__w{
  opacity:var(--sub-dim);
  transition:opacity var(--sub-word-ms) cubic-bezier(.25,1,.5,1),color calc(var(--sub-word-ms) * 1.6) ease-out;
}
.x-voice[data-kit="on"] .x-sub__w.is-said{opacity:1}
.x-voice[data-kit="on"] .x-sub__w.is-now{color:var(--sub-now)}
.x-voice[data-kit="on"][data-snap] .x-sub__w{transition:none}   /* a seek repaints at once */
/* no word reveal: all words at full ink (reduced motion, or sentence cues only) */
.x-voice[data-kit="on"][data-reveal="off"] .x-sub__w{opacity:1;transition:none}
.x-voice[data-kit="on"][data-reveal="off"] .x-sub__w.is-now{color:inherit}

/* the live text for screen readers: one phrase at a time, never word by word */
.x-capstack > .x-voice > .x-voice__sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* phones: the label gives its room to the words */
@media (max-width:700px){.x-voice[data-kit="on"] .x-voice__who{display:none}}
html.is-present .x-voice[data-kit="on"] .x-voice__who{display:none}
/* Zero layout shift (6 Nov): the card overlays the caption's own fixed slot (reel.css --o-cap-room) and is anchored to its TOP edge, right
   under the stage, so nothing ever changes the stage's size or position and the card never touches the viewport's bottom edge. The
   bottom-right cluster (Scarlet's orb + the sound controls) is ~326 px wide at every desktop size, so the card, centred, never grows
   into it: its width is capped to the viewport minus that lane on both sides (--sub-lane). On phones the slot is 150 px and the card
   (one or two short rows) sits above the orb, which starts ~108 px below the slot's top. Present mode keeps its own lower-third rule. */
:root{--sub-lane:340px}
html:not(.is-present) .x-capstack{position:relative}
html:not(.is-present) .x-capstack > .x-voice[data-kit="on"]{
  position:absolute;top:0;bottom:auto;left:50%;transform:translateX(-50%);z-index:2;
  max-width:min(100%,calc(100vw - 2 * var(--sub-lane)));
}
@media (max-width:700px){:root{--sub-lane:0px;--sub-fill:rgba(9,14,26,.8);--sub-dim:.55}}
@media (max-width:1500px) and (min-width:701px){
  html:not(.is-present) .x-capstack > .x-voice[data-kit="on"]{font-size:clamp(.98rem,.4rem + .95vw,1.3rem)}
}