/* ============================================================
   hyper — Pipeline tool page
   Three-pane workbench: image · script · video
   ============================================================ */

.pipeline-page {
  height: 100vh;
  padding: calc(var(--pad-y) + 56px) 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* hide the global status bar on the pipeline tool page */
body.pipeline-active .status { display: none; }

/* ---------- stage / three-pane row ---------- */
.pipeline-stage {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  border-top: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  isolation: isolate;
}
.pipeline-stage .pane {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  background: #050505;
  border-right: 1px solid var(--line);
  transition: flex-grow .72s var(--ease-out), background .35s var(--ease);
  cursor: none;
  overflow: hidden;
}
.pipeline-stage .pane:last-child { border-right: 0; }

/* expansion ratios: 70 / 15 / 15 — flex-grow ratio 14 : 3 : 3 */
.pipeline-stage[data-active="image"]  .pane[data-pane="image"]  { flex-grow: 14; }
.pipeline-stage[data-active="image"]  .pane[data-pane="script"] { flex-grow: 3; }
.pipeline-stage[data-active="image"]  .pane[data-pane="video"]  { flex-grow: 3; }

.pipeline-stage[data-active="script"] .pane[data-pane="image"]  { flex-grow: 3; }
.pipeline-stage[data-active="script"] .pane[data-pane="script"] { flex-grow: 14; }
.pipeline-stage[data-active="script"] .pane[data-pane="video"]  { flex-grow: 3; }

.pipeline-stage[data-active="video"]  .pane[data-pane="image"]  { flex-grow: 3; }
.pipeline-stage[data-active="video"]  .pane[data-pane="script"] { flex-grow: 3; }
.pipeline-stage[data-active="video"]  .pane[data-pane="video"]  { flex-grow: 14; }

/* pane background subtle tint on hover (when none active) */
.pipeline-stage[data-active="none"] .pane:hover {
  background: #0a0a0a;
}
.pipeline-stage[data-active="none"] .pane:hover .pane-title em {
  color: var(--accent);
}

/* dim the inactive shrunk panes */
.pane[data-state="shrunk"] .pane-inner {
  opacity: 0.55;
  transition: opacity .35s var(--ease);
}
.pane[data-state="expanded"] .pane-inner,
.pane[data-state="idle"] .pane-inner {
  opacity: 1;
}

/* ---------- pane rail (left edge mono ribbon) ---------- */
.pane-rail {
  position: relative;
  z-index: 2;
  width: 36px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0));
}
.pane-rail .pane-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--mute);
}
.pane-rail .pane-rail-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-dim);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
.pane[data-state="expanded"] .pane-rail .pane-rail-label,
.pane:hover .pane-rail .pane-rail-label {
  color: var(--fg);
}
.pane[data-state="expanded"] .pane-rail .pane-num {
  color: var(--accent);
}

/* ---------- pane inner ---------- */
.pane-inner {
  flex: 1;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  padding: 14px clamp(14px, 1.4vw, 22px) 14px;
  min-width: 0;
  gap: 10px;
  min-height: 0;
}

.pane-head {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  flex-shrink: 0;
}

/* ---------- pane title ---------- */
.pane-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.86;
  font-size: clamp(28px, 3.4vw, 64px);
  margin: 0;
  text-wrap: balance;
  transition: font-size .55s var(--ease-out);
  flex-shrink: 0;
}
.pane-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  transition: color .35s var(--ease);
}
/* shrunk panes get a smaller title */
.pane[data-state="shrunk"] .pane-title {
  font-size: clamp(18px, 1.4vw, 26px);
}
/* expanded pane title amps up */
.pane[data-state="expanded"] .pane-title {
  font-size: clamp(40px, 4.6vw, 84px);
}

/* ---------- pane HUD (footer) ---------- */
.pane-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  min-width: 0;
  flex-shrink: 0;
}
.pane-hud > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pane-hud .rec-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
  animation: blink 1.4s steps(2, end) infinite;
}
.pane[data-state="expanded"] .pane-hud {
  color: var(--fg);
}

