/* SalesVidGen — Premium step ⑥ Film: Change scenes + film versions (premiumVersions.js; the picker adds to this file).
   App theme tokens only. The loud element is the version number set in the display face on each frame — it echoes
   Fix a scene's contact sheet, so "version 3" and "scene 3" read as the same kind of thing. The version in use
   carries the success colour; a version our check held carries the warning colour. Everything else stays quiet. */

/* ---------- The section under the finished video ---------- */
.pvv { display: grid; gap: 1rem; min-width: 0; padding-top: 1.1rem; border-top: 1px solid var(--border-color); }
.pvv-head { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; line-height: 1.3; color: var(--text-primary);
  font-variant-numeric: lining-nums tabular-nums; }
.pvv-lead { max-width: 60ch; margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--text-primary); }
.pvv-note { font-size: 0.86rem; line-height: 1.45; color: var(--text-secondary); overflow-wrap: anywhere; }
.pvv-msg { margin: 0; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); background: var(--error-bg); color: var(--error);
  font-size: 0.9rem; line-height: 1.5; overflow-wrap: anywhere; }
.pvv button:focus-visible, .pvv a:focus-visible, .pvv-now button:focus-visible, .pvv-now a:focus-visible,
.pvv-dialog button:focus-visible, .pvv-dialog a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* A frame: the version's first picture, its number, a play mark. */
.pvv-poster { position: relative; display: block; flex: none; width: 56px; aspect-ratio: 9 / 16; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-elevated); color: #fff; font: inherit; }
.pvv-poster img, .pvv-blank { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pvv-blank { background: var(--gradient-accent-subtle); }
.pvv-poster::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); pointer-events: none; }
.pvv-n { position: absolute; left: 0.3rem; bottom: 0.2rem; z-index: 1; font-family: var(--font-display); font-size: 1.45rem; font-weight: 700;
  line-height: 1; font-variant-numeric: lining-nums tabular-nums; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.pvv-tri { position: absolute; top: 50%; left: 50%; z-index: 1; width: 1.6rem; height: 1.6rem; margin: -0.8rem 0 0 -0.8rem; border-radius: 50%;
  background: rgba(0, 0, 0, 0.45); }
.pvv-tri::before { content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 0.36rem 0 0.36rem 0.58rem; border-color: transparent transparent transparent #fff; }
.pvv-poster:hover { border-color: var(--accent); }
.pvv-poster-lg { width: 76px; }
.pvv-poster-lg .pvv-n { font-size: 1.8rem; }

/* ---------- Versions list ---------- */
.pvv-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--border-color); }
.pvv-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 0.9rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--border-color); }
.pvv-what { display: grid; gap: 0.2rem; min-width: 0; align-content: start; }
.pvv-name { font-weight: 600; color: var(--text-primary); font-variant-numeric: lining-nums tabular-nums; }
.pvv-meta { font-size: 0.8rem; color: var(--text-tertiary); font-variant-numeric: lining-nums tabular-nums; }
.pvv-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; }
.pvv-row.is-in-use .pvv-poster { border-color: var(--success); box-shadow: 0 0 0 2px var(--success); }
.pvv-row.is-in-use .pvv-name { color: var(--success); }
.pvv-row.is-held .pvv-meta { color: var(--text-primary); }
.pvv-row.is-held .pvv-poster { border-color: var(--warning); }

/* ---------- The new version next to the old one ---------- */
.pvv-compare { display: grid; gap: 0.9rem; padding: 1rem; border: 1px solid var(--border-color); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); background: var(--bg-base); }
.pvv-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 15rem)); gap: 0.9rem; }
.pvv-side { display: grid; gap: 0.45rem; align-content: start; margin: 0; min-width: 0; }
.pvv-side video { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: var(--radius-sm); background: #000;
  border: 2px solid transparent; }
.pvv-side.is-in-use video { border-color: var(--success); }
.pvv-side figcaption { display: grid; gap: 0.15rem; justify-items: start; }
.pvv-side strong { font-weight: 600; color: var(--text-primary); }
.pvv-tag { padding: 0.05rem 0.45rem; border-radius: 6px; font-size: 0.74rem; font-weight: 600; color: var(--success); background: var(--success-bg); }
.pvv-choose { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---------- Edit again ---------- */
.pvv-again { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem;
  padding: 0.85rem 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.pvv-again p { flex: 1 1 16rem; max-width: 60ch; margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-secondary); }
.pvv-again strong { display: block; color: var(--text-primary); font-weight: 600; }
.pvv-again .btn { flex: none; background: var(--bg-base); }

/* ---------- While a change runs: the film in use, at the top of the live panel ---------- */
.pf-panel > div > .pvv-now { display: flex; align-items: flex-start; gap: 0.9rem; padding: 0.8rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border-color); border-left: 3px solid var(--success); background: var(--bg-base); }
.pvv-now .pvv-what { gap: 0.35rem; }
.pvv-now .pvv-lead { font-weight: 600; }
.pvv-now .pvv-dl { justify-self: start; margin-top: 0.2rem; }
.pvv-now .pvv-poster { border-color: var(--success); }

