/* All five stages use the same content gutter; empty shots are not a narrow page. */
.site-shell.workspace-open .studio-pane { --workspace-content-gutter: clamp(14px, 2.5vw, 32px); }
.site-shell.workspace-open:is(.workspace-stage--topic, .workspace-stage--copy, .workspace-stage--prompt, .workspace-stage--voice, .workspace-stage--render) .studio-pane .cockpit-body .stage-surface {
  padding: 16px var(--workspace-content-gutter);
}
.site-shell.workspace-open .workspace-action-dock { padding-inline: var(--workspace-content-gutter); }
.site-shell.workspace-open.workspace-stage--topic .topic-layout { margin-top: 0; }
.site-shell.workspace-open.workspace-stage--copy .copy-stage > .copy-length-control { margin-top: 0; }
.site-shell.workspace-open.workspace-stage--voice .voice-stage > .lingvoice-composer { margin-top: 0; }
.site-shell.workspace-open .prompt-stage .prompt-empty-state {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 761px) {
  .site-shell.workspace-open .prompt-stage:has(> .prompt-empty-state) { display: flex; flex-direction: column; }
  .site-shell.workspace-open .prompt-stage .prompt-empty-state { display: flex; flex: 1 1 auto; flex-direction: column; }
  .site-shell.workspace-open .prompt-empty-strip { flex: 1 0 auto; }
  .site-shell.workspace-open .prompt-empty-shot { display: flex; flex-direction: column; }
  .site-shell.workspace-open .prompt-empty-frame { flex: 1 0 auto; }
}
@media (max-width: 760px) {
  .site-shell.workspace-open .studio-pane { --workspace-content-gutter: 12px; }
  .site-shell.workspace-open:is(.workspace-stage--topic, .workspace-stage--copy, .workspace-stage--prompt, .workspace-stage--voice, .workspace-stage--render) .studio-pane .cockpit-body .stage-surface {
    padding-block: 12px;
  }
}

/* Retire the outgoing surface immediately so it cannot cover the next step. */
.site-shell.workspace-open .cockpit-body .stage-transition-host > .stage-switch-leave-active {
  visibility: hidden;
  opacity: 0;
  transform: none;
  transition: none;
}

.site-shell.workspace-open .cockpit-body .stage-transition-host > .stage-switch-enter-active {
  transition: opacity var(--motion-duration-fast, 120ms) var(--motion-ease-out, ease-out);
}

.site-shell.workspace-open .cockpit-body .stage-transition-host > .stage-switch-enter-from {
  opacity: .86;
  transform: none;
}

.site-shell.workspace-open .cockpit-body .stage-transition-host > .stage-switch-enter-to {
  opacity: 1;
  transform: none;
}

.site-shell.workspace-open.motion-off .cockpit-body .stage-transition-host > .stage-switch-enter-active {
  transition: none;
}

.site-shell.workspace-open.motion-off .cockpit-body .stage-transition-host > .stage-switch-enter-from {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .site-shell.workspace-open .cockpit-body .stage-transition-host > .stage-switch-enter-active {
    transition: none;
  }

  .site-shell.workspace-open .cockpit-body .stage-transition-host > .stage-switch-enter-from {
    opacity: 1;
  }
}