/* ---------- pane body ---------- */
.pane-body {
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

/* ===========================================================
   PREVIEW STATES (idle/shrunk pane bodies)
   =========================================================== */

/* ---- image preview: 3x2 mosaic of empty cells ---- */
.preview-mosaic {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 6px;
  min-height: 0;
}
.preview-mosaic .cell {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.018) 0 8px,
      rgba(255,255,255,0.04) 8px 9px);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.preview-mosaic .cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 50% 50%, rgba(255,255,255,0.04) 0%, transparent 70%);
}
.pane:hover .preview-mosaic .cell { border-color: var(--line-2); }
.preview-mosaic .cell .cell-tc {
  position: absolute;
  bottom: 6px; left: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.32);
}

/* shrunk: collapse mosaic to a single vertical strip */
.pane[data-state="shrunk"] .preview-mosaic {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
}
.pane[data-state="shrunk"] .preview-mosaic .cell:nth-child(n+4) { display: none; }
.pane[data-state="shrunk"] .preview-mosaic .cell .cell-tc { font-size: 8px; }

/* ---- script preview ---- */
.script-preview {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 8px;
  min-height: 0;
  overflow: hidden;
}
.script-preview .quote {
  position: absolute;
  left: -6px; top: -14px;
  font-family: var(--font-display);
  font-size: clamp(60px, 7vw, 140px);
  line-height: 1;
  color: rgba(255,255,255,0.06);
  font-weight: 700;
}
.script-preview p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--fg-dim);
}
.script-preview p em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.pane[data-state="shrunk"] .script-preview p {
  font-size: clamp(13px, 1vw, 16px);
}

/* ---- video preview (no video yet) ---- */
.generate-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  justify-content: flex-end;
  min-height: 0;
}
.video-preview-crop {
  position: relative;
  flex: 1;
  border: 1px solid var(--line);
  overflow: hidden;
  background: #000;
}
.video-preview-crop video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.video-preview-crop .crop-hud {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.6) 100%);
}
.video-preview-crop .crop-hud .rec-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
  vertical-align: middle;
  animation: blink 1.4s steps(2,end) infinite;
}

/* small caption row used under preview cells */
.preview-cap {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
  overflow: hidden;
}
.preview-cap > span:last-child {
  text-overflow: ellipsis;
  overflow: hidden;
}

/* ===========================================================
   EXPANDED STATES
   =========================================================== */

.pane-body.expanded {
  gap: 18px;
}

/* ---- upload zone ---- */
.upload-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px;
  border: 1px dashed var(--line-2);
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.018) 0 12px,
      rgba(255,255,255,0.03) 12px 13px);
  color: var(--fg-dim);
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
  min-height: 0;
}
.upload-zone:hover {
  border-color: var(--fg);
  color: var(--fg);
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.04) 0 12px,
      rgba(255,255,255,0.06) 12px 13px);
}
.upload-icon { color: currentColor; }
.upload-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 40px);
  letter-spacing: -0.025em;
  margin-top: 6px;
}
.upload-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ---- image result (after upload) ---- */
.image-result {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.image-main {
  position: relative;
  flex: 1 1 0;
  min-height: 140px;
  background: #000;
  border: 1px solid var(--line);
  overflow: hidden;
}
.image-main img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none;
}
.image-hud {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
}
.image-hud .rec-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
  vertical-align: middle;
  animation: blink 1.4s steps(2,end) infinite;
}

/* 3-view triptych */
.image-views {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  height: clamp(90px, 16vh, 160px);
  flex-shrink: 0;
}
.view-tile {
  position: relative;
  background: #000;
  border: 1px solid var(--line);
  overflow: hidden;
  animation: viewIn .6s var(--ease-out) both;
}
.view-tile:nth-child(2) { animation-delay: .08s; }
.view-tile:nth-child(3) { animation-delay: .16s; }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.view-tile img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.25) contrast(1.05);
}
.view-tile figcaption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
}

/* ---- script editor ---- */
.script-editor {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.script-input {
  flex: 1;
  width: 100%;
  resize: none;
  background: #030303;
  color: var(--fg);
  border: 1px solid var(--line-2);
  border-radius: 0;
  padding: 22px 24px 38px;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  outline: none;
  caret-color: var(--accent);
  cursor: text;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.script-input::placeholder {
  color: var(--mute);
  font-style: italic;
}
.script-input:focus {
  border-color: var(--fg);
  background: #050505;
}
.script-input-hud {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  pointer-events: none;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,0.6);
}
.script-input-hud .rec-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
  vertical-align: middle;
  animation: blink 1.4s steps(2,end) infinite;
}

