@import url('./tara.css');
/* Episode assembly workspace (Sep 8): Frame.io restraint on the Setara tokens. One toolbar row, a ruler, a shot lane,
   a music lane; the inspector lives in the right rail. Status colour is a 3px bar on the clip's top edge, never over
   the media. Every colour comes from design-system tokens so both themes hold. */
.page .episode-workspace { grid-template-rows: auto auto; }
.page .episode-rail { display: grid; gap: 12px; align-content: start; min-width: 0; }
.page .assembly-host { grid-column: 1 / -1; min-width: 0; }
.page .assembly-inspector { margin: 0; padding: 0; overflow: hidden; }
.page #preview-stage .asm-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--ds-stage); }
.page #preview-stage .asm-video[hidden] { display: none; }
.page #preview-stage:has(> .asm-video) { position: relative; min-height: 0; width: min(100%, calc(52dvh * var(--media-ratio, .5625))); margin-inline: auto; aspect-ratio: var(--media-ratio, .5625); }

/* Transport under the stage */
.page .preview-caption:has(> .asm-transport) { display: block; margin-top: 8px; }
.asm-transport { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 4px; }
.asm-transport .ds-icon-btn { width: 32px; height: 32px; min-height: 32px; border-radius: 6px; background: var(--ds-control); color: var(--ds-fg); }
.asm-transport .ds-icon-btn:hover:not(:disabled) { background: var(--ds-control-hover); }
.asm-transport .asm-review-cut[aria-pressed="true"] { background: var(--ds-accent-gradient); color: var(--ds-accent-contrast); }
.asm-timecode { min-width: 68px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ds-muted); }
.asm-timecode.asm-total { text-align: right; }
.asm-scrub { flex: 1; display: flex; align-items: center; min-width: 0; }
.asm-scrub input[type="range"] { width: 100%; height: 20px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.asm-scrub input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ds-accent) var(--asm-played, 0%), rgba(var(--ds-ink-rgb), .18) var(--asm-played, 0%)); }
.asm-scrub input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(var(--ds-ink-rgb), .18); }
.asm-scrub input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ds-accent); }
.asm-scrub input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--ds-fg); box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.asm-scrub input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--ds-fg); box-shadow: 0 0 0 1px rgba(0,0,0,.35); }

/* Timeline panel */
.asm { display: grid; gap: 10px; padding: 12px 12px 14px; border: var(--ds-hair) solid var(--ds-border); border-radius: var(--ds-radius); background: var(--ds-surface); }
.asm-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; min-height: 32px; }
.asm-toolbar-start, .asm-toolbar-end { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.asm-title { font-size: 13px; font-weight: 500; color: var(--ds-fg); }
.asm-stats { font-size: 12px; color: var(--ds-muted); font-variant-numeric: tabular-nums; }
.asm-dirty { font-size: 12px; color: var(--ds-warning-text); }
.asm-published { font-size: 12px; color: var(--ds-success-text); }
.asm-legend { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ds-muted); font-variant-numeric: tabular-nums; }
.asm-legend i { width: 8px; height: 8px; border-radius: 2px; background: rgb(var(--asm-rgb, var(--ds-ink-rgb))); }
.asm-legend[data-status="red"] { --asm-rgb: var(--ds-review-red-rgb); }
.asm-legend[data-status="orange"] { --asm-rgb: var(--ds-review-orange-rgb); }
.asm-legend[data-status="green"] { --asm-rgb: var(--ds-review-green-rgb); }
.asm-tool { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: var(--ds-control); color: var(--ds-fg); font-size: 13px; box-shadow: none; }
.asm-tool:hover:not(:disabled) { background: var(--ds-control-hover); border-color: transparent; }
.asm-tool > svg { width: 16px; height: 16px; color: var(--ds-muted); }
.asm-tool:disabled { opacity: .5; }
.asm-episode select { min-height: 32px; height: 32px; padding: 0 28px 0 10px; border: 0; border-radius: 6px; font-size: 13px; }
.asm-save { min-height: 32px; height: 32px; padding: 0 14px; border-radius: 6px; }
.asm-error { padding: 8px 10px; border-radius: 6px; background: var(--ds-danger-soft); color: var(--ds-danger-text); font-size: 12px; line-height: 1.5; }
.asm-error[hidden] { display: none; }

