/* Creation, render review and billing inside the signed-in studio. */
.studio--workspace {
  --selection-bg: color-mix(in srgb, var(--cf-500) 13%, var(--surface));
  --selection-line: color-mix(in srgb, var(--cf-500) 70%, var(--surface));
}

.studio--workspace .page__head { margin-bottom: clamp(1.2rem, 2.15vw, 1.85rem); }
.studio--workspace .page__head .t-h2 { font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: -.035em; }

.studio--workspace :is(.panel, .bundle-card, .film-card) {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: var(--surface);
}
.studio--workspace .panel { gap: .9rem; padding: clamp(1rem, 1.65vw, 1.45rem); }
.studio--workspace .panel > .panel__title {
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.35rem, 1.1rem + .65vw, 1.65rem);
}
.studio--workspace .panel__title > .num {
  width: 1.48rem;
  height: 1.48rem;
  border: 1px solid var(--line);
  border-radius: .38rem;
  background: var(--well);
  color: var(--fg-2);
}
.studio--workspace .panel :is(.input, .textarea, .select) {
  min-width: 0;
  min-height: 2.65rem;
  border-radius: .45rem;
  background-color: var(--bg);
  font-size: .9rem;
}
.studio--workspace .panel .textarea { min-height: 6rem; }
.studio--workspace .panel .field { min-width: 0; gap: .35rem; }
.studio--workspace .panel .select:disabled { color: var(--fg-3); cursor: not-allowed; }
.studio--workspace :is(.panel, .bundle-card, .costbar) .btn:disabled:not(.is-busy) {
  opacity: 1;
  border-color: var(--line);
  background: var(--well);
  color: var(--fg-3);
}
.studio--workspace .steps-nav {
  gap: .2rem;
  padding: .18rem;
  border: 1px solid var(--line);
  border-radius: .6rem;
  background: var(--surface);
}
.studio--workspace .steps-nav a { gap: .4rem; min-height: 2.35rem; padding: .25rem .65rem; border-radius: .43rem; }
.studio--workspace .steps-nav__n { width: 1.4rem; height: 1.4rem; border-color: var(--line); font-size: .7rem; }
.studio--workspace .steps-nav a.is-done .steps-nav__n { background: var(--well); color: var(--cf-300); }
.studio--workspace .steps-nav a[aria-current="step"] { background: var(--selection-bg); color: var(--cf-200); box-shadow: none; }
.studio--workspace .steps-nav a[aria-current="step"] .steps-nav__n { background: var(--cf-500); color: var(--ink); }
.studio--workspace :is(.wizard__body, .picture-workspace, .camera-controls) { gap: .875rem; }

