/* Subtitles step (screens/subtitles.js) and the caption overlay (ui/caption-overlay.js). Owner: WP5.
   Scoped under .screen-subtitles, except .cap-* which belongs to the overlay component (also used by the
   phone preview on Vertical). Layout primitives (.split, .side, .work, .stage, .sec, .seg, .tile, .check)
   come from base.css (WP2); this file only adds what the design needs on top. */

/* ---------- Caption overlay (component) ---------- */
.cap-overlay { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cap-stack {
  position: absolute;
  display: flex;
  flex-direction: column-reverse; /* libass stacks simultaneous bottom-aligned events upwards */
  align-items: center;
  text-align: center;
}
.cap-line { max-width: 100%; font-size: 0; line-height: 0; text-wrap: balance; overflow-wrap: anywhere; }
.cap-text {
  line-height: normal;
  white-space: normal;
  font-variant-numeric: normal;
  font-synthesis: none;
  paint-order: stroke fill;
  -webkit-font-smoothing: antialiased;
}
.cap-text.is-boxed { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cap-name { display: inline; }
/* Pop: the export scales the current word to 110 % (ASS fscx/fscy), which also widens the line and can re-wrap it. */
.cap-word.is-hl { font-size: 110%; }

/* ---------- Screen layout ---------- */
.screen-subtitles { min-height: 0; }
@media (min-width: 900px) {
  /* The sidebar and the transcript scroll on their own; the preview stays in view. */
  .screen-subtitles { height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); min-height: 600px; }
}
.screen-subtitles .sub-split { min-height: 0; }
.screen-subtitles .sub-side { gap: 18px; }
.screen-subtitles .sub-head { gap: 10px; }
.screen-subtitles .sub-status { white-space: normal; }
.screen-subtitles .sub-retry { align-self: flex-start; }

/* Who's talking */
.screen-subtitles .sub-speakers { display: flex; flex-direction: column; gap: 8px; }
.screen-subtitles .sub-speaker { display: flex; flex-direction: column; gap: 6px; }
.screen-subtitles .sub-speaker-row { display: flex; align-items: center; gap: 8px; }
.screen-subtitles .sub-badge {
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--r-chip);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--c-speaker-1);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: var(--fs-m);
  font-weight: 600;
  cursor: pointer;
}
.screen-subtitles .sub-badge img { display: block; width: 32px; height: 32px; object-fit: cover; }
.screen-subtitles .sub-speaker-name { flex: 1; width: auto; }
.screen-subtitles .sub-speaker-count { width: 44px; flex: none; text-align: right; font-size: var(--fs-s); color: var(--c-muted); white-space: nowrap; }
.screen-subtitles .sub-picker { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-left: 40px; }
.screen-subtitles .sub-agents { display: flex; flex-wrap: wrap; gap: 4px; }
.screen-subtitles .sub-agent {
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--r-chip);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--c-field);
  cursor: pointer;
}
.screen-subtitles .sub-agent:not([aria-checked="true"]):hover { background: var(--c-selected); }
.screen-subtitles .sub-agent[aria-checked="true"] { box-shadow: var(--ring-pick); }
.screen-subtitles .sub-agent img { display: block; width: 32px; height: 32px; object-fit: cover; }
.screen-subtitles .sub-agent[aria-checked="true"] img { padding: 2px; border-radius: var(--r-chip); }
.screen-subtitles .sub-agent-none { font-size: var(--fs-xs); color: var(--c-muted); }
.screen-subtitles .sub-agents-more { margin-left: -10px; }
.screen-subtitles .sub-names { min-height: 28px; }

/* Style tiles */
.screen-subtitles .sub-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.screen-subtitles .sub-tile {
  position: relative;
  height: 72px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  color: var(--c-ink);
}
.screen-subtitles .sub-tile-sample { max-width: 100%; overflow: hidden; white-space: nowrap; font-size: 20px; line-height: 1; color: #ffffff; }
.screen-subtitles .sub-tile-sample[data-font="bold"] { font-weight: 600; }
.screen-subtitles .sub-tile-sample[data-font="heavy"] { font-weight: 400; }
.screen-subtitles .sub-tile-sample[data-font="rounded"] { font-weight: 900; }
.screen-subtitles .sub-tile-name { font-size: var(--fs-s); line-height: 16px; color: var(--c-muted); }
.screen-subtitles .sub-tile[aria-checked="true"] .sub-tile-name { font-weight: 600; }

/* Make your own */
.screen-subtitles .sub-custom-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 8px; }
.screen-subtitles .sub-custom-label { font-size: var(--fs-s); color: var(--c-muted); }

/* ---------- Preview ---------- */
.screen-subtitles .sub-stage { padding: 12px; container-type: size; }
.screen-subtitles .sub-viewer {
  --ar: 1.7778;
  width: min(100%, 1000px, calc((100cqh - 40px) * var(--ar)));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.screen-subtitles .sub-frame { position: relative; width: 100%; aspect-ratio: var(--ar); overflow: hidden; background: #000000; }
.screen-subtitles .sub-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000000; }
/* The 9:16 window the vertical export keeps. Captions are laid out inside it, at export proportions. */
.screen-subtitles .sub-crop { position: absolute; top: 0; bottom: 0; left: 21.875%; width: 31.25%; pointer-events: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35); }
.screen-subtitles .sub-frame-note {
  position: absolute;
  inset: auto 16px 16px;
  padding: 8px 12px;
  border-radius: var(--r-control);
  background: rgba(0, 0, 0, 0.75);
  color: var(--c-ink);
  font-size: var(--fs-s);
  line-height: 16px;
  text-align: center;
}
.screen-subtitles .sub-transport { height: 32px; display: flex; align-items: center; gap: 12px; }
.screen-subtitles .sub-play { --btn-hover: var(--c-raised-hover); background: var(--c-raised); }
.screen-subtitles .sub-play-icon { display: inline-flex; }
.screen-subtitles .sub-tc { font-size: var(--fs-s); color: var(--c-ink); }
.screen-subtitles .sub-cut-note { margin-left: auto; }

