/* Sequence detail modal */
.sequence-backdrop {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--shade) 55%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: fixed;
  inset: 0;
  z-index: var(--z-sticky-2);
  padding: 4vh 24px;
}
.sequence-modal {
  width: min(880px, calc(100vw - 48px));
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 18px;
  position: relative;
  background: color-mix(in srgb, color-mix(in srgb, var(--gold-8) 13%, var(--mix-light)) 92%, transparent);
}
.sequence-modal .modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tan-deep) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tan-deep) 22%, transparent);
  color: var(--ink-muted);
  cursor: pointer;
  font-size: var(--fs-13);
  font-weight: var(--fw-med);
  display: grid; place-items: center;
  transition: background var(--dur-1) ease, color var(--dur-1) ease;
  z-index: 2;
  padding: 0;
  line-height: 1;
}
.sequence-modal .modal-close:hover {
  background: color-mix(in srgb, var(--tan-deep) 22%, transparent);
  color: var(--ink);
}
.sequence-modal .modal-close svg { width: 14px; height: 14px; }

.sm-head {
  padding: 4px 4px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 40%, transparent);
}
.sm-eyebrow {
  font-size: var(--fs-11);
  letter-spacing: var(--track-16);
  font-weight: var(--fw-semi);
  color: var(--ink-muted);
}
.sm-title {
  font-family: var(--font-display);
  font-size: var(--fs-38);
  letter-spacing: var(--track-005);
  color: var(--ink);
  line-height: 1;
  margin-top: 6px;
}
.sm-meta {
  font-size: var(--fs-13);
  color: var(--ink-muted);
  margin-top: 6px;
  font-feature-settings: var(--tnum);
}
/* v07zz389 — per-sequence rich scene description (the generation-prompt default). */
.sm-scene { margin-top: 12px; max-width: 820px; }
.sm-scene-label {
  font-size: var(--fs-10-5); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 5px; font-weight: var(--fw-bold);
}
.sm-scene-text {
  font-size: var(--fs-13-5); line-height: 1.55; color: var(--ink-soft);
  white-space: pre-wrap;
}
.sm-scene-text.is-editable { cursor: text; border-radius: var(--r-sm); padding: 2px 4px; margin: -2px -4px; transition: background var(--dur-1) ease; }
.sm-scene-text.is-editable:hover { background: color-mix(in srgb, var(--mix-light) 5%, transparent); }
.sm-scene-text.is-empty { font-style: italic; color: var(--ink-muted); opacity: 0.85; }
.sm-scene-edit {
  width: 100%; min-height: 78px; resize: vertical;
  font: inherit; font-size: var(--fs-13-5); line-height: 1.55; color: var(--ink);
  background: color-mix(in srgb, var(--mix-light) 6%, transparent); border: 1px solid color-mix(in srgb, var(--ink-muted) 30%, transparent);
  border-radius: var(--r-sm); padding: 8px 10px;
}
.sm-scene-edit:focus { outline: none; border-color: var(--tan, color-mix(in srgb, var(--gold-7) 54%, var(--mix-light))); }
.sm-progress {
  margin-top: 12px;
  height: 6px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink-muted) 18%, transparent);
  overflow: hidden;
}
.sm-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--leaf), var(--amber));
  border-radius: var(--r-pill);
}

.sequence-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px 4px 14px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--tan) transparent;
}
.sequence-grid::-webkit-scrollbar { width: 8px; }
.sequence-grid::-webkit-scrollbar-thumb { background: var(--tan); border-radius: 4px; }

.sequence-shot-tile {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  display: block;
  transition: transform var(--dur-2) ease;
}
.sequence-shot-tile:hover { transform: translateY(-2px); }