/* ---- script summary card ---- */
.script-summary {
  border: 1px solid var(--line-2);
  background: #060606;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: viewIn .55s var(--ease-out) both;
}
.summary-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.summary-head .rec-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
  vertical-align: middle;
  animation: blink 1.4s steps(2,end) infinite;
}
.summary-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.summary-foot {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
.summary-beats {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.45;
  color: var(--fg-dim);
}
.summary-beats li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding-left: 0;
}
.summary-beats .b-n {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--accent);
  min-width: 22px;
  flex-shrink: 0;
}

/* loading + error chips */
.image-views-loading,
.script-summary-error,
.image-views-error {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  gap: 10px;
}
.image-views-loading .rec-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: blink 1.4s steps(2,end) infinite;
}
.image-views-error,
.script-summary-error {
  color: #ff7766;
  border-color: rgba(255, 119, 102, 0.4);
}

/* ---- video stage (expanded) ---- */
.video-stage {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  background: #000;
  border: 1px solid var(--line);
  overflow: hidden;
  width: 100%;
}
.video-stage video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
}
.video-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.video-hud .top,
.video-hud .bottom {
  display: flex;
  justify-content: space-between;
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.video-hud .top { background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 100%); }
.video-hud .bottom { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%); align-self: end; }
.video-hud .rec-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
  animation: blink 1.4s steps(2,end) infinite;
}
.video-center-mark {
  align-self: center;
  justify-self: center;
  position: relative;
  width: 56px; height: 56px;
}
.video-center-mark::before,
.video-center-mark::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid rgba(255,255,255,0.35);
}
.video-center-mark::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.video-center-mark::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* ---- generate button ---- */
.generate-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 24px;
}
.generate-zone .generate-meta {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.btn-generate {
  position: relative;
  width: clamp(180px, 22vw, 280px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: transparent;
  color: var(--fg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  font-weight: 700;
  cursor: none;
  overflow: hidden;
  transition: transform .4s var(--ease-out), color .25s var(--ease);
}
.btn-generate .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--fg);
  transition: border-color .25s var(--ease), background .35s var(--ease), transform .5s var(--ease-out);
}
.btn-generate::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.18);
  animation: spinRing 18s linear infinite;
}
.btn-generate .label {
  position: relative;
  font-size: clamp(22px, 2.4vw, 40px);
  font-weight: 700;
  z-index: 1;
}
.btn-generate .sub {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 400;
}
.btn-generate:hover .ring {
  background: var(--accent);
  border-color: var(--accent);
}
.btn-generate:hover { color: var(--accent-ink); }
.btn-generate:hover .sub { color: rgba(0,0,0,0.55); }
.btn-generate:active .ring { transform: scale(0.96); }

.btn-generate.is-busy {
  pointer-events: none;
}
.btn-generate.is-busy .ring {
  background: var(--accent);
  border-color: var(--accent);
}
.btn-generate.is-busy { color: var(--accent-ink); }
.btn-generate.is-busy::before {
  animation-duration: 2.4s;
  border-color: rgba(0,0,0,0.4);
}
.btn-generate.is-busy .sub { color: rgba(0,0,0,0.6); }

@keyframes spinRing {
  to { transform: rotate(360deg); }
}

/* small generate button (for narrow preview pane) */
.btn-generate.small {
  width: 100%;
  aspect-ratio: auto;
  border-radius: 999px;
  padding: 14px 18px;
  flex-direction: row;
  gap: 8px;
  font-size: clamp(13px, 1.1vw, 16px);
  flex-shrink: 0;
}
.btn-generate.small .ring {
  border-radius: 999px;
}
.btn-generate.small::before { display: none; }
.btn-generate.small .label { font-size: clamp(13px, 1.1vw, 16px); }
.btn-generate.small .sub { display: none; }

/* ===========================================================
   pane action row (buttons under content)
   =========================================================== */
.pane-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-height: 0;
}
.btn-ghost,
.btn-accent {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: none;
  transition: all .25s var(--ease);
  white-space: nowrap;
}
.btn-ghost {
  border: 1px solid var(--line-2);
  color: var(--fg-dim);
  background: transparent;
}
.btn-ghost:hover {
  border-color: var(--fg);
  color: var(--fg);
}
.btn-accent {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
}
.btn-accent:hover {
  background: transparent;
  color: var(--accent);
}
.btn-accent:disabled,
.btn-accent[disabled] {
  background: transparent;
  color: var(--mute);
  border-color: var(--line-2);
  pointer-events: none;
}