/* ---------- The player sheet (outside the panel, so its redraws never stop the video) ---------- */
.pvv-dialog { width: min(26rem, calc(100vw - 32px)); padding-bottom: 0; }
.pvv-play { display: block; width: 100%; max-height: 70vh; aspect-ratio: 9 / 16; margin: 0.6rem auto 0; border-radius: var(--radius-sm); background: #000; }
.pvv-sheet-foot { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 0.5rem; margin: 0.75rem -1.25rem 0;
  padding: 0.75rem 1.25rem 1rem; border-top: 1px solid var(--border-color); background: var(--bg-base); }

/* ---------- Phone: actions go under the words, the pair stays side by side, nothing scrolls sideways ---------- */
@media (max-width: 720px) {
  .pvv-row { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: 'pic what' 'pic acts'; row-gap: 0.5rem; align-items: start; }
  .pvv-row .pvv-poster { grid-area: pic; }
  .pvv-row .pvv-what { grid-area: what; }
  .pvv-acts { grid-area: acts; justify-content: flex-start; }
  .pvv-compare { padding: 0.8rem; }
  .pvv-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .pvv-choose .btn, .pvv-again .btn { flex: 1 1 100%; justify-content: center; }
  .pvv-dialog { width: 100%; }
  .pvv-sheet-foot { margin: 0.75rem -16px 0; padding: 0.75rem 16px calc(0.75rem + env(safe-area-inset-bottom, 0px)); }
  .pvv-sheet-foot .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Change scenes (premiumChange.js): the way in, under the finished video ---------- */
.pcs-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 1rem;
  padding: 0.85rem 1rem; border: 1px solid var(--border-color); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); }
.pcs-cta p { flex: 1 1 16rem; max-width: 60ch; margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-secondary); }
.pcs-cta strong { display: block; color: var(--text-primary); font-weight: 600; }
.pcs-cta .btn { flex: none; }

/* ---------- The picker: a dialog on wide screens, a sheet on phones. Head and foot stay put; the scenes scroll. ---------- */
.pcs-dialog { width: min(46rem, calc(100vw - 32px)); height: min(50rem, calc(100vh - 48px)); max-height: none; padding: 0; overflow: hidden; }
.pcs-dialog[open] { display: flex; flex-direction: column; }
.pcs-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.25rem 0.8rem;
  border-bottom: 1px solid var(--border-color); }
.pcs-head .pl-sub { max-width: 58ch; margin-bottom: 0; line-height: 1.5; }
.pcs-close { flex: none; }
.pcs-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 1.25rem; }
.pcs-dialog.is-busy .pcs-body { opacity: 0.65; pointer-events: none; }
.pcs-list { list-style: none; margin: 0; padding: 0; }
.pcs-dialog button:focus-visible, .pcs-tick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* One scene. Ticked: the row takes a quiet accent tint edge to edge and its frame the accent ring. */
.pcs-row { margin: 0 -1.25rem; padding: 0.7rem 1.25rem; border-bottom: 1px solid var(--border-color); }
.pcs-row.is-on { background: var(--accent-subtle); box-shadow: inset 3px 0 0 var(--accent); }
.pcs-pick { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 0.85rem; margin: 0; cursor: pointer;
  font-size: 1rem; font-weight: 400; color: var(--text-primary); text-transform: none; letter-spacing: normal; } /* the app styles every label as a caps field label */
.pcs-frame { position: relative; display: block; width: 52px; aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid var(--border-color);
  border-radius: 6px; background: var(--bg-elevated); color: #fff; }
.pcs-frame img, .pcs-blank { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcs-blank { background: var(--gradient-accent-subtle); }
.pcs-frame::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); }
.pcs-n { position: absolute; left: 0.3rem; bottom: 0.2rem; z-index: 1; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700;
  line-height: 1; font-variant-numeric: lining-nums tabular-nums; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.pcs-row.is-on .pcs-frame { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.pcs-what { display: grid; gap: 0.2rem; min-width: 0; }
.pcs-name { font-weight: 600; color: var(--text-primary); }
.pcs-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 62ch;
  font-size: 0.88rem; line-height: 1.45; color: var(--text-secondary); overflow-wrap: anywhere; }
.pcs-row.is-on .pcs-line { display: block; }
.pcs-line.is-quiet { color: var(--text-tertiary); }
.pcs-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.1rem; }
.pcs-tag { padding: 0.05rem 0.45rem; border-radius: 6px; font-size: 0.72rem; font-weight: 600; color: var(--text-secondary); background: var(--bg-elevated); }
.pcs-tag.is-free { color: var(--success); background: var(--success-bg); }
.pcs-tag.is-flag { color: var(--text-primary); background: var(--warning-bg); }
.pcs-tick { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); cursor: pointer; }

