.video-studio { display: grid; align-content: start; gap: var(--space-8); padding-block: var(--space-12) 80px; min-height: 60vh; }
.video-studio h1 { max-width: none; margin: 0; font-size: clamp(32px, 4vw, 40px); line-height: 1.45; letter-spacing: -.035em; }
.studio-view-card__preview { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-image); background: var(--ink); color: var(--subtle-inverse); }
.studio-view-card__preview:hover { text-decoration: none; }
.studio-view-card__preview img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.studio-view-card__placeholder { padding: var(--space-4); font-size: 13px; text-align: center; }
.studio-view-card__availability { position: absolute; top: 12px; left: 12px; max-width: calc(100% - 24px); padding: 6px 8px; border-radius: var(--radius-control); background: var(--canvas); color: var(--ink); font-size: 11px; }
.studio-view-card__identity { display: flex; align-items: flex-start; gap: var(--space-3); }
.studio-view-card__labels { flex: 1; display: grid; gap: var(--space-2); min-width: 0; overflow-wrap: anywhere; }
.studio-view-card__labels h2 { font-size: 18px; line-height: 26px; letter-spacing: normal; }
.studio-view-card__location { color: var(--muted); font-size: 13px; line-height: 19px; }
.action-menu { position: relative; flex: 0 0 44px; }
.action-menu__panel { position: absolute; top: calc(100% + 4px); right: 0; z-index: 10; width: 190px; max-width: calc(100vw - 48px); padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-image); background: var(--surface); box-shadow: 0 12px 36px #20231f1c; }
.action-menu__panel[hidden] { display: none; }
.action-menu__item { display: block; width: 100%; min-height: 44px; padding: 12px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--ink); text-align: left; font-size: 13px; cursor: pointer; }
.action-menu__item:hover { background: var(--canvas); }
.library-empty { display: grid; justify-items: center; align-content: center; gap: var(--space-4); min-height: 280px; padding: var(--space-10); border: 1px solid var(--line); border-radius: var(--radius-image); background: var(--surface); text-align: center; }
.library-empty > img { width: 32px; height: 32px; }
.library-empty h2 { font-size: 24px; line-height: 1.45; letter-spacing: -.02em; }
.library-empty p { max-width: 540px; color: var(--muted); }
@media (max-width: 767px) {
  .video-studio { padding-top: var(--space-6); }
  .library-tabs__tab { padding-inline: 12px; font-size: 12px; white-space: nowrap; }
  .library-tabs__count { display: none; }
  .library-empty { padding: 32px 20px; }
}

.studio-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.studio-tabs__tab { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 12px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14px; white-space: nowrap; }
.studio-tabs__tab:hover { color: var(--ink); text-decoration: none; }
.studio-tabs__tab[aria-current=page] { border-bottom-color: var(--ink); color: var(--ink); font-weight: 500; }
.studio-tabs__tab span { color: var(--muted); font-size: 12px; font-weight: 400; }