.script-stats {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  display: inline-flex;
  gap: 6px;
}

/* ===========================================================
   nav active marker for new Pipeline link inherits .active style
   =========================================================== */

/* ===========================================================
   Responsive — fall back to vertical stack on narrow screens
   =========================================================== */
@media (max-width: 980px) {
  .pipeline-page {
    padding: calc(var(--pad-y) + 80px) var(--pad-x) calc(var(--pad-y) + 56px);
  }
  .pipeline-stage {
    flex-direction: column;
    height: auto;
  }
  .pipeline-stage .pane {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    min-height: 280px;
    flex: 1 1 auto !important;
  }
  .pipeline-stage .pane:last-child { border-bottom: 0; }
  .pane-rail {
    width: 100%;
    height: 32px;
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 14px;
  }
  .pane-rail .pane-rail-label {
    writing-mode: horizontal-tb;
    transform: none;
  }
  .pane[data-state="shrunk"] .pane-title {
    font-size: clamp(28px, 5vw, 48px);
  }
  .pane[data-state="expanded"] .pane-title {
    font-size: clamp(42px, 7vw, 80px);
  }
  .pane[data-state="shrunk"] .preview-mosaic {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
  .pane[data-state="shrunk"] .preview-mosaic .cell:nth-child(n+4) { display: block; }
}

/* ---------- Filmstrip progress (shared across 3 AI steps) ---------- */
.filmstrip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}
.filmstrip-head,
.filmstrip-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0.85;
}
.filmstrip-head .rec-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
  animation: blink 1.4s steps(2, end) infinite;
}
.filmstrip.is-error .filmstrip-head .rec-dot {
  background: #ff7766;
}
.filmstrip-strip {
  display: flex;
  gap: 2px;
  height: 8px;
  width: 100%;
}
.fs-frame {
  flex: 1 1 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  transition: background 120ms linear;
}
.fs-frame.lit {
  background: var(--fg);
  border-color: var(--fg);
}
/* The currently-lighting frame (the first un-lit after the run of lit) flickers
   to read as "in motion" rather than a static fill. */
.fs-frame.lit + .fs-frame {
  animation: blink 0.9s steps(2, end) infinite;
  background: rgba(255, 255, 255, 0.35);
}
.filmstrip.is-error .fs-frame {
  border-color: #ff7766;
}
.filmstrip.is-error .fs-frame.lit {
  background: #ff7766;
}
.filmstrip.is-error .filmstrip-head,
.filmstrip.is-error .filmstrip-foot {
  color: #ff7766;
  opacity: 1;
}

/* Image fills inside the now-rendered mosaic cells (was: empty grey cells only).
   .cell already has position:relative + overflow:hidden from the base styles
   at the top of this file — we only need the image and timecode rules here. */
.preview-mosaic .cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  pointer-events: none;
}
.preview-mosaic .cell .cell-tc {
  position: relative; /* keep timecode above image */
  z-index: 1;
}

/* Overlay the filmstrip across cells 1-3 of the mosaic during view generation,
   so progress is visible even when the image pane is collapsed. */
.preview-mosaic-overlay {
  position: absolute;
  pointer-events: none;
  /* Mosaic is a 3-col / 2-row grid. Cover cells 1, 2, 3 (top row, right two + bottom-left) */
  left: 33.333%;
  top: 0;
  width: 66.666%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  padding: 12px;
}
.preview-mosaic-overlay > .filmstrip {
  width: 100%;
}
.preview-mosaic {
  position: relative; /* needed for the absolute overlay above */
}

/* Phase-aware filmstrip — when polling reveals queued / finalizing states, the lit
   frames pulse with a scanning highlight so the bar doesn't look frozen when it's
   parked at 10% (queued) or 95% (finalizing). */
@keyframes fs-scan {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
.filmstrip.is-queued .fs-frame.lit,
.filmstrip.is-finalizing .fs-frame.lit {
  animation: fs-scan 1.4s ease-in-out infinite;
}