/* The dialog is the same workspace as the scene page, in a window that scrolls as one. */
#scene-staging-dialog.modal { width: min(1480px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 24px; overflow-y: auto; }
#scene-staging-dialog .viewer-stage { height: clamp(300px, 48vh, 620px); }
/* Viewer on top, its settings in tabs underneath. */
/* minmax(0,1fr) keeps a nowrap label inside a panel from widening the whole page. */
.scene-staging { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 22px; }
/* Viewer and track on the left, the settings of whatever is chosen on the right. */
@media (min-width: 1100px) {
  .scene-staging { grid-template-columns: minmax(0, 1fr) 340px; }
  .scene-staging__panels { grid-column: 1 / -1; }
  /* The step has no inspector while it is rebuilt, so the viewer takes the whole width. */
  .scene-staging--embedded { grid-template-columns: minmax(0, 1fr); }
}
.scene-staging__inspector { min-width: 0; }
/* The scene's step is being rebuilt around its track: for now it shows the viewer, the track
   and the one button that saves them. Everything else waits, and the dialog keeps it all. */
.scene-staging--embedded .scene-staging__inspector,
.scene-staging--embedded .staging-tabs,
.scene-staging--embedded .staging-tabs__panel,
.scene-staging--embedded .scene-staging__hint { display: none; }
.scene-staging--embedded .scene-staging__panels { margin-top: -8px; }
.scene-staging [hidden] { display: none !important; }
.scene-staging__viewport { min-width: 0; }
.scene-staging__camera { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.scene-staging__camera label { flex-shrink: 0; color: var(--muted); }
.scene-staging--embedded { margin-top: 0; }
/* On the scene page the whole page scrolls, so the settings run their full length. */


.scene-staging__hint { margin-top: 14px; padding: 12px 16px; background: #f0f5e3; border-radius: 8px; font-size: 13px; }
.scene-staging__hint:empty { display: none; }
.scene-staging__settings { display: flex; flex-direction: column; }
.staging-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.staging-tabs__tab { flex-shrink: 0; padding: 12px 16px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-size: 14px; white-space: nowrap; cursor: pointer; }
.staging-tabs__tab:hover { color: var(--ink); }
.staging-tabs__tab[aria-selected=true] { border-bottom-color: var(--ink); color: var(--ink); font-weight: 500; }
.staging-tabs__panel { padding-top: 18px; border: 0; margin: 0; min-width: 0; }
.staging-tabs__panel[hidden] { display: none; }
/* Two readable columns of settings under a wide viewer. */
@media (min-width: 900px) {
  /* :not([hidden]) keeps this from overriding the hidden attribute of an inactive tab. */
  #staging-panel-actor:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; align-items: start; }
}
.scene-staging__section { padding: 18px 0; border-bottom: 1px solid var(--line); }
.scene-staging__section:first-child { padding-top: 0; }
.scene-staging__section h3 { font-size: 17px; margin: 0 0 8px; }
.scene-cast select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.scene-cast__actions { display: flex; gap: 8px; margin: 12px 0; }
.scene-cast__timing-actions { display: grid; gap: 8px; }
.scene-cast__timing-actions .button { white-space: normal; overflow-wrap: anywhere; }
.scene-cast .scene-cast__timing { margin: 12px 0; font-variant-numeric: tabular-nums; }
.scene-cast .scene-cast__error { color: #9e2929; }
.scene-staging__section p { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0 0 12px; }
.scene-staging__section label { display: block; margin: 12px 0 6px; }
.scene-staging__section fieldset { border: 0; padding: 0; margin: 0; }
.scene-staging__section fieldset:disabled { opacity: .5; }
.scene-staging__numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scene-staging__elevation { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-bottom: 8px; }
.scene-staging__section input[type=range] { width: 100%; min-height: 32px; margin: 8px 0 0; accent-color: var(--focus); }
.scene-staging__section input[type=file] { width: 100%; font: inherit; font-size: 12px; }
#scene-staging-dialog .horizon-controls__angle input { background: var(--dark-surface); color: var(--canvas); border-color: #555e4d; }
.scene-staging__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.scene-staging button[aria-pressed=true] { background: var(--accent); border-color: transparent; }
.scene-staging__reference { width: 100%; max-height: 150px; object-fit: contain; background: var(--canvas); border-radius: 8px; }
/* One quiet line closing the tabs. */
.scene-staging__actions { display: flex; justify-content: flex-end; padding-top: 16px; }
.scene-staging__save-status { margin: 0; min-height: 18px; color: var(--muted); font-size: 12px; }
.scene-path-player { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; padding: 12px 16px; background: var(--dark-surface); color: var(--canvas); border-top: 1px solid #3b4236; }
.scene-path-player input { flex: 1; min-width: 50px; accent-color: var(--accent); }
.scene-path-player output { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scene-path-player > .button { padding: 8px 12px; min-height: 38px; }
.scene-path-player > .button:not(.button--accent) { color: var(--canvas); }
.scene-actor-settings { margin-top: 14px; }
.scene-actor-settings summary { font-size: 13px; color: var(--muted); cursor: pointer; }
.scene-path-points { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.scene-staging__section .scene-path-summary { margin: 12px 0 0; }
.scene-path-point { padding: 12px; background: var(--canvas); border-radius: 8px; }
.scene-path-point h4 { font-size: 13px; margin: 0; }
.scene-path-point textarea { width: 100%; min-height: 100px; resize: vertical; }
.scene-path-point .scene-path-point__time { margin-top: 6px; font-variant-numeric: tabular-nums; }
.scene-path-point__optional { color: var(--muted); font-weight: 400; }
.scene-path-points [data-described=true]::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 6px; border-radius: 50%; background: var(--focus); vertical-align: middle; }
.scene-path-point .editor-tool { margin-top: 8px; }
.scene-staging__section #path-duration { margin-bottom: 10px; }
.motion-guide { margin-top: 24px; }
.motion-guide h3 { font-size: 16px; margin: 0; }
.motion-guide p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 6px 0 0; }
/* Each job of the tab — the shots, the preview, the request — stands on its own. */
.guide-section { padding: 20px; border: 1px solid var(--line); border-radius: 12px; }
.guide-section + .guide-section { margin-top: 16px; }
.guide-section__heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 16px; }
.motion-guide .guide-summary { margin: 0; font-variant-numeric: tabular-nums; }
.motion-guide .guide-hint { margin-top: 10px; }
.guide-add { margin-top: 12px; }
/* The track is the video itself: a shot holds its stretch of time, wearing its own still,
   and the marks between shots are the switches, which drag. */
/* The track holds a lane per role — the cameras, then each actor — over one ruler of seconds. */
.guide-track { --track-toolbar: 34px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 6px; margin-top: 18px; }
/* The length of the video, over the ruler: a small whole-seconds field, the way an export panel shows a duration. */
.guide-track__toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 6px; height: calc(var(--track-toolbar) - 6px); font-size: 12px; color: var(--muted); }
.guide-track__length-input { box-sizing: border-box; width: 56px; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--canvas); color: var(--ink); font: 500 13px/26px Inter, system-ui, sans-serif; text-align: right; font-variant-numeric: tabular-nums; }
.guide-track__length-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.guide-track__length-input:disabled { opacity: .5; }
.guide-track__length-input:user-invalid { border-color: #c0392b; }
.guide-track__label { margin-left: 12px; font-size: 12px; line-height: 14px; color: var(--text-secondary, var(--muted)); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guide-track__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.guide-track__add { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--canvas); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.guide-track__add:hover { border-color: var(--ink); }
.guide-track__add:disabled { opacity: .5; cursor: default; }
.track-picker { position: absolute; top: calc(var(--track-toolbar, 0px) + 44px); right: 0; z-index: 5; width: min(340px, 100%); padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); box-shadow: 0 8px 28px #0002; }
.track-picker__time { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.track-picker__timing { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 13px; }
.track-picker__timing input,
.track-picker__timing .select-control { width: 140px; max-width: 50%; flex-shrink: 0; }
.track-picker__timing input,
.track-picker__timing .select-input { box-sizing: border-box; height: 36px; min-height: 36px; padding: 7px 10px; border: 1px solid #b7bcb0; border-radius: 8px; background-color: var(--surface); color: var(--ink); font: 500 13px/20px Inter, system-ui, sans-serif; }
.track-picker__list { display: grid; gap: 6px; max-height: 240px; overflow-y: auto; }
.track-picker__row { display: flex; align-items: stretch; gap: 6px; }
.track-picker__row .track-picker__camera { flex: 1; min-width: 0; }
.track-picker__remove { display: flex; align-items: center; justify-content: center; width: 36px; flex-shrink: 0; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--canvas); color: var(--muted); cursor: pointer; }
.track-picker__remove:hover { border-color: #c0392b; color: #c0392b; }
.track-picker__remove:disabled { opacity: .5; cursor: default; }
.track-picker__camera { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--canvas); color: var(--ink); text-align: left; cursor: pointer; }
.track-picker__camera:hover { border-color: var(--ink); }
/* The list scrolls, so a focus ring outside a row would be cut off: focus is marked inside it. */
.track-picker__camera:focus-visible, .track-picker__remove:focus-visible { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.track-picker__camera img { width: 72px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.track-picker__cancel { margin-top: 12px; }
.guide-track__lanes { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; gap: 6px; }
.guide-track__ruler { position: relative; height: 20px; border-bottom: 1px solid var(--line); cursor: pointer; touch-action: none; }
.guide-track__ruler:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.guide-track__mark { position: absolute; top: 3px; transform: translateX(-50%); color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.guide-track__mark:first-child { transform: none; }
.guide-track__mark:last-child { transform: translateX(-100%); }
.guide-track__blocks { position: relative; height: 56px; cursor: copy; }
.guide-track__playhead { position: absolute; top: calc(var(--track-toolbar, 0px) + 20px); bottom: 0; left: calc(var(--preview-progress, 0) * 100%); z-index: 2; width: 2px; margin-left: -1px; background: var(--ink); pointer-events: none; }
.guide-track__playhead::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ink); }
.guide-track__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 12px; border: 1px dashed var(--line); border-radius: 6px; background: var(--canvas); color: var(--muted); font-size: 12px; text-align: center; cursor: copy; }
.guide-track.is-receiving .guide-track__empty { border-color: var(--ink); color: var(--ink); }
.guide-track.is-receiving::after { content: ""; position: absolute; left: calc(var(--drop-at, 0) * 100%); top: calc(var(--track-toolbar, 0px) + 46px); height: 56px; width: 2px; margin-left: -1px; background: var(--ink); }
.guide-track.is-provisional .guide-track__ruler { color: var(--muted); cursor: default; }
.guide-track.is-provisional .guide-track__playhead { display: none; }
/* Camera blocks start at arrival; travel occupies a separate interval before them. */
.guide-clip { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--canvas); overflow: hidden; cursor: pointer; text-align: left; }
.scene-staging .guide-clip[aria-pressed=true] { background: var(--canvas); }
.guide-clip.is-selected { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.guide-clip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.guide-clip:disabled { opacity: .6; cursor: default; }
.guide-clip img { flex: none; width: 64px; height: 36px; object-fit: cover; border-radius: 4px; display: block; }
.guide-clip__move { display: grid; place-items: center; container-type: inline-size; overflow: hidden; color: var(--ink); position: absolute; top: 0; bottom: 0; padding: 0; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; background: repeating-linear-gradient(115deg, var(--line) 0 6px, transparent 6px 12px); }
.guide-clip__name { position: relative; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The joint between two clips is the switch: it says what it is, and it drags. */
.guide-joint, .guide-travel-handle { position: absolute; top: -4px; bottom: -4px; z-index: 4; width: 16px; margin-left: -8px; padding: 0; border: 0; background: none; cursor: ew-resize; touch-action: none; }
.guide-joint::before, .guide-travel-handle::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--surface); }
.guide-joint__kind { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 2px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 11px; white-space: nowrap; }
.scene-staging .guide-joint[aria-pressed=true] { background: none; }
.guide-joint.is-selected .guide-joint__kind { background: var(--ink); color: var(--canvas); border-color: transparent; }
.guide-joint:focus-visible, .guide-travel-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.guide-joint:disabled, .guide-travel-handle:disabled { cursor: default; opacity: .6; }
/* An actor's lane: the stretch it walks, the pauses in it, and a mark at every point of its route. */
.guide-lane { position: relative; height: 26px; }
.guide-lane__bar { position: absolute; top: 6px; height: 14px; border-radius: 999px; background: #eef3e2; border: 1px solid var(--line); overflow: hidden; }
.guide-lane__hold { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(115deg, var(--line) 0 5px, transparent 5px 10px); }
.guide-point { position: absolute; top: 3px; width: 20px; height: 20px; margin-left: -10px; padding: 0; border: 2px solid var(--surface); border-radius: 50%; background: var(--ink); cursor: pointer; }
.scene-staging .guide-point[aria-pressed=true] { background: var(--ink); }
.guide-point:hover, .guide-point:focus-visible { background: var(--accent); outline: none; }
.motion-guide .guide-lane__empty, .guide-lane__empty { margin: 0; font-size: 12px; color: var(--muted); }
.motion-guide__shots { display: grid; }
.guide-shot { min-width: 0; }
/* One camera at a time — the one chosen on the track — unless there is no track to choose from. */
.guide-shot:not([data-selected=on]):not([data-selected=all]) .motion-guide__shot,
.guide-shot:not([data-selected=on]):not([data-selected=all]) .guide-switch { display: none; }
.guide-shot[data-selected=all] + .guide-shot[data-selected=all] { margin-top: 10px; }
.motion-guide .guide-shot__opening { margin: 0 0 8px; }
/* The inspector is a narrow column, so a shot stacks: its still, then the camera, then its timing. */
.motion-guide__shot { display: grid; grid-template-columns: auto minmax(0, 1fr) 44px; gap: 8px 10px; align-items: center; padding: 12px; background: var(--canvas); border: 1px solid var(--line); border-radius: 8px; }
.guide-shot__still { grid-row: 1 / span 3; width: 72px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; display: block; }
.motion-guide .guide-shot__number { grid-column: 2; grid-row: 1; justify-self: start; margin: 0; padding: 4px 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); font-size: 11px; color: var(--muted); white-space: nowrap; }
.motion-guide__remove { grid-column: 3; grid-row: 1; display: grid; place-items: center; padding: 0; width: 44px; height: 44px; }
.guide-shot__camera { grid-column: 2 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.guide-shot__lead { flex-shrink: 0; font-size: 13px; color: var(--muted); }
.motion-guide .guide-shot__span { grid-column: 2 / -1; grid-row: 3; margin: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.guide-switch { display: grid; gap: 10px; margin-top: 10px; padding: 12px; background: var(--canvas); border: 1px solid var(--line); border-radius: 8px; }
.guide-switch__field { min-width: 0; }
.motion-guide .guide-switch__arrival { margin: 0; font-variant-numeric: tabular-nums; }
.motion-guide .guide-switch__help { margin: 0; }
/* Two choices side by side, so the switch shows its shape without being opened. */
.segmented { display: inline-flex; max-width: 100%; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.segmented__option { position: relative; display: flex; align-items: center; margin: 0; padding: 6px 14px; border-radius: 999px; color: var(--muted); font-size: 13px; white-space: nowrap; cursor: pointer; }
/* The radio keeps its place in the label, out of sight and out of the layout's width. */
.guide-switch .segmented__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; }
.segmented__option:has(input:checked) { background: var(--ink); color: var(--canvas); }
.segmented__option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.segmented__option:has(input:disabled) { opacity: .5; cursor: default; }
.motion-guide__shots input, .motion-guide__shots select { width: 100%; min-width: 0; }
.guide-shot__camera select { flex: 0 1 320px; min-width: 0; }
.motion-guide__remove { display: grid; place-items: center; padding: 0; width: 44px; height: 44px; }
.motion-guide .motion-guide__validation { margin-top: 12px; color: #9e2929; }
.motion-guide__camera select { text-overflow: ellipsis; }
.motion-guide label { display: block; margin-bottom: 6px; font-size: 12px; color: var(--muted); }
.motion-guide__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.motion-guide__progress { margin-top: 16px; }
.motion-guide progress { width: 100%; accent-color: var(--accent); }
.motion-guide__result { margin-top: 16px; }
.motion-guide__send { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
/* The model and the quality side by side, each at its own width. */
.motion-guide__settings { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; max-width: 100%; }
.motion-guide__settings > .select-field { flex: none; width: 220px; max-width: 100%; }
.motion-guide__settings > .select-field:last-child { width: 120px; }
.motion-guide__send .motion-guide__settings select { max-width: none; } /* the review form's 180px cap is not for these */
.motion-guide__settings .field__label { display: block; margin: 0 0 6px; font-size: 12px; color: var(--muted); }
.motion-guide__settings .select-input { min-height: 44px; padding-block: 11px; }
.motion-guide video { display: block; width: 100%; max-height: 65vh; background: #151914; border-radius: 8px; }
.scene-staging__section .radio-choices { margin: 16px 0; }
.motion-guide__instructions { margin-top: 16px; }
.motion-guide__instructions summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.motion-guide__instructions pre { max-height: 240px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--canvas); font: 12px/1.6 Inter, system-ui, sans-serif; }
@media(max-width: 960px) {
  .scene-staging__actions { margin-top: 12px; }
}
@media(max-width: 720px) {
  .guide-section { padding: 16px; }
  #scene-staging-dialog.modal { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 16px; }
  .scene-staging__camera { flex-direction: column; align-items: stretch; gap: 6px; }
  #scene-staging-dialog .viewer-stage { height: 34vh; min-height: 230px; }
}

/* The camera strip stands in for the camera select when staging runs on the scene page. */
.camera-strip { display: grid; gap: 12px; }
.camera-strip__list { display: flex; gap: 12px; overflow-x: auto; margin: 0; padding: 2px; list-style: none; scrollbar-width: thin; }
.camera-strip__list > li { display: grid; gap: 4px; justify-items: start; flex: 0 0 156px; }
.camera-strip__actions { display: flex; gap: 10px; }
.camera-strip__action { padding: 0; border: 0; background: none; color: var(--muted); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.camera-strip__action:hover:not(:disabled) { color: var(--ink); }
.camera-strip__action:disabled { opacity: .5; cursor: default; }
.camera-strip__shot { display: grid; gap: 6px; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-image); background: var(--surface); overflow: hidden; cursor: grab; text-align: left; }
.camera-strip__shot:active { cursor: grabbing; }
/* height: auto lets the ratio win over the image's own height attribute. */
.camera-strip__shot img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.camera-strip__shot span { padding: 0 10px 8px; font-size: 12px; overflow-wrap: anywhere; }
.camera-strip__shot:hover { border-color: var(--muted); }
.camera-strip__shot.is-current { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.camera-strip__add { display: grid; gap: 6px; place-content: center; justify-items: center; width: 100%; aspect-ratio: 16 / 10; padding: 8px; border: 1px dashed var(--line); border-radius: var(--radius-image); background: transparent; color: var(--muted); font-size: 12px; line-height: 1.4; text-align: center; cursor: pointer; }
.camera-strip__add span:first-child { font-size: 20px; }
.camera-strip__add:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.camera-strip__add:disabled { opacity: .5; cursor: default; }

.track-transition__summary { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 12px 0; }
.track-transition__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.track-picker__timing .select-input { padding-right: 30px; }
.track-picker__timing .select-control::after { right: 12px; }
.track-transition__summary:empty { display: none; }

.guide-clip__edit { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font: 500 11px/16px Inter, system-ui, sans-serif; pointer-events: none; }
.guide-clip__edit svg { flex-shrink: 0; }

.guide-clip__move:hover:not(:disabled) .guide-clip__edit { border-color: var(--ink); }
.guide-clip__move:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.guide-clip__move:disabled { opacity: .5; cursor: default; }
@container (max-width: 70px) { .guide-clip__edit > span { display: none; } .guide-clip__edit { padding: 4px; } }


.guide-actors__heading { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.guide-actors__add { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--canvas); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.guide-actors__add:disabled { opacity: .5; cursor: default; }
.guide-lane { height: 64px; border: 1px solid var(--line); border-radius: 6px; }
.guide-lane__bar { top: 0; height: 54px; display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 6px; background: color-mix(in srgb, var(--actor-color) 20%, var(--canvas)); border-left: 4px solid var(--actor-color); color: var(--ink); font: 12px/1.4 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
.guide-lane__bar > strong, .guide-lane__bar > span { position: relative; z-index: 1; white-space: nowrap; }
.guide-lane__bar:hover:not(:disabled) { border-color: var(--ink); }
.guide-lane__bar--still { left: 0; width: 100%; }
.guide-point { top: 46px; }
.guide-lane--empty { border-style: dashed; }
.guide-actors__empty { width: 100%; height: 100%; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.scene-staging--embedded.is-editing-actor #staging-panel-actor { display: block; padding: 20px; border: 1px solid var(--line); border-radius: 10px; }
.scene-staging--embedded.is-editing-actor .scene-staging__hint { display: block; }
.actor-timeline-editor__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.actor-timeline-editor__header h3 { margin: 0; }

.actor-placement-cancel { display: none; }
.scene-staging.is-placing-actor .actor-placement-cancel { display: inline-flex; margin-top: 8px; }
.scene-staging.is-placing-actor .scene-staging__hint { display: block; }
.scene-staging--embedded .scene-cast { display: none; }

.actor-route-tools { display: none; }
.scene-staging.is-drawing-route .actor-route-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.actor-route-tools > span { margin-right: auto; font-size: 13px; color: var(--muted); }
.scene-staging.is-drawing-route .scene-staging__hint { display: block; }

/* Actor and point settings share the camera timeline's anchored popovers. */
.actor-timeline-editor { max-height: min(650px, 80vh); overflow-y: auto; }
.actor-timeline-editor__action { display: grid; gap: 6px; margin-bottom: 12px; font-size: 13px; }
.actor-timeline-editor__action textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.guide-point { width: 24px; height: 24px; margin-left: -12px; color: var(--surface); font: 600 11px/20px Inter, system-ui, sans-serif; }
.guide-point:hover, .guide-point:focus-visible { color: var(--ink); }
.actor-point-move-tools { display: none; }
.is-moving-point .actor-point-move-tools { display: flex; align-items: center; gap: 16px; margin: 16px 0; }
.guide-actors__heading { justify-content: flex-start; gap: 10px; flex-wrap: wrap; }
.guide-actors__heading > button:last-child { margin-left: auto; }

.timeline-editor-actions { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 16px; }
.timeline-editor-actions .button { min-height: 36px; padding: 7px 14px; font-size: 13px; }
.timeline-editor-actions__remove { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; margin-right: auto; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.timeline-editor-actions__remove:hover { color: #a52d2d; background: #a52d2d0d; }
.timeline-editor-actions__cancel { margin-left: auto; }
.timeline-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.timeline-editor-heading .track-picker__time { margin: 0; }
.timeline-editor-heading__move { display: flex; align-items: center; gap: 5px; padding: 5px 7px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.timeline-editor-heading__move:hover { background: #00000008; color: var(--ink); }
.timeline-editor-actions__remove:focus-visible, .timeline-editor-heading__move:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.guide-point__edit { position: absolute; right: -7px; bottom: -4px; width: 13px; height: 13px; padding: 1px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; pointer-events: none; }
.guide-point:hover, .guide-point:focus-visible { box-shadow: 0 0 0 3px #20251b24; z-index: 2; }
.guide-point:hover .guide-point__edit, .guide-point:focus-visible .guide-point__edit { background: var(--accent); border-color: var(--ink); }

/* The same visual vocabulary on both tracks: add, edit, remove and time. */
.timeline-icon { display: block; width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.guide-track__add, .guide-actors__add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; box-sizing: border-box; padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--canvas); color: var(--ink); font: 500 12px/18px Inter, system-ui, sans-serif; cursor: pointer; }
.guide-track__add:hover:not(:disabled), .guide-actors__add:hover:not(:disabled) { background: var(--surface); border-color: var(--ink); }
.guide-track__empty, .guide-actors__empty { display: flex; align-items: center; justify-content: center; gap: 6px; font: 500 12px/18px Inter, system-ui, sans-serif; cursor: pointer; }
.guide-track__empty:hover:not(:disabled), .guide-actors__empty:hover:not(:disabled) { color: var(--ink); background: #00000003; }
.guide-clip .timeline-time, .guide-lane .timeline-time { display: inline-block; flex: none; padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--muted); font: 500 11px/16px Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.guide-clip__name, .guide-lane__bar > strong { font: 500 12px/18px Inter, system-ui, sans-serif; }
.guide-point--start { width: 42px; margin-left: -21px; border-radius: 6px; }
.guide-point .guide-point__edit { width: 13px; height: 13px; }
.guide-point:disabled { cursor: default; opacity: .5; }
.guide-track__add:focus-visible, .guide-actors__add:focus-visible, .guide-actors__empty:focus-visible, .guide-lane__bar:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.guide-track .track-transition__actions { justify-content: flex-end; align-items: center; padding-top: 12px; margin-top: 16px; border-top: 1px solid var(--line); }
.guide-track .track-transition__actions .button { min-height: 36px; padding: 7px 14px; font-size: 13px; }
.guide-track .track-transition__actions .button--primary { order: 1; }
/* Dots mark an actor holding still; diagonal bands mark camera travel. */
.guide-lane__hold { background: radial-gradient(var(--line) 1px, transparent 1px) 0 0 / 5px 5px; border-inline: 1px dotted var(--muted); }
.guide-actors__heading [data-edit-actor-button] { width: 24px; min-height: 24px; padding: 4px; margin-left: -6px; flex-shrink: 0; border: 0; background: transparent; color: var(--muted); }
.guide-actors__heading [data-edit-actor-button]:hover:not(:disabled) { background: transparent; color: var(--ink); }
.guide-actors__heading [data-edit-actor-button] .timeline-icon { width: 14px; height: 14px; }
.track-picker__camera--new { justify-content: center; min-height: 48px; border-style: dashed; }
.scene-camera-preview { display: block; width: 100%; max-height: 45vh; object-fit: contain; border-radius: 8px; margin-bottom: 16px; background: var(--ink); }
.scene-camera-preview[hidden] { display: none; }
/* The naming dialog can open from the timeline while the legacy camera library stays hidden. */
.scene-staging--embedded #staging-panel-cameras:has(dialog[open]) { display: contents; }
.scene-staging--embedded #staging-panel-cameras > #staging-cameras { display: none; }


.guide-lane__bar:hover:not(:disabled), .guide-lane__bar:focus-visible { background: color-mix(in srgb, var(--actor-color) 35%, var(--canvas)); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.guide-clip__move:hover:not(:disabled), .guide-clip__move:focus-visible { background-color: color-mix(in srgb, var(--accent) 14%, var(--canvas)); }
/* A camera and its incoming move share a single hover outline. */
.guide-camera-highlight { position: absolute; top: 0; bottom: 0; border-radius: 6px; pointer-events: none; z-index: 1; }
.guide-camera-highlight.is-highlighted { box-shadow: inset 0 0 0 2px var(--ink); }
.scene-staging .guide-clip.is-highlighted, .scene-staging .guide-clip__move.is-highlighted { background-color: color-mix(in srgb, var(--accent) 14%, var(--canvas)); border-color: var(--line); box-shadow: none; }

/* Actor stops and their incoming travel mirror camera blocks. */
.guide-lane--points { --actor-point-min-width: 28px; height: 56px; border: 0; }
.guide-actor-stop { position: absolute; top: 0; bottom: 0; }
.guide-actor-stop::after { content: ""; position: absolute; inset: 0 0 0 var(--incoming-overlap, 0px); min-width: var(--actor-point-min-width); pointer-events: none; border-radius: 6px; z-index: 3; }
.guide-actor-stop:has(button:hover:not(:disabled), button:focus-visible)::after { box-shadow: inset 0 0 0 2px var(--ink); }
.guide-actor-move { position: absolute; inset: 0 auto 0 var(--incoming-overlap, 0px); padding: 0; border: 1px solid var(--line); border-right: 0; border-radius: 6px 0 0 6px; background: repeating-linear-gradient(115deg, var(--line) 0 6px, transparent 6px 12px); cursor: pointer; }
.scene-staging .guide-actor-point { position: absolute; top: 0; bottom: 0; height: auto; min-width: var(--actor-point-min-width); margin: 0; padding: 8px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--canvas); color: var(--ink); text-align: left; overflow: hidden; box-shadow: none; z-index: 2; }
.guide-actor-point strong, .guide-actor-point span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 12px/18px Inter, system-ui, sans-serif; }
.guide-actor-point span { font-weight: 400; color: var(--muted); }
.guide-actor-stop:has(button:hover:not(:disabled), button:focus-visible) button { background-color: color-mix(in srgb, var(--accent) 14%, var(--canvas)); }
.guide-actor-stop button:disabled { opacity: .5; cursor: default; }

.guide-actor-joint { left: var(--incoming-overlap, 0px); }

/* Reserve the marker row below the lane, including while its duration changes. */
.guide-lane--points { margin-bottom: 28px; }
.guide-actor-stop--flag { z-index: 5; }
.guide-actor-stop--flag::after { display: none; }
.scene-staging .guide-actor-start-flag { top: calc(100% + 6px); bottom: auto; min-width: 52px; height: 22px; padding: 2px 8px; overflow: visible; border-radius: 5px; }
.guide-actor-start-flag span { display: none; }
.guide-actor-start-flag::after { content: ""; position: absolute; left: 6px; top: -4px; width: 6px; height: 6px; background: inherit; border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.scene-staging .guide-actor-start-flag:hover:not(:disabled), .scene-staging .guide-actor-start-flag:focus-visible { box-shadow: inset 0 0 0 1px var(--ink); }
/* A camera the video leaves the moment it starts hangs under the lane the same way, as a flag. */
.scene-staging .guide-camera-start-flag { top: calc(100% + 6px); bottom: auto; min-width: 52px; height: 22px; padding: 2px 8px; gap: 0; overflow: visible; border-radius: 5px; z-index: 5; }
/* The lane makes room under itself for the flag, as the actor's lane does, instead of hanging it over the next row. */
.guide-track__blocks:has(.guide-camera-start-flag) { margin-bottom: 28px; }
.guide-camera-start-flag img { display: none; }
.guide-camera-start-flag .guide-clip__name { font-size: 11px; }
.guide-camera-start-flag::after { content: ""; position: absolute; left: 6px; top: -4px; width: 6px; height: 6px; background: inherit; border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.scene-staging .guide-camera-start-flag:hover:not(:disabled), .scene-staging .guide-camera-start-flag:focus-visible { box-shadow: inset 0 0 0 1px var(--ink); }

/* Shared transition edges for camera and actor tracks. */
.guide-clip__move, .guide-actor-move { border-radius: 6px 0 0 6px; border-right: 0; }
/* The video step: the staging is here only to render the motion guide. Its viewer and track sit out of
   sight at the guide's size, while the guide's own panel — render, progress, the video and the sending —
   is all that shows. No separate save: reviewing a video saves the staging itself. */
.scene-staging--video { position: relative; }
.scene-staging--video .scene-staging__viewport { position: absolute; left: -20000px; top: 0; width: 1280px; height: 900px; overflow: hidden; pointer-events: none; }
.scene-staging--video .scene-staging__inspector { display: block; grid-column: 1 / -1; }
.scene-staging--video .motion-guide { margin-top: 0; }
/* Once the guide is rendered, the video stands in for the render block; when the staging changes the video goes and the block returns. */
.scene-staging--video .motion-guide:has(.motion-guide__result:not([hidden])) > form { display: none; }
.scene-staging--video .motion-guide form > .guide-section:first-child,
.scene-staging--video .scene-staging__actions,
.scene-staging--video .scene-staging__panels { display: none; }
/* Once rendered, the guide and the request are two cards, one above the other: the guide under its name, then the sending. */
.scene-staging--video .motion-guide__result { padding: 0; border: 0; }
.scene-staging--video .motion-guide__result:not([hidden]) { display: grid; gap: 16px; }
.scene-staging--video .motion-guide__preview,
.scene-staging--video .video-request { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.scene-staging--video .motion-guide__send { margin: 0; padding: 0; border-top: 0; }
.scene-staging--video .motion-guide__result video { display: block; width: 100%; border-radius: 8px; }
/* On the video step the settings and the button share one row, the button level with the selects. */
.scene-staging--video .motion-guide__send { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.scene-staging--video .motion-guide__send progress { flex-basis: 100%; order: 1; }
/* Once the guide is rendered, the step shows the video and one button; the rest of the guide's panel stays with the dialog. */
.scene-staging--video .motion-guide__actor,
.scene-staging--video .motion-guide__result .motion-guide__actions,
.scene-staging--video .motion-guide__result > p,
.scene-staging--video .motion-guide__send > :not([data-motion-guide-target="send"]):not([data-motion-guide-target="sendProgress"]):not(.motion-guide__settings),
.scene-staging--video .motion-guide__instructions { display: none; }
.scene-staging--video .motion-guide__stale { margin-bottom: 12px; color: #c0392b; }
/* The request followed on the video step, in the card it shares with the choice of model: its heading's line goes once it is sent. */
.scene-staging--video .video-request .guide-section__heading { display: grid; gap: 4px; }
.scene-staging--video .video-request .guide-section__heading p { margin: 0; color: var(--muted); font-size: 13px; }
.scene-staging--video .video-request:has(.motion-guide__launch:not([hidden])) .video-request__intro { display: none; }

/* Small text-and-icon tools of the staging panels. */
.editor-tool { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--ink); font: inherit; font-size: 13px; line-height: 22px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.editor-tool:hover { background: var(--surface-muted); text-decoration: none; }
.editor-tool:disabled { opacity: .4; cursor: default; }
.editor-tool img { flex-shrink: 0; }
.editor-tool[aria-pressed=true] { background: var(--accent); }