/* Lanes */
.asm-lanes { position: relative; display: grid; gap: 6px; padding: 0 8px 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.asm-ruler { position: relative; height: 18px; border-bottom: var(--ds-hair) solid var(--ds-border-strong); cursor: pointer; user-select: none; }
.asm-tick { position: absolute; top: 0; height: 100%; padding-left: 4px; border-left: var(--ds-hair) solid var(--ds-border-strong); font-size: 10px; line-height: 16px; color: var(--ds-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
.asm-playhead { position: absolute; top: 0; bottom: -158px; z-index: 3; width: 1.5px; margin-left: -.75px; background: var(--ds-fg); pointer-events: none; }
.asm-playhead::before { content: ""; position: absolute; top: -1px; left: -5px; width: 11px; height: 8px; border-radius: 2px 2px 6px 6px; background: var(--ds-fg); }
.asm-track { position: relative; display: flex; align-items: stretch; gap: 4px; min-width: max-content; }
.asm-track-video { height: 104px; }
.asm-track-audio { height: 44px; min-width: 100%; }

.asm-comment-lane { position: relative; height: 28px; }
.asm-comment-lane::before { content: ""; position: absolute; top: 10px; left: 0; right: 0; height: 4px; background: var(--ds-border-strong); }
.asm-comment-marker { position: absolute; top: 0; z-index: 4; width: 24px; height: 28px; min-height: 0; padding: 0; border: 0; border-radius: 3px; background: transparent; margin-left: -12px; transform: none; cursor: pointer; }
.asm-comment-marker::before, .asm-comment-marker::after { content: ""; position: absolute; clip-path: polygon(12% 0,88% 0,100% 10%,100% 72%,50% 100%,0 72%,0 10%); }
.asm-comment-marker::before { inset: 1px auto auto 3px; width: 18px; height: 24px; background: #08090b; }
.asm-comment-marker::after { inset: 2px auto auto 4px; width: 16px; height: 21px; background: var(--reviewer-fill, var(--ds-accent)); }
.asm-comment-marker > span { position: relative; top: -3px; z-index: 1; color: #101012; font-size: 10px; font-weight: 700; }
.asm-comment-marker:hover::before, .asm-comment-marker.is-active::before { background: var(--ds-fg); }
.asm-comment-marker:focus-visible { outline: 2px solid var(--ds-fg); outline-offset: 1px; }
.asm-comment-marker.is-resolved { opacity: .55; }
.asm-ticket { border-inline-start: 3px solid var(--reviewer-color, var(--ds-accent)); }
.asm-ticket .asm-note-head > strong, .asm-ticket-replies > li > strong { color: var(--reviewer-color, var(--ds-fg)); }
.tara-todo .tara-todo-number { color: var(--reviewer-color, var(--ds-fg)); }
.asm-comment-detail { min-width: 0; overflow-wrap: anywhere; }
.asm-comment-detail:focus { outline: none; }
.asm-comment-detail > .asm-tool { margin: 0 12px 12px; }

/* Clips */
.asm-clip { position: relative; flex: none; display: flex; flex-direction: column; justify-content: flex-end; width: var(--asm-w, 120px); min-width: 56px; padding: 0; border: var(--ds-hair) solid var(--ds-border); border-radius: 6px; background: var(--ds-surface-solid); color: var(--ds-fg); overflow: hidden; cursor: pointer; user-select: none; transition: border-color var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease); }
.asm-clip:hover { border-color: var(--ds-border-strong); }
.asm-clip:focus-visible { outline: none; box-shadow: var(--ds-focus); }
.asm-clip.is-selected { border-color: var(--ds-accent); box-shadow: 0 0 0 1px var(--ds-accent); }
.asm-clip.is-playing .asm-clip-label { color: var(--ds-fg); }
.asm-clip.is-dragging { opacity: .45; }
.asm-clip.is-drop-before { box-shadow: -3px 0 0 0 var(--ds-accent); }
.asm-clip.is-trimming { cursor: ew-resize; }
/* Status glows the clip's frame and caption like the library tiles: never the picture itself. */
.asm-status { position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: 3px; background: transparent; }
.asm-clip[data-status="red"] { --asm-rgb: var(--ds-review-red-rgb); }
.asm-clip[data-status="orange"] { --asm-rgb: var(--ds-review-orange-rgb); }
.asm-clip[data-status="green"] { --asm-rgb: var(--ds-review-green-rgb); }
.asm-clip[data-status]:not([data-status="neutral"]) { border-color: rgba(var(--asm-rgb), .7); box-shadow: 0 0 0 1px rgba(var(--asm-rgb), .35), 0 3px 18px rgba(var(--asm-rgb), .4); }
.asm-clip[data-status]:not([data-status="neutral"]) .asm-status { background: rgb(var(--asm-rgb)); }
.asm-clip[data-status]:not([data-status="neutral"]) .asm-clip-text { background: linear-gradient(to top, rgba(var(--asm-rgb), .55), rgba(2,2,3,.35) 70%, rgba(2,2,3,0)); }
.asm-clip[data-status]:not([data-status="neutral"]).is-selected { box-shadow: 0 0 0 1px var(--ds-accent), 0 3px 18px rgba(var(--asm-rgb), .45); }
.asm-thumb { position: absolute; inset: 3px 0 0; display: block; background: var(--ds-stage); }
.asm-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; opacity: .92; }
.asm-clip-text { position: relative; z-index: 1; display: grid; gap: 1px; padding: 6px 8px 7px; background: linear-gradient(to top, rgba(2,2,3,.82), rgba(2,2,3,.35) 70%, rgba(2,2,3,0)); color: #ededef; }
.asm-clip-label { font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asm-clip-label em { font-style: normal; color: rgba(237,237,239,.7); }
.asm-clip-time { font-size: 11px; line-height: 14px; color: rgba(237,237,239,.78); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asm-clip-pending { position: absolute; top: 8px; right: 6px; z-index: 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(2,2,3,.6); color: #ededef; }
.asm-clip-pending svg { width: 14px; height: 14px; animation: ds-spin 1s linear infinite; }
.asm-handle { position: absolute; top: 3px; bottom: 0; z-index: 3; width: 10px; cursor: ew-resize; opacity: 0; transition: opacity var(--ds-fast) var(--ds-ease); }
.asm-handle::before { content: ""; position: absolute; top: 50%; width: 3px; height: 22px; margin-top: -11px; border-radius: 2px; background: #ededef; box-shadow: 0 0 0 1px rgba(2,2,3,.5); }
.asm-handle.is-in { left: 0; } .asm-handle.is-in::before { left: 3px; }
.asm-handle.is-out { right: 0; } .asm-handle.is-out::before { right: 3px; }
.asm-clip:hover .asm-handle, .asm-clip.is-selected .asm-handle, .asm-clip:focus-visible .asm-handle { opacity: 1; }
.asm-restore { flex: none; display: inline-flex; align-items: center; gap: 6px; align-self: center; min-height: 32px; padding: 0 10px; border: var(--ds-hair) dashed var(--ds-border-strong); border-radius: 6px; background: transparent; color: var(--ds-muted); font-size: 12px; box-shadow: none; }
.asm-restore > svg { width: 14px; height: 14px; }

/* Music lane */
.asm-audio-empty { display: inline-flex; align-items: center; gap: 6px; align-self: center; min-height: 30px; padding: 0 10px; border: var(--ds-hair) dashed var(--ds-border-strong); border-radius: 6px; background: transparent; color: var(--ds-muted); font-size: 12px; box-shadow: none; }
.asm-audio-empty > svg { width: 14px; height: 14px; }
.asm-audio { position: absolute; top: 4px; bottom: 4px; display: flex; align-items: center; min-width: 40px; padding: 0 8px; border: var(--ds-hair) solid rgba(var(--ds-accent-rgb), .45); border-radius: 6px; background: rgba(var(--ds-accent-rgb), .16); color: var(--ds-fg); font-size: 12px; text-align: left; overflow: hidden; box-shadow: none; }
.asm-audio:hover { background: rgba(var(--ds-accent-rgb), .22); border-color: rgba(var(--ds-accent-rgb), .7); }
.asm-audio.is-selected { border-color: var(--ds-accent); box-shadow: 0 0 0 1px var(--ds-accent); }
.asm-audio-wave { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(var(--ds-accent-rgb), .28) 0 2px, transparent 2px 6px); mask-image: linear-gradient(to top, transparent 18%, #000 40%, #000 60%, transparent 82%); opacity: .8; pointer-events: none; }
.asm-audio-label { position: relative; display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asm-audio-label > svg { width: 14px; height: 14px; flex: none; color: var(--ds-accent-text); }
.asm-audio-label em { font-style: normal; color: var(--ds-muted); }

/* Inspector */
.asm-insp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 12px 12px 8px; }
.asm-insp-head strong { display: block; font-size: 14px; font-weight: 500; }
.asm-insp-status { display: inline-block; margin-top: 2px; font-size: 12px; color: var(--ds-muted); }
.asm-insp-status[data-status="red"] { color: rgb(var(--ds-review-red-rgb)); }
.asm-insp-status[data-status="orange"] { color: rgb(var(--ds-review-orange-rgb)); }
.asm-insp-status[data-status="green"] { color: rgb(var(--ds-review-green-rgb)); }
.asm-insp-tools { display: flex; gap: 4px; flex: none; }
.asm-insp-direction { margin: 0 12px 6px; font-size: 12px; line-height: 1.5; color: var(--ds-muted); }
.asm-insp-section { padding: 10px 12px 12px; border-top: var(--ds-hair) solid var(--ds-border); }
.asm-insp-section h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ds-subtle); }
.asm-insp-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ds-subtle); }
.asm-badge-orange { color: rgb(var(--ds-review-orange-rgb)); background: rgba(var(--ds-review-orange-rgb), .14); border-color: rgba(var(--ds-review-orange-rgb), .35); }
.asm-trim { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 10px; }
.asm-trim label { display: grid; gap: 3px; font-size: 11px; color: var(--ds-subtle); }
.asm-trim input[type="number"] { width: 78px; min-height: 30px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.asm-trim-total { flex: 1; font-size: 12px; color: var(--ds-muted); font-variant-numeric: tabular-nums; padding-bottom: 7px; }
.asm-range { display: grid; gap: 6px; margin-bottom: 10px; font-size: 12px; color: var(--ds-muted); }
.asm-range output { float: right; font-variant-numeric: tabular-nums; color: var(--ds-fg); }
.asm-range input[type="range"] { width: 100%; }
.asm-insp-section .check-label { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--ds-muted); }
.asm-notes, .asm-versions, .asm-refs { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.asm-note { padding: 8px 10px; border-radius: 6px; background: var(--ds-surface); }
.asm-note.is-reply { margin-left: 14px; }
.asm-note-head { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.asm-note-head strong { font-weight: 500; }
.asm-note-time { min-height: 0; padding: 0 5px; border: 0; border-radius: 4px; background: var(--ds-timecode-bg); color: var(--ds-timecode); font-size: 11px; font-variant-numeric: tabular-nums; box-shadow: none; }
.asm-note-state { margin-left: auto; font-size: 11px; color: var(--ds-subtle); }
.asm-note[data-note-status="resolved"] .asm-note-state { color: rgb(var(--ds-review-green-rgb)); }
.asm-note[data-note-status="open"] .asm-note-state, .asm-note[data-note-status="conflict"] .asm-note-state { color: rgb(var(--ds-review-red-rgb)); }
.asm-note p { margin: 4px 0 6px; font-size: 12px; line-height: 1.5; color: var(--ds-fg); }
.asm-note-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--ds-subtle); }
.asm-version button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 8px; border: var(--ds-hair) solid var(--ds-border); border-radius: 6px; background: var(--ds-surface); color: var(--ds-fg); text-align: left; box-shadow: none; }
.asm-version button:hover:not(:disabled) { background: var(--ds-surface-hover); border-color: var(--ds-border-strong); }
.asm-version.is-current button { border-color: var(--ds-accent); }
.asm-version.is-pending { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 8px; border: var(--ds-hair) dashed var(--ds-border-strong); border-radius: 6px; }
.asm-version-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ds-faint); }
.asm-version.is-current .asm-version-dot { background: var(--ds-accent); }
.asm-version.is-pending .asm-version-dot { background: var(--ds-warning); animation: ds-pulse 1.4s ease-in-out infinite; }
.asm-version-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.asm-version-text strong { font-size: 12px; font-weight: 500; }
.asm-version-text small { font-size: 11px; color: var(--ds-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asm-version-mark { font-size: 11px; color: var(--ds-accent-text); white-space: nowrap; }
.asm-ref { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.asm-ref img { width: 56px; height: 32px; flex: none; border-radius: 4px; object-fit: contain; background: var(--ds-stage); }
.asm-ref-missing { width: 56px; height: 32px; flex: none; border-radius: 4px; background: var(--ds-surface-active); }
.asm-ref-text { display: grid; gap: 1px; flex: 1; min-width: 0; overflow: hidden; }
.asm-ref-text strong { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asm-ref-text small { font-size: 11px; color: var(--ds-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asm-ref.is-changed strong { color: rgb(var(--ds-review-orange-rgb)); }
.asm-retake { display: grid; gap: 8px; }
.asm-retake label { display: grid; gap: 4px; font-size: 11px; color: var(--ds-subtle); }
.asm-retake textarea { min-height: 72px; resize: none; }
.asm-retake-estimate { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ds-fg); }
.asm-retake .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* Music library dialog */
.asm-music-dialog { width: min(520px, calc(100vw - 32px)); padding: 0; }
.asm-music-list { display: grid; gap: 4px; margin: 0 0 12px; padding: 0; list-style: none; max-height: 40vh; overflow: auto; }
.asm-music-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px; border-radius: 6px; }
.asm-music-row:hover { background: var(--ds-surface-hover); }
.asm-music-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.asm-music-text strong { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asm-music-text small { font-size: 11px; color: var(--ds-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asm-music-upload { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding-top: 12px; border-top: var(--ds-hair) solid var(--ds-border); }
.asm-file { grid-column: 1 / -1; display: block; }
.asm-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.asm-file > span { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: var(--ds-hair) dashed var(--ds-border-strong); border-radius: 6px; font-size: 13px; color: var(--ds-muted); cursor: pointer; }
.asm-file > span > svg { width: 16px; height: 16px; }
.asm-file > span { max-width: 100%; }
.asm-file [data-asm-file-name] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asm-file input:focus-visible + span { box-shadow: var(--ds-focus); }
.asm-music-upload .asm-insp-note { grid-column: 1 / -1; }
.wm-dialog-stage.is-audio { display: grid; place-items: center; }
.wm-audio-well { display: grid; justify-items: center; gap: 16px; width: min(480px, 90%); padding: 32px 0; color: var(--ds-muted); }
.wm-audio-well > svg { width: 40px; height: 40px; }
.wm-audio-well audio { width: 100%; }

@media (max-width: 900px) {
  .asm-toolbar-end { width: 100%; justify-content: flex-start; }
  .asm-track-video { height: 88px; }
}
@media (prefers-reduced-motion: reduce) { .asm-clip-pending svg, .asm-version.is-pending .asm-version-dot { animation: none; } }
@media (forced-colors: active) { .asm-clip, .asm-audio, .asm-version button { border: 1px solid CanvasText; } .asm-clip.is-selected { outline: 2px solid Highlight; } }

/* Music tiles in the library: an audio well instead of a thumbnail request. */
.workspace-media .wm-audio-tile { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 6px; background: var(--ds-stage); color: var(--ds-muted); }
.workspace-media .wm-audio-tile > svg { width: 28px; height: 28px; }
.workspace-media .wm-audio-tile em { font-style: normal; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ds-subtle); }

/* Fixed page while the assembly is up: nothing scrolls except the right rail and the lanes themselves. */
.shell #page.is-assembly, .page.is-assembly { overflow: hidden; }
.page.is-assembly #pane-overview:not([hidden]) { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.page.is-assembly #pane-overview .pane-toolbar { flex: none; }
.page.is-assembly .episode-workspace { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
.page.is-assembly .episode-player { display: flex; flex-direction: column; min-height: 0; }
/* Native aspect: the stage is exactly the picture, sized by the available height, never a letterboxed well. */
.page.is-assembly #preview-stage:has(> .asm-video) { flex: 1; align-self: center; min-height: 0; width: auto; height: auto; max-width: 100%; aspect-ratio: var(--media-ratio, .5625); margin: 0; }
.page.is-assembly .preview-caption:has(> .asm-transport) { flex: none; }
.page.is-assembly .episode-rail { min-height: 0; max-height: 100%; overflow: auto; scrollbar-width: thin; }
.page.is-assembly .assembly-host { min-height: 0; }
.asm-lanes.is-scrubbing { cursor: ew-resize; user-select: none; }
.asm-playhead { pointer-events: auto; cursor: ew-resize; }
.asm-playhead::before { width: 15px; left: -7px; }
.page.is-assembly .episode-workspace { align-items: stretch; }
.page.is-assembly .episode-player { height: 100%; }
.page.is-assembly #preview-stage:has(> .asm-video) { min-height: 160px; }

.asm-saving, .asm-saved { font-size: 12px; color: var(--ds-subtle); }
.asm-volume { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px; border-radius: 6px; background: var(--ds-control); color: var(--ds-fg); }
.asm-volume > svg { width: 16px; height: 16px; flex: none; color: var(--ds-muted); }
.asm-volume input[type="range"] { width: 96px; margin: 0; }
.asm-volume.is-empty { opacity: .45; }
.asm-export { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; height: 32px; padding: 0 14px; border-radius: 6px; }
.asm-export > svg { width: 16px; height: 16px; }
.asm-export:disabled > svg { animation: ds-spin 1s linear infinite; }

/* The rail is the inspector: it fills the column and scrolls inside; the notes tile stays out of the assembly view. */
.page.is-assembly #review-notes { display: none; }
.page.is-assembly .episode-rail { display: flex; flex-direction: column; overflow: hidden; }
.page.is-assembly .assembly-inspector { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
.page .assembly-inspector:not([hidden]) { display: block; }
.asm-insp-empty { display: grid; justify-items: center; align-content: center; gap: 10px; height: 100%; min-height: 220px; padding: 24px; text-align: center; color: var(--ds-subtle); }
.asm-insp-empty > svg { width: 28px; height: 28px; color: var(--ds-faint); }
.asm-insp-empty p { margin: 0; max-width: 24ch; font-size: 12px; line-height: 1.6; }

/* No pane header in the assembly: the clip colours carry status, Share and ••• sit at the end of the transport. */
.page.is-assembly #pane-overview > .pane-toolbar { display: none; }
.asm-transport .asm-host-actions { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding-left: 10px; border-left: var(--ds-hair) solid var(--ds-border-strong); }
.asm-transport .asm-host-actions .primary { min-height: 32px; height: 32px; padding: 0 12px; border-radius: 6px; }
.asm-transport .asm-host-actions .ds-icon-btn { background: transparent; }

/* No transport row: the stage is the player (click or Space to play), the toolbar clock is the playhead. */
.page.is-assembly .preview-caption { display: none; }
.page.is-assembly #preview-stage:has(> .asm-video) { cursor: pointer; }
.asm-clock { font-size: 22px; font-weight: 500; letter-spacing: .02em; line-height: 32px; font-variant-numeric: tabular-nums; color: var(--ds-fg); }
.asm-host-slot { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; padding-left: 10px; border-left: var(--ds-hair) solid var(--ds-border-strong); }
.asm-host-slot .asm-host-actions { display: inline-flex; align-items: center; gap: 6px; }
.asm-host-slot .primary { min-height: 32px; height: 32px; padding: 0 12px; border-radius: 6px; }
.asm-host-slot .ds-icon-btn { background: transparent; }
.asm-export.asm-tool { color: var(--ds-fg); }
.asm-clock { display: inline-flex; align-items: baseline; gap: 8px; }
.asm-clock-sep { font-weight: 300; color: var(--ds-faint); }
.asm-clock-total { font-size: 15px; font-weight: 400; color: var(--ds-muted); }

/* The picture sits on the timeline card: the player column runs past its row and the toolbar parts around it. */
.page.is-assembly .episode-player { position: relative; z-index: 3; height: calc(100% + var(--asm-overlap, 52px)); }
.page.is-assembly .assembly-host { position: relative; z-index: 1; }
.page.is-assembly .asm { padding-top: 12px; }
.page.is-assembly .asm-toolbar { display: grid; grid-template-columns: minmax(0, var(--asm-notch-left, 1fr)) var(--asm-notch-width, 0px) minmax(0, 1fr); align-items: center; column-gap: 0; min-height: 34px; }
.page.is-assembly .asm-toolbar-start { grid-column: 1; min-width: 0; }
.page.is-assembly .asm-toolbar-end { grid-column: 3; justify-content: flex-end; min-width: 0; }
.asm-clock { font-size: 15px; font-weight: 500; letter-spacing: .01em; line-height: 24px; }
.asm-clock-total { font-size: 13px; }
.asm-clock-sep { font-size: 13px; }

.page.is-assembly .asm-toolbar-start { align-self: end; padding-bottom: 2px; }
.page.is-assembly .asm-toolbar-end { align-self: end; padding-bottom: 2px; }

/* Sep 9: breakpoints. The toolbar is a fixed 52px row (the card's top padding folded in) so nothing in it can move the
   ruler (a wrapped control once re-sized the picture in a loop). The clock fills its flap: the script sets
   --asm-clock-size from the flap's width; it reads in one line where that stays at 16px or more and stacks otherwise.
   The controls thin out in three steps (data-asm-controls). Without a rail column, or when even the stacked clock
   would not fit, the notch is dropped (data-asm-layout="flat") and the picture sits above the card. The picture is
   centred on the whole card (margin-left set by the script). The page keeps no bottom margin under a fixed assembly. */
.shell .page.is-assembly { padding-bottom: 8px; }
.page.is-assembly .asm { padding-top: 8px; }
.page.is-assembly .asm-toolbar { height: 52px; min-height: 0; overflow: visible; align-items: center; }
.page.is-assembly .asm-toolbar-start, .page.is-assembly .asm-toolbar-end { flex-wrap: nowrap; align-self: center; height: 52px; padding: 0; width: auto; }
.page.is-assembly .asm-toolbar-start { padding-left: 12px; padding-top: 4px; }
.page.is-assembly .asm-toolbar-end { padding-right: 2px; }
.page.is-assembly #preview-stage:has(> .asm-video) { align-self: flex-start; margin-inline: auto; margin-top: auto; }
.page.is-assembly .asm-clock { flex-direction: row; align-items: baseline; gap: .36em; font-size: var(--asm-clock-size, 22px); line-height: 1; letter-spacing: .01em; white-space: nowrap; }
.page.is-assembly .asm-clock-total, .page.is-assembly .asm-clock-sep { font-size: .68em; }
.page.is-assembly [data-asm-clock-mode="stacked"] .asm-clock { flex-direction: column; align-items: flex-start; gap: .12em; line-height: 1; }
.page.is-assembly [data-asm-clock-mode="stacked"] .asm-clock-sep { display: none; }
.page.is-assembly [data-asm-clock-mode="stacked"] .asm-clock-total { font-size: .6em; line-height: 1.1; }
.page.is-assembly [data-asm-controls="compact"] .asm-volume input[type="range"], .page.is-assembly [data-asm-controls="icons"] .asm-volume input[type="range"] { width: 56px; }
.page.is-assembly [data-asm-controls="compact"] .asm-export > span, .page.is-assembly [data-asm-controls="icons"] .asm-export > span { display: none; }
.page.is-assembly [data-asm-controls="compact"] .asm-export, .page.is-assembly [data-asm-controls="icons"] .asm-export { padding: 0 9px; }
.page.is-assembly [data-asm-controls="icons"] .asm-volume input[type="range"] { width: 44px; }
.page.is-assembly [data-asm-controls="icons"] .asm-host-slot .primary > span { display: none; }
.page.is-assembly [data-asm-controls="icons"] .asm-host-slot .primary { padding: 0 9px; }
.page.is-assembly [data-asm-controls="icons"] .asm-host-slot { margin-left: 2px; padding-left: 6px; }
.page.is-assembly [data-asm-controls="icons"] .asm-episode select { padding-left: 8px; padding-right: 24px; }
.page.is-assembly [data-asm-layout="flat"] .asm { clip-path: none; }
.page.is-assembly [data-asm-layout="flat"] .asm-toolbar { grid-template-columns: auto 0 minmax(0, 1fr); }
.page.is-assembly [data-asm-layout="flat"] .asm-toolbar-start { padding-left: 12px; }

/* Bigger shot inspector on wide screens; the rail narrows below 1050px, then floats over the player while a shot is open. */
@media (min-width: 1300px) {
  .page.is-assembly .episode-workspace { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 1050px) {
  .page.is-assembly .episode-workspace { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 860px) {
  .page.is-assembly .episode-workspace { position: relative; grid-template-columns: minmax(0, 1fr); }
  .page.is-assembly .episode-rail { position: absolute; top: 0; right: 0; z-index: 6; width: min(320px, 84%); height: var(--asm-row-height, 100%); border-radius: var(--ds-radius); background: var(--ds-surface-solid); box-shadow: -12px 0 32px rgba(0,0,0,.35); }
  .page.is-assembly .episode-rail .assembly-inspector { background: var(--ds-surface-solid); }
  .page.is-assembly .episode-rail:has(.asm-insp-empty), .page.is-assembly .episode-rail:not(.is-sheet):has(.asm-queue), .page.is-assembly .episode-rail:not(:has(> .assembly-inspector:not([hidden]))) { display: none; }
}
/* Short windows: shallower lanes leave more of the height to the picture. */
@media (max-height: 760px) {
  .page.is-assembly .asm-track-video { height: 80px; }
  .page.is-assembly .asm-playhead { bottom: -132px; }
  .page.is-assembly .asm-track-audio { height: 40px; }
}

/* Phones, portrait (≤700px) and landscape (≤500px tall): the toolbar becomes two rows, clock beside Share and •••
   above resolution, volume and Export. Landscape also puts the picture and the card side by side. */
/* Two-row toolbar whenever the card is narrower than 720px (phones, and the side layout's right column). */
  .page.is-assembly [data-asm-toolbar="rows"] .asm-toolbar { display: grid; height: auto; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "clock clock host" "res vol export"; gap: 8px 8px; padding-top: 8px; }
  .page.is-assembly [data-asm-toolbar="rows"] .asm-toolbar-end { display: contents; }
  .page.is-assembly [data-asm-toolbar="rows"] .asm-toolbar-start { grid-area: clock; height: auto; min-width: 0; padding-left: 8px; align-self: center; }
  .page.is-assembly [data-asm-toolbar="rows"] .asm-episode { grid-area: res; }
  .page.is-assembly [data-asm-toolbar="rows"] .asm-volume { grid-area: vol; min-width: 0; }
  .page.is-assembly [data-asm-toolbar="rows"] .asm-export { grid-area: export; justify-self: end; align-self: center; }
  .page.is-assembly [data-asm-toolbar="rows"] .asm-host-slot { grid-area: host; justify-self: end; margin-left: 0; padding-left: 0; border-left: 0; }
  .page.is-assembly [data-asm-toolbar="rows"][data-asm-controls] .asm-export > span, .page.is-assembly [data-asm-controls] .asm-host-slot .primary > span { display: inline; }
  .page.is-assembly [data-asm-toolbar="rows"][data-asm-controls] .asm-export, .page.is-assembly [data-asm-controls] .asm-host-slot .primary { padding: 0 12px; }
  .page.is-assembly [data-asm-toolbar="rows"][data-asm-controls] .asm-volume input[type="range"] { width: 100%; min-width: 0; }
  .page.is-assembly [data-asm-toolbar="rows"] .asm-lanes { padding-inline: 4px; }
  .page.is-assembly [data-asm-toolbar="rows"] .asm-audio-empty { min-height: 34px; }@media (max-height: 500px) and (min-width: 600px) {
  .page.is-assembly .episode-workspace { grid-template-columns: minmax(0, 1fr) minmax(160px, 34%); grid-template-rows: minmax(0, 1fr); gap: 12px; }
  .page.is-assembly .episode-player { grid-column: 2; grid-row: 1; }
  .page.is-assembly .assembly-host { grid-column: 1; grid-row: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
  .page.is-assembly .asm-track-video { height: 72px; }
  .page.is-assembly .asm-track-audio { height: 36px; }
  .page.is-assembly .asm-playhead { bottom: -120px; }
  .page.is-assembly .asm-audio-empty { min-height: 28px; }
}

/* Side layout (Sep 9): picture on the left at full height, inspector above the timeline on the right. */
@media (min-width: 861px) {
  .page.is-assembly .episode-workspace { grid-template-columns: minmax(0, 1fr) var(--asm-stage-col, 40%); grid-template-rows: minmax(0, 1fr) auto; gap: 16px; }
  .page.is-assembly .episode-player { grid-column: 2; grid-row: 1 / 3; height: 100%; }
  .page.is-assembly .episode-rail { grid-column: 1; grid-row: 1; }
  .page.is-assembly .assembly-host { grid-column: 1; grid-row: 2; }
  .page.is-assembly #preview-stage:has(> .asm-video) { margin-block: auto; width: 100%; height: auto; flex: none; max-height: 100%; }
}
/* Short sidebar on the Episode tab (framed shell): the sidebar column collapses and the page takes it; the sidebar
   floats over the page's top-left, exactly as tall as the inspector row (measured by the script) and without the
   share links; the timeline card runs under it. Media and Production get the full sidebar back. */
@media (min-width: 1051px) {
  .shell.shell-assembly { --shell-side: 0px; grid-template-columns: var(--ds-rail) 0px minmax(0, 1fr); }
  .shell.shell-assembly > main { grid-column: 3; }
  .shell.shell-assembly .sidebar { position: fixed; top: var(--asm-side-top, calc(var(--ds-topbar) + 5px)); left: var(--asm-side-left, calc(var(--ds-rail) + 6px)); width: var(--ds-sidebar); height: var(--asm-side-height, auto); margin-top: 0; z-index: 21; }
  .shell.shell-assembly .sidebar-shares { display: none; }
  .shell.shell-assembly #page.is-assembly { padding-left: 0; max-width: none; }
  .shell.shell-assembly:not(.sidebar-collapsed) .page.is-assembly .episode-workspace { grid-template-columns: var(--ds-sidebar) minmax(0, 1fr) var(--asm-stage-col, 40%); }
  .shell.shell-assembly:not(.sidebar-collapsed) .page.is-assembly .episode-player { grid-column: 3; }
  .shell.shell-assembly:not(.sidebar-collapsed) .page.is-assembly .episode-rail { grid-column: 2; }
  .shell.shell-assembly:not(.sidebar-collapsed) .page.is-assembly .assembly-host { grid-column: 1 / 3; }
  .shell.shell-assembly.sidebar-collapsed #page.is-assembly { padding-left: 16px; }
}

/* Tall screens: deeper clips in the lanes. */
@media (min-height: 1200px) and (min-width: 1051px) {
  .page.is-assembly .asm-track-video { height: 128px; }
  .page.is-assembly .asm-playhead { bottom: -184px; }
}

/* Tickets (Sep 9): every client note and producer instruction, one lifecycle chip each; the queue when nothing is selected. */
.asm-ticket-chip { display: inline-flex; align-items: center; min-height: 18px; padding: 0 7px; border-radius: 9px; font-size: 11px; font-weight: 500; line-height: 18px; white-space: nowrap; background: rgba(var(--ds-ink-rgb), .08); color: var(--ds-muted); }
.asm-ticket-chip[data-state="needs_you"] { background: rgba(var(--ds-review-red-rgb), .16); color: rgb(var(--ds-review-red-rgb)); }
.asm-ticket-chip[data-state="new"] { background: var(--ds-warning-soft); color: var(--ds-warning-text); }
.asm-ticket-chip[data-state="ordered"], .asm-ticket-chip[data-state="delivered"] { background: rgba(var(--ds-accent-rgb), .16); color: var(--ds-accent); }
.asm-ticket-chip[data-state="in_cut"], .asm-ticket-chip[data-state="awaiting_client"], .asm-ticket-chip[data-state="resolved"] { background: rgba(var(--ds-review-green-rgb), .14); color: rgb(var(--ds-review-green-rgb)); }
.asm-ticket-chip[data-state="dismissed"] { color: var(--ds-subtle); }
.asm-ticket .asm-note-head { flex-wrap: wrap; row-gap: 4px; }
.asm-ticket[data-ticket-state="dismissed"] p, .asm-ticket[data-ticket-state="resolved"] p { color: var(--ds-muted); }
.asm-ticket-trail { margin: 0 0 6px; font-size: 11px; line-height: 1.5; color: var(--ds-muted); }
.asm-ticket-trail.is-error { color: rgb(var(--ds-review-red-rgb)); }
.asm-ticket-trail .text-button { min-height: 0; padding: 0 4px; vertical-align: baseline; }
.asm-ticket-replies { margin: 0 0 6px; padding: 0 0 0 10px; list-style: none; border-left: 2px solid var(--ds-border-strong); font-size: 11px; line-height: 1.5; color: var(--ds-muted); }
.asm-ticket-replies strong { font-weight: 500; color: var(--ds-fg); }
.asm-ticket-actions { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.asm-ticket-aside { color: var(--ds-subtle); }
.asm-tell { display: grid; gap: 6px; margin-top: 10px; }
.asm-tell textarea { width: 100%; min-height: 44px; resize: none; font-size: 12px; }
.asm-tell .asm-tool { justify-self: end; }
.asm-queue { display: flex; flex-direction: column; min-height: 100%; }
.asm-queue-summary { display: grid; gap: 8px; }
.asm-queue-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.asm-queue-group { margin: 10px 0 6px; font-size: 11px; font-weight: 500; color: var(--ds-subtle); }
.asm-queue-group:first-child { margin-top: 0; }
.asm-queue-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.asm-queue-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 6px 8px; border: 0; border-radius: 6px; background: var(--ds-surface); color: var(--ds-fg); font-size: 12px; text-align: left; box-shadow: none; }
.asm-queue-row > * { min-width: 0; }
.asm-queue-row .asm-ticket-chip, .asm-queue-row .asm-route-chip { flex: none; }
.asm-queue-row:hover { background: var(--ds-surface-hover); }
.asm-queue-row strong { font-weight: 500; white-space: nowrap; }
.asm-queue-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-muted); }

/* Routes, focus, run panel, triage and the phone queue sheet (Sep 9). */
.asm-route-chip { display: inline-flex; align-items: center; min-height: 18px; padding: 0 7px; border: var(--ds-hair) solid var(--ds-border-strong); border-radius: 9px; background: transparent; color: var(--ds-muted); font-size: 11px; font-weight: 500; line-height: 16px; white-space: nowrap; box-shadow: none; }
.asm-route-chip:not(.is-static):hover { background: var(--ds-surface-hover); color: var(--ds-fg); }
.asm-route-chip[data-route="retake"] { border-color: rgba(var(--ds-accent-rgb), .45); color: var(--ds-accent); }
.asm-route-chip[data-route="audio"], .asm-route-chip[data-route="trim"] { color: var(--ds-fg); }
.asm-ticket-hint { color: var(--ds-subtle); }
.asm-ticket.is-focused { box-shadow: inset 0 0 0 1px var(--ds-accent); }
.asm-run { color: var(--ds-fg); }
.asm-run:disabled { opacity: .5; }
.asm-queue-money { font-variant-numeric: tabular-nums; }
.asm-queue-starved { margin: 6px 0 0; }
.asm-run-panel { display: grid; gap: 8px; margin-top: 8px; padding: 10px; border-radius: 6px; background: var(--ds-surface); }
.asm-run-panel h4 { margin: 0; font-size: 12px; font-weight: 500; color: var(--ds-fg); }
.asm-run-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 12px; }
.asm-run-list li { display: grid; gap: 1px; }
.asm-run-list strong { font-weight: 500; }
.asm-run-list span { color: var(--ds-muted); }
.asm-run-list.is-skipped span { color: var(--ds-subtle); }
.asm-run-panel .actions { display: flex; justify-content: flex-end; gap: 8px; }
.asm-queue-close, .asm-queue-pill { display: none; }
@media (max-width: 860px) {
  .asm-queue-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; margin-left: 10px; padding: 0 10px; border: 0; border-radius: 14px; background: var(--ds-control); color: var(--ds-muted); font-size: 12px; box-shadow: none; }
  .asm-queue-pill > svg { width: 14px; height: 14px; }
  .asm-queue-pill.has-attention { color: rgb(var(--ds-review-red-rgb)); }
  .asm-queue-pill[aria-pressed="true"] { background: var(--ds-surface-active); color: var(--ds-fg); }
  .asm-queue-close { display: inline-flex; }
  .page.is-assembly .episode-rail.is-sheet { display: flex; position: fixed; inset: auto 0 0 0; top: auto; width: auto; height: min(72dvh, 640px); z-index: 40; border-radius: 12px 12px 0 0; box-shadow: 0 -16px 40px rgba(0,0,0,.45); }
  .page.is-assembly .episode-rail.is-sheet:has(.asm-queue) { display: flex; }
}

/* The agent (Sep 9): its own card at the top of the queue, its passes underneath, and its trail on each ticket.
   Nothing new visually - the same surfaces, hairlines and status colours the rest of the workspace uses. */
.asm-agent { display: grid; gap: 10px; }
.asm-agent-head { display: flex; align-items: center; gap: 10px; }
.asm-agent-mark { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 7px; background: var(--ds-accent-gradient); color: var(--ds-accent-contrast); }
.asm-agent-mark > svg { width: 15px; height: 15px; }
.asm-agent-mark.is-inline { display: inline-grid; width: 15px; height: 15px; border-radius: 4px; vertical-align: -2px; }
.asm-agent-mark.is-inline > svg { width: 10px; height: 10px; }
.asm-agent[data-agent-state="off"] .asm-agent-mark { background: var(--ds-control); color: var(--ds-subtle); }
.asm-agent-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.asm-agent-who strong { font-size: 13px; font-weight: 500; }
.asm-agent-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.asm-agent[data-agent-state="working"] .asm-agent-mark > svg { animation: ds-spin 2.4s linear infinite; }
.asm-agent-meter { display: inline-flex; align-items: center; gap: 7px; }
.asm-agent-meter i { position: relative; display: inline-block; width: 54px; height: 4px; border-radius: 2px; background: rgba(var(--ds-ink-rgb), .16); overflow: hidden; }
.asm-agent-meter i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); background: var(--ds-accent); }
.asm-agent-form { gap: 10px; }
.asm-agent-field { display: grid; grid-template-columns: minmax(0, 1fr) 122px; align-items: center; gap: 10px; font-size: 12px; color: var(--ds-muted); }
.asm-agent-field input, .asm-agent-field select { min-height: 30px; height: 30px; font-size: 12px; }
.asm-agent-form .actions { display: flex; justify-content: flex-end; gap: 8px; }
.asm-agent-form .actions .danger { margin-right: auto; }

/* Passes: one line each, expanding to what changed. */
.asm-sessions { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.asm-session { border-radius: 6px; background: var(--ds-surface); overflow: hidden; }
.asm-session-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 5px 8px; border: 0; background: transparent; color: var(--ds-fg); font-size: 12px; text-align: left; box-shadow: none; }
.asm-session-head:hover { background: var(--ds-surface-hover); }
.asm-session-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asm-session-when { font-size: 11px; color: var(--ds-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
.asm-session-actions { display: grid; gap: 3px; margin: 0; padding: 2px 10px 8px 10px; list-style: none; }
.asm-session-action { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; font-size: 11px; line-height: 1.5; color: var(--ds-muted); }
.asm-session-action.is-skipped { opacity: .55; }
.asm-session-kind { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ds-subtle); }
.asm-session .actions { display: flex; justify-content: flex-end; padding: 0 8px 8px; }

/* The agent's line on a ticket, in the same shape as a reply. */
.asm-agent-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; color: var(--ds-muted); }
.asm-agent-line[data-disposition="escalated"] { color: var(--ds-muted); }
.asm-agent-line.is-shared { margin: 0 0 8px; padding: 7px 9px; border-radius: 6px; background: var(--ds-surface); }
.asm-agent-line[data-disposition="undone"] { color: var(--ds-subtle); }
.asm-ticket-when { color: var(--ds-subtle); font-size: 11px; font-variant-numeric: tabular-nums; }
.asm-ticket-snoozed { color: var(--ds-subtle); }
.asm-ticket.is-snoozed > p, .asm-ticket.is-snoozed .asm-note-head strong { opacity: .6; }

/* The queue itself: grouped by who owns the ticket, with a keyboard cursor. */
.asm-queue-group { display: flex; align-items: baseline; gap: 7px; }
.asm-queue-group span { font-family: inherit; font-size: 11px; font-weight: 400; color: var(--ds-faint); font-variant-numeric: tabular-nums; }
.asm-queue-group[data-owner="you"] { color: rgb(var(--ds-review-red-rgb)); }
.asm-queue-row.is-cursor { background: var(--ds-surface-active); box-shadow: inset 2px 0 0 var(--ds-accent); }
.asm-queue-row.is-snoozed { opacity: .55; }
.asm-queue-keys { margin: 10px 0 0; font-size: 11px; line-height: 1.6; color: var(--ds-faint); }
@media (hover: none) and (pointer: coarse) { .asm-queue-keys { display: none; } }

/* One action leads on a ticket; the rest sit behind the overflow. */
.asm-ticket-primary { min-height: 24px; height: 24px; padding: 0 10px; border: 0; border-radius: 6px; background: var(--ds-control); color: var(--ds-fg); font-size: 12px; font-weight: 500; box-shadow: none; }
.asm-ticket-primary:hover { background: var(--ds-control-hover); }
.asm-ticket[data-ticket-state="delivered"] .asm-ticket-primary { background: var(--ds-accent-gradient); color: var(--ds-accent-contrast); }
.asm-ticket-actions { gap: 4px; }

/* Queue rows lead with the note. The group heading already says the state. */
.asm-queue-row { grid-template-columns: 16px minmax(0, 1fr) auto auto; }
.asm-queue-gutter { width: 15px; height: 15px; }
.asm-queue-row .asm-queue-text { color: var(--ds-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asm-queue-meta { font-size: 11px; color: var(--ds-subtle); white-space: nowrap; }
.asm-agent-behalf { font-size: 11px; color: var(--ds-subtle); }
.asm-agent-money { display: inline-flex; align-items: center; gap: 4px; }
.asm-agent-money i { font-style: normal; color: var(--ds-subtle); font-size: 12px; }
.asm-agent-money input { width: 100px; }

/* The agent is one line above the queue; its passes open underneath only when asked for. */
.asm-agent { padding: 8px 12px; border-top: var(--ds-hair) solid var(--ds-border); display: grid; gap: 8px; }
.asm-agent-head { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.asm-agent-head > strong { font-size: 13px; font-weight: 500; }
.asm-agent .asm-agent-mark { width: 22px; height: 22px; border-radius: 6px; }
.asm-agent .asm-agent-mark > svg { width: 13px; height: 13px; }
.asm-agent-passes { display: inline-flex; align-items: center; gap: 3px; min-height: 22px; padding: 0 6px; border: 0; border-radius: 5px; background: transparent; color: var(--ds-subtle); font-size: 11px; box-shadow: none; }
.asm-agent-passes:hover { background: var(--ds-surface-hover); color: var(--ds-fg); }
.asm-agent-passes > svg { width: 12px; height: 12px; }
.asm-agent .asm-agent-tools { margin-left: auto; }
.asm-agent .asm-tool { height: 26px; min-height: 26px; padding: 0 9px; font-size: 12px; }
.asm-agent-message { margin: 0; }
.asm-agent-meter { font-size: 11px; color: var(--ds-subtle); }

/* Queue rows: the kind of work first, at one width, then the note. */
.asm-queue-row { grid-template-columns: 62px minmax(0, 1fr) auto auto 52px; gap: 9px; }
.asm-queue-row .asm-route-chip { justify-content: center; width: 62px; }
.asm-queue-list { gap: 2px; }
.asm-queue-group { margin: 12px 0 5px; }

/* Two scopes over the queue, in the shape the rest of the workspace uses for segmented controls. */
.asm-queue-scope { display: inline-flex; gap: 2px; margin: 0 0 10px; padding: 2px; border-radius: 7px; background: var(--ds-control); }
.asm-queue-scope button { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 9px; border: 0; border-radius: 5px; background: transparent; color: var(--ds-muted); font-size: 12px; box-shadow: none; }
.asm-queue-scope button[aria-selected="true"] { background: var(--ds-surface-active); color: var(--ds-fg); }
.asm-queue-scope button span { font-size: 11px; color: var(--ds-subtle); font-variant-numeric: tabular-nums; }
.asm-queue-scope button[aria-selected="true"] span { color: var(--ds-muted); }
.asm-queue-age { font-size: 11px; color: var(--ds-faint); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* Queue rows sit on a solid ground so the page's ambient light cannot shade some rows and not others. */
.asm-queue-row { background: var(--ds-surface-solid); }
.asm-queue-row:hover { background: var(--ds-surface-hover); }
.asm-queue-row.is-cursor { background: var(--ds-surface-active); }
/* One control column, so the values read as a column and not three drifting edges. */
.asm-agent-field { grid-template-columns: minmax(0, 1fr) 132px; }
.asm-agent-field input, .asm-agent-field select, .asm-agent-money { width: 132px; }
.asm-agent-money input { width: 100%; }

/* Tighter ticket cards, so more than two fit in the rail. */
.asm-ticket { padding: 7px 9px; }
.asm-ticket p { margin: 3px 0 4px; }
.asm-ticket .asm-ticket-trail { margin-bottom: 4px; }
.asm-ticket .asm-note-foot { margin-top: 2px; }
.asm-tickets .asm-notes { gap: 5px; }

/* Keep agent actions reachable when the inspector narrows beside the picture. */
.asm-agent-head { flex-wrap: wrap; }
.asm-agent-head > strong, .asm-agent-behalf, .asm-agent-status, .asm-agent-passes, .asm-agent-tools { flex-shrink: 0; }
.asm-agent-behalf, .asm-agent-meter { white-space: nowrap; }

/* Feedback stays readable; the composer and heading frame its own scroll area. */
.page.is-assembly .assembly-inspector:has(.asm-feedback-panel) { overflow: hidden; }
.asm-feedback-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.asm-queue.asm-feedback-panel { min-height: 0; }
.asm-feedback-panel > .asm-insp-head, .asm-inspector-tabs { flex: none; }
.asm-feedback-heading { display: flex; align-items: center; gap: 8px; }
.asm-feedback-count { display: inline-grid; place-items: center; min-width: 22px; padding: 2px 6px; border-radius: 12px; background: var(--ds-control); color: var(--ds-muted); font-size: 12px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.asm-feedback-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.asm-feedback-scroll [hidden] { display: none; }
.asm-queue-list { gap: 6px; }
.asm-queue-row { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 10px; min-height: 78px; border-radius: 8px; }
.asm-feedback-thumb { display: grid; place-items: center; width: 48px; height: 54px; border-radius: 5px; overflow: hidden; background: var(--ds-control); color: var(--ds-subtle); }
.asm-feedback-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.asm-feedback-thumb > svg { width: 20px; height: 20px; }
.asm-feedback-copy { display: grid; min-width: 0; gap: 7px; }
.asm-queue-row .asm-queue-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; }
.asm-feedback-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.asm-feedback-meta .asm-queue-age { color: var(--ds-subtle); }
.asm-agent-head { flex-wrap: nowrap; }
.asm-agent .asm-agent-tools { display: flex; align-items: center; gap: 8px; }
.asm-auto-switch { display: inline-flex; align-items: center; width: 32px; height: 20px; min-height: 20px; padding: 3px; border: 0; border-radius: 12px; background: var(--ds-control-hover); box-shadow: none; }
.asm-auto-switch span { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--ds-fg); transition: transform var(--ds-fast) var(--ds-ease); }
.asm-auto-switch[aria-checked="true"] { background: var(--ds-accent-gradient); }
.asm-auto-switch[aria-checked="true"] span { transform: translateX(12px); background: var(--ds-accent-contrast); }
.asm-agent-secondary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.asm-inspector-tabs { display: flex; gap: 2px; padding: 0 10px 8px; border-bottom: var(--ds-hair) solid var(--ds-border); }
.asm-inspector-tab { flex: 1; min-width: 0; min-height: 30px; padding: 5px 4px; border: 0; border-radius: 6px; font-size: 11px; line-height: 1.5; color: var(--ds-muted); background: transparent; box-shadow: none; }
.asm-inspector-tab:hover { background: var(--ds-surface-hover); }
.asm-inspector-tab[aria-pressed="true"] { background: var(--ds-control); color: var(--ds-fg); }
.asm-feedback-panel > .asm-tell { flex: none; display: flex; align-items: flex-end; gap: 8px; margin: 0; padding: 12px; border-top: var(--ds-hair) solid var(--ds-border); background: var(--ds-surface-solid); }
.asm-feedback-panel > .asm-tell label { flex: 1; min-width: 0; }
.asm-feedback-panel > .asm-tell textarea { width: 100%; min-height: 40px; height: 40px; max-height: 140px; padding: 10px 12px; resize: none; font: inherit; font-size: 13px; line-height: 1.5; border-radius: 12px; }
.asm-feedback-panel > .asm-tell > button { flex: none; display: grid; place-items: center; width: 36px; height: 36px; min-height: 36px; margin: 0 0 2px; padding: 0; border: 0; border-radius: 50%; background: var(--ds-accent-gradient); color: var(--ds-accent-contrast); }
.asm-feedback-panel > .asm-tell > button svg { width: 18px; height: 18px; }
.asm-feedback-panel button:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.asm-queue-summary .asm-run { height: auto; min-height: 30px; white-space: normal; text-align: left; }
@media (prefers-reduced-motion: reduce) { .asm-auto-switch span, .asm-feedback-panel > .asm-tell textarea { transition: none; } }
.asm-version { display: grid; gap: 6px; padding: 8px; border: var(--ds-hair) solid var(--ds-border); border-radius: 10px; background: var(--ds-surface); }
.asm-version.is-current { border-color: var(--ds-accent); }
.asm-version .asm-version-card { padding: 0; border: 0; background: transparent; }
.asm-version-thumb { position: relative; flex: 0 0 96px; width: 96px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: var(--ds-stage); }
.asm-version-thumb img { width: 100%; height: 100%; object-fit: cover; }
.asm-version-thumb > span { position: absolute; inset: 0; display: grid; place-items: center; color: white; background: #0003; }
.asm-version-thumb svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 3px #000); }
.asm-version-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ds-fg); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.asm-version .asm-version-use { justify-content: center; min-height: 30px; font-size: 12px; }
.asm-version .asm-version-mark { white-space: normal; }
.asm-version.is-held .asm-version-mark { color: var(--ds-timecode); }
.asm-version > button:first-child { flex: 1; min-width: 0; }
.asm-version > .asm-version-preview { flex: none; justify-content: center; width: 34px; padding: 6px; }
.asm-version-preview svg { width: 16px; height: 16px; }
.asm-version-preview[aria-pressed="true"] { border-color: var(--ds-accent); color: var(--ds-accent-text); }
.asm-stage-hud:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; position: absolute; z-index: 4; top: 8px; left: 8px; right: 8px; padding: 8px; border-radius: 8px; background: var(--ds-surface-solid); color: var(--ds-fg); font-size: 12px; }
.asm-feedback-panel > .asm-tell { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
/* Contextual review controls live in a focused producer dialog, outside the player. */
dialog.revision-dialog { width: min(920px, 94vw); max-height: 90dvh; padding: 0; color: var(--ds-text, #eee); background: var(--ds-surface-solid, #171719); border: 1px solid var(--ds-border, #333); border-radius: 18px; }
dialog.revision-dialog[open] { display: flex; flex-direction: column; }
.revision-dialog::backdrop { background: #000a; }
.revision-dialog .ds-dialog-body { overflow: auto; }
.revision-dialog small { display: block; color: var(--ds-text-muted, #a2a2ad); margin-top: 5px; }
.revision-dialog label { display: flex; gap: 12px; align-items: start; margin: 12px 0; }
.revision-dialog input[type=checkbox] { flex: none; margin-top: 4px; accent-color: #ceadf0; }
.revision-dialog select, .revision-dialog input[type=number], .revision-dialog textarea { color: inherit; background: #222226; border: 1px solid #444; border-radius: 8px; padding: 8px; min-width: 0; max-width: 100%; }
.revision-dialog textarea { display: block; width: 100%; box-sizing: border-box; resize: none; max-height: 240px; }
.revision-dialog details { margin: 14px 0; }
.revision-dialog summary { cursor: pointer; color: var(--ds-text-muted, #aaa); }
.revision-round-list, .revision-job-list { display: grid; gap: 8px; margin: 18px 0; }
.revision-job-list > button { display: flex; flex-direction: column; align-items: stretch; min-width: 0; width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; padding: 16px; border-radius: 10px; border: 1px solid #333; background: #202023; color: inherit; cursor: pointer; }
.revision-status { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 18px 0; }
.revision-operation { padding: 14px 18px; margin: 12px 0; background: #1f1f22; border: 1px solid #333; border-radius: 12px; }
.revision-operation p, .revision-operation li { line-height: 1.5; overflow-wrap: anywhere; }
.revision-operation ul { padding-left: 20px; font-size: .9em; }
.revision-execution { padding: 12px 0; }
.revision-execution label { align-items: center; }
.revision-candidates video { width: 100%; max-height: 45dvh; background: #050505; }
.revision-controls { display: flex; gap: 12px; justify-content: flex-end; }
.revision-error, [data-rev-error] { color: #f2a6a6; }
[data-rev-error]:empty { display: none; }
@media (max-width: 600px) { dialog.revision-dialog { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; } .revision-status { align-items: start; flex-direction: column; gap: 2px; } }
.asm-ticket-validation { grid-column: 1 / -1; color: #f2b7b7; padding: 0 4px 4px; }

/* Keep the timeline shallow so the conversation has the remaining height. */
.page.is-assembly .asm-track-video { height: 64px; }
.page.is-assembly .asm-track-audio { height: 32px; }
.page.is-assembly .asm-audio-empty { min-height: 28px; }
.page.is-assembly .asm-playhead { bottom: -108px; }
.asm-episode select { max-width: 160px; text-overflow: ellipsis; }
@media(max-width:600px) {
  .page.is-assembly .asm-track-video { height: 64px; }
  .asm-episode select { min-height: 40px; }
}

/* The transport is a compact utility row; shot thumbnails carry the visual weight. */
.page.is-assembly .asm-toolbar,
.page.is-assembly .asm-toolbar-start,
.page.is-assembly .asm-toolbar-end{height:36px;min-height:0}
.page.is-assembly .asm-toolbar-start{padding-top:0;padding-left:4px}
.page.is-assembly .asm-clock{font-size:var(--asm-clock-size,18px);line-height:24px;gap:6px}
.page.is-assembly .asm-clock-total,.page.is-assembly .asm-clock-sep{font-size:13px}
.page.is-assembly .asm-toolbar .asm-tool,
.page.is-assembly .asm-toolbar .asm-host-slot .primary,
.page.is-assembly .asm-toolbar .ds-icon-btn,
.page.is-assembly .asm-toolbar .asm-episode select,
.page.is-assembly .asm-toolbar .asm-volume{height:28px;min-height:28px;font-size:12px}
.page.is-assembly .asm-toolbar .ds-icon-btn{width:28px;padding:0}
.page.is-assembly .asm-toolbar .asm-tool,
.page.is-assembly .asm-toolbar .asm-host-slot .primary{padding-inline:9px}
.page.is-assembly .asm-toolbar svg{width:14px;height:14px}
.page.is-assembly .asm-toolbar .asm-volume{padding-inline:8px;gap:5px}
.page.is-assembly .asm-toolbar .asm-volume input[type=range]{width:64px;height:18px;min-height:0;padding:0}
.page.is-assembly .asm-toolbar .asm-volume input[type=range]::-webkit-slider-thumb{width:12px;height:12px;margin-top:-4px}
.page.is-assembly .asm-toolbar .asm-volume input[type=range]::-moz-range-thumb{width:12px;height:12px}
.page.is-assembly .asm-toolbar .asm-host-slot{padding-left:7px;margin-left:1px;gap:4px}
.page.is-assembly [data-asm-toolbar=rows] .asm-toolbar{height:auto;gap:4px 8px;padding-top:2px}
.page.is-assembly [data-asm-toolbar=rows] .asm-toolbar-start{height:28px;padding-left:4px}
@media(max-width:600px){
  .page.is-assembly .asm-toolbar .asm-tool,
  .page.is-assembly .asm-toolbar .asm-host-slot .primary,
  .page.is-assembly .asm-toolbar .ds-icon-btn,
  .page.is-assembly .asm-toolbar .asm-episode select,
  .page.is-assembly .asm-toolbar .asm-volume{height:40px;min-height:40px}
  .page.is-assembly .asm-toolbar .ds-icon-btn{width:40px}
  .page.is-assembly [data-asm-toolbar=rows] .asm-toolbar-start{height:40px}
  .page.is-assembly [data-asm-toolbar=rows] .asm-host-slot .primary > span{display:none}
  .page.is-assembly .asm-toolbar .asm-queue-pill{font-size:11px;padding-inline:7px}
}

.page.is-assembly .asm-playhead::before{width:11px;height:7px;left:-5px}

/* Selected-shot tools occupy the unused lower portion of the project column. */
.asm-shot-dock[hidden]{display:none}
.asm-shot-dock{display:none}
.asm-shot-dock{transform-origin:top left}
@media(min-width:1051px){
  .shell.shell-assembly.has-shot-dock:not(.sidebar-collapsed) .sidebar{height:var(--asm-library-height,112px)}
  .shell.shell-assembly.has-shot-dock:not(.sidebar-collapsed)>.asm-shot-dock:not([hidden]){display:flex;flex-direction:column;position:fixed;z-index:21;left:var(--asm-side-left);top:calc(var(--asm-side-top) + var(--asm-library-height,112px) + 12px);width:var(--ds-sidebar);height:calc(var(--asm-side-height) - var(--asm-library-height,112px) - 12px);min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;border:var(--ds-hair) solid var(--ds-border);border-radius:var(--ds-radius);background:var(--ds-surface-solid);color:var(--ds-fg)}
  .asm-shot-dock>.asm-feedback-panel{height:100%;min-height:0}
  .asm-shot-dock .asm-insp-head{flex-wrap:wrap;gap:6px;padding:12px}
  .asm-shot-dock .asm-insp-head>div:first-child{flex:1 1 75px}
  .asm-shot-dock .asm-insp-tools{margin-left:auto}
  .asm-shot-dock .asm-insp-tools .ds-icon-btn{width:24px;height:26px;min-height:26px;padding:4px}
  .asm-shot-dock .asm-inspector-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:8px;gap:4px}
  .asm-shot-dock .asm-inspector-tab{min-height:32px;font-size:12px;padding-inline:4px}
  .asm-shot-dock [data-asm-detail-scroll]{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
  .asm-shot-dock .asm-tell{display:none}
  .asm-shot-dock .asm-trim{grid-template-columns:repeat(2,minmax(0,1fr))}
  .asm-shot-dock .asm-ref{flex-wrap:nowrap}
}

/* All timeline controls share the Export button's outer height. */
.page.is-assembly .asm-toolbar{--asm-control-height:28px}
.page.is-assembly .asm-toolbar .asm-episode{display:flex;align-items:center;height:var(--asm-control-height);margin-block:0}
.page.is-assembly .asm-toolbar .asm-episode select,
.page.is-assembly .asm-toolbar .asm-volume,
.page.is-assembly .asm-toolbar .asm-export{box-sizing:border-box;height:var(--asm-control-height);min-height:var(--asm-control-height);max-height:var(--asm-control-height);align-self:center;border-radius:6px;margin-block:0}
@media(max-width:600px){.page.is-assembly .asm-toolbar{--asm-control-height:40px}}

/* The Episode opens directly into the assembly frame while its data arrives. */
.episode-loading{display:none}
.page.is-assembly-loading #pane-overview{position:relative}
.page.is-assembly-loading #pane-overview>.episode-loading{display:grid;place-items:center;position:absolute;inset:0;z-index:5;background:var(--ds-bg-elevated,#0a0a0c)}
.episode-loading img,.episode-loading .ds-loading-mark{width:40px;height:40px}
.page.is-assembly-loading .episode-workspace{visibility:hidden}
.page.is-assembly.is-entering{animation:none}
.page #pane-overview>.pane-toolbar[hidden],.page #review-notes[hidden]{display:none}
@media(min-width:1051px){
  /* Keep the navigation anchored; only its height changes between project tabs. */
  .shell:not(.is-library){transition:none}
  .shell:not(.is-library)>main{grid-column:3}
  .shell:not(.is-library) .sidebar{position:fixed;top:var(--asm-side-top,calc(var(--ds-topbar) + 5px));left:var(--asm-side-left,calc(var(--ds-rail) + 6px));width:var(--ds-sidebar);height:calc(100dvh - var(--asm-side-top,calc(var(--ds-topbar) + 5px)) - 3px);margin-top:0;transition:height 220ms var(--ds-ease)}
  .shell.shell-assembly:not(.sidebar-collapsed) .sidebar{height:var(--asm-library-height,112px)}
  .shell:not(.is-library) .workspace-panel:not([hidden]){animation:episode-pane-in 180ms ease-out}
}
@keyframes episode-pane-in{from{opacity:.65}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.shell:not(.is-library) .sidebar{transition:none}.shell:not(.is-library) .workspace-panel:not([hidden]){animation:none}}

/* Full-resolution shot reference viewer. */
.asm-ref[role="button"]{cursor:zoom-in;border-radius:6px;padding:4px}
.asm-ref[role="button"]:hover{background:var(--ds-surface-active)}
.asm-ref[role="button"]:focus-visible{outline:2px solid var(--ds-accent);outline-offset:2px}
.asm-reference-viewer{width:min(1200px,94vw);max-width:94vw;height:min(850px,90dvh);max-height:90dvh;padding:0;border:1px solid var(--ds-border);border-radius:16px;background:var(--ds-stage,#101114);color:var(--ds-text);overflow:hidden}
.asm-reference-viewer::backdrop{background:rgba(0,0,0,.8)}
.asm-reference-viewer[open]{display:flex;flex-direction:column}
.asm-reference-viewer header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;flex:none}
.asm-reference-viewer header strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asm-reference-image{flex:1;min-height:0;padding:0 16px 16px;display:flex;align-items:center;justify-content:center}
.asm-reference-image img{width:100%;height:100%;object-fit:contain}

.asm-shot-heading,.asm-shot-dock .asm-shot-heading{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:10px}.asm-shot-heading>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.asm-shot-heading .asm-insp-status{margin:0;flex:none;white-space:nowrap;font-size:11px}

/* Media and Production align with the outer main card, not the inset Episode rail. */
@media(min-width:1051px){.shell:not(.is-library):not(.shell-assembly) .sidebar{top:calc(var(--ds-topbar) + 3px);height:calc(100dvh - var(--ds-topbar) - 6px)}}

/* Remove the rail column while preserving the project sidebar's anchored layout. */
@media(min-width:1051px){
  .shell{grid-template-columns:var(--ds-sidebar) minmax(0,1fr)}
  .shell.sidebar-collapsed,.shell.shell-assembly{grid-template-columns:0 minmax(0,1fr)}
  .shell>main,.shell:not(.is-library)>main,.shell.shell-assembly>main{grid-column:2}
  .shell .sidebar{grid-column:1}
}
@media(max-width:1050px){.shell,.shell.sidebar-collapsed{grid-template-columns:minmax(0,1fr)}.shell>main{grid-column:1}}

.asm-shot-heading .asm-insp-status{color:#d0a9f8}

/* A playable revision awaiting the owner's decision is distinct from failed feedback. */
.asm-clip[data-status="yellow"], .asm-legend[data-status="yellow"] { --asm-rgb: 244, 210, 79; }
.asm-approval-notice { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:8px 12px; border-left:3px solid #f4d24f; background:rgba(244,210,79,.07); border-radius:6px; }
.asm-approval-notice > span { display:grid; gap:3px; flex:1; }
.asm-approval-notice strong { color:#f4d24f; font-size:13px; }
.asm-approval-notice small { color:var(--ds-fg); font-size:12px; }

@supports (content-visibility:auto){
  .asm-clip{content-visibility:auto;contain-intrinsic-size:var(--asm-w) 90px}
}

/* Tickets use the shot detail column, leaving the whole conversation available. */
.asm-inspector-tabs,.asm-shot-dock .asm-inspector-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
.asm-ticket-dock .asm-insp-head{display:flex;justify-content:space-between;align-items:center}
.asm-ticket-dock .asm-insp-head small{color:var(--ds-muted);font-size:12px}
.asm-ticket-dock .asm-note-head{flex-wrap:wrap;gap:6px}
.asm-ticket-dock .asm-ticket{padding-block:14px;border-bottom:1px solid var(--ds-border,#ffffff16)}
.asm-ticket-dock .asm-ticket>p{font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.asm-ticket-dock .asm-ticket-actions{flex-wrap:wrap;gap:6px}
.asm-ticket-dock .asm-note-foot{flex-wrap:wrap}
.episode-loading img,.episode-loading .ds-loading-mark{width:92px;height:92px}

/* Named actions remain understandable when the toolbar becomes compact. */
.asm-review { white-space: nowrap; }
.page.is-assembly :is([data-asm-controls="compact"],[data-asm-controls="icons"]) .asm-export > span { display: inline; }
.page.is-assembly :is([data-asm-controls="compact"],[data-asm-controls="icons"]) .asm-review > svg { display: none; }

/* Chat restoration owns the anchor across live DOM refreshes. */
.asm-feedback-scroll[data-asm-feedback-scroll] { overflow-anchor: none; }

.asm-chat-back { display: none; }
@media (max-width: 1050px) { .episode-rail.is-sheet .asm-chat-back { display: flex; align-items: center; gap: 7px; align-self: flex-start; flex: none; min-height: 32px; margin: 4px 8px; font-size: 12px; } .asm-chat-back svg { width: 16px; height: 16px; } }