/* SalesVidGen — Premium step ⑥ Film: the Film button, the live scene list, the finished video.
   App theme tokens only. One accent = working, success = done, error = failed. The running clock
   (display face, lining tabular numerals) is the one loud element; everything else stays quiet. */

/* The panel's left rule says the state at a glance (overrides the old placeholder rule in premium-board.css). */
.pf-panel { display: grid; gap: 1.2rem; justify-items: stretch; min-width: 0; padding: 1.5rem 1.4rem;
  border: 1px solid var(--border-color); border-left: 3px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg-surface); font-variant-numeric: lining-nums; }
.pf-panel.pf-is-live { border-left-color: var(--accent); }
.pf-panel.pf-is-done { border-left-color: var(--success); }
.pf-panel.pf-is-failed { border-left-color: var(--error); }
.pf-panel > div { display: grid; gap: 1rem; min-width: 0; }

.pf-title { font-family: var(--font-display); font-size: clamp(1.3rem, 3.6vw, 1.6rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--text-primary); }
.pf-lede { max-width: 62ch; font-size: 0.95rem; line-height: 1.6; color: var(--text-secondary); }
.pf-note { max-width: 62ch; font-size: 0.92rem; line-height: 1.55; color: var(--text-secondary); }
.pf-money { font-size: 0.92rem; line-height: 1.5; color: var(--text-primary); font-variant-numeric: lining-nums tabular-nums; }
.pf-go, .pf-dl { justify-self: start; }
.pf-stuck { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pf-stop { white-space: normal; text-align: left; }
.pf-go:focus-visible, .pf-dl:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pf-error { max-width: 62ch; padding: 0.75rem 0.9rem; border-radius: var(--radius-sm); background: var(--error-bg);
  color: var(--error); font-size: 0.92rem; line-height: 1.5; overflow-wrap: anywhere; }

/* ---------- While filming: title + clock, bar, then one row per scene ---------- */
.pf-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1.2rem; }
.pf-clock { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; margin: 0; color: var(--text-secondary);
  font-size: 0.9rem; font-variant-numeric: tabular-nums lining-nums; }
.pf-clock b { font-family: var(--font-display); font-size: clamp(1.9rem, 6vw, 2.5rem); font-weight: 700; line-height: 1;
  letter-spacing: -0.01em; color: var(--text-primary); font-variant-numeric: tabular-nums lining-nums; }
.pf-bar { height: 4px; border-radius: 4px; background: var(--border-color); overflow: hidden; }
.pf-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.6s ease; }
.pf-is-done .pf-bar i { background: var(--success); }
.pf-count { margin-top: -0.6rem; font-size: 0.82rem; color: var(--text-tertiary); font-variant-numeric: tabular-nums lining-nums; }

/* ---------- N4: the scenes as a grid of cards (a contact sheet): 4–6 per row on a computer, 2 on a phone ---------- */
.pfg-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pfg-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; border: 1px solid var(--border-color); border-radius: var(--radius-sm, 10px);
  background: var(--bg-elevated); overflow: hidden; }
