/* Caption style picker.
   One player, one list. The captions are the only thing on this page
   worth looking at, so the chrome around them stays quiet: no cards
   competing with the frame, no accent anywhere except the current
   selection and the one call to action. */

.tpl-head { padding: 92px 0 30px; text-align: center; }
.tpl-head h1 { margin: 16px 0 14px; }
.tpl-head p {
  max-width: 60ch; margin: 0 auto;
  color: var(--text-secondary); line-height: 1.65;
}

/* ---- layout ------------------------------------------------------- */
/* The player is the fixed element and the list scrolls against it, so
   the reader never loses sight of what they are changing. */
.picker {
  display: grid; gap: 34px; align-items: start;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  padding-bottom: 70px;
}

.stage { position: sticky; top: 84px; }
.phone {
  border-radius: 20px; overflow: hidden;
  background: #05070a; border: 1px solid var(--border);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
}
.phone video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 9 / 16; object-fit: cover; background: #05070a;
}

.stage-meta { margin-top: 18px; }
.stage-meta h2 {
  font-size: 26px; line-height: 1.15; margin: 0 0 4px;
  letter-spacing: -.015em;
}
.stage-meta p { margin: 0; color: var(--text-secondary); font-size: 14px; }
.stage-meta .dot { opacity: .45; margin: 0 6px; }

.plate-switch { display: flex; gap: 8px; margin-top: 18px; }
.plate-switch button {
  flex: 1; padding: 9px 12px; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface); border: 1px solid var(--border);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.plate-switch button:hover { color: #fff; }
.plate-switch button[aria-pressed="true"] {
  color: var(--accent); border-color: rgba(4, 254, 182, .45);
  background: var(--accent-dim);
}
.stage-note {
  margin: 10px 0 0; font-size: 12.5px; line-height: 1.5;
  color: var(--text-secondary); opacity: .8;
}

/* ---- list --------------------------------------------------------- */
.picker-list {
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); overflow: hidden;
}
.picker-search {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-bottom: 1px solid var(--border);
}
.picker-search input {
  flex: 1; min-width: 0; padding: 10px 13px; border-radius: 10px;
  font: inherit; font-size: 14px; color: #fff;
  background: var(--surface-2); border: 1px solid var(--border);
}
.picker-search input::placeholder { color: var(--text-secondary); opacity: .75; }
.picker-search input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.picker-count {
  margin: 0; font-size: 12.5px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.picker-scroll { max-height: 72vh; overflow-y: auto; padding: 6px; }
.picker-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.tpl-cat { padding: 6px 0 10px; }
.tpl-cat h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 8px 6px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-secondary);
}
.tpl-cat h3 b {
  font-size: 11px; font-weight: 700; color: var(--accent);
  background: var(--accent-dim); border-radius: 999px; padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}

/* Rows are a two-column grid so the typeface column lines up down the
   whole list - it is the single most scanned piece of information here
   after the name. */
.tpl-row {
  display: grid; width: 100%; text-align: left; cursor: pointer;
  grid-template-columns: minmax(0, 1fr) minmax(0, 128px) auto;
  align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px;
  font: inherit; color: var(--text-primary);
  background: none; border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease;
}
.tpl-row:hover { background: var(--surface-2); }
.tpl-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tpl-row.on {
  background: var(--accent-dim); border-color: rgba(4, 254, 182, .4);
}
.tpl-row .n { font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; }
.tpl-row.on .n { color: var(--accent); }
.tpl-row .f {
  font-size: 12px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tpl-row .m {
  font-size: 10px; font-weight: 700; font-style: normal;
  letter-spacing: .04em; padding: 2px 6px; border-radius: 5px;
}
.tpl-row .m.depth { color: #D8DEFF; background: rgba(78, 96, 220, .8); }
.tpl-row .m.hindi { color: #06210F; background: rgba(4, 254, 182, .85); letter-spacing: 0; }

/* ---- narrow ------------------------------------------------------- */
/* Below the breakpoint the player stops being sticky: a phone-height
   viewport cannot hold a 9:16 frame and a usable list at the same time,
   and a sticky player would leave the list a few rows tall. */
@media (max-width: 900px) {
  .picker { grid-template-columns: 1fr; gap: 24px; }
  .stage { position: static; max-width: 380px; margin: 0 auto; }
  .picker-scroll { max-height: none; }
  .tpl-head { padding-top: 76px; }
}
@media (max-width: 520px) {
  .picker-search { flex-wrap: wrap; }
  .tpl-row { grid-template-columns: minmax(0, 1fr) auto; }
  .tpl-row .f { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .plate-switch button, .tpl-row { transition: none; }
}

/* ---- move & resize ------------------------------------------------ */
.phone { position: relative; }
.phone.is-moving { cursor: grab; }

/* Centred on its own left/top percentage so the numbers mean the
   caption's CENTRE, matching how the app stores position. */
.drag-cap {
  position: absolute; transform: translate(-50%, -50%);
  max-width: 86%; text-align: center; line-height: 1.15;
  font-weight: 800; letter-spacing: -.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
  cursor: grab; touch-action: none; user-select: none;
  padding: 4px 6px; border-radius: 8px;
  outline: 1px dashed rgba(255, 255, 255, .35); outline-offset: 4px;
}
.drag-cap:active { cursor: grabbing; }
.drag-cap:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.stage-modes { display: flex; gap: 8px; margin-top: 14px; }
.stage-modes button {
  flex: 1; padding: 9px 12px; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface); border: 1px solid var(--border);
}
.stage-modes button[aria-pressed="true"] {
  color: var(--accent); border-color: rgba(4, 254, 182, .45);
  background: var(--accent-dim);
}

.drag-hint {
  margin: 12px 0 0; font-size: 12.5px; line-height: 1.55;
  color: var(--text-secondary);
}
.drag-hint output {
  display: block; margin-top: 5px; color: var(--accent);
  font-variant-numeric: tabular-nums; font-size: 12px;
}
.drag-size { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.drag-size span {
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-secondary);
}
.drag-size input { flex: 1; accent-color: var(--accent); }