.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 24px; }
.project-card { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.project-card:hover { text-decoration: none; border-color: var(--ink); }
.project-card__cover { display: block; width: 100%; height: 180px; object-fit: cover; background: var(--dark-surface); }
.project-card__cover--empty { display: grid; place-items: center; background: var(--surface-muted); color: var(--muted); font-size: 13px; }
.project-card__body { display: grid; gap: 4px; padding: 14px 16px; }
.project-card__body strong { font-weight: 500; overflow-wrap: anywhere; }
.project-card__body span { color: var(--muted); font-size: 12px; }

.project-page { display: grid; align-content: start; gap: var(--space-8); padding-block: var(--space-12) 80px; min-height: 60vh; }
.project-page__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: calc(var(--space-4) - var(--space-8)); }
.project-page__path { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.project-page__up { flex: none; color: var(--muted); font-size: 15px; font-weight: 500; }
.project-page__up:hover { color: var(--ink); }
.project-page__separator { flex: none; color: var(--muted); font-size: 15px; }
.project-page__heading h1 { min-width: 0; margin: 0; overflow: hidden; font-size: 22px; line-height: 1.3; letter-spacing: -.02em; white-space: nowrap; text-overflow: ellipsis; }
.project-add { position: relative; }
.project-menu summary, .project-add summary { list-style: none; cursor: pointer; }
.project-menu summary::-webkit-details-marker, .project-add summary::-webkit-details-marker { display: none; }
.project-menu__panel, .project-add__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; display: grid; gap: 14px; width: min(340px, calc(100vw - 32px)); padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 32px rgb(0 0 0 / 12%); }
.project-menu__panel p { margin: 0; font-size: 13px; line-height: 1.6; }
.project-menu__panel .field { margin: 0; }
.project-add__panel fieldset { display: grid; gap: 10px; max-height: 320px; overflow-y: auto; margin: 0; padding: 0; border: 0; }
.project-add__panel legend { margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.project-add__panel .checkbox-field span { margin-left: 6px; color: var(--muted); font-size: 12px; }
.project-page__section { display: grid; gap: 20px; }
.project-page__section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.project-page__section-heading h2 { font-size: 18px; }
.project-scenes { margin-bottom: 0; }
.project-scene { display: grid; gap: 8px; }
.project-scene form { justify-self: start; }
.project-scene__remove { padding: 0; border: 0; background: none; color: var(--muted); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 600px) {
  .project-menu__panel { right: auto; left: 0; }
}

.studio-section__actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.studio-section__actions p { margin: 0; color: var(--muted); font-size: 13px; }
.studio-library__archived { margin-left: 8px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.location-card__heading { display: flex; align-items: flex-start; gap: 8px; }
.location-card__heading > .location-card__link, .location-card__heading > .location-card__title { flex: 1; min-width: 0; }
/* Centred on the title line (below its 12px margin) without pushing the card taller. */
.location-card__heading .action-menu { flex: 0 0 32px; margin: 2px 0 -2px; }
.location-card__heading .icon-button { flex-basis: 32px; width: 32px; height: 32px; padding: 6px; }
.action-menu__form { margin: 0; }
a.action-menu__item { text-decoration: none; }
.project-page__section-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

.modal--wide { width: min(880px, calc(100% - 32px)); }
.location-picker { display: grid; gap: 16px; }
.location-picker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 136px), 1fr)); gap: 16px; max-height: min(60dvh, 560px); overflow-y: auto; margin: 0; padding: 4px; list-style: none; }
.location-picker__card { position: relative; display: grid; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-image); background: var(--surface); cursor: pointer; }
.location-picker__card:hover { border-color: var(--muted); }
.location-picker__card:has(.location-picker__check:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.location-picker__card:has(.location-picker__check:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.location-picker__check { position: absolute; top: 16px; left: 16px; z-index: 1; width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.location-picker__image { display: block; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 6px; background: var(--surface-muted); }
.location-picker__image img { width: 100%; height: 100%; object-fit: cover; }
.location-picker__placeholder { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: 12px; }
.location-picker__name { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.location-picker__kind { color: var(--muted); font-size: 12px; }
.location-picker__card--button { width: 100%; text-align: left; font: inherit; }
/* A form inside a dialog: its lines, fields and actions spaced alike. */
.modal-form { display: grid; gap: 16px; }
.modal-form .modal__description, .modal-form .field, .modal-form .modal__actions { margin: 0; }
.project-scene-card__title h3 { font-size: 14px; }
.project-scene-card__meta { color: var(--muted); }

.scene-workspace .scene-step__heading { margin-top: 8px; font-size: 15px; }
/* The scene's name heads its own column instead of a banner over the work. */
.scene-workspace .location-workspace__columns { grid-template-areas: "identity panel" "steps panel"; grid-template-rows: auto 1fr; row-gap: 16px; }
.scene-workspace__identity { grid-area: identity; min-width: 0; }
.scene-workspace .location-steps { grid-area: steps; }
.scene-workspace .location-workspace__panel { grid-area: panel; }
.scene-workspace__identity h1 { margin: 0; max-width: none; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.scene-workspace__identity p { margin-top: 4px; color: var(--muted); font-size: 12px; }
@media (max-width: 1023px) {
  .scene-workspace .location-workspace__columns { grid-template-areas: "identity" "steps" "panel"; grid-template-rows: none; }
}
.scene-place { max-width: 320px; }
/* The last step: a history of the scene's videos, each card a 16:9 frame over its title, facts and links. */
.scene-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.scene-results__item { display: grid; grid-template-rows: auto 1fr; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-image); background: var(--surface); overflow: hidden; }
.scene-results__frame { display: grid; place-content: center; justify-items: center; gap: 10px; aspect-ratio: 16 / 9; padding: 20px; background: #151914; color: var(--subtle-inverse); font-size: 13px; line-height: 1.5; text-align: center; }
.scene-results__frame p { margin: 0; max-width: 34ch; }
.scene-results__frame progress { width: 160px; height: 4px; accent-color: var(--accent); }
.scene-results__frame:has(.scene-results__player) { display: block; padding: 0; }
.scene-results__player { display: block; width: 100%; height: 100%; object-fit: contain; background: #151914; }
.scene-results__body { display: grid; align-content: start; gap: 4px; padding: 14px 16px 16px; }
.scene-results__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.scene-results__title h3 { margin: 0; font-size: 15px; }
.scene-results__meta { margin: 0; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.scene-results__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.scene-results__actions .button { min-height: 36px; padding: 7px 14px; }
.scene-results__empty p { margin: 0; color: var(--muted); font-size: 14px; }
.scene-videos { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.scene-videos a { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-image); background: var(--surface); }
.scene-videos a:hover { border-color: var(--ink); text-decoration: none; }
.scene-videos span { color: var(--muted); font-size: 12px; }
.scene-camera-card p { color: var(--muted); }
/* The video step's card, a heading beside its action. */
.scene-look { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.scene-look h3 { font-size: 16px; }
.scene-look p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
/* The look step gathers materials: one grid of cards — each actor's appearance, the cameras on the track, the props. */
.scene-materials { display: grid; gap: 20px; }
.scene-materials__group { display: grid; gap: 14px; }
.scene-materials__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; align-items: stretch; } /* one row, one height: the cards line up along their tops and bottoms */
.scene-materials__set { display: contents; } /* each set is redrawn on its own while its cards share the one grid */
.scene-material { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.scene-material:hover { border-color: #b7bcb0; box-shadow: 0 4px 16px #0000000f; }
.scene-material.is-missing { border-color: #e0a19a; }
.scene-material__image { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--canvas); }
.scene-material__image a { display: block; width: 100%; height: 100%; }
.scene-material__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.scene-material__placeholder { color: var(--muted); font-size: 13px; }
.scene-material__kind,
.scene-material__state { position: absolute; top: 10px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 14px; pointer-events: none; }
.scene-material__kind { left: 10px; background: #20251ce6; color: #fff; }
.scene-material__state { right: 10px; background: #fff; color: #c0392b; box-shadow: 0 1px 3px #0002; }
.scene-material__state.is-ready { color: #2f6b2f; }
.scene-material__body { display: grid; align-content: start; gap: 4px; padding: 12px 14px 0; }
.scene-material__body h5 { margin: 0; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.scene-material__body > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 17px; }
.scene-material__actions { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: auto; align-items: start; gap: 4px; padding: 12px 14px 14px; } /* the quiet remove button keeps the top-right corner while an edit panel grows */
.scene-material__actions .button { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.scene-material__actions > .button { justify-self: start; }
.scene-material__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.scene-material__select { flex: 1; min-width: 120px; }
.scene-material__select .select-input { min-height: 34px; padding-block: 6px; font-size: 13px; }
.scene-material__upload { cursor: pointer; }
.scene-material__remove { margin: 0; }
.scene-material__icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.scene-material__icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.scene-material__icon:hover { border-color: #c0392b; color: #c0392b; }
.scene-material--new { display: grid; grid-template-rows: none; padding: 0; border-style: dashed; background: none; }
.scene-material__add { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; min-height: 120px; padding: 14px; border: 0; border-radius: inherit; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.scene-material__add:hover { background: var(--surface); }
.scene-material__add span { font-size: 18px; line-height: 1; }
/* Where a camera move is, a round plus stands in the gap between two cards, as editors put an insert between items.
   It rides on the edge of the card before it, so that card clips only its picture, not itself. */
.scene-camera-card { position: relative; overflow: visible; }
.scene-camera-card .scene-material__image { overflow: hidden; border-radius: 11px 11px 0 0; }
.scene-move-inserts { position: absolute; z-index: 2; top: 50%; right: -25px; display: grid; gap: 8px; transform: translateY(-50%); }
.scene-move-insert { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 20px; line-height: 1; text-decoration: none; box-shadow: 0 2px 8px #0000001f; transition: background-color .15s, border-color .15s, transform .15s; }
.scene-move-insert:hover, .scene-move-insert:focus-visible { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); text-decoration: none; transform: scale(1.08); }
.scene-move-insert:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* One card a row: the plus sits in the gap under the card instead. */
@media (max-width: 520px) {
  .scene-move-inserts { top: auto; right: 50%; bottom: -25px; grid-auto-flow: column; transform: translateX(50%); }
}
/* The window a frame in a move is chosen in: the 3D view at the frame's shape, turned only by the slider. */
.modal.move-frame-dialog { width: min(880px, calc(100% - 32px)); }
.move-frame { display: grid; gap: 14px; }
.move-frame .modal__description { margin: 0; }
.move-frame .viewer-stage { height: auto; aspect-ratio: 16 / 9; min-height: 0; pointer-events: none; }
.move-frame .viewer-scene-bar { display: none; } /* the spinner says it is loading; the slider is the only control */
.move-frame__position { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.move-frame__position .field__label { margin: 0; }
.move-frame__position input { width: 100%; accent-color: var(--ink); }
.move-frame__position output { min-width: 150px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.move-frame .modal__actions { margin-top: 0; }
@media (max-width: 600px) {
  .move-frame__position { grid-template-columns: minmax(0, 1fr); }
  .move-frame__position output { text-align: left; }
}
.scene-material--empty { grid-template-rows: none; display: grid; place-items: center; min-height: 160px; padding: 14px 18px; border-style: dashed; background: none; color: var(--muted); font-size: 13px; text-align: center; }
.scene-material--empty p { margin: 0; }
.scene-materials.is-busy { opacity: .7; }
.scene-material__open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
/* The frame editor, as image editors with generative fill are: a bar on top, the frame in the middle with its brush
   and its prompt, and one-click actions on the right. */
.modal.frame-window { width: min(1440px, calc(100% - 32px)); height: min(900px, calc(100dvh - 32px)); max-height: none; padding: 0; overflow: hidden; }
.modal.frame-window[open] { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr); }
.frame-window > * + * { margin-top: 0; }
.frame-window[data-busy="true"] { cursor: progress; }
.frame-window [hidden] { display: none !important; }

.frame-window__bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px 10px 20px; border-bottom: 1px solid var(--line); }
.frame-window__identity { flex: 1; min-width: 0; }
.frame-window__identity h2 { margin: 0; overflow: hidden; font-size: 16px; line-height: 22px; white-space: nowrap; text-overflow: ellipsis; }
.frame-window__label { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; color: var(--muted); font-size: 12px; }
.frame-window__file { display: flex; gap: 8px; }
.frame-window__file .button { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.frame-window__quiet { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.frame-window__quiet:hover { color: var(--ink); }

.frame-window__stage { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; min-width: 0; min-height: 0; padding: 12px 16px 16px; background: #14170f; }
/* Each part keeps its row, so a hidden brush never leaves the frame in a row without height. */
.frame-window__brush { grid-row: 1; }
.frame-window__area { grid-row: 2; }
.frame-window__dock { grid-row: 3; display: grid; gap: 8px; justify-items: center; min-width: 0; }
/* The room for the frame is a size container, so the frame can be held to it and keep its proportions. */
.frame-window__area { container-type: size; display: grid; place-items: center; min-width: 0; min-height: 0; }
.frame-window__picture { position: relative; }
.frame-window__picture img { display: block; width: auto; height: auto; max-width: 100cqw; max-height: 100cqh; }
.frame-window__picture img:not([src]) { display: none; }
.frame-window__paint { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }

/* The brush's bar, over the dark stage. */
.frame-window__brush { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; justify-self: start; min-height: 36px; padding: 4px 12px; border-radius: 999px; background: #262b21; color: #e7eadf; font-size: 12px; }
.frame-window__brush-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.frame-window__brush-name svg, .frame-window__attach svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.frame-window__size { display: inline-flex; align-items: center; gap: 8px; color: #b9bdb0; }
.frame-window__size input { width: 96px; accent-color: var(--accent); }
.frame-window__brush-hint { color: #b9bdb0; }
.frame-window__brush-clear { padding: 0; border: 0; background: none; color: #e7eadf; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* The prompt, under the frame: where, what, and a picture if it helps. */
.frame-window__prompt, .frame-window__review { display: flex; align-items: center; gap: 8px; justify-self: center; width: min(820px, 100%); padding: 8px; border-radius: 14px; background: var(--surface); box-shadow: 0 8px 28px rgb(0 0 0 / .35); }
.frame-window__scope { flex: none; padding: 5px 10px; border-radius: 999px; background: var(--surface-muted); color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
.frame-window__scope.is-area { background: #dbe8fb; color: #1e4f93; }
.frame-window__text { flex: 1; min-width: 0; min-height: 36px; max-height: 120px; padding: 8px 6px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; line-height: 20px; resize: none; field-sizing: content; }
.frame-window__text:focus-visible { outline: none; }
.frame-window__prompt:focus-within { box-shadow: 0 8px 28px rgb(0 0 0 / .35), 0 0 0 2px var(--accent); }
.frame-window__reference { display: flex; align-items: center; gap: 2px; min-width: 0; max-width: 180px; }
.frame-window__attach { display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: 36px; padding: 0 10px; border-radius: 8px; color: var(--muted); font-size: 12px; cursor: pointer; }
.frame-window__attach:hover, .frame-window__attach:has(input:focus-visible) { background: var(--surface-muted); color: var(--ink); }
.frame-window__attach span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame-window__remove { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.frame-window__remove:hover { background: var(--surface-muted); color: var(--ink); }
.frame-window__prompt > .button { flex: none; min-height: 36px; padding: 6px 16px; }

/* A result in the making, or one to keep or discard, in the prompt's place. */
.frame-window__review { justify-content: space-between; min-height: 52px; padding-left: 16px; }
.frame-window__status { margin: 0; color: var(--ink); font-size: 13px; line-height: 18px; }
.frame-window__review.is-working .frame-window__status { display: inline-flex; align-items: center; gap: 10px; }
.frame-window__review.is-working .frame-window__status::before { content: ""; flex: none; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: viewer-spin .8s linear infinite; }
.frame-window__decision { display: flex; gap: 8px; }
.frame-window__decision .button { min-height: 36px; padding: 6px 14px; }
.frame-window__decision [aria-pressed="true"] { background: var(--ink); color: var(--surface); }

/* One-click actions beside the frame. */
.frame-window__tools { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 16px; border-left: 1px solid var(--line); overflow-y: auto; }
.frame-window__tools-title { margin: 0; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.frame-window__action { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.frame-window__action h4 { margin: 0; font-size: 14px; }
.frame-window__action p { margin: 0; color: var(--muted); font-size: 12px; line-height: 17px; }
.frame-window__action .button { min-height: 36px; padding: 6px 12px; font-size: 13px; justify-content: center; }
.frame-window__match { display: grid; gap: 8px; }
/* The versions, compact: small stills three to a row, the current one outlined. */
.frame-window__versions { display: grid; gap: 8px; padding-top: 4px; }
.frame-window__versions-hint { margin: 0; color: var(--muted); font-size: 12px; line-height: 17px; }
.frame-window__version-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; margin: 0; padding: 0; list-style: none; }
.frame-window__version { display: grid; gap: 3px; width: 100%; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 11px; line-height: 14px; text-align: left; cursor: pointer; }
.frame-window__version img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 2px solid transparent; border-radius: 6px; background: var(--surface-muted); }
.frame-window__version span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.frame-window__version:hover img { border-color: var(--line); }
.frame-window__version[aria-current="true"] { color: var(--ink); font-weight: 600; cursor: default; }
.frame-window__version[aria-current="true"] img { border-color: var(--ink); }
.frame-window__version:disabled { opacity: .5; cursor: default; }
.frame-window__version:focus-visible { outline: none; }
.frame-window__version:focus-visible img { outline: 2px solid var(--focus); outline-offset: 1px; }
.frame-window__match .select-input { min-height: 36px; padding-block: 6px; font-size: 13px; }

@media (max-width: 900px) {
  .modal.frame-window[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .frame-window__tools { border-left: 0; border-top: 1px solid var(--line); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .frame-window__tools-title { grid-column: 1 / -1; }
  .frame-window__prompt { flex-wrap: wrap; }
  .frame-window__text { flex-basis: 100%; order: -1; min-height: 56px; }
}
/* The Video step's summary of the scene: its script and each actor's motion, then its references. */
.scene-motion { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.scene-motion__who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; }
.scene-motion__who strong { font-weight: 600; }
.scene-motion__who > span:last-child { color: var(--muted); }
.scene-motion__marker { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--marker, var(--line)); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18); }
/* The markers' colours, as the staging draws them (ACTOR_COLORS in guide_plan.js). */
.scene-motion__marker[data-color=lime] { --marker: #d5f36b; }
.scene-motion__marker[data-color=blue] { --marker: #69c7ff; }
.scene-motion__marker[data-color=orange] { --marker: #ff9b78; }
.scene-motion__marker[data-color=purple] { --marker: #c39cff; }
.scene-motion__marker[data-color=gold] { --marker: #ffcf63; }
.scene-motion__marker[data-color=green] { --marker: #75ddae; }
.scene-motion__marker[data-color=pink] { --marker: #ff8ebc; }
.scene-motion__marker[data-color=silver] { --marker: #b7c7de; }
.scene-motion__note { margin: 2px 0 0 18px; }
.scene-motion__actions { display: grid; gap: 4px; margin: 6px 0 0 18px; padding: 0; list-style: none; font-size: 13px; line-height: 20px; }
.scene-motion__actions li { display: grid; grid-template-columns: 48px auto minmax(0, 1fr); gap: 8px; }
.scene-motion__time { color: var(--muted); font-variant-numeric: tabular-nums; }
.scene-motion__point { font-weight: 600; }
.scene-summary__references { display: grid; gap: 12px; }
.scene-materials__cards--compact { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.scene-materials__cards--compact .scene-material__body { padding: 10px 12px 12px; }
.scene-materials__cards--compact .scene-material__body h5 { font-size: 13px; }
/* The scene's script: one writing area, saved as it is typed. */
.scene-script { display: grid; gap: 8px; }
.scene-script .field { margin: 0; }
.scene-script textarea { min-height: 260px; font-size: 15px; line-height: 1.6; }
.scene-script__status { justify-self: end; margin: 0; min-height: 18px; color: var(--muted); font-size: 12px; }
.scene-summary__references .scene-materials__heading h3 { margin: 0; font-size: 16px; }

/* A location opened in the Studio: what it is, and where to edit it or see it in the catalog. */
.studio-location__source { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.studio-location__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* A prop, in its own dialog: its picture as a tile beside its name and who carries it. */
.modal:has(.prop-form) { width: min(560px, calc(100% - 32px)); }
.prop-form__layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: start; }
.prop-form__fields { display: grid; gap: 12px; }
.prop-form__fields .field { margin: 0; }
.prop-form__description { min-height: 76px; padding: 10px 12px; resize: vertical; font-size: 14px; line-height: 20px; }
.prop-form__fields .field__hint { margin: 4px 0 0; }
.prop-picture { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border: 1px dashed var(--line); border-radius: 12px; background: var(--canvas); color: var(--muted); text-align: center; cursor: pointer; }
.prop-picture:hover, .prop-picture:has(input:focus-visible) { border-color: var(--ink); }
.prop-picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--surface); }
.prop-picture img[hidden] { display: none; }
.prop-picture__placeholder { display: grid; justify-items: center; gap: 4px; padding: 12px; font-size: 12px; }
.prop-picture__placeholder svg { width: 28px; height: 28px; margin-bottom: 4px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.prop-picture__placeholder strong { color: var(--ink); font-size: 13px; font-weight: 600; }
.prop-picture__change { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 4px 8px; border-radius: 6px; background: rgb(255 255 255 / .92); color: var(--ink); font-size: 12px; }
@media (max-width: 520px) {
  .prop-form__layout { grid-template-columns: minmax(0, 1fr); }
  .prop-picture { aspect-ratio: 16 / 9; }
}