/* ---------- Transcript ---------- */
.screen-subtitles .sub-transcript {
  flex: none;
  max-height: 42%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 0 10px;
  background: var(--c-panel);
}
.screen-subtitles .sub-lines-label { padding: 0 16px 4px; }
.screen-subtitles .sub-lines-bar { margin: 4px 16px 8px; }
.screen-subtitles .sub-lines-empty { padding: 0 16px; }
.screen-subtitles .sub-lines { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.screen-subtitles .sub-cut-toggle { align-self: flex-start; margin: 8px 16px 12px; }
.screen-subtitles .sub-line { display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 0 16px; }
.screen-subtitles .sub-line:not(.is-current):hover { background: var(--c-hover); }
.screen-subtitles .sub-line.is-current { background: var(--c-field); }
.screen-subtitles .sub-line-check { flex: none; }
.screen-subtitles .sub-line-go {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.screen-subtitles .sub-line-go:focus-visible { outline-offset: -2px; }
.screen-subtitles .sub-line-time { width: 64px; flex: none; font-size: var(--fs-s); color: var(--c-muted); }
.screen-subtitles .sub-line-who { width: 140px; flex: none; min-width: 0; display: flex; align-items: center; gap: 8px; }
.screen-subtitles .sub-line-chip {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-chip);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.screen-subtitles .sub-line-agent { width: 22px; height: 22px; flex: none; border-radius: var(--r-chip); object-fit: cover; background: var(--c-field); }
.screen-subtitles .sub-line-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-m); font-weight: 600; }
.screen-subtitles .sub-line-text { min-width: 0; flex: 1; font-size: 14px; line-height: 18px; overflow-wrap: anywhere; }
.screen-subtitles .sub-line-edit { flex: none; color: var(--c-muted); }
.screen-subtitles .sub-line-input { flex: 1; min-width: 0; height: 30px; font-size: 14px; }
.screen-subtitles .sub-line-edited { color: var(--c-muted); }
.screen-subtitles .sub-line-tag {
  flex: none;
  padding: 0 6px;
  border-radius: var(--r-chip);
  background: var(--c-field);
  color: var(--c-muted);
  font-size: var(--fs-xs);
  line-height: 18px;
}
.screen-subtitles .sub-line.is-cut .sub-line-text, .screen-subtitles .sub-line.is-cut .sub-line-who { color: var(--c-muted); }
.screen-subtitles .sub-line.is-off .sub-line-text { color: var(--c-edge); text-decoration: line-through; }
.screen-subtitles .sub-line.is-off .sub-line-who { color: var(--c-edge); }
/* Pink is only for lines that will be in the video: a ticked line outside the kept range uses the neutral box. */
.screen-subtitles .sub-line.is-cut .check.pink[aria-checked="true"] .check-box { background: var(--c-ink); }
.screen-subtitles .sub-line.is-off .sub-line-chip, .screen-subtitles .sub-line.is-off .sub-line-agent { opacity: 0.6; }

/* Censor: each word is a toggle. A censored word sits on the selected grey with its letters starred (no pink: text). */
.screen-subtitles .sub-censor-note { margin-top: 2px; }
.screen-subtitles .sub-line.is-censor .sub-line-go { flex: none; }
.screen-subtitles .sub-line.is-censor .sub-line-text { display: none; }
.screen-subtitles .sub-line-words { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 2px; padding: 4px 0; }
.screen-subtitles .sub-word {
  padding: 1px 3px;
  border: 0;
  border-radius: var(--r-chip);
  background: transparent;
  color: var(--c-ink);
  font: inherit;
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
}
.screen-subtitles .sub-word:hover { background: var(--c-hover); }
.screen-subtitles .sub-line.is-current .sub-word:not([aria-pressed="true"]):hover { background: var(--c-selected); }
.screen-subtitles .sub-word[aria-pressed="true"] { background: var(--c-raised); box-shadow: var(--ring-pick); letter-spacing: 0.04em; }
.screen-subtitles .sub-line.is-cut .sub-word { color: var(--c-muted); }

/* ---------- Phone width: panels stack ---------- */
@media (max-width: 899.98px) {
  .screen-subtitles .sub-stage { container-type: normal; }
  .screen-subtitles .sub-viewer { width: 100%; }
  .screen-subtitles .sub-transcript { max-height: none; }
  .screen-subtitles .sub-lines { overflow: visible; }
}
@media (max-width: 599.98px) {
  .screen-subtitles .sub-line { gap: 8px; align-items: flex-start; padding-top: 8px; padding-bottom: 8px; }
  .screen-subtitles .sub-line-check { margin-top: 1px; }
  .screen-subtitles .sub-line-go { flex-wrap: wrap; gap: 4px 8px; min-height: 0; }
  .screen-subtitles .sub-line-time { width: auto; }
  .screen-subtitles .sub-line-who { width: auto; max-width: 160px; }
  .screen-subtitles .sub-line-text { flex-basis: 100%; }
  .screen-subtitles .sub-line-tag { margin-left: auto; }
  .screen-subtitles .sub-line.is-censor { flex-wrap: wrap; }
  .screen-subtitles .sub-line.is-censor .sub-line-words { order: 3; flex-basis: 100%; padding-left: 28px; }
}