.pfg-pic { aspect-ratio: 4 / 5; background: var(--gradient-accent-subtle); overflow: hidden; }
.pfg-pic img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.pfg-blank { display: block; width: 100%; height: 100%; }
.pfg-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 0.55rem 0.6rem 0.65rem; min-width: 0; }
.pfg-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); overflow-wrap: anywhere; line-height: 1.25; }
.pfg-kind { font-size: 0.78rem; color: var(--text-secondary); }
.pfg-body .pf-chip { white-space: normal; line-height: 1.25; }
.pfg-left { font-size: 0.78rem; color: var(--text-secondary); font-variant-numeric: tabular-nums lining-nums; }
.pfg-fix { margin-top: 0.15rem; }
.pfg-waiting .pfg-pic img { opacity: 0.6; }
.pfg-done { border-color: color-mix(in srgb, var(--success) 45%, var(--border-color)); }
.pfg-working .pf-chip { color: var(--text-primary); background: var(--accent-subtle); border-color: var(--accent); animation: pf-pulse 1.8s ease-in-out infinite; }
.pfg-done .pf-chip { color: var(--success); background: var(--success-bg); border-color: transparent; }
.pfg-again .pf-chip { color: var(--warning); background: var(--warning-bg); border-color: transparent; }
.pfg-failed .pf-chip { color: var(--error); background: var(--error-bg); border-color: transparent; }
.is-paused .pfg-working .pf-chip { animation: none; color: var(--warning); background: var(--warning-bg); border-color: transparent; }
.pfg-after { margin: 0; font-size: 0.88rem; color: var(--text-secondary); }
.pfg-after strong { color: var(--text-primary); font-weight: 600; }
.pfg-sum { display: grid; gap: 0.35rem; padding: 0.85rem 1rem; border-radius: var(--radius-sm, 10px); background: var(--bg-elevated);
  border: 1px solid var(--border-color); }
.pfg-sum p { margin: 0; color: var(--text-primary); line-height: 1.45; }
.pfg-sum .pfg-why { font-size: 0.85rem; color: var(--text-secondary); }

/* State chips (base): waiting muted; the card tones above colour them. */
.pf-chip { justify-self: start; white-space: nowrap; font-size: 0.78rem; font-weight: 600; padding: 0.2rem 0.6rem;
  border-radius: 8px; border: 1px solid var(--border-color); color: var(--text-tertiary); }
.is-paused .pf-bar i { background: var(--warning); }
@keyframes pf-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 0 5px transparent; } }
@media (prefers-reduced-motion: reduce) {
  .pfg-working .pf-chip { animation: none; }
  .pf-bar i { transition: none; }
}

/* ---------- Done: the video itself ---------- */
.pf-video { display: block; width: auto; max-width: 100%; height: min(70vh, 640px); aspect-ratio: 9 / 16;
  border-radius: var(--radius-sm); background: #000; }

/* ---------- Phone: two cards per row, nothing scrolls sideways ---------- */
@media (max-width: 480px) {
  .pf-panel { padding: 1.1rem 0.9rem; }
  .pfg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .pf-video { width: 100%; height: auto; max-height: 70vh; }
  .pf-stop { flex: 1 1 auto; justify-content: center; }
  .pf-go, .pf-dl { justify-self: stretch; text-align: center; }
}

/* ---------- v4 check: held for a look (amber rule = waiting for you), or notes under a finished video ----------
   The scene numbers in the display face are the one loud element (they echo Fix a scene's contact sheet). */
.pf-panel.pf-is-held { border-left-color: var(--warning); }
.pf-held-grid { display: grid; grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.pf-held-grid .pf-video { position: sticky; top: 1rem; width: 100%; height: auto; }
.fq-held, .fq-done { display: grid; gap: 1rem; min-width: 0; }
.fq-done { padding-top: 1rem; border-top: 1px solid var(--border-color); } /* under the video: the check's short list (N2) */
.fq-lead { max-width: 60ch; font-size: 1rem; line-height: 1.55; color: var(--text-primary); }
.fq-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-color); }
.fq-row { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); column-gap: 0.9rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border-color); }
.fq-row > :not(.fq-where) { grid-column: 2; }
.fq-where { grid-row: span 2; font-size: 0.78rem; line-height: 1.3; color: var(--text-secondary); }
.fq-where b { display: block; font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; line-height: 1;
  color: var(--text-primary); font-variant-numeric: lining-nums tabular-nums; }