.sst-thumb {
  position: relative;
  aspect-ratio: var(--project-aspect, 21 / 9);
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px color-mix(in srgb, var(--shade) 18%, transparent);
  overflow: hidden;
}
/* v07zz362 — sequence cover picker badge + button on each shot tile. */
.sst-cover-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  font-size: var(--fs-8-5);
  letter-spacing: var(--track-06);
  font-weight: var(--fw-heavy);
  color: var(--ink-deep-2);
  background: var(--gold-13);
  padding: 2px 6px;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.sst-cover-btn {
  position: absolute;
  bottom: 6px;
  right: 6px;
  z-index: 3;
  font-size: var(--fs-9);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-02);
  color: var(--white);
  background: color-mix(in srgb, var(--shade-33) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--white) 22%, transparent);
  padding: 3px 8px;
  border-radius: var(--r-round);
  cursor: pointer;
  opacity: 0;
  -webkit-backdrop-filter: blur(var(--blur-scrim));
  backdrop-filter: blur(var(--blur-scrim));
  transition: opacity 130ms ease, background 130ms ease;
}
.sequence-shot-tile:hover .sst-cover-btn { opacity: 1; }
.sst-cover-btn:hover { background: color-mix(in srgb, var(--shade-33) 80%, transparent); }
.sst-pill {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: var(--fs-8-5);
  letter-spacing: var(--track-08);
  font-weight: var(--fw-bold);
  color: var(--white);
  padding: 2px 6px;
  border-radius: 3px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.tile-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 8px 6px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.7) 100%);
  color: var(--white);
}
.sst-id {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  letter-spacing: var(--track-01);
  line-height: 1;
}
.sst-frame {
  font-size: var(--fs-10-5);
  margin-top: 2px;
  line-height: 1.2;
  color: color-mix(in srgb, var(--white) 85%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sm-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: var(--ink-muted);
  font-style: italic;
}
.sm-foot {
  border-top: 1px solid color-mix(in srgb, var(--card-border) 40%, transparent);
  padding-top: 10px;
  font-size: var(--fs-11-5);
  color: var(--ink-muted);
  font-feature-settings: var(--tnum);
}

/* ─── v01j — backdrop match + thumbnail image ───────────────────────
   The shot detail modal's .modal-backdrop uses rgba(0,0,0,0.35); the
   sequence backdrop was darker + stronger blur (color-mix(in srgb, var(--shade) 55%, transparent) +
   blur(8px)) which Hugo found jarringly different. New override below
   matches the shot modal's tone so popping between the two reads as
   one consistent treatment. */
.modal-backdrop.sequence-backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(var(--blur-scrim-2));
  -webkit-backdrop-filter: blur(var(--blur-scrim-2));
}
/* Thumbnail image inside the sequence tile — fills the gradient
   placeholder when the shot has a selected/first_pass image. The
   tile-overlay + pill sit above it via position: relative. */
.sst-thumb { position: relative; }
.sst-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.sst-thumb .sst-pill,
.sst-thumb .tile-overlay { z-index: 1; }

/* v03f — Sequence-popup shot tile: badge bottom-left, never cropped,
   21:9 aspect ratio on the thumbnail. Higher-specificity overrides
   leave the base .sst-pill rule (top-right) intact for any other
   call site, while the in-modal tiles get the new layout. */
.sequence-grid .sst-thumb {
  position: relative;
  aspect-ratio: var(--project-aspect, 21 / 9);
}
.sequence-grid .sst-pill {
  /* v04d — moved to TOP-LEFT (was bottom-left in v03f). Frame title
     sits at the bottom of the tile, so top-left keeps the status tag
     from overlapping it. */
  top: 8px;
  left: 8px;
  right: auto;
  bottom: auto;
  font-size: var(--fs-9);
  padding: 2px 7px 1px;
  z-index: 2;
}


/* ─── v970 — omitted (cut) shots are hidden here by default ─────────────────
   The count line carries a small toggle; shown cut tiles are dimmed + badged. */
.sm-meta { display: flex; align-items: center; gap: 10px; }
.sm-omit-toggle {
  border: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent);
  background: color-mix(in srgb, var(--cream-5) 55%, transparent);
  border-radius: var(--r-round);
  padding: 2px 10px;
  font: inherit;
  font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-04);
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
}
.sm-omit-toggle:hover { color: var(--ink); background: color-mix(in srgb, var(--cream-14) 90%, transparent); }
.sequence-shot-tile.is-omitted { opacity: 0.55; }
.sequence-shot-tile.is-omitted:hover { opacity: 0.85; }
.sst-cut-badge {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  font-size: var(--fs-9); font-weight: var(--fw-heavy); letter-spacing: var(--track-10);
  color: var(--white); background: color-mix(in srgb, var(--danger-deep) 85%, transparent);
  border-radius: 5px; padding: 2px 6px;
}
/* the cover badge owns the top-left corner; a cut tile that is ALSO the cover
   drops its CUT badge one row down so the two never sit on top of each other. */
.sst-thumb:has(.sst-cover-badge) .sst-cut-badge { top: 28px; }