/* SalesVidGen — Premium v4 phone shell (audit b.0 rules 2 + 3): the header bar ("Step 3 of 6 · Script", a thin
   six-part bar, Simple/Pro, the list of steps), the one-row footer and the inner sub-step pills.
   Loaded after premium-shell.css. Uses the app theme tokens only, so every theme carries over. */

/* ---------- Header bar ---------- */
.pv-bar { position: relative; min-width: 0; }
.pv-bar:empty { display: none; }
.pv-bar-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.pv-bar-where { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--text-primary); font: inherit; font-size: 0.95rem; font-weight: 700; text-align: left; cursor: pointer; font-variant-numeric: lining-nums tabular-nums; }
.pv-bar-where:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.pv-bar-caret { width: 0.45rem; height: 0.45rem; margin-top: -0.2rem; border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary);
  transform: rotate(45deg); transition: transform 0.2s var(--ease); }
.pv-bar-where[aria-expanded="true"] .pv-bar-caret { transform: translateY(0.2rem) rotate(225deg); }
.pv-seg-head .pv-seg-btn { font-size: 0.8rem; padding: 0.35rem 0.85rem; min-height: 34px; }

.pv-bar-segs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; margin-top: 0.2rem; }
.pv-bar-seg { height: 4px; border-radius: 2px; background: var(--border-color); }
.pv-bar-seg.is-open { background: var(--border-strong); }
.pv-bar-seg.is-done { background: var(--success); }
.pv-bar-seg.is-on { background: var(--gradient-accent); box-shadow: 0 0 8px var(--accent-glow); }

.pv-bar-list { position: absolute; z-index: 30; top: calc(100% + 0.5rem); left: 0; right: 0; list-style: none; margin: 0; padding: 0.35rem;
  background: var(--bg-base); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.pv-bar-list li { display: flex; align-items: center; justify-content: space-between; border-radius: 8px; }
.pv-bar-list button { flex: 1; display: block; min-height: 44px; padding: 0.6rem 0.75rem; border: 0; border-radius: 8px; background: none;
  color: var(--text-primary); font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer; }
.pv-bar-list button:hover { background: var(--accent-subtle); }
.pv-bar-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pv-bar-list .is-on button { background: var(--accent-subtle); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; }
.pv-bar-list .is-later { padding: 0.6rem 0.75rem; min-height: 44px; color: var(--text-tertiary); font-size: 0.95rem; }
.pv-bar-soon { font-size: 0.78rem; }
.pv-bar-tick { color: var(--success); font-weight: 700; }

/* ---------- Next button: what happens, then its price and time ---------- */
.pv-next { gap: 0.4rem; }
.pv-next-dot, .pv-next-sub { font-size: inherit; font-weight: 500; opacity: 0.88; }

/* "Make it all for me" at the top of the step (phones). */
.pv-auto-top { margin-bottom: 1rem; }
.pv-auto-top .pva-btn { width: 100%; justify-content: center; }

/* ---------- Inner sub-step pills ---------- */
.pv-sub { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1rem; padding: 0; font-size: 0.78rem; }
.pv-sub-pill { padding: 0.2rem 0.7rem; border: 1px solid var(--border-color); border-radius: 999px; color: var(--text-tertiary); line-height: 1.5; }
.pv-sub-pill.is-done { color: var(--success); border-color: var(--success-bg); background: var(--success-bg); }
.pv-sub-pill.is-on { color: var(--text-primary); border-color: var(--accent); background: var(--accent-subtle); font-weight: 600; }
.pv-sub-opt { color: var(--text-tertiary); font-weight: 400; }

/* ---------- Desktop: the six chips stay; the header holds only the switch, top right ---------- */
@media (min-width: 721px) {
  .pv-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; align-items: start; }
  .pv-head-title, .pv-head-meta { grid-column: 1; }
  .pv-bar { grid-column: 2; grid-row: 1 / span 2; padding-top: 0.35rem; }
  .pv-bar-where, .pv-bar-segs { display: none; }
  .pv-bar-list { display: none !important; }
}

/* ---------- Phone: content first, one-row footer ---------- */
@media (max-width: 720px) {
  .pv-crumb { margin-bottom: 0.45rem; }
  .pv-head { margin-bottom: 1rem; }
  .pv-head-title { font-size: 1.2rem; line-height: 1.25; }
  .pv-head-meta { font-size: 0.8rem; margin-top: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pv-bar { margin-top: 0.45rem; }
  .pv-steps-nav { display: none; }
  /* "Step 3 of 6 · Script" already names the step; the heading stays for screen readers. */
  .pv-step-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .pv-foot { padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom, 0px)); }
  .pv-foot-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: stretch; }
  .pv-foot-row .pv-auto-btn { display: none; }
  .pv-foot-row .pv-back { padding: 0.5rem 0.95rem; justify-content: center; }
  .pv-foot-row .pv-next { order: 0; width: auto; min-height: 48px; margin: 0; padding: 0.4rem 0.8rem; flex-direction: column; justify-content: center;
    gap: 0; line-height: 1.2; text-align: center; }
  .pv-next-main { font-size: 0.9rem; }
  .pv-next-dot { display: none; }
  .pv-next-sub { display: block; font-size: 0.72rem; }
  .pv-next-why { margin-top: 0.3rem; font-size: 0.78rem; }
}