/* What to change: four choices, each with what it costs; then that choice's editor. Indented under the words. */
.pcs-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; margin: 0.7rem 0 0 calc(52px + 0.85rem); }
.pcs-chip { display: grid; align-content: start; gap: 0.15rem; min-height: 44px; padding: 0.5rem 0.65rem; border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); background: var(--bg-base); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.15s var(--ease); }
.pcs-chip strong { font-size: 0.86rem; font-weight: 600; line-height: 1.3; }
.pcs-chip span { font-size: 0.76rem; line-height: 1.35; color: var(--text-tertiary); font-variant-numeric: lining-nums tabular-nums; }
.pcs-chip:hover:not(:disabled) { border-color: var(--accent); }
.pcs-chip.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pcs-chip.is-on strong { color: var(--accent); }
.pcs-chip:disabled { cursor: progress; }
.pcs-edit { margin: 0.6rem 0 0 calc(52px + 0.85rem); font-size: 0.86rem; line-height: 1.5; color: var(--text-secondary); }
.pcs-edit:empty { display: none; }
.pcs-ask { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-top: 0.6rem;
  padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); background: var(--warning-bg); }
.pcs-ask p { flex: 1 1 14rem; margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--text-primary); }
.pcs-ask-acts { display: flex; gap: 0.4rem; }

/* The footer: what it comes to, what still stops it, and the one payment. */
.pcs-foot { flex: none; display: grid; gap: 0.45rem; padding: 0.8rem 1.25rem 1rem; border-top: 1px solid var(--border-color); background: var(--bg-base); }
.pcs-sum { margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.45; color: var(--text-primary); font-variant-numeric: lining-nums tabular-nums; }
.pcs-sum.is-quiet { font-weight: 400; color: var(--text-secondary); }
.pcs-block { list-style: none; display: grid; gap: 0.2rem; margin: 0; padding: 0 0 0 0.6rem; border-left: 2px solid var(--warning);
  font-size: 0.84rem; line-height: 1.45; color: var(--text-primary); }
.pcs-back { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--text-tertiary); }
.pcs-foot .pl-msg { margin: 0; }
.pcs-acts { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.15rem; }

@media (max-width: 720px) {
  .pcs-cta .btn { width: 100%; justify-content: center; }
  .pcs-dialog { width: 100%; height: calc(100vh - 24px); height: calc(100dvh - 24px); padding: 0; }
  .pcs-head { padding: 1rem 16px 0.7rem; }
  .pcs-body { padding: 0 16px; }
  .pcs-row { margin: 0 -16px; padding: 0.7rem 16px; }
  .pcs-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 0; }
  .pcs-edit { margin-left: 0; }
  .pcs-foot { padding: 0.7rem 16px calc(0.75rem + env(safe-area-inset-bottom, 0px)); }
  .pcs-acts [data-pcs-cancel] { flex: none; }
  .pcs-acts .pcs-pay { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .pcs-chip { transition: none; } .pce-dot { animation: none; } }

/* ---------- A ticked scene's editor (premiumChangeEdit.js / premiumChangeAi.js): her line, the AI box, the picture, words on screen ---------- */
.pce { display: grid; gap: 0.55rem; min-width: 0; color: var(--text-primary); }
.pce-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.pce-label { margin: 0; font-size: 0.84rem; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--text-primary); }
.pce-state { font-size: 0.78rem; color: var(--text-tertiary); }
.pce-line { width: 100%; min-height: 4.6rem; resize: vertical; padding: 0.6rem 0.75rem; border-left: 3px solid var(--accent); font: inherit; font-size: 1rem; line-height: 1.55; }
.pce-line[readonly] { border-left-color: var(--border-color); color: var(--text-secondary); }
.pce-hint, .pce-ok, .pce-wait, .pce-err { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--text-tertiary); overflow-wrap: anywhere; }
.pce-ok { color: var(--success); font-weight: 600; } .pce-err { color: var(--error); }
.pce-wait { display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary); }
.pce-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pce-pulse 1.2s var(--ease) infinite alternate; }
@keyframes pce-pulse { from { opacity: 1; } to { opacity: 0.25; } }
.pce-cg, .pce-notes, .pce-type { display: grid; gap: 0.4rem; } .pce-cg:empty, .pce-notes:empty, .pce-msg:empty, .pce-type:empty { display: none; }
.pce-review { display: grid; gap: 0.6rem; padding: 0.75rem 0.85rem; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--bg-base); }
.pce-picrow { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.pce-now { position: relative; margin: 0; } .pce-now img, .pce-now .pcs-blank { position: static; display: block; width: 64px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 6px; }
.pce-now figcaption { margin-top: 0.2rem; font-size: 0.72rem; color: var(--text-tertiary); } .pce-picside { display: grid; gap: 0.5rem; justify-items: start; }
.pce-cues { list-style: none; display: grid; gap: 0.5rem; margin: 0; padding: 0; } .pce-cues li { display: grid; gap: 0.2rem; } .pce-cues input { width: 100%; }
.pce-typebar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.75rem; } .pce .ask-ai { max-width: none; }
.pce-type .tp-root > .pv-sub, .pce-type .scr-intro, .pce-type .scr-story-foot { display: none; }
.pce-type .tp-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; } .pce-type .tp-preview { max-width: 16rem; }