/* SalesVidGen — Premium v4 "Fix a scene" (step ⑥ Film, premiumFilmFix.js). App tokens only.
   The dialog borrows the "Make a changed copy" shell (.pl-dialog). The one loud element is the contact sheet:
   each storyboard frame carries its scene number in the display face; the picked frame takes the accent ring,
   a free fix is marked in the success colour. Everything else stays quiet. */
.pff { 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-radius: var(--radius-sm); }
.pff-text { flex: 1 1 16rem; margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-secondary); }
.pff-text strong { display: block; color: var(--text-primary); font-weight: 600; }
.pff-open { flex: none; background: var(--bg-base); }
.pff-last { flex: 1 1 100%; margin: 0; padding: 0.55rem 0.75rem; border-radius: var(--radius-sm); background: var(--warning-bg);
  color: var(--text-primary); font-size: 0.86rem; line-height: 1.5; }
.pff-slot:empty { display: none; }

/* The app's reset (* { margin: 0 }) pinned dialogs to the top-left corner; centre them again on wide screens
   (premium-v4.css, loaded after this file, still turns them into a bottom sheet on phones). */
.pl-dialog { margin: auto; }
.pff-dialog { width: min(44rem, calc(100vw - 32px)); padding-bottom: 0; }
.pff-wait { margin: 1rem 0; font-size: 0.9rem; color: var(--text-secondary); }
.pff-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr)); gap: 0.6rem; margin: 0; padding: 0; }
.pff-scene { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-elevated); color: #fff; font: inherit;
  transition: transform 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); }
.pff-scene img, .pff-pic-empty { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pff-pic-empty { background: var(--gradient-accent-subtle); }
.pff-scene::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.72)); pointer-events: none; }
.pff-n { position: absolute; left: 0.4rem; bottom: 1.15rem; z-index: 1; font-family: var(--font-display); font-size: 1.9rem; font-weight: 700;
  line-height: 1; font-variant-numeric: lining-nums tabular-nums; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.pff-place { position: absolute; left: 0.45rem; right: 0.3rem; bottom: 0.35rem; z-index: 1; font-size: 0.7rem; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.9; }
.pff-free { position: absolute; top: 0.3rem; left: 0.3rem; z-index: 1; padding: 0.1rem 0.4rem; border-radius: 6px; font-size: 0.68rem;
  font-weight: 600; color: var(--success); background: var(--bg-base); }
.pff-scene.is-free { border-color: var(--success); }
.pff-scene:hover:not(:disabled) { border-color: var(--accent); }
.pff-scene:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pff-scene.is-picked { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent); transform: translateY(-2px); }
.pff-scene:disabled { cursor: progress; opacity: 0.6; }
.pff-money { margin: 0.9rem 0 0; max-width: 62ch; font-size: 0.88rem; line-height: 1.5; color: var(--text-primary); }
.pff-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); }
@media (max-width: 720px) {
  .pff-open { width: 100%; justify-content: center; }
  .pff-dialog { width: 100%; padding-bottom: 0; }
  .pff-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; }
  .pff-n { font-size: 1.5rem; }
  .pff-foot { margin: 0.75rem -16px 0; padding: 0.75rem 16px calc(0.75rem + env(safe-area-inset-bottom, 0px)); }
  .pff-foot .btn { flex: 1 1 auto; justify-content: center; }
  .pff-foot [data-pff-cancel] { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .pff-scene { transition: none; } .pff-scene.is-picked { transform: none; } }

/* ---------- C16: Fix a scene is Change scenes. The way in (.pcs-cta, premium-change.css) carries the last failure note;
   the picker gets one Text look for the whole video under its title, opened at the top of the scene list. ---------- */
.pff-cta .pff-last { order: 3; }
.pcs-lookbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.75rem; margin-top: 0.6rem; }
.pcs-lookbar span { font-size: 0.8rem; line-height: 1.4; color: var(--text-tertiary); }
.pcs-lookbar [data-pcs-look]::before { content: 'Aa' / ''; margin-right: 0.45rem; font-family: var(--font-display); font-weight: 700;
  font-size: 1rem; line-height: 1; color: var(--accent); }
.pcs-look:not(:empty) { margin: 0 -1.25rem; padding: 0.9rem 1.25rem 1.1rem; border-bottom: 1px solid var(--border-color); background: var(--bg-elevated); }
@media (min-width: 721px) {
  .pcs-look.pce-type .tp-grid { grid-template-columns: minmax(0, 1fr) 12rem; gap: 1.25rem; }
  .pcs-look.pce-type .tp-preview { max-width: 12rem; }
}
@media (max-width: 720px) { /* the head stays short on a phone, so the scenes keep the room; the panel says "every scene" itself */
  .pcs-lookbar { margin-top: 0.45rem; } .pcs-lookbar span { display: none; }
  .pcs-look:not(:empty) { margin: 0 -16px; padding: 0.8rem 16px 1rem; }
}