/* ---------- "Tell the AI what to change" (audit b.0 rule 6): one look on every step ----------
   A dashed accent frame marks "this goes to the AI": scope + price on top, the note, tap-to-add chips,
   then what else may move beside the button. The old per-step frames around it step aside. */
.ask-ai { display: grid; gap: 0.55rem; max-width: 40rem; min-width: 0; padding: 0.8rem 0.9rem; border: 1px dashed var(--accent);
  border-radius: var(--radius-sm); background: var(--accent-subtle); }
.ask-ai-title { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.ask-ai-text { width: 100%; min-height: 3.6rem; resize: vertical; font: inherit; font-size: 0.92rem; line-height: 1.5; }
.ask-ai-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ask-ai .chip { min-height: 32px; padding: 0.25rem 0.75rem; border: 1px solid var(--border-strong); border-radius: 999px; background: none;
  color: var(--text-secondary); font: inherit; font-size: 0.8rem; line-height: 1.3; cursor: pointer; }
.ask-ai .chip:hover:not(:disabled) { border-color: var(--accent); color: var(--text-primary); }
.ask-ai .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ask-ai .chip:disabled { opacity: 0.5; cursor: not-allowed; }
.ask-ai-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 0.9rem; flex-wrap: wrap; }
.ask-ai-also { flex: 1 1 14rem; margin: 0; font-size: 0.78rem; line-height: 1.45; color: var(--text-tertiary); }
.ask-ai-send { flex: none; margin-left: auto; }
.ask-ai-msg { margin: 0; font-size: 0.84rem; color: var(--error); }
.bd-change, .sc-redo { gap: 0.4rem; padding: 0; border: 0; background: none; }
.bd-change [data-cancel], .sc-redo [data-redo-cancel] { justify-self: start; }
.bd-change .ask-ai-text, .sc-redo .ask-ai-text { min-height: 4.8rem; } /* narrow picture columns: the hint stays readable */
.pvi-ask { margin-top: 1rem; }
.scr-ask-slot:empty { display: none; }
@media (max-width: 720px) {
  .ask-ai { padding: 0.7rem 0.75rem; }
  .ask-ai-send { width: 100%; justify-content: center; margin-left: 0; }
  .sc-plate:has(.sc-redo) { grid-column: 1 / -1; } /* the open look-book box takes the full width */
}

@media (prefers-reduced-motion: reduce) { .pv-bar-caret { transition: none; } }

/* ---------- "Make a changed copy" (audit b.0 rule 8, U9): one lock line + one chooser on every step ----------
   The line reuses the yellow .scr-lock box; the button sits at its end (under it on phones). The chooser lists the
   steps a copy can open at, numbered like the step chips (②–⑤), the step you came from outlined. */
.pl-line { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 0.9rem; flex-wrap: wrap; margin: 0 0 1rem; }
.pl-why { flex: 1 1 16rem; margin: 0; }
.pl-copy { flex: none; background: var(--bg-base); }
.pv-foot .pl-line { margin: 0.6rem 0 0; padding: 0.45rem 0.7rem; font-size: 0.82rem; }
.pl-film { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; margin-top: 1rem;
  padding: 0.85rem 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.pl-film-text { flex: 1 1 16rem; margin: 0; font-size: 0.9rem; color: var(--text-secondary); }
.pl-film-slot:empty { display: none; }

.pl-dialog { width: min(32rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 1.25rem 1.25rem 1rem; overflow: auto;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-base); color: var(--text-primary); box-shadow: var(--shadow-lg); }
.pl-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.pl-title { margin: 0; font-size: 1.1rem; }
.pl-sub { margin: 0.3rem 0 0.9rem; font-size: 0.9rem; color: var(--text-secondary); }
.pl-list { list-style: none; display: grid; gap: 0.5rem; margin: 0; padding: 0; }
.pl-choice { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.75rem; width: 100%; min-height: 44px;
  padding: 0.75rem 0.85rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s var(--ease), background 0.15s var(--ease); }
.pl-choice:hover:not(:disabled), .pl-choice:focus-visible { border-color: var(--accent); background: var(--accent-subtle); }
.pl-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pl-choice.is-here { border-color: var(--accent); }
.pl-choice:disabled { cursor: progress; opacity: 0.6; }
.pl-choice.is-busy { opacity: 1; background: var(--accent-subtle); }
.pl-num { font-size: 1.3rem; line-height: 1.1; color: var(--accent); }
.pl-text strong { display: block; font-size: 0.95rem; font-weight: 600; }
.pl-text span { display: block; margin-top: 0.15rem; font-size: 0.84rem; line-height: 1.45; color: var(--text-secondary); }
.pl-money { margin: 0.9rem 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--text-tertiary); }
.pl-msg { margin: 0.5rem 0 0; font-size: 0.86rem; color: var(--error); }
.pl-foot { display: flex; justify-content: flex-end; margin-top: 0.75rem; }
@media (max-width: 720px) {
  .pl-copy { width: 100%; justify-content: center; }
  .pv-foot .pl-copy { width: auto; }
  .pl-dialog { width: 100%; max-width: 100%; margin: auto 0 0; padding: 1rem 16px calc(1rem + env(safe-area-inset-bottom, 0px));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; }
  .pl-foot .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .pl-choice { transition: none; } }