.studio--workspace .tiles { gap: .5rem; }
.studio--workspace .tile {
  min-width: 0;
  gap: .24rem;
  padding: .78rem;
  background: var(--bg);
  border-color: var(--line);
  border-radius: .5rem;
}
.studio--workspace .tile strong { font-size: .875rem; }
.studio--workspace .tile .small { font-size: .78rem; line-height: 1.45; }
.studio--workspace .tile:hover { border-color: var(--line-2); background: var(--well); }
.studio--workspace .tile.is-on { border-color: var(--selection-line); background: var(--selection-bg); box-shadow: inset 0 0 0 .5px var(--selection-line); }
.studio--workspace .tile__icon,
.studio--workspace .paywall__icon,
.studio--workspace .dropzone__icon,
.studio--workspace .history__icon {
  width: 2rem;
  height: 2rem;
  border-radius: .45rem;
  background: var(--well);
  color: var(--fg-2);
}
.studio--workspace .tile__icon { margin-bottom: .15rem; }
.studio--workspace :is(.tile.is-on .tile__icon, .dropzone__icon, .paywall__icon) {
  background: var(--selection-bg);
  color: var(--cf-300);
}
.studio--workspace .tile.is-disabled { opacity: .6; }
.studio--workspace .settings { gap: 1rem 1.35rem; }
.studio--workspace .segmented { border-radius: .55rem; background: var(--bg); }
.studio--workspace .segmented > :is(button, label) { border-radius: .38rem; }
.studio--workspace .segmented > :is(label:has(input:checked), button[aria-pressed="true"]) { background: var(--selection-bg); color: var(--cf-200); box-shadow: none; }
.studio--workspace .dropzone {
  padding: clamp(1.3rem, 3.8vw, 2.9rem) 1rem;
  background: var(--bg);
  border-color: var(--line-2);
  border-radius: .55rem;
}
.studio--workspace .dropzone:is(:hover, .is-over) { background: var(--selection-bg); border-color: var(--cf-400); }
.studio--workspace .paywall { padding: 1rem; border: 1px solid var(--line); background: var(--bg); }
.studio--workspace .paywall__icon { border: 1px solid var(--line); }
.studio--workspace .photo__pick { background: var(--bg); }
.studio--workspace .photo.is-on .photo__pick { outline-width: 2px; }
.studio--workspace .photo__n { box-shadow: 0 0 0 2px var(--bg); }
.studio--workspace .shot-chip { background: var(--bg); }
.studio--workspace .shot-chip__tools button:hover:not(:disabled) { background: var(--well); }
.studio--workspace :is(.picture-summary, .review__cost) { align-self: start; }
.studio--workspace .picture-summary .facts { grid-template-columns: 1fr; gap: 0; }
.studio--workspace .picture-summary .facts > div {
  display: grid;
  grid-template-columns: minmax(5.25rem, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: .6rem;
  padding: .63rem 0;
  border-bottom: 1px solid var(--line);
}
.studio--workspace .picture-summary .facts dd { margin: 0; text-align: right; }
.studio--workspace .facts dt { font-size: .69rem; }
.studio--workspace .facts dd { font-size: .9rem; }
.studio--workspace .review__prompt { border-width: 2px; background: var(--bg); }
.studio--workspace .review__strip { padding-bottom: .3rem; }
.studio--workspace .review__credits { color: var(--fg); font-size: 3rem; }
.studio--workspace .review__cost .eyebrow { color: var(--cf-300); }

.studio--workspace .costbar__inner {
  min-width: 0;
  gap: .6rem;
  padding: .65rem .75rem .65rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: .65rem;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 .4rem 1.5rem rgb(0 0 0 / .3);
}
.studio--workspace .costbar__sum strong { font-size: 1.45rem; }
.studio--workspace .costbar__sum .small { font-size: .75rem; }

.studio--workspace :is(.badge--live, .note--info) { background: var(--selection-bg); color: var(--cf-200); }
.studio--workspace :is(.badge--warn, .note--warn) { --state-color: var(--warn); --state-light: var(--warn-bg); }
.studio--workspace :is(.badge--bad, .note--bad, .upload.is-error) { --state-color: var(--bad); --state-light: var(--bad-bg); }
.studio--workspace :is(.badge--ok, .note--ok) { --state-color: var(--ok); --state-light: var(--ok-bg); }
.studio--workspace :is(.badge--ok, .badge--warn, .badge--bad, .note--warn, .note--ok, .note--bad, .upload.is-error) {
  color: color-mix(in srgb, var(--state-light) 83%, var(--state-color));
  background: color-mix(in srgb, var(--state-color) 26%, var(--surface));
}
.studio--workspace .film-card__held { color: color-mix(in srgb, var(--warn-bg) 78%, var(--warn)); }
.studio--workspace .upload__error { color: inherit; }
.studio--workspace .project-page .project-assets { margin-top: 1.25rem; }
.studio--workspace .film-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: .85rem; }
.studio--workspace .film-card__media { border-bottom: 1px solid var(--line); }
.studio--workspace .film-card__body { gap: .65rem; padding: .95rem; }
.studio--workspace .film-card__top { flex-wrap: wrap; align-items: center; }
.studio--workspace .film-card__top h3 { flex: 1 1 8rem; font-size: 1.4rem; }
.studio--workspace .film-card__top .badge { max-width: 100%; white-space: normal; }
.studio--workspace .film-card__body .small { font-size: .81rem; }
.studio--workspace .film-card__actions { border-top: 1px solid var(--line); padding-top: .65rem; gap: .4rem; }
.studio--workspace .film-card__actions .btn { min-height: 2.2rem; }
.studio--workspace .stepper li:not(.is-current):not(.is-done) i { background: var(--line); }
.studio--workspace .project-empty-icon { background: var(--well); color: var(--cf-300); }

