/* The live Mongolian subtitle preview layer.
 *
 * Every number that has to follow the film — where the layer sits, how big the
 * type is, which edge the line hangs from — is set from JS in
 * `subtitle_overlay.js`, because only JS knows where `object-fit: contain` put
 * the picture. What is left here is the LOOK: a cinema subtitle that stays
 * readable over a bright frame, in one place so the two shells cannot drift.
 *
 * Nothing here sets `font-size` in pixels on the caption. A fixed size is what
 * made the previous preview a 15px Arial label that was enormous on a phone
 * preview and a speck on a full-screen stage; the size is a share of the
 * picture's height and is written by the reflow. */

.subov {
  position: absolute;
  pointer-events: none;   /* the transport underneath stays clickable */
  overflow: hidden;
  z-index: 4;
  contain: layout paint;  /* a caption re-wrap must not re-lay-out the page */
}

.subov-off { display: none; }

/* THE BAND — full width, and it carries the POSITION only.
 *
 * It is full width for a reason found on DEV: an absolutely positioned box
 * with `left: 50%` and no width shrinks to fit the space between its own left
 * edge and the container's — half the picture — so a `max-width: 88%` on the
 * same element is unreachable, and every line of any length wrapped to four
 * rows over the film. The band spans the picture, its padding IS the safe
 * horizontal margin, and the plate inside it shrinks to the text. */
.subov-cap {
  position: absolute;
  left: 0;
  right: 0;
  display: none;
  box-sizing: border-box;
  padding: 0 6%;          /* the safe margin: 88% is left for the text */
  text-align: center;
  line-height: 1.3;
  font-family: "Segoe UI", "Noto Sans", Arial, sans-serif;
  font-weight: 600;
}

.subov-cap.on { display: block; }

/* THE TEXT — shrink-to-fit, and it carries the LOOK.
 *
 * NO PLATE. There was a translucent black box behind the words, and on a real
 * film it read as a label stuck ON the picture rather than a subtitle IN it —
 * the "strange debug-looking overlay". An ordinary film subtitle is white type
 * with a dark outline and nothing else, which is what this is: a tight
 * four-way outline that survives a bright sky, plus one soft drop shadow for
 * the mid-tones. The picture stays visible behind every word. */
.subov-text {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
  /* The cue's own line breaks and the ones the wrapper chose are both real —
     `pre-line` honours them and still collapses the runs of spaces OCR leaves
     behind. `break-word` is the last-resort guard for a single word longer
     than the picture; the wrapper never splits one deliberately. */
  white-space: pre-line;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  color: #fff;
  padding: 0.05em 0.1em;
  text-shadow:
    0 0 0.09em rgba(0, 0, 0, .98),
    0.055em 0.055em 0 rgba(0, 0, 0, .9),
    -0.055em 0.055em 0 rgba(0, 0, 0, .9),
    0.055em -0.055em 0 rgba(0, 0, 0, .9),
    -0.055em -0.055em 0 rgba(0, 0, 0, .9),
    0 0.06em 0.28em rgba(0, 0, 0, .75);
}

/* A touch of paint so a cue change is not a hard cut, kept short enough that
   it cannot be mistaken for the line being late. */
@media (prefers-reduced-motion: no-preference) {
  .subov-text { transition: opacity .09s linear; }
}

/* ── developer diagnostics (§12) ───────────────────────────────────────────
 *
 * Off unless `?subdebug=1` or `SubtitleOverlay.debug(true)`. It draws the
 * FILM'S OWN subtitle band so the gap can be seen as well as measured — the
 * numbers still come from `SubtitleOverlay.diagnostics()`, which is what the
 * acceptance check reads. It is never rendered on a production screen. */
.subov-srcbox {
  position: absolute;
  display: none;
  border: 1px dashed rgba(255, 96, 96, .9);
  background: rgba(255, 96, 96, .10);
}
.subov-srcbox::after {
  content: attr(data-label);
  position: absolute;
  left: 0;
  top: -1.35em;
  font: 600 10px/1.3 "Segoe UI", Arial, sans-serif;
  color: #ffd7d7;
  background: rgba(0, 0, 0, .72);
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.subov-debug .subov-text { outline: 1px dashed rgba(96, 200, 255, .9); }

/* ── the compact control (§3) ──────────────────────────────────────────────
 *
 * Sized to sit on the same row as the existing Авто / 9:16 / 16:9 group
 * without pushing it to a second line: the same 12px type, the same pill, and
 * a label that collapses out of the way when the bar is narrow. */
.subov-ctl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted, #8b93a7);
}
.subov-ctl-lbl { white-space: nowrap; }
.subov-seg {
  display: inline-flex;
  border: 1px solid var(--line, #262a36);
  border-radius: 9px;
  overflow: hidden;
}
.subov-seg button {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 5px 9px;
  line-height: 1.2;
}
.subov-seg button:hover { background: rgba(255, 255, 255, .06); }
.subov-seg button.on { background: var(--accent, #4c7dff); color: #fff; }

@media (max-width: 900px) {
  .subov-ctl-lbl { display: none; }
  .subov-seg button { padding: 5px 7px; }
}