.fq-row:not(:has(b)) .fq-where { font-weight: 600; color: var(--text-primary); }
.fq-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.fq-items li { font-size: 0.93rem; line-height: 1.5; color: var(--text-primary); overflow-wrap: anywhere; }
.fq-tag { display: inline-block; margin-right: 0.3rem; padding: 0.05rem 0.45rem; border-radius: 6px; font-size: 0.74rem; font-weight: 600; white-space: nowrap; }
.fq-block .fq-tag { color: var(--error); background: var(--error-bg); }
.fq-warn .fq-tag { color: var(--text-primary); background: var(--warning-bg); }
.fq-act { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin-top: 0.7rem; }
.fq-todo { max-width: 56ch; margin: 0.5rem 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--text-secondary); }
.fq-act .fq-todo { flex: 1 1 14rem; margin: 0; }
.fq-end { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.fq-after { flex: 1 1 16rem; max-width: 52ch; font-size: 0.85rem; line-height: 1.5; color: var(--text-secondary); }
.fq-msg { padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); background: var(--error-bg); color: var(--error); font-size: 0.9rem; }
.fq-box button:focus-visible, .fq-notes summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Two-phase cleanup (N2): the closed "Things we noticed (N)" list below is no longer drawn (.fq-done replaced it). Delete after Jerry confirms. */
.fq-notes { max-width: 62ch; border-top: 1px solid var(--border-color); padding-top: 0.8rem; }
.fq-notes summary { cursor: pointer; font-size: 0.92rem; font-weight: 600; color: var(--text-primary); }
.fq-notes ul { margin: 0.6rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; font-size: 0.9rem; line-height: 1.5; color: var(--text-secondary); }
.fq-notes b { color: var(--text-primary); font-weight: 600; }

/* ---------- Change scenes: play one scene (premiumChangePlay.js, N2). The chip reads like an editor's in–out mark. ---------- */
.pcs-playbtn, .fq-play { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 28px; padding: 0.1rem 0.6rem 0.1rem 0.5rem;
  border: 1px solid var(--accent); border-radius: 999px; background: transparent; color: var(--text-primary); font: inherit;
  font-size: 0.76rem; font-weight: 600; cursor: pointer; }
.pcs-playbtn::before, .fq-play::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 0.32rem 0 0.32rem 0.55rem;
  border-color: transparent transparent transparent var(--accent); }
.pcs-playbtn.is-on { background: var(--accent-subtle); }
.pcs-playbtn.is-on::before { width: 0.5rem; height: 0.62rem; border-width: 0 0.16rem; border-color: transparent var(--accent); }
/* Under a finished film the same mark sits under the scene number: the moment in the film, tap to play it above. */
.fq-play { margin-top: 0.45rem; padding: 0.1rem 0.5rem 0.1rem 0.4rem; font-variant-numeric: lining-nums tabular-nums; }
.pcs-play-at { font-variant-numeric: lining-nums tabular-nums; color: var(--text-secondary); font-weight: 500; }
.pcs-playbtn:hover .pcs-play-at, .pcs-playbtn.is-on .pcs-play-at { color: var(--text-primary); }
.pcs-why { display: block; max-width: 60ch; font-size: 0.8rem; line-height: 1.4; color: var(--text-secondary); overflow-wrap: anywhere; }
.pcs-play { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); align-items: end; gap: 0.8rem; margin: 0.7rem 0 0 calc(52px + 0.85rem); }
.pcs-player { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 8px; background: #000; object-fit: contain; }
.pcs-play-cap { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--text-secondary); }
@media (max-width: 720px) {
  .pcs-play { grid-template-columns: 8.5rem minmax(0, 1fr); margin-left: 0; }
}

@media (max-width: 720px) {
  .pf-held-grid { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .pf-held-grid .pf-video { position: static; width: min(80%, 17rem); justify-self: center; }
  .fq-row { grid-template-columns: 3rem minmax(0, 1fr); column-gap: 0.7rem; }
  .fq-done .fq-row { grid-template-columns: 3.75rem minmax(0, 1fr); } /* room for the time under the number */
  .fq-where b { font-size: 1.8rem; }
  .fq-act .btn, .fq-end .btn { width: 100%; justify-content: center; }
}