.studio--workspace .balance__number { color: var(--cf-300); font-size: clamp(2.5rem, 4.5vw, 3.25rem); }
.studio--workspace .bundle-grid { gap: .8rem; }
.studio--workspace .bundle-card { padding: 1.15rem; }
.studio--workspace .bundle-card__top { padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.studio--workspace .bundle-card__price { font-size: 2.8rem; margin-top: .7rem; }
.studio--workspace .bundle-grid--compact .bundle-card { padding: .9rem; }
.studio--workspace .bundle-grid--compact .bundle-card__price { font-size: 2.25rem; }
.studio--workspace .explain { margin-top: 2rem; padding-top: 1.7rem; gap: 1.4rem; }
.studio--workspace .examples tr :last-child { text-align: right; }
.studio--workspace .history { margin-top: 1.85rem; }
.studio--workspace .history li { flex-wrap: wrap; }
.studio--workspace .history__what { min-width: 6rem; }

.studio--workspace .creator-layout {
  /* Fit a landscape frame to its column and reserve space for the header, summary and credit bar. */
  --preview-stage-height: clamp(9rem, min(calc(56.25cqw + .75rem), calc(100dvh - 31rem)), 31rem);
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  grid-template-areas: "controls preview";
  align-items: start;
  gap: clamp(1rem, 1.8vw, 2rem);
}
.creator-layout__controls { grid-area: controls; min-width: 0; }
.creator-layout__preview {
  grid-area: preview;
  position: sticky;
  top: calc(var(--header-h) + .85rem);
  min-width: 0;
  z-index: 2;
}
.creator-layout .review { grid-template-columns: minmax(0, 1fr); }
.creator-layout :is(.picture-summary, .review__cost) { position: static; }
.creator-layout .camera-controls { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.creator-layout .tiles--types { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.creator-layout .review .facts dd { overflow-wrap: anywhere; }

@media (max-width: 59.99rem) {
  .studio--workspace .creator-layout {
    --preview-stage-height: clamp(4rem, min(17dvh, calc(100dvh - 31rem)), 11rem);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "preview" "controls";
    gap: .75rem;
  }
  .creator-layout__preview {
    top: var(--header-h);
    padding-block: .25rem;
    background: var(--bg);
  }
  .creator-layout__controls :is(input, textarea, select, button, a, summary) {
    scroll-margin-block-start: calc(var(--header-h) + var(--preview-stage-height) + 7rem);
    scroll-margin-block-end: calc(var(--dock-height) + 4.5rem);
  }
}
/* Side by side keeps the controls usable on short landscape screens. */
@media (min-width: 40rem) and (max-width: 59.99rem) and (max-height: 30rem) {
  .studio--workspace .creator-layout {
    --preview-stage-height: clamp(3.5rem, calc(100dvh - 19.5rem), 7rem);
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    grid-template-areas: "controls preview";
  }
  .creator-layout__preview { padding-block: 0; top: calc(var(--header-h) + .4rem); }
  .creator-layout__controls :is(input, textarea, select, button, a, summary) {
    scroll-margin-block-start: calc(var(--header-h) + .5rem);
  }
}
@media (max-width: 59.99rem) and (pointer: coarse) {
  /* Leave room above the software keyboard while the prompt or title has focus. */
  .studio--workspace .creator-layout:has(:is(.input, .textarea):focus) {
    --preview-stage-height: clamp(3rem, 12dvh, 6rem);
  }
}
@media (max-width: 47.99rem) {
  .studio--workspace .steps-nav a { justify-content: center; min-height: 2.65rem; }
  .studio--workspace .panel :is(.input, .select, .textarea) { font-size: 1rem; }
  .studio--workspace .costbar__inner { flex-wrap: nowrap; padding: .45rem .55rem .45rem .7rem; }
  .studio--workspace .costbar__sum { display: grid; width: auto; gap: .15rem; padding: 0; flex: none; }
  .studio--workspace .costbar__sum strong { font-size: 1.15rem; }
  .studio--workspace .costbar__nav { width: auto; min-width: 0; justify-content: end; }
  .studio--workspace .costbar__nav .btn { min-height: 2.65rem; padding-inline: .65rem; line-height: 1.15; }
  .studio--workspace .costbar__back { width: 2.5rem; }
  .studio--workspace .review .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .8rem; }
  .studio--workspace .review .facts dd { overflow-wrap: anywhere; }
  .studio--workspace .balance { justify-items: start; }
  .studio--workspace .explain { margin-top: 1.6rem; }
  .studio--workspace .examples { font-size: .78rem; }
}
@media (min-width: 29rem) and (max-width: 37.99rem) {
  .studio--workspace .tiles--types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}