/* 1TAKE Studios: scene-builder.css — Scene Builder (Studio tier, BUILD_CONTEXT §F10).
   Tokens only, no hardcoded colors. Builds on the .slate / .option-card / .sheet component
   contract from components.css; only Scene-Builder-specific layout and the sand continuity
   treatment live here. */

.scene-builder {
  --gap: var(--s-5);
}

.scene-builder-gate {
  padding-block: var(--s-4);
}

/* ================= Step 1: story picker ================= */
.scene-story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}

@media (min-width: 768px) {
  .scene-story-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.scene-story-card {
  gap: var(--s-2);
}

.scene-beat-chips {
  margin-top: var(--s-1);
}

/* ================= Step 3: continuity + beats ================= */
.scene-beat-list {
  --gap: var(--s-5);
}

/* The continuity block is a Studio-only surface: its header row carries a
   yellow badge tint so it stays visually distinct from the plain beat
   slates below it (the old diagonal perforation stripe is retired). */
.scene-continuity .slate-top {
  background: var(--badge-soft);
}

.scene-continuity-help {
  padding: 0 var(--s-4) var(--s-3);
}

.scene-beat .slate-label-row {
  padding-bottom: var(--s-2);
}

/* ================= VO block ================= */
.scene-vo {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  border-top: 1px solid var(--rule);
}

.scene-vo-meta {
  gap: var(--s-3);
}

.scene-vo-status {
  font-family: var(--font-mono);
  letter-spacing: 0;
  text-transform: none;
}

.scene-vo-status--good {
  background: var(--good-soft);
  color: var(--good);
}

.scene-vo-status--warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.scene-vo-actions {
  display: flex;
}

/* ================= Footer ================= */
.scene-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}

/* ================= Sheet sizing ================= */
/* The Scene Builder wants more room than the default 420px right slide-over, and a full-height
   sheet on mobile rather than the default 88vh bottom sheet. Scoped via :has() to the sheet that
   is actually hosting the builder so components.css / sheet.js stay untouched. */
.sheet[data-side="right"]:has(.scene-builder-sheet-content) {
  width: 640px;
}

.sheet:has(.scene-builder-sheet-content):not([data-side="right"]) {
  max-height: 100vh;
  height: 100vh;
  border-radius: 0;
}

@media (max-width: 767px) {
  .scene-story-grid {
    grid-template-columns: 1fr;
  }
}