/* editor.css — "Ember Studio" magic editor surfaces. Semantic tokens come from
   tokens.css (the shared Ember Studio layer, linked before this file); base
   brand tokens from gipity-theme.css. This file NEVER redefines a shared token
   and NEVER hardcodes a brand color — it only composes the stage scale, ember
   accent, hairlines and soft-round shapes into the editor's panes.

   Functional surfaces are sacred: the screen-router display rules, every id/
   data-testid the JS queries, the transcript virtualization geometry
   (.tp-scroller / .tp-sizer / .tp-block absolute positioning), the preview tile
   math (positions are set inline by preview.js — CSS never touches them) and the
   proc-stage[data-status] hooks are all preserved. */

/* ── Editor page ground ────────────────────────────────────────────────────── */
body.editor { background: var(--stage-0); color: var(--ink); }

/* Button tiers, scoped to the editor page so they never fight the studio's
   global .primary-btn / button.ghost. PRIMARY = ember gradient (one hero per
   view); GHOST = hairline-ringed utility. */
body.editor .primary-btn {
  background: var(--grad-ember); color: var(--on-accent); border: none;
  border-radius: var(--r-btn); box-shadow: var(--shadow-accent);
  font-weight: 700; transition: filter var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
body.editor .primary-btn:hover:not(:disabled) { filter: brightness(1.06); }
body.editor .primary-btn:active:not(:disabled) { transform: scale(.98); }
body.editor .primary-btn:disabled { opacity: .55; box-shadow: none; }
body.editor button.ghost {
  background: transparent; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: var(--r-btn);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
body.editor button.ghost:hover { background: var(--stage-2); color: var(--ink); }
body.editor :focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Compact icon-first actions used by dense editor work surfaces. The icon carries
   recognition; the short label keeps first-time use understandable. Full meaning
   stays in each control's title + accessible name. These are deliberately opt-in
   so headline CTAs and the Look / Effects workspaces retain their own sizing. */
body.editor button.editor-compact-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 0; min-height: 32px; max-width: 100%; margin: 0; padding: 5px 9px;
  font-size: var(--text-xs); line-height: 1.15; white-space: nowrap;
}
.editor-action-icon {
  display: inline-grid; flex: none; width: 16px; min-width: 16px; height: 16px;
  place-items: center; color: currentColor; font-size: 15px; font-weight: 800; line-height: 1;
}
.editor-action-label {
  min-width: 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap;
}
body.editor button.editor-full-action { align-self: stretch; width: 100%; }
body.editor button.editor-compact-action.is-danger { color: var(--danger); }
body.editor button.editor-compact-action.is-danger:hover:not(:disabled) {
  color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--stage-2));
  border-color: color-mix(in srgb, var(--danger) 48%, var(--line));
}
body.editor input, body.editor select, body.editor textarea {
  background: var(--stage-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-input);
}
body.editor input:focus, body.editor select:focus, body.editor textarea:focus {
  outline: none; box-shadow: var(--focus-ring); border-color: var(--accent-line);
}

/* ── Screen router (UNCHANGED behavior) ────────────────────────────────────── */
.ed-screen { display: none; }
body[data-screen="picker"] #picker-screen { display: block; }
body[data-screen="load"] #load-screen { display: block; }
body[data-screen="editor"] #editor-screen { display: block; }
body[data-screen="process"] #process-screen { display: block; }

/* ── Header ─────────────────────────────────────────────────────────────────── */
.ed-header { display: none; }
body[data-screen="editor"] .ed-header {
  display: flex; align-items: center; gap: 6px;
  padding: var(--s-2) var(--s-3);
  background: var(--stage-1); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
  min-height: var(--ed-header-h); box-sizing: border-box;
  flex-wrap: nowrap;
}
/* Header controls never shrink; only the title flexes + truncates. When the row
   overflows, buttons wrap to the next line (all reachable) rather than clipping. */
body[data-screen="editor"] .ed-header > button,
body[data-screen="editor"] .ed-header > .hdr-more { flex: none; }

/* ── Compact header chips ──────────────────────────────────────────────────────
   Drawer toggles + Undo/Redo/Back render as icon+short-label chips: an aria-hidden
   glyph beside a short visible label (full names live in title/aria-label). Tight
   padding + a smaller label keep the whole cluster on one line at ~1280+. */
body.editor .ed-header .hbtn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 8px; line-height: 1;
}
.ed-header .hb-ico { font-size: var(--text-sm); line-height: 1; opacity: .85; }
.ed-header .hb-lbl { font-size: var(--text-sm); font-weight: 600; letter-spacing: -0.015em; }
/* Icon-only Undo / Redo / More controls remain true circles. */
body.editor .ed-header .hbtn-icon {
  width: 34px; min-width: 34px; height: 34px; padding: 0; justify-content: center;
  border-radius: 50%;
}
.ed-header .hbtn-icon .hb-ico { font-size: var(--text-base); opacity: 1; }
body.editor .ed-header .hbtn.is-active .hb-ico { opacity: 1; }

/* Overflow ⋯ menu — the rarest actions (Reprocess…) live here so the header holds
   one line. Anchored under its button; a dropdown MENU (opens below), never a
   surface that floats over the header content. */
.hdr-more { position: relative; display: inline-flex; }
.hdr-more-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  min-width: 180px; display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-1); margin: 0;
  background: var(--stage-2); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-pop);
}
.hdr-more-menu[hidden] { display: none; }
.hdr-more-item {
  display: block; width: 100%; text-align: left; margin: 0;
  padding: 7px 10px; font-size: var(--text-sm);
  background: transparent; color: var(--ink-dim);
  border: 1px solid transparent; border-radius: var(--r-btn); cursor: pointer;
}
.hdr-more-item:hover { background: var(--stage-3); color: var(--ink); }
.ed-title {
  font-weight: 700; color: var(--ink); font-size: var(--text-lg); letter-spacing: -0.01em;
  flex: 1 1 auto; min-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The title now provides the flexible gap, so the explicit spacer no longer needs to
   grow (kept in the DOM as a tiny separator before the dirty dot). */
.header-spacer { display: none; }
body.editor #save-btn {
  flex: none; min-height: 34px; margin: 0 0 0 var(--s-1); padding: 5px 12px;
  font-size: var(--text-sm); line-height: 1; box-shadow: none;
}
.dirty-dot {
  flex: none; width: 9px; min-width: 9px; height: 9px; min-height: 9px; border-radius: var(--r-chip);
  background: var(--accent); box-shadow: 0 0 0 3px var(--stage-1), 0 0 10px var(--accent-line);
}
.editor-companion-status {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 32px; margin: 0; padding: 5px 9px;
  color: var(--ink-dim); font-size: var(--text-xs); font-weight: 700; white-space: nowrap;
}
.editor-companion-dot {
  width: 8px; height: 8px; flex: none; border-radius: 999px;
  background: var(--ink-faint); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink-faint) 18%, transparent);
}
.editor-companion-status[data-state="connected"] { color: var(--ink); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.editor-companion-status[data-state="connected"] .editor-companion-dot { background: var(--ok); box-shadow: 0 0 8px color-mix(in srgb, var(--ok) 60%, transparent); }
.editor-companion-status[data-state="pairing"] .editor-companion-dot,
.editor-companion-status[data-state="checking"] .editor-companion-dot { background: var(--accent); animation: companion-pulse 1.1s ease-in-out infinite; }
.editor-companion-status[data-state="outdated"] .editor-companion-dot { background: var(--warn, #f3b53f); }
.editor-companion-status[data-state="offline"] .editor-companion-dot,
.editor-companion-status[data-state="unpaired"] .editor-companion-dot { background: var(--danger); }
.editor-companion-status[aria-expanded="true"] {
  background: var(--stage-3); border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}
.editor-companion-panel {
  position: absolute; top: calc(100% + 8px); right: var(--s-3); z-index: 90;
  width: min(370px, calc(100vw - 24px)); box-sizing: border-box;
  padding: var(--s-3); color: var(--ink); text-align: left;
  background: var(--stage-2); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
}
.editor-companion-panel[hidden] { display: none; }
.editor-companion-panel-head,
.editor-companion-panel-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.editor-companion-panel-head > div { min-width: 0; }
.editor-companion-panel-head strong,
.editor-companion-panel-head [data-companion-panel-state] { display: block; }
.editor-companion-panel-head [data-companion-panel-state] {
  margin-top: 2px; color: var(--ok); font-size: var(--text-xs); font-weight: 700;
}
.editor-companion-panel[data-state="checking"] [data-companion-panel-state],
.editor-companion-panel[data-state="pairing"] [data-companion-panel-state] { color: var(--accent); }
.editor-companion-panel[data-state="outdated"] [data-companion-panel-state] { color: var(--warn, #f3b53f); }
.editor-companion-panel[data-state="offline"] [data-companion-panel-state],
.editor-companion-panel[data-state="unpaired"] [data-companion-panel-state] { color: var(--danger); }
.editor-companion-panel-close {
  display: inline-grid; place-items: center; flex: none; min-width: 34px; min-height: 34px;
  margin: 0; padding: 4px; border-radius: 50%; font-size: var(--text-xl); line-height: 1;
}
.editor-companion-panel-description {
  margin: var(--s-3) 0; color: var(--ink-dim); font-size: var(--text-sm); line-height: 1.45;
}
.editor-companion-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2);
  margin: 0 0 var(--s-3);
}
.editor-companion-facts > div {
  min-width: 0; padding: var(--s-2); background: var(--stage-1);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.editor-companion-facts dt {
  color: var(--ink-dim); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em;
}
.editor-companion-facts dd { margin: 2px 0 0; font-size: var(--text-sm); font-weight: 700; }
.editor-companion-capability-block {
  padding: var(--s-2); background: color-mix(in srgb, var(--stage-1) 72%, transparent);
  border-radius: var(--r-sm); font-size: var(--text-sm);
}
.editor-companion-capability-block > strong { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; }
.editor-companion-capability-block ul { margin: var(--s-1) 0 0; padding-left: 1.25rem; }
.editor-companion-capability-block li + li { margin-top: 2px; }
.editor-companion-capability-block [data-companion-limitations] {
  margin: var(--s-2) 0 0; color: var(--ink-dim); font-size: var(--text-xs); line-height: 1.4;
}
.editor-companion-panel-actions { margin-top: var(--s-3); }
.editor-companion-panel-actions button { margin: 0; min-height: 36px; }
.editor-companion-panel-actions [data-companion-checked] {
  color: var(--ink-dim); font-size: var(--text-xs); text-align: right;
}
@keyframes companion-pulse { 50% { opacity: .38; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .editor-companion-dot { animation: none !important; } }
@media (max-width: 1180px) { .editor-companion-status [data-companion-label] { display: none; } }
@media (max-width: 520px) {
  .editor-companion-panel { right: 8px; width: calc(100vw - 16px); }
}
.ed-pad { padding: var(--s-6) var(--s-5); max-width: 900px; margin: 0 auto; }
.tagline { color: var(--ink-dim); font-size: var(--text-lg); max-width: 60ch; margin-bottom: var(--s-5); }

/* Compact editor preparation hosted in the Studio inspector. It is still the real
   editor page — only its pre-open screens are fitted to the narrow rail. The full NLE
   never renders here; editor.js stops at .inspector-editor-ready instead. */
body[data-editor-surface="inspector"] { min-width: 0; overflow-x: hidden; }
body[data-editor-surface="inspector"] .ed-pad {
  width: 100%; max-width: none; margin: 0; padding: var(--s-2) var(--s-3) var(--s-4);
}
body[data-editor-surface="inspector"] #picker-screen h1,
body[data-editor-surface="inspector"] .proc-topbar h1 { font-size: var(--text-base); }
body[data-editor-surface="inspector"] .proc-topbar { margin-bottom: var(--s-2); }
body[data-editor-surface="inspector"] .proc-panel { grid-template-columns: 1fr; }
body[data-editor-surface="inspector"] .proc-panel > * { grid-column: 1; }
body[data-editor-surface="inspector"] .proc-progress-section { order: -2; }
body[data-editor-surface="inspector"] .proc-overview { padding: var(--s-3); }
body[data-editor-surface="inspector"] .proc-meta-grid { grid-template-columns: 1fr 1fr; }
body[data-editor-surface="inspector"] .proc-stills { grid-template-columns: 1fr 1fr; }
body[data-editor-surface="inspector"] .proc-still:last-child { display: none; }
body[data-editor-surface="inspector"] #process-sub { display: none; }
body[data-editor-surface="inspector"] .tagline {
  margin-bottom: var(--s-3); font-size: var(--text-sm); line-height: 1.45;
}
body[data-editor-surface="inspector"] .proc-section,
body[data-editor-surface="inspector"] .proc-runscript,
body[data-editor-surface="inspector"] .proc-stage,
body[data-editor-surface="inspector"] .load-card { padding: var(--s-3); }
body[data-editor-surface="inspector"] .proc-stage-head { flex-wrap: wrap; }
body[data-editor-surface="inspector"] .proc-stage-name { min-width: 0; }
body[data-editor-surface="inspector"] .proc-folder,
body[data-editor-surface="inspector"] .proc-ready { align-items: stretch; flex-direction: column; gap: var(--s-2); }
body[data-editor-surface="inspector"] .proc-folder > button,
body[data-editor-surface="inspector"] .proc-ready > button,
body[data-editor-surface="inspector"] .proc-render-row > button,
body[data-editor-surface="inspector"] .proc-runscript-btns > button { width: 100%; }
body[data-editor-surface="inspector"] .proc-render-row,
body[data-editor-surface="inspector"] .proc-runscript-btns { display: grid; grid-template-columns: 1fr; gap: var(--s-2); }
body[data-editor-surface="inspector"] .proc-otherways .cmd-row { flex-direction: column; }

.inspector-editor-ready {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2);
  margin: 0; padding: var(--s-4);
  background: var(--stage-2); border: 1px solid var(--accent-line);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.inspector-editor-ready[hidden] { display: none; }
.inspector-editor-ready h2, .inspector-editor-ready p { margin: 0; }
.inspector-editor-ready p { color: var(--ink-dim); font-size: var(--text-sm); }
.inspector-editor-ready[data-status="waiting"] {
  background: var(--stage-1); border-color: var(--line); box-shadow: none;
}
.inspector-editor-ready[data-status="waiting"] .primary-btn {
  background: var(--stage-3); color: var(--ink-faint); box-shadow: none;
  filter: none; pointer-events: none; cursor: not-allowed;
}
.inspector-editor-ready .primary-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: var(--s-3); text-decoration: none;
}

/* ── Session picker ─────────────────────────────────────────────────────────── */
#picker-screen .ed-pad { max-width: 820px; }
#picker-screen h1 {
  font-size: var(--text-xl); letter-spacing: -0.02em; margin-bottom: var(--s-2);
}
/* ember kicker above the picker title */
#picker-screen h1::before {
  content: "MAGIC EDITOR"; display: block;
  font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.16em;
  margin-bottom: var(--s-2);
  background: var(--grad-ember); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent);
}
.picker-heading-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-3);
}
.picker-heading-row h1, .picker-heading-row .tagline { margin-top: 0; }
.picker-heading-row .tagline { margin-bottom: 0; }
.picker-heading-actions { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.picker-heading-actions button { margin: 0; white-space: nowrap; }
.picker-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  margin-left: 4px; padding: 0 5px; border-radius: 999px;
  color: var(--ink); background: var(--stage-3); border: 1px solid var(--line);
  font-size: var(--text-xs); font-variant-numeric: tabular-nums;
}
.picker-manage-bar {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin: 0 0 var(--s-3); padding: var(--s-3);
  background: var(--stage-2); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.picker-manage-bar[hidden] { display: none; }
.picker-manage-bar button { margin: 0; }
.picker-select-all {
  display: inline-flex; align-items: center; gap: var(--s-2); margin: 0;
  color: var(--ink-dim); font-size: var(--text-sm); white-space: nowrap;
}
.picker-select-all input, .sess-select { width: auto; margin: 0; }
.picker-selection-status { margin-left: auto; color: var(--ink-faint); font-size: var(--text-sm); }
.picker-hide-selected { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
body[data-picker-mode="hidden"] #picker-screen .import-cta { display: none; }
.picker-library-tools {
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(150px, 190px) auto;
  align-items: end; gap: var(--s-3); margin: 0 0 var(--s-2); padding: var(--s-3);
  background: var(--stage-2); border: 1px solid var(--line); border-radius: var(--r-card);
}
.picker-search-field, .picker-sort-field {
  display: grid; gap: 6px; min-width: 0; margin: 0;
  color: var(--ink-dim); font-size: var(--text-xs); font-weight: 750; letter-spacing: .02em;
}
.picker-search-field input, .picker-sort-field select {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; margin: 0;
}
#picker-clear-search { min-height: 44px; margin: 0; white-space: nowrap; }
#picker-clear-search[hidden] { display: none; }
.picker-list-summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin: var(--s-4) 0 var(--s-3); }
.picker-list-summary h2 { margin: 0; color: var(--ink); font-size: var(--text-lg); }
.picker-results-status {
  margin: 0; color: var(--ink-faint); font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.picker-library-error { margin: 0 0 var(--s-3); }
.session-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.sess-row { margin: 0; position: relative; }
.sess-row.is-selected .sess-btn {
  border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent), var(--shadow-card);
}
.sess-selector {
  position: absolute; z-index: 3; left: var(--s-4); top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 28px; height: 28px; margin: 0;
}
.sess-row.is-manageable .sess-btn { padding-left: 56px; padding-right: var(--s-4); cursor: pointer; }
.sess-row.is-manageable .sess-btn:hover { transform: none; }
.sess-empty { color: var(--ink-dim); padding: var(--s-4); border: 1px dashed var(--line); border-radius: var(--r-card); }
.desktop-recordings-head { margin-top: var(--s-2); background: color-mix(in srgb, var(--stage-2) 72%, transparent); }
.desktop-recordings-head .sess-empty-actions { margin-top: 0; align-items: center; justify-content: space-between; }
.sess-empty-msg { margin: 0; }
.sess-empty-actions { display: flex; gap: .6rem; margin-top: .75rem; flex-wrap: wrap; }
.sess-empty-start { display: inline-flex; align-items: center; text-decoration: none; }
.sess-btn {
  width: 100%; text-align: left; display: flex; flex-direction: column; gap: 3px;
  background: var(--stage-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s-4); box-shadow: var(--shadow-card);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.sess-btn:hover {
  border-color: var(--accent-line); background: var(--stage-2);
  transform: translateY(-2px); box-shadow: var(--shadow-pop);
}
.sess-title { font-weight: 750; color: var(--ink); font-size: var(--text-base); overflow-wrap: anywhere; }
.sess-meta { color: var(--ink-faint); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.sess-storage { color: var(--ink-dim); }
.sess-card-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.sess-status-chip {
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink-dim);
  background: var(--stage-3); font-size: var(--text-xs); font-weight: 700;
}
.sess-status-chip.is-ready { color: #63dc94; border-color: color-mix(in srgb, #45d483 55%, var(--line)); }
.sess-status-chip.is-warning { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.sess-status-chip.is-recording { color: #ff7268; border-color: color-mix(in srgb, #ff5148 62%, var(--line)); }
.sess-date { color: var(--ink-faint); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.sess-open-label { align-self: flex-start; margin-top: 8px; color: var(--accent); font-size: var(--text-sm); font-weight: 750; }
.sess-guid {
  color: var(--ink-faint); font: 11px/1.3 ui-monospace, Menlo, Consolas, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sess-likely-test {
  align-self: flex-start; margin-top: 3px; padding: 2px 7px; border-radius: 999px;
  color: var(--ink-dim); background: var(--stage-3); border: 1px solid var(--line);
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
}

/* Favourites. The mark has to read at a glance from the top of a long list, so
   the card gets an accent rail as well as a chip — a chip alone disappears once
   the row is dense with storage and status badges. In Organize mode a favourite
   is not a select target, so its card also drops the pointer/hover affordances
   that promise it is clickable. */
.sess-status-chip.is-favourite {
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--stage-3));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}
.sess-row.is-favourite .sess-btn {
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--stage-2) 93%, var(--accent));
}
.sess-row.is-favourite.is-manageable .sess-btn { padding-left: 54px; cursor: default; }
.sess-row.is-favourite.is-manageable .sess-btn:hover {
  border-color: var(--line); border-left-color: var(--accent);
  transform: none; box-shadow: var(--shadow-card);
}
.sess-fav-note {
  align-self: flex-start; margin-top: 3px; padding: 2px 7px; border-radius: 999px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
}
.sess-select:disabled { cursor: not-allowed; opacity: .45; }
.sess-act-fav.is-on {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--stage-1));
}
.sess-dialog-fav {
  margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-card);
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  font-size: var(--text-sm); font-weight: 750;
}

/* Episode organization stays visible: touch and mouse users should not need to
   discover a hidden hover target to rename or remove an item. */
.sess-actions {
  display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: 6px;
}
.sess-row:has(.sess-drive-quick) .sess-actions { padding-right: 112px; }
.sess-act { min-height: 36px; padding: 5px 11px; margin: 0; font-size: var(--text-xs); line-height: 1; background: var(--stage-1); }
.sess-act:hover { background: var(--stage-3); }
.sess-act-danger:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, transparent); }

/* Inline rename editor (replaces the card in place). */
.sess-edit {
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--stage-2); border: 1px solid var(--accent-line);
  border-radius: var(--r-card); padding: var(--s-3) var(--s-4); box-shadow: var(--shadow-card);
}
.sess-edit-input { flex: 1 1 auto; margin: 0; }
.sess-edit-save, .sess-edit-cancel { flex: none; margin: 0; padding: 5px 14px; }

/* Type-the-title delete dialog. */
.sess-dialog-scrim {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
  display: grid; place-items: center; padding: var(--s-4);
}
.sess-dialog {
  width: min(440px, 96vw);
  background: var(--stage-1); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-pop);
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3);
}
.sess-dialog-h { margin: 0; color: var(--ink); letter-spacing: -0.01em; }
.sess-dialog-conf { margin: 0; color: var(--ink-dim); font-size: var(--text-sm); }
.sess-dialog-conf strong { color: var(--ink); }
.sess-dialog-input { width: 100%; margin: 0; }
.sess-dialog-actions { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-1); }
.sess-dialog-actions button { margin: 0; }
.sess-dialog-danger { background: var(--danger, var(--grad-ember)); }
.sess-dialog-danger:disabled { opacity: .5; box-shadow: none; }

@media (max-width: 680px) {
  .picker-heading-row { flex-direction: column; }
  .picker-heading-actions { width: 100%; min-width: 0; }
  .picker-heading-actions button {
    box-sizing: border-box; flex: 1 1 0; min-width: 0; min-height: 44px; max-width: 100%;
  }
  .picker-heading-actions .picker-count { flex: none; }
  .picker-selection-status { width: 100%; margin-left: 0; order: 3; }
  .picker-manage-bar button { flex: 1 1 auto; }
  .picker-library-tools { grid-template-columns: 1fr; }
  #picker-clear-search { width: 100%; }
  .picker-list-summary { align-items: flex-start; flex-direction: column; gap: 3px; }
  .sess-row:has(.sess-drive-quick) .sess-actions { padding-right: 0; }
  .sess-actions { justify-content: stretch; }
  .sess-actions .sess-act { flex: 1 1 0; min-height: 44px; }
  .sess-edit { align-items: stretch; flex-wrap: wrap; }
  .sess-edit-input { flex-basis: 100%; min-height: 44px; }
  body.editor .toasts { right: 10px; left: 10px; max-width: none; }
  body.editor .build-stamp {
    box-sizing: border-box; right: 8px; max-width: calc(100vw - 16px);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* ── Load / instruction cards ──────────────────────────────────────────────── */
/* Touch targets retain a comfortable minimum without changing card behavior. */
@media (max-width: 680px), (pointer: coarse) {
  body.editor .sess-act {
    display: grid; place-items: center; box-sizing: border-box; min-height: 44px;
  }
}

.load-card {
  background: var(--stage-2); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s-5);
  box-shadow: var(--shadow-card); max-width: 720px; margin-top: var(--s-4);
}
.load-card h2 { margin-top: 0; color: var(--ink); letter-spacing: -0.01em; }
.load-card .hint, .hint { color: var(--ink-dim); font-size: var(--text-sm); }
.load-actions { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin-top: var(--s-4); }
.analysis-cmds { margin: var(--s-4) 0; }
.cmd-row { display: flex; align-items: stretch; gap: var(--s-2); margin: var(--s-2) 0; }
.cmd {
  flex: 1 1 auto; margin: 0; overflow-x: auto;
  background: var(--stage-1); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: var(--s-2) var(--s-3);
  color: var(--code); font-size: var(--text-sm);
}

/* ── Advanced (collapsed) command blocks — demote raw node commands ────────── */
.adv-cmds { margin: var(--s-4) 0 0; }
.adv-cmds > summary {
  cursor: pointer; color: var(--ink-faint); font-size: var(--text-sm);
  user-select: none; padding: var(--s-1) 0;
}
.adv-cmds > summary:hover { color: var(--ink-dim); }
.adv-cmds[open] > summary { margin-bottom: var(--s-2); }
.adv-cmds .cmd { white-space: pre; }
.render-folder { color: var(--ink); font-weight: 600; }

/* ── Boot-error guard card (editor.js showBootError) ───────────────────────────
   A full-viewport, top-most overlay so a boot crash is NEVER an empty screen. It sits
   above every editor screen/drawer (z-index above .sess-dialog-scrim/.ed-scrim). */
.boot-error-scrim {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.62); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: var(--s-4);
}
.boot-error-card {
  width: min(560px, 96vw);
  background: var(--stage-1); border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--r-card); box-shadow: var(--shadow-pop);
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3);
}
.boot-error-icon {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 22px; color: var(--on-accent);
  background: var(--grad-ember);
}
.boot-error-h { margin: 0; color: var(--ink); letter-spacing: -0.01em; }
.boot-error-msg { margin: 0; color: var(--ink-dim); font-size: var(--text-sm); }
.boot-error-details { margin: 0; }
.boot-error-sum { cursor: pointer; color: var(--ink-dim); font-size: var(--text-xs); user-select: none; }
.boot-error-stack {
  margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3);
  background: var(--stage-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--text-xs); color: var(--ink-dim);
}
.boot-error-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }
.boot-error-actions button { margin: 0; }

/* ── Tabs ──────────────────────────────────────────────────────────────────── */
.ed-tabbar {
  display: flex; gap: var(--s-4);
  padding: var(--s-2) var(--s-4) 0;
  background: var(--stage-1); border-bottom: 1px solid var(--line);
}
.ed-tab {
  background: transparent; color: var(--ink-faint);
  border: none; margin: 0; border-radius: 0;
  padding: var(--s-3) 2px calc(var(--s-3) - 2px);
  font-weight: 700; position: relative;
  transition: color var(--dur) var(--ease);
}
.ed-tab:hover { color: var(--ink); }
/* active tab = 2px ember-gradient underline (replaces the notched border) */
.ed-tab.is-active { color: var(--ink); top: 0; background: transparent; }
.ed-tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--grad-ember); border-radius: var(--r-chip);
}

/* ════════════════════════════════════════════════════════════════════════════
   NLE WORKSPACE  (owned by the SHELL agent: layout regions, monitor, transport,
   rails, dock, drawers). The panels agent appends its own sections (toolbar tool
   groups, inspector/cuts refinements) AFTER this block under its own comment.
   Ember tokens unchanged — pure DOM/CSS restructure.
   ════════════════════════════════════════════════════════════════════════════ */
body.editor {
  --ed-header-h: 56px;
  --editor-rail-w: 132px;
  --toolbar-h: 48px;
  --dock-h: 210px;
  --rail-l: clamp(320px, 22vw, 380px);
  --rail-r-base: 300px;
  --rail-r: var(--rail-r-base);
}

/* The editor screen is FULL-BLEED: defeat Water.css's `body { max-width:800px;
   margin:auto }` cap (it was squeezing the workspace and leaving dead margins on
   both sides). The picker/load/process screens keep their own .ed-pad centering,
   so this only affects how far the shell can stretch. */
body[data-screen="editor"] { max-width: none; margin: 0; padding: 0; }

/* …and it fits EXACTLY in the viewport: header + toolbar + workspace = 100vh, the
   page itself never scrolls, and each inner region scrolls on its own. Locked at
   ≥900px only; the <900 stacked layout below deliberately lets the page flow. */
@media (min-width: 900px) {
  body[data-screen="editor"] {
    height: 100vh; overflow: hidden;
    display: flex; flex-direction: column;
  }
  body[data-screen="editor"] #editor-screen {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    margin-left: var(--editor-rail-w);
  }
  body[data-screen="editor"] #edit-view { flex: 1 1 auto; min-height: 0; display: flex; }
  body[data-screen="editor"] .ed-workspace { flex: 1 1 auto; min-height: 0; }
  /* Monitor sizes to the available stage box, letterboxed both ways:
     width = min(stageWidth, stageHeight × 16/9). The `.pv-monitor .pv-stage`
     descendant selector outranks the base `.pv-stage { width:100% }` (defined
     later in the file) so this wins regardless of source order. */
  .pv-monitor { container-type: size; }
  .pv-monitor .pv-stage { width: min(100cqw, calc(100cqh * 16 / 9)); height: auto; }
}
/* Header drawer-toggle buttons (Edit / Notes / Render) reuse .ghost; the active
   one gets an ember-tinted ring so the current view reads at a glance. */
body.editor .ed-header button.ghost.is-active {
  color: var(--ink); border-color: var(--accent-line);
  background: var(--accent-soft);
}

/* Undo / Redo — header pair (near Save). Ember-tinted hover when live; clearly
   greyed + non-interactive when the stack is empty (ghost has no default disabled
   look). The dock pair inherits .dock-tool's disabled treatment. */
body.editor .ed-header .ed-undo,
body.editor .ed-header .ed-redo { font-variant-numeric: tabular-nums; }
body.editor .ed-header .ed-undo:hover:not(:disabled),
body.editor .ed-header .ed-redo:hover:not(:disabled) {
  border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft);
}
body.editor .ed-header .ed-undo:disabled,
body.editor .ed-header .ed-redo:disabled {
  opacity: .4; cursor: default; background: transparent; color: var(--ink-faint);
}

/* Second toolbar row — sticky under the header, holds the editing tools. */
.ed-toolbar {
  display: none;
  align-items: center; gap: var(--s-2);
  min-height: var(--toolbar-h); box-sizing: border-box;
  padding: var(--s-1) var(--s-4);
  background: var(--stage-1); border-bottom: 1px solid var(--line);
  position: sticky; top: var(--ed-header-h); z-index: 15;
  overflow-x: auto; white-space: nowrap;
}
body[data-screen="editor"] .ed-toolbar { display: none !important; }
.ed-tool-sep { width: 1px; align-self: stretch; margin: 6px 2px; background: var(--line); flex: none; }
.ed-toolbar .ed-tool { flex: none; }

/* The desktop workspace keeps the left work panel full-height. The timeline begins
   exactly at the stage's left edge and continues beneath the Inspector; Callouts,
   Theme and Transcript can therefore use the space beside the whole timeline rather
   than stopping above it. The <900px rule below replaces this grid with the existing
   stacked flow, so mobile ordering and sizing are unchanged. */
.ed-view { min-width: 0; }
.ed-workspace {
  display: grid;
  grid-template-columns: var(--rail-l) minmax(0, 1fr) var(--rail-r);
  grid-template-rows: minmax(0, 1fr) var(--dock-h);
  grid-template-areas:
    "transcript stage inspector"
    "transcript timeline timeline";
  gap: 1px;
  background: var(--line);          /* hairline seams show through the gap */
  overflow: hidden;
}
.ed-rail-l { grid-area: transcript; }
.ed-stage  { grid-area: stage; }
.ed-rail-r { grid-area: inspector; }
.ed-dock   { grid-area: timeline; }

/* Rail collapse: shrink to a 36px spine. Both collapsed → the monitor goes
   maximal ("focus mode"). Driven by body[data-left]/[data-right]. */
body[data-left="collapsed"] .ed-workspace  { grid-template-columns: 36px minmax(0, 1fr) var(--rail-r); }
body[data-right="collapsed"] .ed-workspace { grid-template-columns: var(--rail-l) minmax(0, 1fr) 36px; }
body[data-left="collapsed"][data-right="collapsed"] .ed-workspace { grid-template-columns: 36px minmax(0, 1fr) 36px; }

/* ── Rails (wrappers around the existing panels) ───────────────────────────── */
.ed-rail {
  position: relative; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--stage-0); overflow: hidden;
}
.rail-head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line); background: var(--stage-1);
  flex: none;
}
.ed-rail-r .rail-head { flex-direction: row; }
.rail-head-title { font-weight: 800; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); flex: 1 1 auto; }
.rail-collapse { padding: 2px 9px; margin: 0; font-size: var(--text-base); line-height: 1; flex: none; }

/* The collapsed spine (rotated label + expand chevron). Hidden when open. */
.rail-expand {
  display: none;
  align-items: center; gap: var(--s-3);
  width: 100%; height: 100%;
  background: var(--stage-1); border: none; color: var(--ink-dim);
  cursor: pointer; writing-mode: vertical-rl;
  padding: var(--s-3) 0; font-weight: 700; letter-spacing: 0.08em;
}
.rail-expand:hover { color: var(--ink); background: var(--stage-2); }
.rail-expand-chev { writing-mode: horizontal-tb; font-size: var(--text-lg); }
.rail-spine-label { text-transform: uppercase; font-size: var(--text-xs); }

/* Collapsed state: hide the panel + head, show the spine. */
body[data-left="collapsed"] .ed-rail-l > .rail-head,
body[data-left="collapsed"] .ed-rail-l > #transcript-panel,
body[data-left="collapsed"] .ed-rail-l > .editor-tool-context { display: none; }
body[data-left="collapsed"] .ed-rail-l > .rail-expand { display: flex; }
body[data-right="collapsed"] .ed-rail-r > .rail-head,
body[data-right="collapsed"] .ed-rail-r > .ed-rail-scroll { display: none; }
body[data-right="collapsed"] .ed-rail-r > .rail-expand { display: flex; }

/* Left rail holds the transcript panel; it fills the rail below the head. */
.ed-rail-l > #transcript-panel { flex: 1 1 auto; min-height: 0; border-radius: 0; border: none; box-shadow: none; }
/* Right rail: inspector + cuts scroll together inside the rail. */
.ed-rail-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); }

/* The left rail switches between Transcript and the active work-area panel. */
.editor-tool-context { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--stage-0); }
.ed-rail-l[data-editor-surface="tool"] > #editor-transcript-head,
.ed-rail-l[data-editor-surface="tool"] > #transcript-panel,
.ed-rail-l[data-editor-surface="transcript"] > .editor-tool-context { display: none !important; }
.editor-context-head {
  display: flex; align-items: center; gap: var(--s-2); flex: none;
  min-height: 48px; padding: var(--s-2) var(--s-3);
  background: var(--stage-1); border-bottom: 1px solid var(--line);
}
.editor-context-heading { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 1px; }
.editor-context-kicker { color: var(--ink-faint); font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: .13em; text-transform: uppercase; }
#left-tool-title { overflow: hidden; color: var(--ink); font-size: var(--text-base); line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.editor-tool-context-scroll {
  flex: 1 1 auto; width: 100%; max-width: 100%; min-height: 0;
  box-sizing: border-box; overflow-x: hidden; overflow-y: auto;
  padding: var(--s-3); scrollbar-width: thin; overscroll-behavior: contain;
}

/* ── Center stage: big letterboxed monitor + transport ─────────────────────── */
.ed-stage { min-width: 0; min-height: 0; background: var(--stage-0); overflow: hidden; }
.ed-preview { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 0; }
.pv-monitor { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; background: #000; padding: var(--s-3); }

/* ── Bottom dock ───────────────────────────────────────────────────────────── */
.ed-dock { display: flex; flex-direction: column; min-height: 0; background: var(--stage-0); overflow: hidden; }
/* The canvas sets its own content height (ruler + lanes + scene strip) inline;
   the wrap fills the dock row and scrolls if the lanes are taller than the dock. */
.ed-dock .ed-timeline-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--s-2) var(--s-3) 0; }
.dock-toolbar { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3) var(--s-2); flex: none; flex-wrap: wrap; }
.dock-toolbar .ed-help { margin: 0; flex: 1 1 auto; }
.dock-toolbar button { padding: 2px 11px; margin: 0; }

/* ── Drawers (Notes / Render) — slide in from the right over the workspace ──── */
/* The scrim is a full-viewport click-catcher (a click on it closes the drawer).
   It is deliberately NOT blurred and only whisper-dark: when a drawer is open the
   user is very often editing the Render/Section-boxes controls while WATCHING the
   live preview monitor change — a blurred/frosted stage defeated the whole
   WYSIWYG point. The drawer's own solid surface + shadow-pop convey modality; the
   scrim just needs to be clickable, so the monitor behind it stays crisp. */
.ed-scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,0.12);
}
.ed-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41;
  width: min(460px, 92vw);
  background: var(--stage-1); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column; overflow: hidden;
}
.ed-drawer-head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line);
  flex: none;
}
.ed-drawer-head h2 { margin: 0; flex: 1 1 auto; font-size: var(--text-lg); letter-spacing: -0.01em; }
.ed-drawer-close {
  display: inline-grid; width: 34px; min-width: 34px; height: 34px; min-height: 34px;
  place-items: center; padding: 0; margin: 0; border-radius: 50%; font-size: var(--text-base); line-height: 1;
}
.ed-drawer > .notes-panel,
.ed-drawer > .summary-panel { overflow-y: auto; flex: 1 1 auto; min-height: 0; max-width: none; }
/* The Highlights drawer body scrolls as a whole (its clip list can be long). */
.ed-drawer > .intro-panel { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding: 0 var(--s-4) var(--s-4); }
/* The Render drawer is now a SINGLE scroll container — bg + rail + render sections
   stack inside .ed-drawer-scroll and the whole thing scrolls, so nothing is stranded
   below the fold (the old layout only scrolled .render-panel). */
.ed-drawer-scroll { overflow-y: auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ed-drawer-scroll > .render-panel { margin: 0; border: none; border-radius: 0; box-shadow: none; max-width: none; overflow: visible; }

/* Global tools live in the Studio-like LEFT context rail. `openDrawer()` moves the
   existing panel node into this host, preserving every panel's ids and event wiring;
   the scene Inspector remains independently useful on the right. */
.inspector-tool-host { min-width: 0; width: 100%; max-width: 100%; }
.inspector-tool-host[hidden] { display: none; }
.ed-rail-l .ed-drawer {
  position: static; inset: auto; z-index: auto;
  width: 100%; min-width: 0; max-width: 100%; min-height: 0; box-sizing: border-box;
  background: transparent; border: 0; box-shadow: none;
  overflow: visible; display: flex; flex-direction: column;
}
.ed-rail-l .ed-drawer-head { display: none; }
.inspector-tool-close {
  display: inline-grid; flex: none; width: 30px; min-width: 30px; height: 30px;
  place-items: center; padding: 0; margin: 0; border-radius: 50%; line-height: 1;
}
.ed-rail-l .ed-drawer-scroll,
.ed-rail-l .ed-drawer > .notes-panel,
.ed-rail-l .ed-drawer > .summary-panel,
.ed-rail-l .ed-drawer > .intro-panel,
.ed-rail-l .ed-drawer > .chapter-panel {
  flex: none; width: 100%; min-width: 0; max-width: 100%; min-height: 0;
  box-sizing: border-box; overflow: visible;
}
.ed-rail-l .ed-drawer > .chapter-panel { padding: var(--s-2) 0 0; }
.ed-rail-l .ed-drawer > .intro-panel { padding: 0; }
.ed-rail-l .ed-drawer-sections .ed-drawer-scroll,
.ed-rail-l .ed-drawer-theme .ed-drawer-scroll { padding: 0; }
.ed-drawer-screen-shares .ed-drawer-scroll { padding: var(--s-3); }
.screen-share-panel { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.ssp-intro p, .ssp-help { margin: 0; color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.45; }
.ssp-empty { padding: var(--s-4); border: 1px dashed var(--line); border-radius: var(--r-card); color: var(--ink-muted); }
.ssp-card, .ssp-add { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--stage-2); box-shadow: var(--shadow-card); }
.ssp-card.is-attention { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-card); }
.ssp-now {
  display: flex; align-items: center; gap: var(--s-2); padding: 7px 8px;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--stage-1);
}
.ssp-now.is-on { border-color: rgba(53,208,127,.5); background: color-mix(in srgb, #35d07f 7%, var(--stage-1)); }
.ssp-now-copy { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 1px; }
body.editor button.ssp-now-toggle { flex: none; min-height: 32px; margin: 0; padding: 4px 9px; font-size: var(--text-xs); }
.ssp-scene {
  display: flex; align-items: center; gap: var(--s-2); padding: 7px 8px;
  border: 1px dashed var(--line); border-radius: var(--r-card); background: var(--stage-1);
}
.ssp-scene.is-on { border-color: var(--accent-line); background: var(--accent-soft); }
body.editor button.ssp-scene-toggle { flex: none; min-height: 32px; margin: 0; padding: 4px 9px; font-size: var(--text-xs); }
.ssp-head { display: flex; align-items: flex-start; gap: var(--s-2); }
.ssp-title { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 2px; }
.ssp-title strong, .ssp-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssp-sub { color: var(--ink-muted); font-size: var(--text-xs); }
.ssp-status { flex: none; padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-muted); font-size: 11px; }
.ssp-status.is-on { border-color: rgba(53,208,127,.5); color: #35d07f; background: rgba(53,208,127,.09); }
.ssp-facts { display: grid; gap: 4px; color: var(--ink-muted); font-size: var(--text-xs); }
.ssp-warning { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2); border: 1px solid rgba(255,154,85,.45); border-radius: var(--r-card); background: rgba(255,154,85,.08); color: #ffb27d; font-size: var(--text-xs); }
.ssp-warning span { flex: 1 1 auto; }
.ssp-warning button { flex: none; margin: 0; }
.ssp-ranges { display: flex; flex-direction: column; gap: 4px; }
.ssp-range { display: flex; gap: var(--s-2); }
.ssp-range .ssp-jump { flex: 1 1 auto; text-align: left; }
.ssp-range button { margin: 0; padding: 5px 8px; }
.ssp-range-editor { display: grid; grid-template-columns: 1fr minmax(64px, 82px) auto minmax(64px, 82px); align-items: center; gap: 6px; }
.ssp-range-label { color: var(--ink-muted); font-size: var(--text-xs); }
.ssp-time, .ssp-wide { min-width: 0; width: 100%; box-sizing: border-box; }
.ssp-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ssp-actions button { flex: 1 1 auto; margin: 0; }
.ssp-actions .ssp-remove { flex-basis: 100%; color: var(--danger, #ff8075); }
.ssp-add h3 { margin: 0; font-size: var(--text-base); }
.ssp-file { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: var(--s-2); color: var(--ink-muted); font-size: var(--text-xs); }
.ssp-detector { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2); border: 1px solid rgba(102,217,255,.28); border-radius: var(--r-card); background: rgba(102,217,255,.045); }
.ssp-detector-head { display: flex; align-items: flex-start; gap: var(--s-2); }
.ssp-detector-head .ssp-title { flex: 1 1 auto; }
.ssp-sensitivity { flex: 0 0 auto; width: auto; max-width: 132px; margin: 0; padding: 5px 26px 5px 7px; font-size: var(--text-xs); }
.ssp-scan-status { min-height: 1.3em; color: #8edfff; font-size: var(--text-xs); }
.ssp-scan-note { padding: 6px 8px; border: 1px solid rgba(255,194,102,.35); border-radius: var(--r-card); background: rgba(255,194,102,.07); color: #ffd39a; font-size: var(--text-xs); line-height: 1.4; }
.ssp-view-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s-2); }
.ssp-view-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--stage-1); }
.ssp-view-preview { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--stage-0); color: #66d9ff; font-size: var(--text-xl); font-weight: 800; }
.ssp-view-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ssp-view-body { display: flex; flex-direction: column; gap: 5px; padding: var(--s-2); min-width: 0; }
.ssp-view-label { box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 5px 7px; font-size: var(--text-sm); font-weight: 650; }
.ssp-view-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.ssp-view-actions button { min-width: 0; margin: 0; padding: 4px 3px; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.ssp-clips { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }
.ssp-clips-head, .ssp-clip-title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.ssp-clip-list { display: flex; flex-direction: column; gap: 6px; }
.ssp-clip { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--s-2); padding: 6px; border: 1px solid rgba(53,208,127,.35); border-radius: var(--r-card); background: var(--stage-1); }
.ssp-clip.is-disabled { border-style: dashed; border-color: var(--line); opacity: .72; }
.ssp-clip-preview { display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; align-self: start; border-radius: 5px; background: var(--stage-0); color: #66d9ff; }
.ssp-clip-preview img { width: 100%; height: 100%; object-fit: cover; }
.ssp-clip-body { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.ssp-clip-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssp-clip-timing { display: grid; grid-template-columns: auto minmax(52px, 1fr) auto minmax(52px, 1fr); align-items: center; gap: 4px; color: var(--ink-muted); font-size: 10px; }
.ssp-clip-timing input { margin: 0; padding: 4px 5px; font-size: 11px; }
.ssp-clip-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ssp-clip-actions .ssp-cut { color: var(--danger, #ff8075); }
@media (max-width: 560px) {
  .ssp-detector-head { flex-direction: column; }
  .ssp-sensitivity { width: 100%; max-width: none; }
  .ssp-view-list { grid-template-columns: 1fr; }
}

/* ── Studio-style work-area rail ─────────────────────────────────────────────
   The recording screen established the app's clearest navigation language: one
   narrow, icon-first rail and one contextual panel beside it. The editor now uses
   that same language while retaining its transcript/stage/inspector/timeline grid. */
.editor-tool-rail { display: none; }
body[data-screen="editor"] .editor-tool-rail {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  position: fixed; left: 0; top: var(--ed-header-h); bottom: 0; z-index: 32;
  width: var(--editor-rail-w); box-sizing: border-box;
  padding: 7px 6px 14px;
  overflow-x: hidden; overflow-y: auto; scrollbar-width: thin;
  background: var(--stage-1); border-right: 1px solid var(--line);
}
body.editor .editor-rail-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 54px; width: 100%; margin: 0; padding: 6px 3px;
  color: var(--ink-dim); background: transparent; border: 1px solid transparent;
  border-radius: var(--r-btn); box-shadow: none; cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
body.editor .editor-rail-item:hover { color: var(--ink); background: var(--stage-2); border-color: var(--line); }
body.editor .editor-rail-item.is-active {
  color: var(--ink); background: var(--accent-soft); border-color: var(--accent-line);
  box-shadow: inset 3px 0 0 var(--accent);
}
body.editor .editor-rail-item.is-expanded { position: relative; margin-top: 7px; }
body.editor .editor-rail-item.is-expanded::before {
  content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 1px;
  background: var(--line-strong); pointer-events: none;
}
.editor-rail-icon { display: grid; place-items: center; min-height: 20px; font-size: 20px; line-height: 1; }
.editor-rail-icon-wide { font-size: 11px; font-weight: 900; letter-spacing: -.04em; }
.editor-rail-label { font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: -.01em; }
#editor-rail-finish { margin-top: auto; }
.editor-rail-subtools {
  position: relative; display: flex; flex: none; flex-direction: column; align-items: stretch; gap: 2px;
  min-width: 0; margin: 0 0 6px 7px; padding: 2px 0 9px 5px;
  border-left: 1px solid var(--line);
}
.editor-rail-subtools[hidden], .editor-rail-subtools > [hidden] { display: none !important; }
.editor-rail-subtools::after {
  content: ""; position: absolute; left: -12px; right: 0; bottom: 0; height: 1px;
  background: var(--line-strong); pointer-events: none;
}
body.editor .editor-rail-subtools .editor-subtool-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; width: 100%; min-height: 36px; margin: 0; padding: 4px 1px;
  overflow: hidden; color: var(--ink-dim); background: transparent; border: 1px solid transparent;
  border-radius: var(--r-btn); box-shadow: none; font-size: var(--text-xs); text-align: center;
}
body.editor .editor-rail-subtools .editor-subtool-btn:hover {
  color: var(--ink); background: var(--stage-2); border-color: var(--line);
}
.editor-rail-subtools .editor-subtool-btn .hb-ico {
  flex: none; min-width: 0; color: var(--ink-faint); font-size: 13px; line-height: 1; text-align: center;
}
.editor-rail-subtools .editor-subtool-btn .hb-lbl {
  min-width: 0; max-width: 100%; overflow: hidden; font-size: 9px; font-weight: 700;
  line-height: 1; text-overflow: ellipsis; white-space: nowrap;
}
body.editor .editor-rail-subtools .editor-subtool-btn.is-active {
  color: var(--ink); background: var(--accent-soft); border-color: var(--accent-line);
}
body.editor .editor-rail-subtools .editor-subtool-btn.is-active .hb-ico { color: var(--accent); }

/* Flat grouped rail. The category labels are signposts, not another navigation
   layer; all of the real action buttons stay mounted and clickable at once. */
.editor-rail-group {
  display: flex; flex: none; min-width: 0; flex-direction: column; gap: 2px;
  margin: 0; padding: 4px 0 6px; border: 0;
}
.editor-rail-group-title {
  display: flex; align-items: center; gap: 6px;
  margin: 0; padding: 0 6px 2px; color: var(--ink-faint);
  font-size: 9px; font-weight: 850; line-height: 1; letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap;
}
.editor-rail-group-title::after {
  content: ""; height: 1px; min-width: 10px; flex: 1 1 auto;
  background: var(--line); opacity: .9;
}
.editor-rail-group.is-active > .editor-rail-group-title,
.editor-rail-group:has([data-active="true"]) > .editor-rail-group-title { color: var(--accent); }
.editor-rail-group-items,
.editor-rail-action-slot { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
#editor-subtool-bar { display: none !important; }
body.editor .editor-tool-rail .editor-subtool-btn {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 5px;
  width: 100%; min-width: 0; min-height: 34px; margin: 0; padding: 5px 6px;
  overflow: hidden; color: var(--ink-dim); background: transparent;
  border: 1px solid transparent; border-radius: var(--r-btn); box-shadow: none;
  font-size: var(--text-xs); text-align: left;
}
body.editor .editor-tool-rail .editor-subtool-btn[hidden] { display: none !important; }
body.editor .editor-tool-rail .editor-subtool-btn:hover {
  color: var(--ink); background: var(--stage-2); border-color: var(--line);
}
body.editor .editor-tool-rail .editor-subtool-btn.is-active {
  color: var(--ink); background: var(--accent-soft); border-color: var(--accent-line);
  box-shadow: inset 3px 0 0 var(--accent);
}
.editor-tool-rail .editor-subtool-btn .hb-ico {
  display: grid; place-items: center; width: 22px; min-width: 22px; max-width: 22px;
  overflow: hidden; color: var(--ink-faint);
  font-size: 14px; font-weight: 850; line-height: 1;
}
.editor-tool-rail #shorts-btn .hb-ico {
  box-sizing: border-box; padding: 0 1px; font-size: 9px;
  font-variant-numeric: tabular-nums; letter-spacing: -.06em; white-space: nowrap;
}
.editor-tool-rail .editor-subtool-btn .hb-lbl {
  display: -webkit-box; min-width: 0; overflow: hidden; color: inherit;
  font-size: 10px; font-weight: 750; line-height: 1.12; overflow-wrap: anywhere;
  white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.editor-tool-rail .editor-subtool-btn.is-active .hb-ico { color: var(--accent); }
#editor-rail-finish { margin-top: auto; }
@media (min-width: 900px) and (max-height: 920px) {
  body[data-screen="editor"] .editor-tool-rail { padding-top: 4px; padding-bottom: 2px; }
  .editor-rail-group { padding-top: 2px; padding-bottom: 2px; gap: 1px; }
  .editor-rail-group-title { padding-bottom: 1px; font-size: 8px; }
  body.editor .editor-tool-rail .editor-subtool-btn { min-height: 30px; padding-top: 3px; padding-bottom: 3px; }
}
.ed-rail-l .render-panel { margin-top: var(--s-2); padding: var(--s-3); }
body[data-inspector-tool] .ed-scrim { display: none !important; }
/* Section boxes drawer — its OWN slide-in (mirrors Highlights). The rail card gets
   side/bottom breathing room and the whole body scrolls on overflow (the style
   controls are long). The card carries its own border/shadow, so no extra chrome. */
.ed-drawer-sections .ed-drawer-scroll { padding: 0 var(--s-4) var(--s-4); }
.ed-drawer-sections .ed-drawer-scroll > .rail-panel { flex: none; min-width: 0; }
.ed-drawer-sections .rail-section { margin-top: var(--s-3); }

/* ── Theme drawer — presets + component swaps + layout transform (its OWN drawer) ── */
.ed-drawer-theme .ed-drawer-scroll { padding: 0 var(--s-4) var(--s-4); }
.ed-drawer-theme .ed-drawer-scroll > .theme-panel { flex: none; min-width: 0; }
/* The Header (banners) panel is a sibling mount in the same drawer, so it needs the
   same "don't stretch, don't force a min-width" treatment. Its own look is self-injected
   `.bp-*` CSS inside banner-panel.js — this file only owns the drawer slot. */
.ed-drawer-theme .ed-drawer-scroll > .banner-panel { flex: none; min-width: 0; }
.tp { display: flex; flex-direction: column; gap: var(--s-4); padding-top: var(--s-3); }
.tp.is-disabled { opacity: .5; pointer-events: none; }
.tp-sec { display: flex; flex-direction: column; gap: var(--s-2); }
.tp-sec-head { display: flex; align-items: center; gap: var(--s-2); }
.tp-sec-head .tp-h { flex: 1 1 auto; }
.tp-h { margin: 0; color: var(--ink); font-size: var(--text-base); font-weight: 700; letter-spacing: -0.01em; }
.tp-sub { margin: 0; }
.tp-reset { padding: 2px 11px; margin: 0; font-size: var(--text-xs); }
.tp-reset:disabled { opacity: .5; }
/* Preset cards — the headline choice. Big, tappable, ember-accented when active. */
.tp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.tp-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: var(--s-3); margin: 0; border: 1px solid var(--line); border-radius: var(--r-tile);
  background: var(--stage-0); color: var(--ink); cursor: pointer; position: relative;
  transition: border-color .12s, background .12s;
}
.tp-card:hover { border-color: var(--accent-line); }
.tp-card.is-active { border-color: var(--accent); background: var(--accent-soft); }
.tp-card-title { font-weight: 700; font-size: var(--text-sm); }
.tp-card-blurb { font-size: var(--text-xs); color: var(--ink-dim); line-height: 1.3; }
.tp-card-chip {
  position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 700;
  color: var(--accent); text-transform: uppercase; letter-spacing: .04em; display: none;
}
.tp-card.is-active .tp-card-chip { display: block; }
/* When no theme is applied yet (old EDL), dim the preset chips (nothing selected). */
.tp.tp-no-theme .tp-card { opacity: .96; }
/* Component + slider rows */
.tp-rows { display: flex; flex-direction: column; gap: var(--s-2); }
.tp-row { display: grid; grid-template-columns: 7em 1fr auto; align-items: center; gap: var(--s-2); }
.tp-row-lab { color: var(--ink-dim); font-size: var(--text-sm); }
/* "This filter, at one moment" — the two playhead actions under Stage effects. A plain
   flex strip rather than .tp-row, whose 7em label column would crush the first button. */
.tp-at-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block: var(--s-2); }
.tp-at-btn { flex: 1 1 auto; min-height: 44px; white-space: nowrap; }
.tp-at-btn[disabled] { opacity: .5; cursor: default; }
.tp-select { width: 100%; margin: 0; padding: 3px 8px; font-size: var(--text-sm); }
.tp-mark { font-size: 10px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .03em; min-width: 3.2em; text-align: right; }
.tp-mark.is-on { color: var(--accent); font-weight: 700; }
.tp-slider-row .tp-slider { width: 100%; accent-color: var(--accent); margin: 0; }
.tp-readout { font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--ink); min-width: 3.4em; text-align: right; }
/* Legacy backgrounds — collapsed, quiet; the theme is the default surface now. */
.tp-legacy { margin-top: var(--s-3); border-top: 1px solid var(--line); padding-top: var(--s-2); }
.tp-legacy > summary { cursor: pointer; color: var(--ink-dim); font-size: var(--text-sm); padding: var(--s-1) 0; }
.tp-legacy[open] > summary { color: var(--ink); }
.tp-legacy:not([open]) > #bg-panel { display: none; }
.ed-drawer-theme .tp-legacy > .bg-panel { padding: var(--s-2) 0 0; }
.tp-legacy-notice { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border: 1px solid rgba(255,154,85,.45); border-radius: var(--r-card); background: rgba(255,154,85,.08); }
.tp-legacy-notice[hidden] { display: none; }
.tp-legacy-copy { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 3px; }
.tp-legacy-copy strong { color: #ffb27d; }
.tp-legacy-notice button { flex: none; margin: 0; }
/* This card lives in a ~290px work rail. Its action must sit below the explanation;
   side-by-side layout left the heading only one word-fragment wide. */
.ed-rail-l .tp-legacy-notice { align-items: stretch; flex-direction: column; }
.ed-rail-l .tp-legacy-copy { width: 100%; overflow-wrap: anywhere; }
.ed-rail-l .tp-legacy-notice button { width: 100%; white-space: normal; }

/* ── Responsive: narrow two-rail (900–1200) and stacked (<900) ─────────────── */
/* 900–1200px: keep the three regions in-grid but narrow the rails so the monitor
   stays usable. The transcript can still be collapsed to its 36px spine via the
   chevron or the toolbar's #rail-l-toggle (both flip body[data-left]). This keeps
   the collapse mechanism identical to ≥1200 — no separate overlay state. */
@media (min-width: 900px) and (max-width: 1200px) {
  body.editor { --rail-l: 300px; --rail-r-base: 270px; --rail-r: var(--rail-r-base); }
  .ed-rail-toggle { display: inline-flex; }
}
@media (min-width: 1200px) {
  /* the transcript toolbar toggle is redundant with the chevron at full width */
  .ed-rail-toggle { display: none; }
}

/* ── Height-responsive tiers (short 1080p / 900p displays) ──────────────────────
   The monitor letterboxes on the SHORT axis, so on a short viewport the fixed
   vertical chrome (header + toolbar + transport + a 210px dock) crushes the stage
   HEIGHT, and the 16:9 lock then crushes its WIDTH — the preview goes tiny even
   though there's plenty of horizontal room. These tiers reclaim vertical space by
   slimming the dock + trimming header/toolbar/transport/monitor padding as the
   viewport gets shorter, so the letterbox grows back toward the full width. Scoped
   to the desktop grid (≥900px) so the <900 stacked layout is untouched. The dock
   still scrolls internally (.ed-timeline-wrap overflow:auto) when the lanes exceed
   the slimmer row, so the timeline stays fully usable. */
@media (min-width: 900px) and (max-height: 1100px) {
  /* Gentle first step — catches 1080p-tall displays (but NOT a 4K panel, whose
     ~2160px height stays on the roomy base chrome, so the 4K layout is untouched).
     Reclaims ~28px of stage height so the height-bound letterbox clears ~60% width. */
  body[data-screen="editor"] { --dock-h: 190px; }
  body[data-screen="editor"] .pv-monitor { padding: var(--s-2); }
}
@media (min-width: 900px) and (max-height: 900px) {
  body[data-screen="editor"] { --dock-h: 170px; --toolbar-h: 40px; }
  body[data-screen="editor"] .ed-header { padding-top: var(--s-1); padding-bottom: var(--s-1); }
  body[data-screen="editor"] .ed-toolbar { padding-top: 2px; padding-bottom: 2px; }
  body[data-screen="editor"] .pv-monitor { padding: var(--s-2); }
  body[data-screen="editor"] .pv-transport { padding-top: var(--s-1); padding-bottom: var(--s-1); }
}
@media (min-width: 900px) and (max-height: 760px) {
  body[data-screen="editor"] { --dock-h: 140px; --rail-l: 290px; --rail-r-base: 260px; --rail-r: var(--rail-r-base); --toolbar-h: 36px; }
  body[data-screen="editor"] .pv-monitor { padding: 0; }
  body[data-screen="editor"] .ed-dock .ed-timeline-wrap { padding-top: var(--s-1); }
}

@media (min-width: 900px) and (orientation: landscape) and (pointer: coarse) {
  /* A touch toolbar wraps to several 44px rows on short landscape screens. Give
     those rows a bounded dock, then keep vertical scrolling as the escape hatch
     when several Recorded FX owners/camera groups add still more controls. */
  body[data-screen="editor"] { --dock-h: min(55vh, 220px); }
  body[data-screen="editor"] .ed-dock {
    overflow-x: hidden; overflow-y: auto;
    overscroll-behavior: contain; scrollbar-width: thin;
  }
}

/* ── Monitor maximize (⛶ on the transport) ──────────────────────────────────────
   body[data-max="1"] is toggled by monitor-max.js. It collapses BOTH rails (reusing
   the data-left/data-right="collapsed" grid spines) and slims the dock so the
   letterboxed monitor takes nearly the whole workspace. A second click restores the
   exact prior rail-collapse state (stored by the module). */
body[data-screen="editor"][data-max="1"] { --dock-h: 120px; }

/* <900px: stacked. Monitor first, then transcript + inspector as collapsibles,
   timeline last. The grid becomes a simple flow column. */
@media (max-width: 899px) {
  body[data-screen="editor"] #editor-screen { margin-left: 0; padding-bottom: 86px; }
  body[data-screen="editor"] .build-stamp { bottom: 90px; }
  body[data-screen="editor"] .editor-tool-rail {
    top: auto; right: 0; bottom: 0; width: auto; height: 82px;
    flex-direction: row; align-items: stretch; gap: 0;
    padding: 4px 6px 5px; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    border-top: 1px solid var(--line); border-right: 0;
    box-shadow: 0 -12px 28px rgba(0,0,0,.28);
  }
  body.editor .editor-rail-item { flex: 0 0 60px; min-height: 52px; padding: 5px 3px; }
  body.editor .editor-rail-item.is-expanded { margin-top: 0; }
  body.editor .editor-rail-item.is-expanded::before {
    left: -3px; right: auto; top: 4px; bottom: 4px; width: 1px; height: auto;
  }
  .editor-rail-subtools {
    flex-direction: row; align-items: stretch; gap: 2px; height: 100%;
    margin: 0 3px 0 0; padding: 0 8px 0 2px; border-left: 0;
  }
  .editor-rail-subtools::after { left: auto; right: 0; top: 4px; bottom: 4px; width: 1px; height: auto; }
  body.editor .editor-rail-subtools .editor-subtool-btn {
    flex: 0 0 58px; width: 58px; min-height: 52px; padding: 4px 2px;
  }
  .editor-rail-group {
    flex: none; flex-direction: column; gap: 1px; margin: 0; padding: 0 7px 0 6px;
    border: 0; border-right: 1px solid var(--line);
  }
  .editor-rail-group:last-of-type { border-right: 0; }
  .editor-rail-group-title {
    display: flex; flex: none; min-height: 12px; margin: 0; padding: 0 2px 2px;
    font-size: 8px; line-height: 12px; white-space: nowrap;
  }
  .editor-rail-group-title::after { display: none; }
  .editor-rail-group-items,
  .editor-rail-action-slot { flex-direction: row; gap: 2px; }
  body.editor .editor-tool-rail .editor-subtool-btn {
    display: flex; flex: 0 0 68px; width: 68px; min-height: 56px;
    flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 4px 3px; text-align: center;
  }
  .editor-tool-rail .editor-subtool-btn .hb-ico { width: 30px; min-width: 30px; max-width: 30px; min-height: 18px; font-size: 15px; }
  .editor-tool-rail #shorts-btn .hb-ico { font-size: 9px; }
  .editor-tool-rail .editor-subtool-btn .hb-lbl {
    width: 100%; max-width: 100%; font-size: 9px; line-height: 1.05; text-align: center;
  }
  #editor-rail-finish { margin-top: 0; }
  .ed-workspace {
    display: flex; flex-direction: column;
    height: auto; overflow: visible; gap: var(--s-3);
    background: transparent; padding: var(--s-3);
  }
  .ed-stage { order: 1; }
  .ed-dock { order: 2; }
  .ed-rail-l { order: 3; }
  .ed-rail-r { order: 4; }
  .pv-monitor { padding: 0; }
  /* No max-height cap here — the monitor letterboxes to its 16:9 aspect-ratio at
     full stacked width. The old `.pv-stage { max-height: 42vh }` starved the
     preview; the aspect-ratio box (and the container-query letterbox at ≥900px)
     size it correctly on their own. */
  .ed-rail, .ed-dock, .ed-stage { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
  .ed-rail-l > #transcript-panel { border: none; }
  .tp-scroller { min-height: 240px; max-height: 50vh; }
  .ed-dock { min-height: 260px; }
  .ed-dock .ed-timeline-wrap { overflow-x: auto; }
  /* collapsed rails don't apply the spine treatment when stacked */
  body[data-left="collapsed"] .ed-rail-l > .rail-head,
  body[data-left="collapsed"] .ed-rail-l > #transcript-panel,
  body[data-left="collapsed"] .ed-rail-l > .editor-tool-context,
  body[data-right="collapsed"] .ed-rail-r > .rail-head,
  body[data-right="collapsed"] .ed-rail-r > .ed-rail-scroll { display: revert; }
  body[data-left="collapsed"] .ed-rail-l > .rail-expand,
  body[data-right="collapsed"] .ed-rail-r > .rail-expand { display: none; }
  .ed-rail-toggle { display: none; }
  .ed-drawer { width: 100vw; }
}

/* ── Transcript panel ──────────────────────────────────────────────────────── */
.ed-transcript {
  background: var(--stage-2); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; overflow: hidden;
}
.ed-transcript:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent-line); }
.tp-bar {
  display: flex; align-items: center; gap: 5px; flex-wrap: nowrap;
  min-width: 0; padding: 6px 8px;
  border-bottom: 1px solid var(--line); background: var(--stage-1);
}
.tp-search {
  flex: 1 1 auto; width: auto; height: 32px; min-width: 76px; margin: 0; padding: 5px 8px;
  font-size: var(--text-sm); line-height: 1;
}
.tp-search-info {
  flex: none; max-width: 52px; overflow: hidden; color: var(--ink-faint);
  font-size: 10px; line-height: 1; text-overflow: ellipsis; white-space: nowrap;
}
/* The old always-visible instruction sentence consumed a complete toolbar row.
   Keep it available to assistive technology while the search placeholder and
   selected-action labels make the resting toolbar self-explanatory. */
.tp-hint {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* '✂ Cut selection' affordance in the transcript header — Ember-styled, appears only
   when words are selected. Cuts the selection via the same path as Delete. */
.tp-cut {
  display: inline-flex; align-items: center; gap: var(--s-1); flex: none;
  min-height: 30px; margin: 0; padding: 4px 8px;
  background: var(--grad-ember); color: var(--on-accent); border: none;
  border-radius: var(--r-sm); font-weight: 700; font-size: var(--text-xs);
  line-height: 1.2; cursor: pointer; box-shadow: var(--shadow-card);
}
.tp-cut:hover { filter: brightness(1.08); }
.tp-cut:active { filter: brightness(0.96); }
.tp-cut-ico { font-size: var(--text-sm); line-height: 1; }
.tp-short {
  display: inline-flex; align-items: center; gap: var(--s-1); flex: none;
  min-height: 30px; margin: 0; padding: 4px 8px;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--r-sm); font-weight: 700; font-size: var(--text-xs);
  line-height: 1.2; cursor: pointer;
}
.tp-short:hover { background: color-mix(in srgb, var(--accent-soft) 72%, var(--stage-2)); }
.tp-short:active { filter: brightness(0.96); }
.tp-short-ico { font-size: var(--text-sm); line-height: 1; transform: rotate(90deg); }
/* Scroller fills the rail below the search bar (was a fixed 62vh; the rail now
   owns the height). clientHeight-driven virtualization is unaffected. */
.tp-scroller { position: relative; flex: 1 1 auto; min-height: 200px; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; }
.tp-sizer { position: relative; width: 100%; }
.tp-block {
  position: absolute; left: 0; right: 0;
  display: grid; grid-template-columns: 70px minmax(0, 1fr); column-gap: 8px;
  align-items: start; box-sizing: border-box; padding: 4px 8px 5px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 58%, transparent);
}
.tp-turn-head {
  display: grid; grid-template-columns: 5px minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 5px; align-items: center; min-width: 0; padding: 2px 0;
}
.tp-chip {
  grid-row: 1 / 3; width: 5px; height: 26px; border-radius: var(--r-chip);
  box-shadow: 0 0 0 1px var(--stage-1);
}
.tp-speaker {
  min-width: 0; overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 800;
  line-height: 1.15; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap;
}
body.editor button.tp-ts {
  position: relative; justify-self: start; min-width: 0; min-height: 0; margin: 0; padding: 0;
  color: var(--ink-faint); background: transparent; border: 0; border-radius: 3px;
  box-shadow: none; font-size: 10px; font-variant-numeric: tabular-nums; line-height: 1.2;
}
body.editor button.tp-ts::before { content: ''; position: absolute; inset: -5px -6px; }
body.editor button.tp-ts:hover { color: var(--accent); background: transparent; }
.tp-para {
  grid-column: 2; min-width: 0; color: var(--ink); font-size: var(--text-sm); line-height: 1.42;
}
.tp-block-continuation .tp-para { grid-column: 2; }
.tw {
  cursor: pointer; border-radius: 3px; padding: 0 1px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background var(--dur-fast) var(--ease);
}
.tw:hover { background: var(--accent-soft); }
.tw-filler { text-decoration: underline dotted var(--accent-line); text-underline-offset: 3px; }
.tw-cut { text-decoration: line-through; color: var(--ink-faint); opacity: 0.75; }
.tw-cut:hover { color: var(--ink); background: var(--accent-soft); }
.tw-sel { background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
.tw-now { background: var(--grad-ember); color: var(--on-accent); }
.tw-match { outline: 2px solid var(--accent); outline-offset: 1px; }
.tp-empty { padding: var(--s-5); color: var(--ink-dim); }
.tp-empty h3 { margin: 0 0 var(--s-2); color: var(--ink); }
/* What the missing transcript costs — stated, not discovered by clicking. */
.tp-empty-cost {
  margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); font-size: var(--text-sm);
  border-left: 3px solid var(--warn, var(--accent)); border-radius: var(--radius-sm, 4px);
  background: var(--surface-2, transparent);
}

@media (max-width: 430px) {
  .tp-block { grid-template-columns: 58px minmax(0, 1fr); column-gap: 6px; padding-inline: 7px; }
  .tp-speaker { font-size: 10px; }
  .tp-para { font-size: 13px; line-height: 1.5; }
  .tp-cut-lbl, .tp-short-lbl { font-size: 11px; }
}

@media (max-width: 430px), (pointer: coarse) {
  .tp-search, .tp-cut, .tp-short { min-height: 44px; }
  .tp-cut, .tp-short { min-width: 44px; justify-content: center; }
  body.editor button.tp-ts::before { inset: -15px -10px; }
  .tp-para { line-height: 1.62; }
}

/* ── Cuts drawer ───────────────────────────────────────────────────────────── */
.cuts-drawer {
  background: var(--stage-2); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s-3); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.cuts-head { display: flex; align-items: baseline; gap: var(--s-2); }
.cuts-head h3 { margin: 0; color: var(--ink); }
.cuts-summary { color: var(--ink-dim); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.cuts-tools { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.cuts-toggle { display: flex; align-items: center; gap: var(--s-1); color: var(--ink-dim); font-size: var(--text-sm); margin: 0; }
.cuts-toggle input { margin: 0; accent-color: var(--accent); }
.cut-list { display: flex; flex-direction: column; gap: var(--s-1); max-height: 40vh; overflow-y: auto; }
.cut-empty { color: var(--ink-faint); font-size: var(--text-sm); margin: 0; }
.cut-chip {
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--stage-1); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: var(--s-1) var(--s-2);
  transition: border-color var(--dur) var(--ease);
}
.cut-chip:hover { border-color: var(--line-strong); }
.cut-src {
  font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--r-chip); flex: none;
  border: 1px solid var(--line); color: var(--ink-dim); font-weight: 700;
}
.cut-src.src-user, .cut-src.src-transcript { color: var(--on-accent); background: var(--grad-ember); border-color: transparent; }
.cut-mid { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.cut-label { color: var(--ink); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cut-dur { color: var(--ink-faint); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.cut-jump { padding: 3px 9px; margin: 0; font-size: var(--text-xs); }
.cut-del { padding: 2px 9px; margin: 0; font-size: var(--text-base); line-height: 1; }
.cuts-foot { display: flex; justify-content: flex-start; }

/* ── Notes tab ─────────────────────────────────────────────────────────────── */
.notes-panel { padding: var(--s-5); max-width: 820px; margin: 0 auto; }
.notes-savebar { display: flex; justify-content: flex-end; margin-bottom: var(--s-4); }
.notes-body { display: flex; flex-direction: column; gap: var(--s-4); }
.notes-sec {
  background: var(--stage-2); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s-4); box-shadow: var(--shadow-card);
}
.notes-sec-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.notes-sec-head h3 { margin: 0; color: var(--ink); flex: 1 1 auto; letter-spacing: -0.01em; }
.notes-sec-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none; border-radius: var(--r-sm);
  background: var(--accent-soft); color: var(--accent);
  font-size: var(--text-base); line-height: 1;
}
.copy-btn { padding: 3px 11px; margin: 0; font-size: var(--text-xs); }
.copy-btn.is-copied { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
.notes-ta { width: 100%; margin: 0; resize: vertical; font-family: inherit; }
.notes-summary-preview { margin: 0; color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.5; white-space: pre-wrap; }
.notes-bullet-preview { margin: 0; padding-left: 1.25rem; color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.5; }
.notes-manage-summary { flex: none; margin: 0; padding: 3px 8px; font-size: var(--text-xs); }

/* ── Local Summary workspace ───────────────────────────────────────────── */
.summary-panel { display: flex; flex-direction: column; gap: var(--s-3); padding: 0; }
.summary-topbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.summary-local-badge {
  flex: 1 1 auto; min-width: max-content; color: var(--ok); font-size: var(--text-xs); font-weight: 800;
}
body.editor button.summary-generate,
body.editor button.summary-compact-btn,
body.editor button.summary-save,
body.editor button.summary-time,
body.editor button.summary-icon-btn { min-height: 30px; margin: 0; padding: 4px 9px; font-size: var(--text-xs); }
.summary-status { min-height: 1.4em; margin: 0; }
.summary-progress-card {
  position: relative; isolation: isolate; display: grid; min-width: 0; gap: 10px;
  padding: 14px; overflow: hidden; box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--line)); border-radius: var(--r-control);
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--accent) 19%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--stage-3) 84%, #08111d), color-mix(in srgb, var(--stage-1) 94%, #05070d));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 10px 30px rgba(0,0,0,.22);
}
.summary-progress-card::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .17;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 25%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 25%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(90deg, #000, transparent 76%);
}
.summary-progress-telemetry,
.summary-progress-copy,
.summary-progress-meta { display: flex; min-width: 0; align-items: center; gap: 8px; }
.summary-progress-telemetry { justify-content: space-between; }
.summary-progress-eyebrow {
  display: inline-flex; min-width: 0; align-items: center; gap: 7px;
  color: color-mix(in srgb, var(--accent) 74%, #b9edff); font: 800 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .13em;
}
.summary-progress-signal {
  width: 7px; height: 7px; flex: none; border-radius: 50%; background: #6bf5d0;
  box-shadow: 0 0 0 3px rgba(107,245,208,.11), 0 0 13px rgba(107,245,208,.8);
  animation: summary-signal-pulse 1.45s ease-in-out infinite;
}
.summary-progress-percent {
  color: var(--ink); font: 850 14px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.summary-progress-copy { align-items: baseline; flex-wrap: wrap; }
.summary-progress-headline { min-width: 0; color: var(--ink); font-size: var(--text-sm); line-height: 1.3; overflow-wrap: anywhere; }
.summary-progress-part {
  flex: none; color: var(--accent); font: 800 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .03em; text-transform: uppercase;
}
.summary-progress-track {
  position: relative; height: 9px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 15px, rgba(255,255,255,.012) 15px 18px);
}
.summary-progress-fill {
  position: absolute; inset: 0 auto 0 0; width: var(--summary-progress, 0%); min-width: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 78%, #6bf5d0), var(--accent), #ffd36b);
  box-shadow: 0 0 15px color-mix(in srgb, var(--accent) 72%, transparent);
  transition: width 360ms var(--ease-out);
}
.summary-progress-fill::after {
  content: ""; position: absolute; inset: 0; opacity: .7;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  transform: translateX(-100%); animation: summary-progress-scan 1.8s ease-in-out infinite;
}
.summary-progress-card.is-indeterminate .summary-progress-fill { animation: summary-progress-indeterminate 1.55s ease-in-out infinite; }
.summary-progress-meta { flex-wrap: wrap; gap: 6px; }
.summary-progress-chip {
  display: inline-flex; min-width: 0; min-height: 23px; align-items: center; box-sizing: border-box;
  padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--line) 82%, transparent); border-radius: 3px;
  background: color-mix(in srgb, var(--stage-0) 58%, transparent); color: var(--ink-dim);
  font: 700 9px/1.25 ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.summary-progress-model { color: color-mix(in srgb, var(--accent) 72%, var(--ink)); border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); }
@keyframes summary-signal-pulse { 50% { opacity: .46; transform: scale(.78); } }
@keyframes summary-progress-scan { 55%, 100% { transform: translateX(130%); } }
@keyframes summary-progress-indeterminate { 0%, 100% { left: 0; width: 22%; } 50% { left: 58%; width: 42%; } }
@media (prefers-reduced-motion: reduce) {
  .summary-progress-signal,
  .summary-progress-fill,
  .summary-progress-fill::after { animation: none !important; transition: none !important; }
}
.summary-stale { padding: var(--s-2) var(--s-3); border: 1px solid rgba(255,154,85,.45); border-radius: var(--r-control); background: rgba(255,154,85,.08); color: #ffb27d; font-size: var(--text-xs); line-height: 1.4; }
.summary-empty,
.summary-card { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--stage-2); box-shadow: var(--shadow-card); }
.summary-empty h3,
.summary-card h3 { margin: 0; font-size: var(--text-base); }
.summary-empty p { margin: 0; }
.summary-row,
.summary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.summary-actions { position: sticky; bottom: 0; z-index: 2; padding: var(--s-2); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--stage-1) 94%, transparent); }
.summary-actions .summary-save { margin-left: auto; }
.summary-textarea {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 72px; margin: 0;
  resize: vertical; overflow-x: hidden; overflow-y: hidden; field-sizing: content;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
  font-family: inherit; font-size: var(--text-sm); line-height: 1.5;
}
.summary-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.summary-card-kicker {
  flex: none; color: color-mix(in srgb, var(--accent) 72%, var(--ink));
  font: 800 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em;
}
.summary-key-points-card {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 6%, var(--stage-2)), var(--stage-2) 46%);
}
.summary-key-point-help { margin: 0; }
.summary-key-point-list { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; list-style: none; counter-reset: summary-point; }
.summary-key-point {
  counter-increment: summary-point; position: relative; display: grid; gap: var(--s-2); min-width: 0;
  padding: 10px 10px 10px 38px; border: 1px solid var(--line); border-radius: 4px;
  background: color-mix(in srgb, var(--stage-1) 86%, transparent);
}
.summary-key-point::before {
  content: counter(summary-point, decimal-leading-zero); position: absolute; left: 10px; top: 13px;
  color: var(--accent); font: 800 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.summary-key-point-text {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 54px; margin: 0; padding: 7px 9px;
  resize: none; overflow: hidden; field-sizing: content; white-space: pre-wrap; overflow-wrap: anywhere;
  border-color: transparent; background: transparent; font: 650 var(--text-sm)/1.45 inherit;
}
.summary-key-point-text:focus { border-color: var(--accent-line); background: var(--stage-0); }
.summary-key-point-tools {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; min-width: 0;
}
.summary-key-point-label-wrap { display: grid; flex: 1 1 140px; gap: 3px; min-width: 120px; }
.summary-field-label { color: var(--ink-faint); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.summary-key-point-label { box-sizing: border-box; width: 100%; min-width: 0; min-height: 32px; margin: 0; padding: 5px 8px; font-size: var(--text-xs); font-weight: 750; }
body.editor button.summary-key-point-time,
body.editor button.summary-point-action { min-height: 32px; margin: 0; padding: 5px 8px; font-size: var(--text-xs); white-space: nowrap; }
body.editor button.summary-key-point-time { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
body.editor button.summary-point-action { border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); }
body.editor button.summary-point-action[data-added="true"] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); }
.summary-topic { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }
.summary-topic:first-of-type { padding-top: 0; border-top: 0; }
.summary-topic-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start; gap: var(--s-2); min-width: 0;
}
.summary-topic-title {
  box-sizing: border-box; display: block; width: 100%; min-width: 0; min-height: 38px;
  max-height: none; margin: 0; padding: 7px 9px; resize: none; overflow: hidden;
  field-sizing: content; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: inherit; font-size: var(--text-sm); font-weight: 750; line-height: 1.35;
}
body.editor button.summary-time { flex: none; font-variant-numeric: tabular-nums; }
body.editor button.summary-icon-btn { width: 30px; padding: 2px; font-size: var(--text-base); }
.summary-topic-points { min-height: 72px; }
.ed-rail-l .summary-panel { padding: 0; }
.notes-chapters { display: flex; flex-direction: column; gap: var(--s-2); }
.notes-chapter { display: flex; align-items: center; gap: var(--s-2); }
.ch-time {
  padding: 3px 9px; margin: 0; font-size: var(--text-xs); font-variant-numeric: tabular-nums;
  flex: none; background: var(--stage-3); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-chip);
}
.ch-time:hover { border-color: var(--accent-line); color: var(--accent); }
.ch-title { flex: 1 1 auto; margin: 0; }

/* ── Timeline ──────────────────────────────────────────────────────────────── */
.ed-timeline-wrap { padding: var(--s-4); }
.ed-timeline {
  display: block; width: 100%;
  background: var(--stage-1);
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  cursor: crosshair; outline: none;
  touch-action: none;            /* we own pan/zoom/select via Pointer Events; block native gestures */
}
.ed-timeline:focus { border-color: var(--accent-line); box-shadow: var(--shadow-card), 0 0 0 1px var(--accent-line); }
.timeline-callout-targets {
  position: absolute; z-index: 11; overflow: visible; pointer-events: none;
}
body.editor button.timeline-callout-target {
  position: absolute; min-width: 0; min-height: 0; margin: 0; padding: 0;
  pointer-events: none; color: transparent; background: transparent;
  border: 0; border-radius: 4px; box-shadow: none;
}
body.editor button.timeline-callout-target:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: 0 0 0 2px var(--stage-0), 0 0 0 4px var(--accent-line);
}
.timeline-callout-tooltip {
  position: fixed; z-index: 1000; max-width: min(360px, calc(100vw - 16px));
  padding: 6px 9px; pointer-events: none;
  color: var(--ink); background: var(--stage-3); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); box-shadow: var(--shadow-pop);
  font-size: var(--text-xs); line-height: 1.35;
}
.timeline-callout-tooltip[hidden] { display: none; }
.timeline-scene-thumbnail-targets {
  position: absolute; z-index: 10; overflow: visible; pointer-events: none;
}
body.editor button.timeline-scene-thumbnail-target {
  position: absolute; top: 0; min-width: 0; min-height: 0; margin: 0; padding: 0;
  pointer-events: none; color: transparent; background: transparent;
  border: 0; border-radius: 3px; box-shadow: none;
}
body.editor button.timeline-scene-thumbnail-target:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -3px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: 0 0 0 2px var(--stage-0), 0 0 0 4px var(--accent-line);
}
.timeline-scene-thumbnail-tooltip {
  position: fixed; z-index: 1001; width: min(336px, calc(100vw - 16px));
  max-height: calc(100vh - 16px); aspect-ratio: 16 / 9; overflow: hidden; pointer-events: none;
  padding: 4px; box-sizing: border-box;
  color: var(--ink); background: var(--stage-3); border: 1px solid var(--line-strong);
  border-radius: var(--r-card); box-shadow: var(--shadow-pop);
}
.timeline-scene-thumbnail-tooltip[hidden] { display: none; }
.timeline-scene-thumbnail-tooltip canvas {
  display: block; width: 100%; height: 100%; object-fit: contain;
  background: var(--stage-0); border-radius: calc(var(--r-card) - 3px);
}
.timeline-scene-thumbnail-tooltip[data-status="loading"]::after {
  content: 'Preparing scene preview...'; position: absolute; inset: 0;
  display: grid; place-items: center; padding: var(--s-3);
  color: var(--ink-dim); background: color-mix(in srgb, var(--stage-3) 88%, transparent);
  font-size: var(--text-xs); text-align: center;
}
.timeline-scene-thumbnail-tooltip[data-status="unavailable"]::after {
  content: 'Scene preview unavailable'; position: absolute; inset: 0;
  display: grid; place-items: center; padding: var(--s-3);
  color: var(--ink-dim); background: var(--stage-3);
  font-size: var(--text-xs); text-align: center;
}
.ed-help { color: var(--ink-faint); font-size: var(--text-xs); margin: var(--s-2) 0 0; }

/* ── Dock edit-control cluster (relocated beside the scrubber) ──────────────────
   Split / Merge / Cut / Restore, mounted in the bottom dock toolbar by editor.js.
   Layout geometry has one uniform picker in the Layout inspector. Compact +
   Ember-styled; wraps rather than overflowing. The
   `.dock-toolbar <selector>` specificity beats the generic `.dock-toolbar button`
   padding rule above so these read tighter. */
.dock-tools { display: inline-flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.dock-toolbar .dock-tool {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; margin: 0; font-size: var(--text-xs); line-height: 1;
}
.dock-toolbar .dock-tool:disabled { opacity: .4; cursor: default; }
.dock-tool-glyph { font-size: var(--text-sm); line-height: 1; }
.dock-tool-label { font-weight: 700; }
.dock-sep { width: 1px; align-self: stretch; min-height: 20px; background: var(--line); margin: 0 var(--s-1); flex: none; }
.dock-frames { display:inline-flex; align-items:center; gap:2px; flex-wrap:wrap; }
.dock-mini-label { color:var(--ink-faint); font-size:var(--text-xs); margin-right:2px; }
.dock-toolbar .dock-ly {
  min-width: 26px; padding: 3px 8px; margin: 0;
  font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.dock-toolbar .dock-ly:disabled { opacity: .4; cursor: default; }
.dock-toolbar .dock-ly.is-active { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.dock-camera-fx { gap: 4px; }
.dock-camera-fx-who { max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-toolbar .dock-camera-fx-choice {
  min-height: 44px; min-width: 112px; padding: 8px 12px;
  border-radius: var(--r-sm); line-height: 1.15;
}
.dock-toolbar .dock-camera-fx-choice:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* Cut button reflects a live timeline range selection (ember tint). */
.dock-toolbar .dock-tool.has-selection { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
/* Cut-to-start / cut-to-end: glyph-only (⇤✂ / ✂⇥), kept compact + tight. */
.dock-toolbar .dock-edgecut .dock-tool-glyph { letter-spacing: -1px; }
.dock-toolbar .dock-start-trim {
  border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent);
}
.dock-toolbar .dock-start-trim[hidden] { display: none; }
.dock-toolbar .dock-start-trim .dock-tool-label { font-variant-numeric: tabular-nums; }

/* People-count stepper in the dock: [−] [count] [+]. Mirrors the .dock-ly chips. */
.dock-people { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.dock-toolbar .dock-people-btn {
  min-width: 24px; padding: 3px 8px; margin: 0;
  font-size: var(--text-sm); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dock-toolbar .dock-people-btn:disabled { opacity: .4; cursor: default; }
.dock-people-count {
  min-width: 20px; padding: 0 4px; text-align: center;
  font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.dock-people.is-empty .dock-people-count { color: var(--ink-dim); }

/* ── Timeline right-click menu (Cut selection / Clear / Split here) ─────────────
   A small floating menu the orchestrator opens on canvas right-click. position:fixed
   at the pointer, closed on outside-click / blur / after a choice. */
.tl-menu {
  position: fixed; z-index: 60; min-width: 178px;
  background: var(--stage-2); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow-card); padding: 4px; display: flex; flex-direction: column;
}
.tl-menu-item {
  display: block; width: 100%; text-align: left; margin: 0;
  background: none; border: 0; padding: 6px 10px; border-radius: 6px;
  color: var(--ink); font-size: var(--text-xs); line-height: 1.2; cursor: pointer;
}
.tl-menu-item:hover, .tl-menu-item:focus { background: var(--accent-soft); outline: none; }
.tl-menu-danger { color: var(--accent); font-weight: 700; }
.tl-menu-sep { height: 1px; background: var(--line); margin: 4px 2px; }

/* Row legend — always breaks to its own line under the controls (flex-basis:100%),
   so the segmented speaking bars / scene strip / cold-open band are self-explanatory. */
.dock-legend { flex-basis: 100%; display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-1); }
.dock-legend-item { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--ink-dim); font-size: var(--text-xs); }
.dl-swatch { width: 14px; height: 10px; border-radius: 2px; flex: none; border: 1px solid var(--line); }
/* Seat-0 hue, matching the lanes. The lane is no longer a SOLID bar: it draws the track's
   real amplitude envelope (see the waveform block in timeline.js), mirrored about a quiet
   centre line. So the swatch is that shape in miniature — a 6px comb of columns centred on
   a 1px baseline — rather than a filled block, or the legend would describe the old lane.
   Two gradients, no asset, and the border survives (a mask would fade it). */
.dl-speaking {
  background:
    repeating-linear-gradient(90deg, hsl(32 70% 50%) 0 1px, transparent 1px 3px) center / 100% 6px no-repeat,
    linear-gradient(hsl(32 70% 50%) 0 0) center / 100% 1px no-repeat;
}
.dl-callouts { background: color-mix(in srgb, #f2b13a 30%, transparent); border-color: #f2b13a; }
.dl-sections {
  background: linear-gradient(90deg, transparent 43%, #a78bfa 43% 57%, transparent 57%);
  border-color: color-mix(in srgb, #a78bfa 75%, var(--line));
}
.dl-scenes { background: var(--stage-2); }
.dl-comingup { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent-line); }

/* ── Editor columns (legacy 2-col — kept for any consumer) ──────────────────── */
.ed-cols {
  display: grid; grid-template-columns: 1fr 340px; gap: var(--s-4);
  padding: 0 var(--s-4) var(--s-5);
  align-items: start;
}
@media (max-width: 900px) { .ed-cols { grid-template-columns: 1fr; } }

/* ── Preview MONITOR + TRANSPORT ────────────────────────────────────────────── */
/* NOTE: tile geometry (position/left/top/width/height/display) is set inline by
   preview.js — CSS here only dresses the chrome, never the tile math. The stage
   letterboxes on the short axis inside the .pv-monitor grid (place-items:center):
   it keeps a true 16:9 and grows to the available height, black bars fill the rest. */
.pv-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%; height: auto;
  max-height: 100%; max-width: 100%;
  margin: auto;
  background: #000;
  border: 1px solid var(--line); border-radius: var(--r-tile); overflow: hidden;
  box-shadow: var(--shadow-tile);
}
.pv-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* THEME composite overlays — drawn slot frames (canvas) over the tiles, and the VP9
   header loop at the top. Both are pointer-transparent so the tile-transform chrome
   still receives pointerdown on the tiles beneath. DOM order (frames → header →
   intro → rail/chrome) gives the correct paint stacking without z-index juggling. */
.pv-frames { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pv-header { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; object-fit: fill; }

/* Transport bar — sits directly under the monitor. Icon-first, grouped with
   hairline dividers; drives preview.js's transport engine. */
/* ONE horizontal, non-wrapping row: scene ⏮ · frame ⟨ · PLAY/PAUSE (largest,
   center) · frame ⟩ · scene ⏭ · loop … time (pushed right). J/K/L shuttle is
   keyboard-only, so those buttons no longer exist. */
.pv-transport {
  display: flex; align-items: center; gap: var(--s-1); flex-wrap: nowrap;
  padding: var(--s-2) var(--s-3);
  background: var(--stage-1); border-top: 1px solid var(--line);
  flex: none;
}
.pv-tbtn {
  padding: 4px 10px; margin: 0; min-width: 34px; flex: none;
  font-size: var(--text-sm); line-height: 1.1;
}
/* PLAY/PAUSE — the largest, central transport control. */
.pv-play { min-width: 48px; padding: 6px 14px; font-size: var(--text-lg); }
.pv-tbtn.is-playing, .pv-tbtn.is-on {
  background: var(--grad-ember); color: var(--on-accent); border-color: transparent;
}
/* Monitor maximize toggle — injected into the transport bar (far right, after the
   time readout) by monitor-max.js. Reuses .pv-tbtn; lights ember when engaged so
   the maximized state reads at a glance (mirrors aria-pressed). */
.pv-max { flex: none; }
.pv-max[aria-pressed="true"] {
  background: var(--grad-ember); color: var(--on-accent); border-color: transparent;
}
.pv-time {
  margin-left: auto; flex: none;
  font-variant-numeric: tabular-nums; color: var(--ink);
  font-size: var(--text-sm); font-weight: 600; padding: 0 var(--s-2);
}
.pv-transport[data-rate]:not([data-rate=""]) .pv-time::after {
  content: " ·×" attr(data-rate); color: var(--accent); font-weight: 700;
}
/* Preview AUDIO controls — mute toggle + a compact volume slider, grouped with the
   transport. The mute button reuses .pv-tbtn; updateMuteBtn() flips its glyph to a
   struck speaker (🔇) when muted/silent and adds .is-blocked (ember) when the browser's
   autoplay policy refuses un-muted sound (press Play again to grant). */
.pv-mute.is-blocked {
  background: var(--grad-ember); color: var(--on-accent); border-color: transparent;
}
.pv-mute.is-muted { opacity: 0.72; }
.pv-vol {
  flex: none; width: 76px; margin: 0 0 0 2px; padding: 0;
  accent-color: var(--accent); cursor: pointer; vertical-align: middle;
}
/* Folder line — ONE compact single row at the very bottom of the stage:
   "📁 <folder> · mapped N/M tracks · [Change]". Small text; the status truncates,
   the Change button is a small ghost that never shrinks. */
.pv-bar {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: nowrap;
  padding: var(--s-1) var(--s-3); flex: none; border-top: 1px solid var(--line);
}
.pv-status {
  flex: 1 1 auto; min-width: 0; color: var(--ink-dim); font-size: var(--text-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv-change { flex: none; padding: 2px 10px; margin: 0; font-size: var(--text-xs); }

/* Unified Stage-source roster. The compact Stage · N trigger sits in the status line
   directly under the monitor; its popover opens upward into the stage so it remains
   reachable even when both Inspector rails are collapsed. It changes only the current
   scene (or the right half split at the playhead), never deletes source media. */
.stage-source-mount { position: relative; flex: 0 1 auto; min-width: 0; max-width: 58%; overflow: hidden; }
.stage-source-control { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
body.editor button.stage-source-trigger {
  display: inline-flex; align-items: center; gap: 5px; min-height: 28px;
  margin: 0; padding: 3px 9px; white-space: nowrap; font-size: var(--text-xs);
  border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink);
}
.stage-source-trigger:hover,
.stage-source-trigger[aria-expanded="true"] { border-color: var(--accent-line); color: var(--accent); }
.stage-source-trigger-icon { font-size: 15px; line-height: 1; }
.stage-source-trigger-count {
  display: inline-grid; min-width: 18px; height: 18px; padding: 0 4px; place-items: center;
  border-radius: var(--r-chip); background: var(--accent-soft); color: var(--accent);
  font-size: 10px; font-weight: 850; font-variant-numeric: tabular-nums;
}
.stage-source-quick-strip {
  display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 4px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
  padding: 1px 2px 2px; white-space: nowrap;
}
.stage-source-quick-strip[hidden] { display: none !important; }
body.editor button.stage-source-quick {
  display: inline-grid; grid-template-columns: auto minmax(0, auto); align-items: center; gap: 5px;
  flex: 0 0 auto; min-width: 0; max-width: 150px; min-height: 28px;
  margin: 0; padding: 3px 7px; border-color: var(--line); background: var(--stage-2);
  box-shadow: none; font-size: 10px;
}
body.editor button.stage-source-quick.is-on {
  border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink);
}
body.editor button.stage-source-quick:disabled { opacity: .5; cursor: not-allowed; }
.stage-source-quick-dot {
  padding: 1px 4px; border-radius: var(--r-chip); background: var(--stage-3);
  color: var(--ink-dim); font-size: 8px; font-weight: 850; text-transform: uppercase;
}
.stage-source-quick.is-on .stage-source-quick-dot { background: var(--accent); color: var(--on-accent); }
.stage-source-quick-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-source-popover {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 90;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(340px, calc(100vw - 24px)); max-height: min(58vh, 500px);
  overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-card);
  background: var(--stage-1); color: var(--ink); box-shadow: 0 18px 52px rgba(0,0,0,.52);
}
.stage-source-popover[hidden] { display: none !important; }
.stage-source-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 7px;
  padding: 9px 10px; border-bottom: 1px solid var(--line); background: var(--stage-2);
}
.stage-source-title { font-size: var(--text-sm); }
.stage-source-scope {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-dim); font-size: 10px;
}
body.editor button.stage-source-close { min-width: 26px; min-height: 26px; margin: 0; padding: 0; border-radius: 50%; }
.stage-source-list {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 7px;
  scrollbar-gutter: stable;
}
.stage-source-group + .stage-source-group { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }
.stage-source-group-title {
  margin: 0 0 4px; color: var(--ink-dim); font-size: 9px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
}
body.editor button.stage-source-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 7px;
  width: 100%; min-height: 38px; margin: 2px 0; padding: 5px 8px; text-align: left;
  border-color: transparent; background: transparent; box-shadow: none;
}
body.editor button.stage-source-row:hover { background: var(--stage-2); border-color: var(--line); }
body.editor button.stage-source-row.is-on { border-color: var(--accent-line); background: var(--accent-soft); }
body.editor button.stage-source-row:disabled { opacity: .55; cursor: not-allowed; }
.stage-source-kind {
  display: grid; width: 22px; height: 22px; place-items: center; border-radius: 7px;
  background: var(--stage-3); color: var(--ink-dim); font-size: 12px; font-weight: 900;
}
.stage-source-row.is-on .stage-source-kind { background: var(--accent); color: var(--on-accent); }
.stage-source-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.stage-source-state { color: var(--ink-dim); font-size: 10px; white-space: nowrap; }
.stage-source-row.is-on .stage-source-state { color: var(--accent); }
.stage-source-row:not(.is-on):disabled .stage-source-state { color: var(--danger); }
body.editor button.stage-source-scene-toggle {
  min-height: 25px; margin: 1px 0 5px 31px; padding: 2px 7px;
  border-style: dashed; font-size: 10px; box-shadow: none;
}
body.editor button.stage-source-scene-toggle.is-on { border-color: var(--accent-line); color: var(--accent); }
.stage-source-cameras {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 2px 0 6px 31px;
}
.stage-source-camera-label { margin-right: 2px; color: var(--ink-dim); font-size: 9px; text-transform: uppercase; }
body.editor button.stage-source-camera {
  min-height: 26px; margin: 0; padding: 2px 7px; font-size: 10px; box-shadow: none;
}
body.editor button.stage-source-camera.is-active { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.stage-source-empty { margin: 4px; color: var(--ink-dim); font-size: var(--text-xs); line-height: 1.4; }
.stage-source-foot {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 7px; border-top: 1px solid var(--line); background: var(--stage-2);
}
body.editor button.stage-source-add { min-height: 30px; margin: 0; padding: 4px 8px; font-size: 10px; }
body.editor button.stage-source-add:last-child { margin-left: auto; }
@media (max-width: 520px) {
  .stage-source-trigger-text { display: none; }
  .stage-source-popover { width: calc(100vw - 18px); max-height: min(64vh, 520px); }
  .stage-source-scope { max-width: 140px; }
}
@media (max-width: 899px) {
  .stage-source-mount { max-width: 72%; }
  /* The mobile editor is a stacked document and .ed-stage intentionally clips its
     children. Lift the roster to the viewport so it cannot be cut off by a short
     monitor; leave the 64px work-area rail visible below it. */
  .stage-source-popover {
    position: fixed; left: 9px; right: 9px; bottom: 74px;
    width: auto; max-height: calc(100dvh - 88px); z-index: 100;
  }
}
@media (max-width: 899px), (pointer: coarse) {
  body.editor button.stage-source-trigger,
  body.editor button.stage-source-close,
  body.editor button.stage-source-row,
  body.editor button.stage-source-quick,
  body.editor button.stage-source-scene-toggle,
  body.editor button.stage-source-camera,
  body.editor button.stage-source-add,
  body.editor button.ssp-scene-toggle { min-height: 44px; }
  body.editor button.stage-source-close { min-width: 44px; }
}
.pv-tiles { position: absolute; inset: 0; }
.pv-finger-frame,
.pv-face-fx {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 15;
  pointer-events: none; background: transparent;
}
.pv-finger-frame[hidden],
.pv-face-fx[hidden] { display: none; }
.pv-tile {
  position: absolute; overflow: hidden; background: #000;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);
}
/* The inner <video> is absolutely positioned so preview.js can offset/scale it from
   the crop rect (cropBox). Defaults (no crop) = full tile + object-fit:cover. */
.pv-tile video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
/* Water.css constrains every video/image to max-width:100%. That silently clamps the
   >100% inner box produced by cropBox(), squeezing the source into the trimmed tile
   instead of clipping it. Tile overflow already owns the crop, so its direct media must
   be allowed to extend beyond the tile on either axis. */
.pv-tile > video,
.pv-tile > img { max-width: none; max-height: none; }
.pv-name {
  position: absolute; left: 8px; bottom: 8px;
  color: #fff; font-size: var(--text-sm); font-weight: 600;
  padding: 3px 10px; border-radius: var(--r-chip);
  background: rgba(0,0,0,0.5); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* AUDIO-ONLY member: the identity card canvas covers the whole tile. It is painted at
   EXPORT pixels and scaled down by this rule, so the monitor is a scaled photograph of
   the MP4 frame rather than a lookalike drawn at preview size. The <video> underneath
   keeps decoding — it is the person's whole VOICE and the transport drives it like any
   other master. The name span is suppressed in JS (the card carries the name, centred),
   matching the live stage and render.mjs's video-less name-tag skip. */
.pv-videoless-card {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; max-width: none; max-height: none;
}
.pv-videoless-card[hidden] { display: none; }
/* Screen-share tile (kind:'screen'): NO name tag (rule below) + NO theme slot frame
   (preview.js drawSlotFrames skips it) — the shared WYSIWYG screen rule, matched in
   tools/render.mjs. A subtle inset border + shadow so a corner PiP reads as an inset
   window; object-fit stays cover (16:9 hero → no content loss). */
.pv-tile-screen .pv-name { display: none; }
.pv-tile-screen {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 3px 12px rgba(0,0,0,0.5);
  border-radius: 6px;
}
.pv-tile-screen video, .pv-tile-screen img { object-fit: cover; }

/* ── Render panel ──────────────────────────────────────────────────────────── */
.render-panel {
  margin-top: var(--s-4);
  background: var(--stage-2); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s-4); box-shadow: var(--shadow-card);
}
.render-panel h3 { margin-top: 0; color: var(--ink); }

/* ── Inspector ─────────────────────────────────────────────────────────────── */
/* The inspector is a plain flex column. VERTICAL SCROLL is owned by the RIGHT RAIL's
   `.ed-rail-scroll` (overflow-y:auto + min-height:0, bounded by the workspace grid
   row) — the inspector + cuts scroll together there, so every section stays reachable
   however tall the content gets. We deliberately do NOT put overflow on the inspector
   itself (that would nest a second scrollbar inside the rail's). min-width:0 + the
   wrap guards below keep the column INSIDE the rail so number grids / long labels no
   longer run off the right edge and get clipped by the rail's overflow:hidden. */
.ed-inspector {
  display: flex; flex-direction: column; gap: var(--s-3);
  min-width: 0; max-width: 100%;
}
.ed-inspector, .ed-inspector * { min-width: 0; }
/* Long, unbreakable strings (folder names, refs) wrap instead of forcing width. */
.ed-inspector .insp-title, .ed-inspector .insp-bg-val,
.ed-inspector .people-name, .ed-inspector .slot-who,
.ed-inspector select, .ed-inspector option { overflow-wrap: anywhere; }

/* Conversation Data inspector. Local VAD-derived speaker share + topic breakdown. */
.data-panel { min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.data-intro { display: flex; flex-direction: column; gap: var(--s-2); }
.data-title { margin: 0; font-size: var(--text-lg); }
.data-hint, .data-person-meta, .data-no-topics { margin: 0; }
.data-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.data-total {
  min-width: 0; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--stage-1); display: flex; flex-direction: column; gap: 2px;
}
.data-total-value { color: var(--ink); font-size: var(--text-base); font-weight: 800; font-variant-numeric: tabular-nums; }
.data-total-label { color: var(--ink-faint); font-size: var(--text-xs); }
.data-people { display: flex; flex-direction: column; gap: var(--s-3); }
.data-person {
  min-width: 0; padding: var(--s-3); border: 1px solid var(--line); border-left: 3px solid var(--data-person);
  border-radius: var(--r-card); background: var(--stage-1); box-shadow: var(--shadow-card);
}
.data-person-head { display: flex; align-items: baseline; gap: var(--s-2); }
.data-person-name { min-width: 0; flex: 1 1 auto; margin: 0; overflow-wrap: anywhere; font-size: var(--text-base); }
.data-person-amount { flex: none; color: var(--ink-dim); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.data-share, .data-topic-bar { display: block; overflow: hidden; background: var(--stage-3); border-radius: 999px; }
.data-share { height: 7px; margin: var(--s-2) 0 var(--s-1); }
.data-share-fill, .data-topic-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--data-person); }
.data-topic-title { margin: var(--s-3) 0 var(--s-1); color: var(--ink-dim); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; }
.data-topic-list { display: flex; flex-direction: column; gap: var(--s-1); }
button.data-topic {
  width: 100%; min-width: 0; margin: 0; padding: var(--s-2); display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: 3px var(--s-2); text-align: left;
}
.data-topic-name { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.data-topic-time { color: var(--ink-dim); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.data-topic-bar { grid-column: 1 / -1; height: 3px; }
.data-no-topics { margin-top: var(--s-2); }

/* Collapsible inspector sections (<details>): the long single tab is now a stack of
   expand/collapse groups (Layout, People, Tile layout, Trim, Auto-edit params) whose
   open/closed state is remembered for the session. Ember-styled, hairline-ringed. */
.insp-group {
  display: block; margin: 0; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--stage-1); overflow: hidden;
}
/* Water.css gives open <details> extra padding and summary margins with a more
   specific selector. Cancel those defaults here or the open editor section loses
   ~40px of rail width and recreates the tall, vertically wrapped buttons. */
.insp-group[open] { margin: 0; padding: 0; }
.insp-group[open] > .insp-group-sum { margin-bottom: 0; }
.insp-group-sum {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  font-weight: 700; color: var(--ink); font-size: var(--text-sm);
}
.insp-group-sum::-webkit-details-marker { display: none; }
.insp-group-sum::before {
  content: "\25B8"; flex: none; color: var(--ink-faint); font-size: var(--text-xs);
  transition: transform var(--dur) var(--ease);
}
.insp-group[open] > .insp-group-sum::before { transform: rotate(90deg); color: var(--accent); }
.insp-group-sum:hover { background: var(--stage-2); }
.insp-group-sum:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.insp-group-title { flex: 1 1 auto; letter-spacing: -0.01em; }
.insp-group-count { flex: none; color: var(--ink-faint); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.insp-group-body {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-2); border-top: 1px solid var(--line);
}

/* Scene container is now a plain column (its sub-sections carry their own chrome). */
.insp-scene {
  display: flex; flex-direction: column; gap: var(--s-2);
}
.insp-selection-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-3); border: 1px solid var(--accent-line); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent-soft) 38%, var(--stage-1));
  box-shadow: inset 3px 0 0 var(--accent);
}
.insp-selection-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.insp-selection-heading { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.insp-selection-title { color: var(--ink); font-size: var(--text-base); line-height: 1.15; }
.insp-selection-duration {
  flex: none; padding: 3px 7px; border: 1px solid var(--accent-line); border-radius: var(--r-chip);
  color: var(--accent); background: var(--stage-1); font-size: var(--text-xs); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.insp-selection-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.insp-selection-field { display: flex; min-width: 0; flex-direction: column; gap: 3px; color: var(--ink-dim); font-size: 10px; font-weight: 750; }
body.editor input.insp-selection-time {
  width: 100%; min-width: 0; height: 34px; box-sizing: border-box; margin: 0; padding: 5px 7px;
  color: var(--ink); background: var(--stage-2); font-size: var(--text-sm); font-variant-numeric: tabular-nums;
}
body.editor input.insp-selection-time[aria-invalid="true"] { border-color: var(--danger, #ff5f67); }
.insp-selection-status { min-height: 1.25em; margin: -2px 0 0; color: var(--ink-faint); font-size: 10px; line-height: 1.35; }
.insp-selection-status.is-error { color: var(--danger, #ff7b82); }
.insp-selection-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
body.editor .insp-selection-actions button { min-width: 0; margin: 0; padding-inline: 5px; }
body.editor .insp-selection-actions .editor-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insp-context-card,
.insp-quick-layouts,
.insp-tile-workspace {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--stage-1);
}
.insp-tile-workspace {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--stage-1));
}
.insp-context-top,
.insp-context-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
}
.insp-context-time { display: flex; flex-direction: column; gap: 1px; }
.insp-context-kicker,
.insp-context-label,
.insp-advanced-label {
  color: var(--ink-faint); font-size: 9px; font-weight: 850;
  letter-spacing: .08em; text-transform: uppercase;
}
.insp-context-clock {
  color: var(--ink); font-size: var(--text-lg); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.insp-context-scene { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.insp-context-scene-title { color: var(--ink); font-size: var(--text-xs); font-weight: 800; }
.insp-context-scene-range,
.insp-context-count,
.insp-tile-workspace-meta { color: var(--ink-faint); font-size: 10px; font-variant-numeric: tabular-nums; }
.insp-context-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--s-2);
  padding-top: var(--s-2); border-top: 1px solid var(--line);
}
.insp-context-layout > .insp-context-label { grid-column: 1 / -1; }
.insp-context-layout-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insp-context-layout .insp-src { margin-left: 0; }
.insp-context-empty { margin: 0; color: var(--ink-dim); font-size: var(--text-xs); line-height: 1.45; }
.insp-context-tile-hint {
  margin: 0; color: var(--ink-faint); font-size: 10px; line-height: 1.35;
}
.insp-context-sources { display: flex; flex-direction: column; gap: var(--s-1); }
.insp-source-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.insp-source-chip,
body.editor button.insp-source-add {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0; min-height: 28px;
  margin: 0; padding: 3px 7px; border: 1px solid var(--line); border-radius: var(--r-chip);
  background: var(--stage-2); color: var(--ink); font-size: 10px;
}
.insp-source-chip.is-screen { border-color: var(--accent-line); }
.insp-source-num {
  display: inline-grid; flex: none; width: 18px; height: 18px; place-items: center;
  border-radius: 6px; background: var(--stage-3); color: var(--ink-dim); font-size: 9px; font-weight: 900;
}
.insp-source-chip.is-screen .insp-source-num { background: var(--accent-soft); color: var(--accent); }
.insp-source-name { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.editor button.insp-source-add { border-style: dashed; color: var(--accent); box-shadow: none; }
.insp-source-add-icon { font-size: 14px; font-weight: 900; line-height: 1; }
.insp-quick-layout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
body.editor button.insp-layout-choice {
  display: grid; grid-template-rows: 30px auto; align-items: center; gap: 3px;
  min-height: 52px; margin: 0; padding: 4px; overflow: hidden;
  border-color: var(--line); background: var(--stage-2); box-shadow: none;
}
body.editor button.insp-layout-choice:hover { border-color: var(--accent-line); }
body.editor button.insp-layout-choice.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.insp-layout-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); line-height: 1.15; }
.insp-layout-choice .layout-choice-preview { display: block; width: 100%; max-width: 72px; margin-inline: auto; }
.insp-layout-choice .layout-choice-preview-frame {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid currentColor; border-radius: 3px; background: var(--stage-0); color: var(--ink-dim);
}
.insp-layout-choice .layout-choice-preview.is-portrait .layout-choice-preview-frame { width: 34%; margin-inline: auto; aspect-ratio: 9 / 16; }
.insp-layout-choice .layout-choice-preview-slot,
.insp-layout-choice .layout-choice-preview-decoration { position: absolute; display: grid; place-items: center; box-sizing: border-box; }
.insp-layout-choice .layout-choice-preview-slot {
  z-index: 1; overflow: hidden; border: 1px solid currentColor; border-radius: 2px;
  background: var(--stage-3); color: var(--ink); font-size: 6px; font-weight: 850; line-height: 1;
}
.insp-layout-choice .layout-choice-preview-slot.is-screen { background: var(--accent-soft); color: var(--accent); }
.insp-layout-choice .layout-choice-preview-decoration { z-index: 2; pointer-events: none; background: color-mix(in srgb, var(--ink) 62%, transparent); }
.insp-layout-choice .layout-choice-preview-decoration.is-accent { background: var(--accent); }
.insp-saved-layouts {
  display: grid; gap: 7px; min-width: 0; padding-top: 9px; border-top: 1px solid var(--line);
}
.insp-saved-layout-head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 7px; }
.insp-layout-state {
  display: inline-flex; min-width: 0; align-items: center; padding: 2px 6px;
  border: 1px solid var(--line); border-radius: var(--r-chip); color: var(--ink-faint);
  font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.insp-layout-state.is-custom { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.insp-saved-layout-note { margin: 0; color: var(--ink-faint); font-size: 10px; line-height: 1.35; }
.insp-layout-save-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
body.editor .insp-layout-save-actions button {
  min-width: 0; min-height: 32px; margin: 0; padding: 4px 5px; font-size: 9px; box-shadow: none;
}
.insp-user-layout-list { display: grid; gap: 5px; min-width: 0; }
.insp-user-layout {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 7px; align-items: center;
  min-width: 0; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--stage-2);
}
.insp-user-layout-copy { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.insp-user-layout-name,
.insp-user-layout-base { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insp-user-layout-name { color: var(--ink); font-size: 10px; }
.insp-user-layout-base { color: var(--ink-faint); font-size: 9px; }
.insp-user-layout-actions { display: grid; gap: 3px; }
body.editor .insp-user-layout-actions button { min-width: 0; min-height: 25px; margin: 0; padding: 3px 6px; font-size: 9px; box-shadow: none; }
body.editor .insp-user-layout-delete { color: var(--ink-dim); }
.insp-user-layout .layout-choice-preview { display: block; width: 100%; }
.insp-user-layout .layout-choice-preview-frame {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid currentColor; border-radius: 3px; background: var(--stage-0); color: var(--ink-dim);
}
.insp-user-layout .layout-choice-preview.is-portrait .layout-choice-preview-frame { width: 38%; margin-inline: auto; aspect-ratio: 9 / 16; }
.insp-user-layout .layout-choice-preview-slot,
.insp-user-layout .layout-choice-preview-decoration { position: absolute; display: grid; place-items: center; box-sizing: border-box; }
.insp-user-layout .layout-choice-preview-slot {
  z-index: 1; overflow: hidden; border: 1px solid currentColor; border-radius: 2px;
  background: var(--stage-3); color: var(--ink); font-size: 5px; font-weight: 850; line-height: 1;
}
.insp-user-layout .layout-choice-preview-slot.is-screen { background: var(--accent-soft); color: var(--accent); }
.insp-user-layout .layout-choice-preview-decoration { z-index: 2; pointer-events: none; background: color-mix(in srgb, var(--ink) 62%, transparent); }
.insp-user-layout .layout-choice-preview-decoration.is-accent { background: var(--accent); }
.insp-context-actions { margin-top: -1px; }
.insp-advanced-label { margin: var(--s-1) 2px -2px; }
.insp-tile-workspace-head { display: flex; flex-direction: column; gap: 2px; }
.insp-tile-workspace-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 899px), (pointer: coarse) {
  body.editor button.insp-layout-choice,
  body.editor button.insp-source-add { min-height: 44px; }
  .insp-group-sum { min-height: 44px; box-sizing: border-box; }
  body.editor input.insp-selection-time,
  body.editor .insp-selection-actions button { min-height: 44px; }
  body.editor .insp-layout-save-actions button,
  body.editor .insp-user-layout-actions button { min-height: 44px; }
  body.editor .insp-user-layout-actions button { min-width: 44px; }
}
@media (max-width: 360px) {
  .insp-layout-save-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insp-layout-save-actions [data-testid="layout-reset-current"] { grid-column: 1 / -1; }
  .insp-user-layout { grid-template-columns: 52px minmax(0, 1fr); }
  .insp-user-layout-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Sub-blocks (People / Tile layout) drop their own top separator inside a group. */
.insp-group-body > .insp-people,
.insp-group-body > .insp-tile { border-top: none; margin-top: 0; padding-top: 0; }
/* The scene header + Split/Merge actions stay outside the collapsibles as context. */
.insp-scene-head { display: flex; flex-direction: column; gap: var(--s-2); }
.insp-empty { color: var(--ink-dim); }
.insp-head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.insp-title { font-weight: 700; color: var(--ink); }
.insp-range { color: var(--ink-dim); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.insp-src {
  font-size: var(--text-xs); padding: 2px 9px; border-radius: var(--r-chip);
  border: 1px solid var(--line); color: var(--ink-dim); font-weight: 700; margin-left: auto;
}
.insp-src.src-user { color: var(--on-accent); background: var(--grad-ember); border-color: transparent; }
.insp-field { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.insp-field > span { color: var(--ink-dim); font-size: var(--text-sm); }
.insp-field select, .insp-field input { margin: 0; }
.insp-sublabel { color: var(--ink-dim); font-size: var(--text-sm); }
.insp-slots { display: flex; flex-direction: column; gap: var(--s-1); }
.slot-row { display: flex; align-items: center; gap: var(--s-1); }
.slot-idx {
  width: 22px; height: 22px; flex: none; text-align: center; line-height: 22px;
  color: var(--ink-dim); font-size: var(--text-sm); font-weight: 700;
  background: var(--stage-3); border-radius: var(--r-sm);
}
.slot-who { flex: 1 1 auto; margin: 0; }
.slot-btn { padding: 2px 9px; margin: 0; }
/* Share-layout screen slot (read-only) + camera-corner picker + screen-source control. */
.slot-row-screen .slot-screen-name {
  flex: 1 1 auto; margin: 0; color: var(--ink); font-size: var(--text-sm); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot-screen-tag {
  flex: none; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em;
  color: var(--accent, #FF6A3D); text-transform: uppercase;
  padding: 2px 8px; border: 1px solid var(--accent, #FF6A3D); border-radius: var(--r-chip);
}
.share-corner-picker { display: flex; gap: var(--s-1); }
.share-corner-btn {
  width: 32px; height: 32px; padding: 0; margin: 0; font-size: 15px; line-height: 1;
}
.share-corner-btn.is-active {
  background: var(--accent, #FF6A3D); color: #14140f; border-color: var(--accent, #FF6A3D);
}
.people-ph, .people-screen {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1);
  width: 100%; margin-top: var(--s-2);
}
.people-ph-list { display: flex; width: 100%; flex-wrap: wrap; gap: var(--s-1); }
.people-ph-chip {
  display: inline-flex; min-width: 0; align-items: center; gap: 3px;
  padding: 2px 3px 2px 8px; color: var(--ink-dim); background: var(--stage-3);
  border: 1px solid var(--line); border-radius: var(--r-chip); font-size: var(--text-xs);
}
.people-ph-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.editor button.people-add-ph { align-self: flex-start; }
.insp-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1); }
.insp-actions > .editor-compact-action { width: 100%; }
.insp-block {
  border-top: 1px solid var(--line); padding-top: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.insp-block h3 { margin: 0; color: var(--ink); font-size: var(--text-base); }
.trim-in { width: 100%; margin: 0; }
.insp-trim-active {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-2); border: 1px solid var(--accent-line); border-radius: var(--r-sm);
  background: var(--accent-soft);
}
.insp-trim-active-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.insp-trim-active-copy strong { color: var(--accent); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.insp-trim-active-copy span { color: var(--ink-dim); font-size: var(--text-xs); }
.insp-trim-active > button { flex: none; margin: 0; }
.p-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-1) var(--s-2); }
.p-action-row { grid-template-columns: minmax(0, 1fr); width: 100%; }
.p-action-row > .editor-compact-action { grid-column: 1 / -1; width: 100%; }
.p-label { color: var(--ink-dim); font-size: var(--text-sm); }
.p-range { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: var(--accent); }
/* Wave S4 "Use live direction" toggle rows — the whole label spans both columns as a
   checkbox + text flex row (shown only when the session has live-direction data). */
.p-toggle, .insp-dock-toggle {
  grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-2); cursor: pointer;
}
.p-toggle input[type="checkbox"], .insp-dock-toggle input[type="checkbox"] { accent-color: var(--accent); flex: none; }
.p-val { color: var(--ink); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

/* ── Process episode (in-browser pipeline) ─────────────────────────────────── */
.proc-topbar { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-2); }
.proc-topbar h1 { margin: 0; flex: 1 1 auto; letter-spacing: -0.02em; }
#process-screen .ed-pad { max-width: 1120px; }
.proc-panel {
  background: transparent; border: 0;
  border-radius: 0; padding: 0; box-shadow: none;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: start; gap: var(--s-4); max-width: none;
}
.proc-overview, .proc-progress-section, .proc-log-section,
.proc-panel > .inspector-editor-ready { grid-column: 1 / -1; }
.proc-overview {
  display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--stage-1)), var(--stage-1) 55%);
  border: 1px solid var(--accent-line); border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.proc-overview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.proc-episode-identity { min-width: 0; }
.proc-kicker {
  display: block; margin-bottom: var(--s-1); color: var(--accent); font-size: var(--text-xs);
  font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.proc-episode-title { margin: 0; color: var(--ink); font-size: clamp(1.25rem, 2.4vw, 1.8rem); line-height: 1.15; }
.proc-episode-guid { display: block; margin-top: var(--s-1); color: var(--ink-faint); font: 500 var(--text-xs)/1.3 ui-monospace, monospace; }
.proc-workspace-badge {
  flex: none; display: inline-flex; align-items: center; gap: var(--s-1); padding: 5px 10px;
  border-radius: var(--r-chip); border: 1px solid var(--line); background: var(--stage-2);
  color: var(--ink-dim); font-size: var(--text-xs); font-weight: 800;
}
.proc-workspace-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.proc-workspace-badge[data-state="running"]::before { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.proc-workspace-badge[data-state="done"]::before { background: var(--ok); }
.proc-workspace-badge[data-state="error"]::before { background: var(--danger); }
.proc-workspace-badge[data-state="cancelled"]::before { background: var(--warn, var(--accent)); }
.proc-meta-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.proc-meta-item { min-width: 0; padding: var(--s-3); border-radius: var(--r-sm); background: color-mix(in srgb, var(--stage-2) 82%, transparent); border: 1px solid var(--line); }
.proc-meta-label { display: block; margin-bottom: 3px; color: var(--ink-faint); font-size: var(--text-xs); }
.proc-meta-item strong { display: block; color: var(--ink); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proc-stills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.proc-still { position: relative; aspect-ratio: 16 / 9; overflow: hidden; margin: 0; border-radius: var(--r-sm); background: var(--stage-0); border: 1px solid var(--line); }
.proc-still img { display: block; width: 100%; height: 100%; object-fit: cover; }
.proc-still figcaption { position: absolute; inset: auto 0 0; padding: 18px 8px 6px; color: #fff; font-size: var(--text-xs); background: linear-gradient(transparent, rgba(0,0,0,.78)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proc-still-placeholder { display: grid; place-items: center; height: 100%; color: var(--ink-faint); font-size: 1.2rem; background: radial-gradient(circle at 50% 45%, var(--stage-3), var(--stage-0)); }
.proc-section {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4); background: var(--stage-1); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.proc-section-title {
  margin: 0; color: var(--ink); font-size: var(--text-base);
  line-height: 1.25; letter-spacing: -0.01em;
}
.proc-workspace-status { margin: 0; color: var(--ink-dim); font-size: var(--text-sm); }
.proc-overall-bar, .proc-desktop-progress { height: 9px; overflow: hidden; border-radius: var(--r-chip); background: color-mix(in srgb, #fff 7%, transparent); }
.proc-overall-fill, .proc-desktop-fill { width: 0; height: 100%; background: var(--grad-ember); transition: width 180ms var(--ease); }
.proc-run-controls, .proc-desktop-state-actions, .proc-log-toolbar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.proc-run-controls button, .proc-desktop-state-actions button, .proc-log-toolbar button { margin: 0; }
.proc-intro { color: var(--ink-dim); margin: 0; }
.proc-folder { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.proc-status { color: var(--ink-dim); font-size: var(--text-sm); }
/* detected-participant chip row (populated by process.js afterFolder) */
.proc-cast { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.proc-cast:empty { display: none; }
.proc-cast-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--stage-2); border: 1px solid var(--line);
  border-radius: var(--r-chip); padding: 3px 11px 3px 8px;
  font-size: var(--text-xs); color: var(--ink); font-weight: 600;
}
.proc-cast-dot { width: 9px; height: 9px; border-radius: var(--r-chip); flex: none; }
.proc-ready { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.proc-reproc { display: flex; align-items: center; gap: var(--s-1); color: var(--ink-dim); font-size: var(--text-sm); margin: 0; }
.proc-reproc input { margin: 0; accent-color: var(--accent); }
.proc-counts { color: var(--ink-dim); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.proc-warn { color: var(--warn, var(--ink-dim)); font-size: var(--text-sm); padding: var(--s-2); border-left: 3px solid var(--warn, var(--accent)); background: var(--surface-2, transparent); border-radius: var(--radius-sm, 4px); }

.proc-stages { display: flex; flex-direction: column; gap: var(--s-2); }
.proc-stage {
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s-3) var(--s-4); background: var(--stage-2);
  display: flex; flex-direction: column; gap: var(--s-2);
  transition: border-color var(--dur) var(--ease);
}
.proc-stage[data-status="running"] { border-color: var(--accent-line); }
.proc-stage[data-status="done"] { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.proc-stage[data-status="error"] { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.proc-stage-head { display: flex; align-items: center; gap: var(--s-2); }
/* per-row status LED, driven entirely by [data-status] (no JS needed) */
.proc-stage-head::before {
  content: ""; width: 10px; height: 10px; flex: none; border-radius: var(--r-chip);
  background: transparent; box-shadow: inset 0 0 0 2px var(--ink-faint);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.proc-stage[data-status="running"] .proc-stage-head::before {
  background: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
  animation: proc-led-pulse 1s var(--ease) infinite;
}
.proc-stage[data-status="done"] .proc-stage-head::before { background: var(--ok); box-shadow: none; }
.proc-stage[data-status="skipped"] .proc-stage-head::before { background: var(--ink-faint); box-shadow: none; }
.proc-stage[data-status="error"] .proc-stage-head::before { background: var(--danger); box-shadow: none; }
@keyframes proc-led-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .proc-stage-head::before { animation: none !important; } }

.proc-stage-name { font-weight: 700; color: var(--ink); flex: none; min-width: 12ch; }
.proc-stage-status { color: var(--ink-dim); font-size: var(--text-sm); flex: 1 1 auto; min-width: 0; }
.proc-retry { padding: 3px 11px; margin: 0; font-size: var(--text-xs); flex: none; }
.proc-bar {
  height: 8px; border-radius: var(--r-chip); overflow: hidden;
  background: color-mix(in srgb, #ffffff 6%, transparent);
}
.proc-fill { height: 100%; width: 0; background: var(--grad-ember); transition: width var(--dur) var(--ease); }
.proc-stage[data-status="done"] .proc-fill,
.proc-stage[data-status="skipped"] .proc-fill { background: var(--ok); }
.proc-stage[data-status="skipped"] .proc-fill { opacity: 0.5; }
.proc-stage[data-status="error"] .proc-fill { background: var(--danger); }
.proc-stage[data-status="error"] .proc-stage-status { color: var(--danger); }
.proc-stage[data-status="running"] .proc-stage-name::after { content: " …"; color: var(--ink-faint); }
/* 'blocked' — never attempted because an input it needs is missing. Reads as unfinished
   rather than broken: nothing about this step failed, and it carries no Retry because
   the step to retry is the one that owes it. */
.proc-stage[data-status="blocked"] { border-color: color-mix(in srgb, var(--warn, var(--accent)) 45%, transparent); }
.proc-stage[data-status="blocked"] .proc-stage-head::before { background: var(--warn, var(--accent)); box-shadow: none; }
.proc-stage[data-status="blocked"] .proc-stage-status { color: var(--warn, var(--ink-dim)); }
.proc-stage[data-status="blocked"] .proc-fill { background: var(--warn, var(--accent)); opacity: 0.4; }

/* The run's closing statement: what finished, what did not and why, and what the
   episode is consequently without. Toned so a partly finished run cannot be mistaken
   for a clean one at a glance. */
.proc-run-summary {
  margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); font-size: var(--text-sm);
  border-left: 3px solid var(--ink-faint); border-radius: var(--radius-sm, 4px);
  background: var(--surface-2, transparent); color: var(--ink-dim);
}
.proc-run-summary[data-tone="ok"] { border-left-color: var(--ok); }
.proc-run-summary[data-tone="partial"] { border-left-color: var(--warn, var(--accent)); color: var(--ink); }
.proc-run-summary[data-tone="error"] { border-left-color: var(--danger); color: var(--ink); }
.proc-run-summary[data-tone="cancelled"] { border-left-color: var(--ink-faint); }

/* ── "Run it on your computer" — generate run-episode.cmd ────────────────────── */
.proc-runscript {
  display: flex; flex-direction: column; gap: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s-4); background: var(--stage-1); box-shadow: var(--shadow-card);
}
.proc-runscript-h { margin: 0; color: var(--ink); letter-spacing: -0.01em; font-size: var(--text-base); }
.proc-desktop-state {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-2) var(--s-3);
  padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--stage-2);
}
.proc-desktop-state > div:first-child { min-width: 0; }
.proc-desktop-state strong, .proc-desktop-state span { display: block; }
.proc-desktop-state span { margin-top: 2px; color: var(--ink-dim); font-size: var(--text-xs); }
.proc-desktop-state .proc-desktop-progress { grid-column: 1 / -1; }
.proc-desktop-state .proc-desktop-state-actions { grid-column: 1 / -1; }
.proc-desktop-state[data-state="done"] { border-color: color-mix(in srgb, var(--ok) 42%, var(--line)); }
.proc-desktop-state[data-state="error"] { border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); }
.proc-desktop-state[data-state="error"] strong { color: var(--danger); }
.proc-runscript .cmd-row { margin: 0; }
.proc-runscript-btns { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.proc-runscript .hint { margin: 0; }
.proc-render-row { display: flex; align-items: stretch; gap: var(--s-2); flex-wrap: wrap; }
.proc-render-row > button { flex: 1 1 210px; margin: 0; }
.proc-setup-card {
  display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3);
  background: var(--stage-2); border: 1px solid var(--accent-line); border-radius: var(--r-sm);
}
.proc-setup-card[hidden] { display: none; }
.proc-setup-card p { margin: 0; }
.proc-otherways { padding-top: var(--s-2); border-top: 1px solid var(--line); }
.proc-otherways > summary { color: var(--ink-dim); cursor: pointer; font-size: var(--text-sm); font-weight: 700; }
/* callout steering big recordings to the run script above */
.proc-bignote {
  color: var(--ink); font-size: var(--text-sm); margin: 0;
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--accent, var(--primary));
  background: color-mix(in srgb, var(--accent, var(--primary)) 8%, transparent);
  border-radius: var(--r-sm);
}
.proc-log-section {
  padding: var(--s-3) var(--s-4); background: var(--stage-1); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.proc-log-section > summary { cursor: pointer; color: var(--ink-dim); font-size: var(--text-sm); font-weight: 800; }
.proc-log-section[open] > summary { margin-bottom: var(--s-3); color: var(--ink); }
.proc-log-toolbar { margin-bottom: var(--s-2); }
.proc-log-output {
  max-height: 300px; overflow: auto; margin: 0; padding: var(--s-3); white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--ink-dim); background: var(--stage-0); border: 1px solid var(--line); border-radius: var(--r-sm);
  font: 500 var(--text-xs)/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
}

@media (max-width: 820px) {
  .proc-panel { grid-template-columns: 1fr; }
  .proc-overview, .proc-progress-section, .proc-log-section,
  .proc-panel > .inspector-editor-ready { grid-column: 1; }
  .proc-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
  .proc-overview { padding: var(--s-4); }
  .proc-overview-head { flex-direction: column; }
  .proc-workspace-badge { align-self: flex-start; }
  .proc-stills { grid-template-columns: 1fr 1fr; }
  .proc-still:last-child { display: none; }
  .proc-meta-grid { grid-template-columns: 1fr; }
}

/* — toolbar/timeline/rails — ─────────────────────────────────────────────────
   The editing-TOOL GROUPS that mount INSIDE the shell's `.ed-toolbar` (edit /
   layout / generate), plus the per-scene hover affordance overlay. The shell
   owns `.ed-toolbar` itself, the `.ed-workspace` grid, the rails/spines, the
   dock strip and the drawers — this block never restyles those; it only adds the
   tool-group internals + the hover HUD. Ember tokens only; no hardcoded color. */

/* Tool groups sit as flex items in the shell's single-row scrolling toolbar. */
.tb-group { display: inline-flex; align-items: center; gap: var(--s-1); flex: none; }
.tb-div { width: 1px; align-self: stretch; min-height: 22px; background: var(--line); margin: 0 var(--s-2); flex: none; }
.tb-btn {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-width: 34px; height: 32px; padding: 0 var(--s-2); margin: 0;
  background: transparent; color: var(--ink-dim);
  border: 1px solid transparent; border-radius: var(--r-btn);
  cursor: pointer; line-height: 1;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tb-btn:hover:not(:disabled) { background: var(--stage-2); color: var(--ink); border-color: var(--line); }
.tb-btn:active:not(:disabled) { transform: scale(.96); }
.tb-btn:disabled { opacity: .38; cursor: default; }
.tb-glyph { font-size: var(--text-base); }
.tb-label { font-size: var(--text-sm); font-weight: 700; }
.tb-auto .tb-glyph { color: var(--accent); }
/* Pressed/active tool button (e.g. ⚙ Params while the docked params section is open
   in the inspector) — ember-tinted ring so the toggle reads as engaged. */
.tb-btn.is-active { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); }
.tb-btn.is-active .tb-glyph { color: var(--accent); }
/* layout quick-switch tiles (SVG diagram from the shared geometry) */
.tb-ly { padding: 0 8px; }
.tb-ly-ico { width: 26px; height: 15px; display: block; color: var(--ink-faint); }
.tb-ly-ico rect { fill: currentColor; }
.tb-ly:hover:not(:disabled) .tb-ly-ico { color: var(--ink); }
.tb-ly.is-active { border-color: var(--accent-line); background: var(--accent-soft); }
.tb-ly.is-active .tb-ly-ico { color: var(--accent); }

/* Auto-edit params — DOCKED into the inspector rail (was a body-mounted popover
   that floated over the header). The toolbar ⚙ toggles a temporary section at the
   TOP of the inspector rail; it sizes to the rail width and scrolls with it, so
   nothing floats over the menu. A subtle ember highlight + accent left-bar marks it
   as the transient surface; a ✕ (and Esc / re-clicking ⚙) closes it. */
.insp-dock {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-3); margin-bottom: var(--s-1);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line); border-left: 3px solid var(--accent);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.insp-dock-head { display: flex; align-items: center; gap: var(--s-2); }
.insp-dock-title { flex: 1 1 auto; font-weight: 700; color: var(--ink); font-size: var(--text-sm); letter-spacing: -0.01em; }
.insp-dock-x {
  flex: none; width: 26px; min-width: 26px; height: 26px; padding: 0; margin: 0; line-height: 1;
  font-size: var(--text-base); background: transparent; color: var(--ink-dim);
  border: 1px solid transparent; border-radius: 50%; cursor: pointer;
}
.insp-dock-x:hover { background: var(--stage-2); color: var(--ink); }
.insp-dock-row { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-2); align-items: center; }
.insp-dock-lab { color: var(--ink-dim); font-size: var(--text-sm); }
.insp-dock-val { color: var(--ink); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.insp-dock-range { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: var(--accent); }
.insp-dock-regen { margin-top: var(--s-1); }

/* Per-scene hover affordance overlay (floated above the scene strip inside the
   shell's `.ed-timeline-wrap`, which the JS makes position:relative). */
.scene-hud {
  position: absolute; z-index: 12;
  transform: translate(-50%, -100%); margin-top: -5px;
  display: flex; align-items: center; gap: 2px; padding: 3px;
  background: var(--stage-3); border: 1px solid var(--line);
  border-radius: var(--r-sm); box-shadow: var(--shadow-pop);
}
.scene-hud[hidden] { display: none; }
.hud-btn, .hud-ly {
  min-width: 26px; height: 24px; padding: 0 7px; margin: 0;
  font-size: var(--text-sm); line-height: 1;
  background: transparent; color: var(--ink-dim);
  border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer;
}
.hud-btn:hover:not(:disabled), .hud-ly:hover { background: var(--stage-1); color: var(--ink); }
.hud-btn:disabled { opacity: .4; cursor: default; }
.hud-ly { font-weight: 700; font-variant-numeric: tabular-nums; }
.hud-ly.is-active { color: var(--accent); background: var(--accent-soft); }

/* ── Touch targets: ≥44px hit area on coarse pointers (phones/tablets) ─────────
   Desktop (fine pointer) keeps the compact sizes above; these only apply to touch. */
@media (max-width: 899px), (pointer: coarse) {
  body.editor button.editor-compact-action {
    min-height: 44px; padding: 8px 12px; font-size: var(--text-sm);
  }
  body.editor #save-btn { min-height: 44px; padding: 8px 13px; }
  body.editor .ed-header .hbtn-back,
  body.editor .ed-header .ed-undo,
  body.editor .ed-header .ed-redo,
  body.editor .editor-companion-status,
  body.editor .editor-companion-panel button,
  body.editor button.ed-drawer-close { min-width: 44px; min-height: 44px; }
  body.editor button.people-x {
    display: inline-grid; min-width: 44px; min-height: 44px; padding: 0; place-items: center;
  }
  .people-add-sel { min-height: 44px; }
}
@media (pointer: coarse) {
  /* Dock edit cluster: Split / Merge / Cut / Restore / Undo / Redo (.dock-tool) and
     camera chips (.dock-ly) — bump from ~22px to 44px. */
  .dock-toolbar .dock-tool,
  .dock-toolbar .dock-ly { min-height: 44px; padding: 8px 12px; }
  .dock-toolbar .dock-ly { min-width: 44px; }
  /* Zoom strip + Fit (they use bare .ghost in the dock-toolbar). */
  .dock-toolbar #zoom-in,
  .dock-toolbar #zoom-out,
  .dock-toolbar #fit-btn { min-height: 44px; min-width: 44px; }
  /* Transport bar under the monitor. */
  .pv-tbtn { min-height: 44px; min-width: 44px; }
  .pv-play { min-height: 48px; min-width: 56px; }
  .pv-vol { width: 96px; min-height: 44px; }
  /* Scene HUD affordances (split / merge / layout) floated over the scene strip. */
  .hud-btn, .hud-ly { min-height: 44px; min-width: 44px; padding: 0 12px; }
  .scene-hud { gap: 4px; padding: 5px; flex-wrap: wrap; max-width: calc(100vw - 24px); justify-content: center; }
  /* Timeline right-click / long-press menu items. */
  .tl-menu-item { padding: 12px 14px; min-height: 44px; }
  .tl-menu { min-width: 200px; }
}

/* ── Background panel (top of the Render drawer) ───────────────────────────────
   Export-facing: a master On/Off toggle + one dropdown per speaker-count view. */
.ed-drawer > .bg-panel, .ed-drawer-scroll > .bg-panel { flex: none; padding: var(--s-4) var(--s-4) 0; }
.bg-section {
  background: var(--stage-2); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s-4); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.bg-h { margin: 0; color: var(--ink); }
.bg-section .hint { margin: 0; }
.bg-master {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-1); font-weight: 600; color: var(--ink); cursor: pointer;
}
.bg-master-cb { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.bg-master-txt { font-size: var(--text-sm); }
.bg-rows { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-1); }
.bg-row { display: grid; grid-template-columns: 5.5em 1fr; align-items: center; gap: var(--s-3); }
.bg-row-lab { color: var(--ink-dim); font-size: var(--text-sm); }
.bg-select {
  width: 100%; margin: 0; padding: 5px 8px;
  background: var(--stage-1); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--text-sm);
}
.bg-select:disabled { opacity: .5; }
.bg-section.is-off .bg-rows { opacity: .55; }
.bg-refresh { align-self: flex-start; margin: var(--s-1) 0 0; padding: 4px 12px; font-size: var(--text-sm); }
.bg-refresh:disabled { opacity: .5; cursor: default; }
.bg-foot { color: var(--ink-faint); font-size: var(--text-xs); }

/* ── Topic rail panel (Render drawer) — mirrors the background section chrome ── */
.rail-section {
  background: var(--stage-2); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s-4); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3);
}
.rail-h { margin: 0; color: var(--ink); }
.rail-section .hint { margin: 0; }
.rail-master {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-1); font-weight: 600; color: var(--ink); cursor: pointer;
}
.rail-master-cb { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.rail-master-txt { font-size: var(--text-sm); }
.rail-opts { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-1); }
.rail-opt { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; }
.rail-opt-lab { color: var(--ink-dim); font-size: var(--text-sm); }
.rail-opt-sync .rail-sync-cb { width: 15px; height: 15px; accent-color: var(--accent); margin: 0; }
.rail-mv {
  width: 4em; margin: 0; padding: 4px 6px; background: var(--stage-1); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--text-sm);
}
.rail-list { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-1); }
.rail-list.is-disabled { opacity: .5; pointer-events: none; }
.rail-box-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  gap: var(--s-2); padding: 4px 6px; border-radius: var(--r-sm);
  background: var(--stage-1); border: 1px solid var(--line); cursor: pointer;
}
.rail-box-row.is-user { border-left: 3px solid var(--accent); }
.rail-box-label {
  min-width: 0; margin: 0; padding: 4px 6px; background: var(--stage-0); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--text-sm);
}
.rail-box-time { display: flex; align-items: center; gap: 2px; }
.rail-box-secs {
  width: 4.5em; margin: 0; padding: 4px 6px; background: var(--stage-0); color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--text-xs); text-align: right;
}
.rail-box-ctl { display: flex; align-items: center; gap: 1px; }
.rail-ico {
  padding: 2px 6px; font-size: var(--text-xs); line-height: 1;
  min-width: 22px; text-align: center;
}
.rail-ico:disabled { opacity: .35; cursor: default; }
.rail-box-del:hover { color: var(--danger, #e5484d); }
.rail-empty { color: var(--ink-faint); font-size: var(--text-xs); }
.rail-foot { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-1); }
.rail-add, .rail-resync { padding: 4px 12px; font-size: var(--text-sm); }
.rail-add:disabled, .rail-resync:disabled { opacity: .5; cursor: default; }
.rail-section.is-off .rail-list, .rail-section.is-off .rail-foot { opacity: .55; }

/* ── Topic-rail STYLE controls (size / spacing / colours / vertical / solo) ──── */
.rail-style {
  display: flex; flex-direction: column; gap: var(--s-2);
  margin-top: var(--s-2); padding-top: var(--s-2);
  border-top: 1px solid var(--line);
}
.rail-style-h {
  margin: 0; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-dim);
}
.rail-ctl { display: grid; grid-template-columns: 6.5em 1fr 4em; align-items: center; gap: var(--s-2); }
.rail-ctl-lab { color: var(--ink-dim); font-size: var(--text-sm); }
.rail-ctl-val { color: var(--ink-faint); font-size: var(--text-xs); text-align: right; font-variant-numeric: tabular-nums; }
.rail-slider { width: 100%; margin: 0; accent-color: var(--accent); cursor: pointer; }
.rail-colors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.rail-color { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; }
.rail-color-sw {
  width: 28px; height: 22px; margin: 0; padding: 0; flex: none;
  background: var(--stage-0); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
}
.rail-color-lab { color: var(--ink-dim); font-size: var(--text-xs); min-width: 0; }
.rail-bg-row { display: flex; flex-direction: column; gap: var(--s-1); }
.rail-inactive-bg-row[hidden] { display: none; }
.rail-solo-row { grid-template-columns: 6.5em 1fr; }
.rail-solo {
  margin: 0; padding: 4px 6px; background: var(--stage-1); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--text-sm);
}
.rail-reset { align-self: flex-start; padding: 4px 12px; font-size: var(--text-sm); }

/* ── Chapters panel (its own drawer) ────────────────────────────────────────── */
.ed-drawer > .chapter-panel { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding: var(--s-4); }
.chapter-section .rail-box-row { grid-template-columns: 1fr auto auto; }
.chapter-auto-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.chapter-auto { padding: 7px 13px; font-size: var(--text-sm); }
.chapter-auto-hint { flex: 1 1 12em; margin: 0; }
.chapter-auto-status { margin: 0; padding: 6px 9px; border-left: 2px solid var(--accent); }
.chapter-time { width: 5.5em; text-align: right; }
.chapter-warn {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.chapter-warn-txt { color: var(--ink-dim); font-size: var(--text-xs); flex: 1 1 12em; }
.chapter-pin { padding: 3px 10px; font-size: var(--text-xs); flex: none; }
.ch-title-ro { display: inline-block; padding: 2px 0; color: var(--ink); }
.notes-manage-chapters { padding: 3px 10px; font-size: var(--text-xs); }

/* ── Cold-open intro panel (Render drawer) ──────────────────────────────────── */
.intro-section {
  background: var(--stage-2); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s-4); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3);
}
.intro-panel-head { display: flex; align-items: center; gap: var(--s-2); }
.intro-panel-head .intro-h { flex: 1 1 auto; }
.intro-back { flex: none; padding: 3px 8px; font-size: var(--text-xs); }
.intro-h { margin: 0; color: var(--ink); }
.intro-section .hint { margin: 0; }
.intro-master {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-1); font-weight: 600; color: var(--ink); cursor: pointer;
}
.intro-master-cb { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.intro-master-txt { font-size: var(--text-sm); }
.intro-list-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line);
}
.intro-list-head strong { color: var(--ink); font-size: var(--text-sm); }
.intro-list-head.is-off strong { color: var(--ink-dim); }
.intro-list { display: flex; flex-direction: column; gap: var(--s-1); }
.intro-list.is-disabled, .intro-settings.is-disabled { opacity: .5; pointer-events: none; }
.intro-clip-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "order label ctl" "order who who" "order times times" "order trans trans";
  gap: 4px 6px; padding: 6px; border-radius: var(--r-sm);
  background: var(--stage-1); border: 1px solid var(--line); border-left: 3px solid var(--accent); cursor: pointer;
}
.intro-clip-row.is-selected { background: var(--accent-soft, rgba(255,106,61,0.12)); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.intro-clip-order {
  grid-area: order; display: grid; align-self: stretch; place-items: center; width: 20px;
  border-radius: var(--r-sm); color: var(--accent); background: var(--accent-soft);
  font-size: var(--text-xs); font-weight: 800; font-variant-numeric: tabular-nums;
}
.intro-clip-label { grid-area: label; min-width: 0; margin: 0; padding: 4px 6px;
  background: var(--stage-0); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--text-sm); }
.intro-clip-who { grid-area: who; margin: 0; padding: 4px 6px;
  background: var(--stage-0); color: var(--ink-dim); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--text-xs); }
.intro-clip-times { grid-area: times; display: flex; align-items: center; gap: 4px; }
.intro-clip-secs { width: 4.5em; margin: 0; padding: 4px 6px;
  background: var(--stage-0); color: var(--ink-dim); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--text-xs); text-align: right; }
.intro-dash { color: var(--ink-faint); }
.intro-clip-ctl { grid-area: ctl; display: flex; align-items: center; gap: 1px; }
.intro-ico { padding: 2px 6px; font-size: var(--text-xs); line-height: 1; min-width: 22px; text-align: center; }
.intro-ico:disabled { opacity: .35; cursor: default; }
.intro-clip-del:hover { color: var(--danger, #e5484d); }
.intro-empty { color: var(--ink-faint); font-size: var(--text-xs); }
.intro-add { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-1); }
.intro-add button { padding: 4px 12px; font-size: var(--text-sm); }
.intro-add button:disabled { opacity: .5; cursor: default; }
.intro-settings { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.intro-opt { display: grid; grid-template-columns: 10em 1fr; align-items: center; gap: var(--s-2); }
.intro-opt-lab { color: var(--ink-dim); font-size: var(--text-sm); }
.intro-text, .intro-num, .intro-select {
  width: 100%; margin: 0; padding: 5px 8px; background: var(--stage-1); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--text-sm);
}
.intro-num { width: 6em; }
.intro-dur { color: var(--ink-faint); font-size: var(--text-xs); margin-top: var(--s-1); }
.intro-suggest { margin-top: var(--s-1); }
.intro-suggest summary { cursor: pointer; color: var(--ink-dim); font-size: var(--text-sm); }
.intro-section.is-off .intro-list, .intro-section.is-off .intro-add, .intro-section.is-off .intro-settings { opacity: .55; }

/* Per-clip transition row (cut/crossfade/dip/slide + duration) + regenerate. */
.intro-clip-trans { grid-area: trans; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.intro-clip-trans .intro-trans-lab { color: var(--ink-faint); font-size: var(--text-xs); }
.intro-trans-type { margin: 0; padding: 3px 6px; background: var(--stage-0); color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--text-xs); }
.intro-trans-dur { width: 4em; margin: 0; padding: 3px 6px; background: var(--stage-0); color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--text-xs); text-align: right; }
.intro-regen { color: var(--accent); }
.intro-clip-play { color: var(--accent); border-color: var(--accent-line); }

/* Primary action bar: Generate · Preview · Include (the "save into the video"). */
.intro-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2);
  padding-top: var(--s-2); border-top: 1px solid var(--line); }
.intro-actions button { padding: 5px 12px; font-size: var(--text-sm); }
.intro-actions .intro-generate { border-color: var(--accent); color: var(--accent); }
.intro-actions .intro-preview.is-playing { background: var(--accent); color: #1a0f0a; }
.intro-actions button:disabled { opacity: .5; cursor: default; }

/* Candidate pick-list (suggestHighlights results). */
.intro-cands { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-2); }
.intro-cands-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.intro-cands-head-actions { display: inline-flex; align-items: center; gap: 4px; }
.intro-cands-head-actions button { padding: 2px 8px; font-size: var(--text-xs); }
.intro-cands-title { color: var(--ink-dim); font-size: var(--text-sm); font-weight: 600; }
.intro-cand {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px var(--s-2);
  grid-template-areas: "main score" "actions actions";
  padding: 6px 8px; border-radius: var(--r-sm); background: var(--stage-1); border: 1px solid var(--line);
}
.intro-cand.is-used { opacity: .5; }
.intro-cand-main { grid-area: main; min-width: 0; }
.intro-cand-text { color: var(--ink); font-size: var(--text-sm); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.intro-cand-meta { color: var(--ink-faint); font-size: var(--text-xs); }
.intro-cand-score { grid-area: score; color: var(--accent); font-variant-numeric: tabular-nums; font-size: var(--text-xs); font-weight: 700; }
.intro-cand-actions { grid-area: actions; display: flex; align-items: center; gap: 5px; }
.intro-cand-actions button { margin: 0; padding: 3px 9px; font-size: var(--text-xs); }
.intro-cand-add { color: var(--accent); border-color: var(--accent-line); }
.intro-cands-empty { color: var(--ink-faint); font-size: var(--text-xs); }

@media (max-width: 899px), (pointer: coarse) {
  body.editor button.summary-generate,
  body.editor button.summary-compact-btn,
  body.editor button.summary-save,
  body.editor button.summary-time,
  body.editor button.summary-icon-btn { min-height: 44px; }
  body.editor button.summary-icon-btn { width: 44px; min-width: 44px; }
  .summary-topic-title { min-height: 44px; }
  .summary-key-point { padding-left: 36px; }
  .summary-key-point-tools { align-items: stretch; }
  .summary-key-point-label-wrap { flex-basis: 100%; }
  .summary-key-point-label,
  body.editor button.summary-key-point-time,
  body.editor button.summary-point-action { min-height: 44px; }

  .intro-master { min-height: 44px; }
  .intro-master-cb { width: 24px; height: 24px; }
  body.editor button.intro-back,
  body.editor .intro-actions button,
  body.editor .intro-add button,
  body.editor .intro-cands-head-actions button,
  body.editor .intro-cand-actions button,
  body.editor button.intro-ico { min-height: 44px; }
  body.editor button.intro-ico { min-width: 44px; padding-inline: 10px; }
  .intro-clip-label,
  .intro-clip-who,
  .intro-clip-secs,
  .intro-trans-type,
  .intro-trans-dur,
  .intro-text,
  .intro-num,
  .intro-select { min-height: 44px; }
  .intro-clip-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "order label" "order who" "order times" "order trans" "ctl ctl";
  }
  .intro-clip-ctl,
  .intro-cand-actions { flex-wrap: wrap; }
}

/* Intro-playback canvas overlay on the monitor stage (WYSIWYG cold-open preview). */
.pv-intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%;
  display: none; z-index: 20; background: #000; }
.pv-intro-canvas.is-active { display: block; }
.pv-intro-badge { position: absolute; left: 10px; top: 8px; z-index: 21; display: none;
  padding: 2px 10px; border-radius: 999px; font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em;
  background: var(--accent); color: #1a0f0a; pointer-events: none; }
.pv-intro-badge.is-active { display: block; }

/* Toolbar quick On/Off — accent tint when the background is ON. */
.tb-bg.is-on { border-color: var(--accent-line); background: var(--accent-soft); }
.tb-bg.is-on .tb-glyph, .tb-bg.is-on .tb-label { color: var(--accent); }

/* Inspector: which background the selected scene resolves to. */
.insp-bg {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  margin-top: var(--s-1); font-size: var(--text-xs);
}
.insp-bg-lab { color: var(--ink-faint); }
.insp-bg-val { color: var(--ink-dim); font-weight: 600; text-align: right; }

/* ── Render drawer: the outputs list (what render.cmd writes into out/) ───────── */
.render-outputs {
  list-style: none; margin: var(--s-3) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s-2);
}
.render-outputs li {
  display: flex; gap: var(--s-2); align-items: baseline;
  color: var(--ink-dim); font-size: var(--text-sm);
  padding-left: var(--s-3); position: relative;
}
.render-outputs li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: var(--r-chip); background: var(--accent);
}
.render-outputs code { color: var(--code); }

/* ── Toolbar '?' help button — pushed to the far right of the tool row ────────── */
.tb-help-btn {
  margin-left: auto; flex: none;
  min-width: 30px; padding: 4px 10px; font-weight: 800; line-height: 1;
}

/* ── Keyboard-shortcuts overlay (centered modal, '?' toggles, Esc closes) ─────── */
.shortcuts-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: var(--s-4);
}
.shortcuts-card {
  width: min(460px, 96vw); max-height: 86vh; overflow-y: auto;
  background: var(--stage-1); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-pop);
  padding: var(--s-5);
}
.shortcuts-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); }
.shortcuts-h { margin: 0; flex: 1 1 auto; color: var(--ink); letter-spacing: -0.01em; font-size: var(--text-lg); }
.shortcuts-close {
  display: inline-grid; width: 34px; min-width: 34px; height: 34px; min-height: 34px;
  place-items: center; padding: 0; margin: 0; border-radius: 50%; font-size: var(--text-base); line-height: 1;
}
.shortcuts-list {
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--s-3) var(--s-4); margin: 0; align-items: center;
}
.shortcuts-keys { display: flex; gap: var(--s-1); flex-wrap: wrap; margin: 0; }
.shortcuts-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; padding: 2px 7px;
  background: var(--stage-3); color: var(--ink);
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--r-sm);
  font-family: inherit; font-size: var(--text-xs); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.shortcuts-desc { margin: 0; color: var(--ink-dim); font-size: var(--text-sm); }

/* ── Notes: YouTube-chapters export block ─────────────────────────────────────── */
.notes-sec .yt-chapters {
  margin: var(--s-2) 0 0; white-space: pre-wrap; word-break: break-word;
  max-height: 40vh; overflow-y: auto;
}

/* ════════════════════════════════════════════════════════════════════════════
   TILE TRANSFORM (Wave 3) — the direct-manipulation chrome over the monitor + the
   inspector's Tile-layout block. The chrome (transform.js) mounts INSIDE .pv-stage
   and is positioned in % by the JS; CSS only dresses it. Ember tokens only. */

/* Selection chrome: accent outline over the selected tile, 8 resize handles + a
   crop-mode button. In crop mode it goes dashed and shows a CROP label. */
.tf-chrome {
  position: absolute; z-index: 6; box-sizing: border-box;
  outline: 2px solid var(--accent); outline-offset: -1px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.55), 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
  cursor: move; touch-action: none; user-select: none;
  /* A selected full-stage share can be painted behind smaller speaker tiles. Keep the
     empty frame interior transparent to hit-testing so native paint order selects a
     visible speaker on overlap and the share itself wherever it remains exposed. */
  pointer-events: none;
}
.tf-chrome[hidden] { display: none; }
/* Crop mode: dashed outline + a DIM VEIL over the rest of the stage (a huge dark
   box-shadow ring clipped by the stage's overflow:hidden), so the crop area reads as
   the focus while the source region is panned/zoomed inside it. */
.tf-chrome.is-crop {
  outline-style: dashed; cursor: grab;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 100vmax rgba(0,0,0,0.42);
}
.tf-chrome.is-crop:active { cursor: grabbing; }

.tf-handle {
  position: absolute; width: 12px; height: 12px; box-sizing: border-box;
  background: var(--accent); border: 1px solid #fff; border-radius: 2px;
  z-index: 7; touch-action: none; pointer-events: auto;
}
/* Invisible ≥44px hit area around each 12px handle so precise resize is reachable by
   touch/coarse pointers without enlarging the visible dot. closest('.tf-handle') still
   matches (the ::before is part of the handle). */
.tf-handle::before { content: ''; position: absolute; inset: -16px; }
@media (pointer: coarse) { .tf-handle::before { inset: -22px; } }
.tf-h-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.tf-h-n  { left: 50%; top: -6px; margin-left: -6px; cursor: ns-resize; }
.tf-h-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.tf-h-e  { right: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }
.tf-h-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.tf-h-s  { left: 50%; bottom: -6px; margin-left: -6px; cursor: ns-resize; }
.tf-h-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.tf-h-w  { left: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }

/* The handles all sit OUTSIDE the chrome box, so the interior corners are free —
   keep the tool row (swap + crop) and the mode label INSIDE so the stage's
   overflow:hidden never clips them (top-row tiles: solo, grids). */
.tf-tools {
  position: absolute; top: 5px; right: 5px; z-index: 8;
  display: flex; align-items: center; gap: 4px; pointer-events: auto;
}
.tf-crop-btn, .tf-swap-btn {
  position: static; margin: 0; flex: 0 0 auto;
  padding: 2px 9px; font-size: var(--text-xs); font-weight: 700; line-height: 1.4;
  background: rgba(0,0,0,0.55); color: #fff; cursor: pointer;
  border: 1px solid var(--accent-line); border-radius: var(--r-chip);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.tf-crop-btn:hover, .tf-swap-btn:hover { background: rgba(0,0,0,0.72); }
.tf-crop-btn.is-on, .tf-swap-btn.is-on { background: var(--grad-ember); color: var(--on-accent); border-color: transparent; }
/* Swap (⇄): click for the source list, or press and drag onto another tile. The grab
   cursor is the affordance for the drag half. */
.tf-swap-btn { cursor: grab; touch-action: none; padding: 2px 8px; font-size: var(--text-sm); }
.tf-swap-btn:active { cursor: grabbing; }
/* Touch targets belong to production CSS, not only to browser-test fixtures. Keep the
   dense mouse toolbar unchanged, while every action in the selected-tile cluster —
   Swap, Hide, Send behind/Bring forward, and Crop — reaches the 44px touch floor on
   coarse pointers. Wrapping inside the selected frame prevents the four controls from
   simply spilling off a narrower screen-share tile. */
@media (max-width: 899px), (pointer: coarse) {
  .tf-tools {
    max-width: calc(100% - 10px); flex-wrap: wrap; justify-content: flex-end; gap: 6px;
  }
  .tf-tools .tf-crop-btn,
  .tf-tools .tf-swap-btn { min-width: 44px; min-height: 44px; padding: 7px 10px; }
}
/* While a swap drag is in flight the chrome steps back so the highlighted DROP TARGET
   is the only thing shouting on the stage. */
.tf-chrome.is-swapping { outline-style: dashed; opacity: 0.72; }

/* ════════════════════════════════════════════════════════════════════════════
   THE MONITOR STAGE Z-LADDER — every absolutely-positioned CHILD OF `.pv-stage`, in
   one place, because they are authored in two files and a control that picks its own
   number in isolation lands UNDER something it was drawn on top of. (That is not a
   cosmetic bug: the pointer follows paint order, so the overlay underneath silently
   eats the click — see .tf-swap-pop below, which sat at 9 and handed its rows to the
   banner chrome at 16, starting a banner drag instead of committing the swap.)

      5   .tf-guides, .tf-slots ........ snap guides + designed-slot ghosts (inert)
      6   .tf-chrome ................... the selected tile's frame
      7   .tf-handle ................... its 8 resize handles
      8   .tf-tools, .tf-mode-label, .tf-crop-readout, .tf-crop-reset,
          .tf-crop-zoom-control, .tf-auto-fit
     11   .rail-snap-ghost ............. section-rail drop ghost (inert)
     12   .rail-chrome ................. section-rail placement chrome
     13   .rail-handle
     14   .rail-dims
     16   .pv-banner-chrome ............ header/footer placement chrome  ┐ authored in
     17   .pv-bn-handle                                                 ├ preview.js's
     18   .pv-bn-tag ................... "Header 120%"                   ┘ style block
     19   .tf-swap-pop ................. the transient "swap with…" picker
     20   .pv-intro-canvas / 21 .pv-intro-badge ....... cold-open playback overlay
     22   .pv-callout-canvas / 23 .pv-callout-clip .... featured-callout overlay

   THE RULE: a TRANSIENT PICKER outranks every PERSISTENT chrome it may be drawn over,
   and every persistent chrome sits under the full-stage PLAYBACK overlays (20+), which
   are what the frame looks like and must cover everything. 19 is the only value that
   satisfies both — hence 19 and not "20, which clears 16", which would have tied with
   .pv-intro-canvas and let DOM order decide. Add a new stage child by extending this
   list, not by guessing. */

/* The "swap with…" source list. A stage child (not a chrome child) so a narrow tile
   never clips it; transform.js measures and CLAMPS it inside the stage, which is what
   keeps it sane in a portrait (9:16) monitor. z 19: see the ladder above — it must
   outrank the banner chrome (16) and the rail chrome (12), which are both PERSISTENT
   stage siblings that overlap it and both stopPropagation() their own pointerdown. */
.tf-swap-pop {
  position: absolute; z-index: 19; box-sizing: border-box;
  min-width: 168px; max-width: min(240px, calc(100% - 8px));
  max-height: min(240px, calc(100% - 8px)); overflow-y: auto;
  padding: var(--s-1); display: flex; flex-direction: column; gap: 1px;
  background: rgba(0,0,0,0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--accent-line); border-radius: var(--r-sm);
  box-shadow: 0 6px 20px rgba(0,0,0,0.55);
}
.tf-swap-pop[hidden] { display: none; }
.tf-swap-head {
  padding: 2px 6px 4px; color: var(--ink-faint);
  font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.tf-swap-row {
  display: flex; align-items: baseline; gap: var(--s-1); width: 100%; margin: 0;
  padding: 5px 6px; min-height: 30px; text-align: left;
  background: transparent; border: 0; border-radius: var(--r-chip);
  color: #fff; font-size: var(--text-xs); cursor: pointer;
}
.tf-swap-row:hover, .tf-swap-row:focus-visible { background: var(--accent-soft); }
.tf-swap-name { flex: 1 1 auto; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-swap-kind { flex: 0 0 auto; color: var(--ink-dim); font-size: 10px; font-weight: 700; }
.tf-swap-where { flex: 0 0 auto; color: var(--ink-faint); font-size: 10px; font-weight: 700; }
.tf-swap-where.is-on { color: var(--accent); }
.tf-swap-empty { margin: 0; padding: 4px 6px 6px; color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.5; }
.tf-mode-label {
  position: absolute; top: 6px; left: 6px; z-index: 8;
  padding: 1px 6px; border-radius: var(--r-chip);
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.12em;
  color: var(--accent); text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.tf-mode-label[hidden] { display: none; }

/* Crop readout chip — live 'W×H% @ x,y'. Bottom-left of the tile, above the veil. */
.tf-crop-readout {
  position: absolute; left: 6px; bottom: 6px; z-index: 8; pointer-events: none;
  padding: 2px 7px; border-radius: var(--r-chip);
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.8); white-space: nowrap;
}
.tf-crop-readout[hidden] { display: none; }
/* Reset-crop button — bottom-right of the tile in crop mode. */
.tf-crop-reset {
  position: absolute; right: 5px; bottom: 5px; margin: 0; z-index: 8;
  padding: 2px 9px; font-size: var(--text-xs); font-weight: 700; line-height: 1.4;
  background: rgba(0,0,0,0.55); color: #fff; cursor: pointer;
  border: 1px solid var(--accent-line); border-radius: var(--r-chip);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: auto;
}
.tf-crop-reset:hover { background: rgba(0,0,0,0.72); }
.tf-crop-reset[hidden] { display: none; }
.tf-crop-reset:disabled { opacity: .5; cursor: default; }

/* Source zoom stays inside the selected frame. The range previews continuously but
   commits only when the gesture finishes, so dragging it remains one undo step. */
.tf-crop-zoom-control {
  position: absolute; left: 50%; bottom: 5px; z-index: 8;
  transform: translateX(-50%); box-sizing: border-box;
  display: flex; align-items: center; gap: 6px; max-width: calc(100% - 156px);
  padding: 2px 7px; border: 1px solid var(--accent-line); border-radius: var(--r-chip);
  background: rgba(0,0,0,0.62); color: #fff;
  font-size: var(--text-xs); font-weight: 700; line-height: 1.4;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: auto;
}
.tf-crop-zoom-control[hidden] { display: none; }
.tf-crop-zoom { width: clamp(54px, 10vw, 112px); min-width: 42px; margin: 0; accent-color: var(--accent); }
.tf-crop-zoom-value { min-width: 28px; text-align: right; font-variant-numeric: tabular-nums; }

/* One-click content fit for captured screens. The detector reads only the currently
   decoded local frame; these controls sit inside crop mode so the resulting crop stays
   visually connected to the ordinary handles/zoom controls it can still be refined with. */
.tf-auto-fit {
  position: absolute; top: 37px; right: 5px; z-index: 8; box-sizing: border-box;
  display: flex; max-width: min(330px, calc(100% - 10px)); flex-direction: column;
  align-items: flex-end; gap: 3px; padding: 4px;
  border: 1px solid var(--accent-line); border-radius: var(--r-sm);
  background: rgba(0,0,0,0.68); color: #fff;
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); pointer-events: auto;
}
.tf-auto-fit[hidden] { display: none; }
.tf-auto-fit-buttons { display: flex; gap: 4px; }
.tf-auto-fit-btn {
  min-height: 28px; margin: 0; padding: 3px 9px; color: #fff;
  background: rgba(255,255,255,0.08); border: 1px solid var(--line);
  border-radius: var(--r-chip); cursor: pointer; font-size: var(--text-xs); font-weight: 750;
}
.tf-auto-fit-btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-line); }
.tf-auto-fit-btn:disabled { opacity: .5; cursor: default; }
.tf-auto-fit-status {
  display: block; max-width: 100%; color: var(--ink-dim); font-size: 10px;
  line-height: 1.3; text-align: right;
}
.tf-auto-fit-status[data-tone="working"] { color: var(--accent); }
.tf-auto-fit-status[data-tone="success"] { color: var(--success, #62d98b); }
.tf-auto-fit-status[data-tone="error"] { color: var(--danger, #ff7777); }
@media (max-width: 760px), (pointer: coarse) {
  .tf-crop-zoom-control { bottom: 4px; max-width: calc(100% - 120px); }
  .tf-crop-zoom { width: 64px; }
  .tf-crop-zoom-value { min-width: 24px; }
  .tf-auto-fit { top: auto; right: 4px; bottom: 50px; }
  .tf-auto-fit-btn { min-width: 92px; min-height: 44px; padding: 7px 10px; }
}

/* Snap guides — thin full-span accent lines shown while a drag/resize is aligned to a
   tile edge/center, the safe area, or a frame centerline. Non-interactive. */
.tf-guides { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.tf-guides[hidden] { display: none; }
.tf-guide { position: absolute; background: var(--accent); box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent); }
.tf-guide-v { top: 0; bottom: 0; width: 1px; margin-left: -0.5px; }
.tf-guide-h { left: 0; right: 0; height: 1px; margin-top: -0.5px; }

/* Inspector Tile-layout block. */
.insp-tile {
  display: flex; flex-direction: column; gap: var(--s-2);
  border-top: 1px solid var(--line); margin-top: var(--s-2); padding-top: var(--s-3);
}
.insp-tile-h { margin: 0; color: var(--ink); font-size: var(--text-sm); letter-spacing: 0.02em; }
.insp-hint { margin: 0; color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.5; }
.tile-scope { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
.tile-scope-opt {
  display: inline-flex; align-items: center; gap: var(--s-1);
  color: var(--ink-dim); font-size: var(--text-sm); margin: 0; cursor: pointer;
}
.tile-scope-opt input { margin: 0; accent-color: var(--accent); }
.tile-nums {
  display: grid; grid-template-columns: auto repeat(4, 1fr);
  align-items: center; gap: var(--s-1) var(--s-2);
}
.tile-nums-lab { color: var(--ink-dim); font-size: var(--text-xs); font-weight: 700; }
.tile-num-cell { display: flex; flex-direction: column; gap: 1px; margin: 0; min-width: 0; }
.tile-num-ax { color: var(--ink-faint); font-size: 10px; font-weight: 700; text-align: center; }
.tile-num {
  width: 100%; margin: 0; padding: 3px 4px; text-align: right;
  font-variant-numeric: tabular-nums; font-size: var(--text-xs);
}
.tile-num:disabled { opacity: .5; }
.tile-crop-en {
  display: inline-flex; align-items: center; gap: var(--s-1);
  color: var(--ink-dim); font-size: var(--text-sm); margin: 0; cursor: pointer;
}
.tile-crop-en input { margin: 0; accent-color: var(--accent); }
.tile-layer-inspector {
  align-self: flex-start; margin: 0; padding: 4px 10px; font-size: var(--text-xs);
  border-color: var(--accent-line);
}
.tile-layer-inspector[aria-pressed="true"] {
  color: var(--on-accent); background: var(--grad-ember); border-color: transparent;
}
.tile-resets { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.tile-resets button { padding: 3px 10px; margin: 0; font-size: var(--text-xs); }

/* Speaker size row — uniform ± scale of the tile group (composes with auto-fit). */
.tile-size-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.tile-size-row .tile-size-range { flex: 1 1 90px; min-width: 80px; accent-color: var(--accent); margin: 0; }
.tile-size-step {
  padding: 0; margin: 0; width: 26px; height: 26px; line-height: 1;
  font-size: var(--text-md); font-weight: 700; flex: 0 0 auto;
}
.tile-size-val {
  min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums;
  color: var(--ink-dim); font-size: var(--text-xs); font-weight: 700;
}
.tile-size-reset { padding: 3px 10px; margin: 0; font-size: var(--text-xs); flex: 0 0 auto; }

/* ════════════════════════════════════════════════════════════════════════════
   WAVE 4 — snap-to-slot overlay, drop-to-swap highlight, People section, Auto chip.
   Ember tokens only; the JS positions everything in %. */

/* Designed-slot overlay: shown while dragging a tile. Faint dashed frames mark the
   background's manifest slots; the active magnetic-snap target glows accent. */
.tf-slots { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.tf-slots[hidden] { display: none; }
.tf-slot {
  position: absolute; box-sizing: border-box;
  border: 1px dashed color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: var(--r-sm);
}
.tf-slot.is-active {
  border: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* Drop-to-swap: the tile the dragged one will swap with lights up before release. */
.pv-tile.tf-swap-target {
  outline: 2px solid var(--accent); outline-offset: -2px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent),
              0 0 16px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ════════════════════════════════════════════════════════════════════════════
   WAVE 33 — FREE-FORM SECTION-RAIL PLACEMENT chrome. A grabbable/resizable overlay
   over the section-box band (preview.js positions it in % from railGeometry; CSS
   only dresses it). The chrome only WRITES placement — the boxes still render where
   railGeometry says. Ember tokens only. */
.rail-chrome {
  position: absolute; z-index: 12; box-sizing: border-box;
  cursor: move; touch-action: none; user-select: none;
  border-radius: var(--r-sm);
  outline: 1.5px dashed color-mix(in srgb, var(--accent) 34%, transparent);
  outline-offset: -1px;
  background: transparent;
  transition: outline-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.rail-chrome[hidden] { display: none; }
.rail-chrome:hover {
  outline: 1.5px solid color-mix(in srgb, var(--accent) 62%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.rail-chrome.is-dragging {
  outline: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent);
}
/* 8 resize handles — small dot with a generous (invisible) hit target via ::before. */
.rail-handle {
  position: absolute; width: 12px; height: 12px; box-sizing: border-box;
  background: var(--accent); border: 1px solid #fff; border-radius: 2px;
  z-index: 13; touch-action: none; opacity: 0; transition: opacity .12s ease;
}
.rail-handle::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 24px; height: 24px; transform: translate(-50%, -50%);   /* fat hit area */
}
.rail-chrome:hover .rail-handle, .rail-chrome.is-dragging .rail-handle { opacity: 1; }
.rail-h-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.rail-h-n  { left: 50%; top: -6px; margin-left: -6px; cursor: ns-resize; }
.rail-h-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.rail-h-e  { right: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }
.rail-h-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.rail-h-s  { left: 50%; bottom: -6px; margin-left: -6px; cursor: ns-resize; }
.rail-h-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.rail-h-w  { left: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }
@media (pointer: coarse) {
  .rail-handle { width: 16px; height: 16px; opacity: 1; }
  .rail-handle::before { width: 44px; height: 44px; }   /* 44px coarse target */
}
/* The live "62% × 9%" dims read-out while dragging/resizing. */
.rail-dims {
  position: absolute; left: 50%; top: -10px; transform: translate(-50%, -100%);
  padding: 2px 8px; border-radius: var(--r-chip); white-space: nowrap;
  background: rgba(0,0,0,0.62); color: #fff; z-index: 14;
  font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums; opacity: 0;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: opacity .12s ease;
}
.rail-chrome:hover .rail-dims, .rail-chrome.is-dragging .rail-dims { opacity: 1; }
/* The snap-zone ghost: a full-width outline of the top/bottom preset band the drop
   will snap to. */
.rail-snap-ghost {
  position: absolute; z-index: 11; box-sizing: border-box; pointer-events: none;
  border-radius: var(--r-sm);
  border: 2px dashed color-mix(in srgb, var(--accent) 78%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 40%, transparent);
}
.rail-snap-ghost[hidden] { display: none; }

/* Panel: the Free-placement numeric controls (shown when Position = Free). */
.rail-free { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-1); }
.rail-free[hidden] { display: none; }
.rail-free-hint { margin: 0; color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.45; }
.rail-rect-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.rail-rect-cell { display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 0; }
.rail-rect-ax { color: var(--ink-faint); font-size: 10px; font-weight: 700; text-align: center; }
.rail-rect-num {
  width: 100%; margin: 0; padding: 3px 4px; text-align: right;
  font-variant-numeric: tabular-nums; font-size: var(--text-xs);
}
.rail-reset-pos { align-self: flex-start; padding: 3px 10px; margin: 0; font-size: var(--text-xs); }

/* Toolbar 'Auto' layout chip — text pill beside the variant glyphs. */
.tb-ly-auto {
  padding: 0 10px; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.02em;
  color: var(--ink-dim);
}
.tb-ly-auto:hover:not(:disabled) { color: var(--ink); }
.tb-ly-auto.is-active { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }

/* Inspector — 'People in this scene' (+ Add / − Remove person). */
.insp-people {
  display: flex; flex-direction: column; gap: var(--s-2);
  border-top: 1px solid var(--line); margin-top: var(--s-2); padding-top: var(--s-3);
}
.people-list { display: flex; flex-direction: column; gap: var(--s-1); }
.people-row { display: flex; align-items: center; gap: var(--s-2); }
.people-idx {
  width: 22px; height: 22px; flex: none; text-align: center; line-height: 22px;
  color: var(--ink-dim); font-size: var(--text-sm); font-weight: 700;
  background: var(--stage-3); border-radius: var(--r-sm);
}
.people-name { flex: 1 1 auto; color: var(--ink); font-size: var(--text-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-x {
  display: inline-grid; flex: none; width: 30px; min-width: 30px; height: 30px;
  place-items: center; padding: 0; margin: 0; border-radius: 50%; font-size: var(--text-xs); line-height: 1;
}
.people-x:disabled { opacity: .4; cursor: default; }
.people-add-sel { width: 100%; margin: 0; }
.people-hint { margin: 0; }

/* Panel jump-highlight — when the header "Section boxes" / "Highlights" buttons
   open the Render drawer, briefly ring the target panel so the eye lands on the
   right controls (they share the drawer with Background + render outputs). */
.panel-flash {
  border-radius: var(--r-card);
  animation: panelFlash 1.4s ease-out 1;
}
@keyframes panelFlash {
  0%   { box-shadow: 0 0 0 2px var(--accent-line), 0 0 22px var(--accent-soft); background: var(--accent-soft); }
  100% { box-shadow: 0 0 0 0 transparent; background: transparent; }
}

/* ── Import a recording — picker CTA + modal flow ─────────────────────────────
   The entry point sits above the session list; the flow itself runs in a centered
   modal. Ember tokens only; the modal mirrors the delete-dialog scrim conventions. */
.import-cta {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  margin: 0 0 var(--s-5); padding: var(--s-4);
  background: var(--stage-2); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.import-cta-btn { flex: none; min-height: 44px; margin: 0; display: inline-flex; align-items: center; gap: var(--s-2); }
.import-cta-ico { font-size: var(--text-lg); line-height: 1; }
.import-cta-help { margin: 0; color: var(--ink-dim); font-size: var(--text-sm); flex: 1 1 220px; min-width: 200px; }

.imp-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(2px);
  display: grid; place-items: center; padding: var(--s-4);
}
.imp-card {
  width: min(560px, 96vw); max-height: 90vh; overflow-y: auto;
  background: var(--stage-1); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
}
.imp-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line);
}
.imp-h { margin: 0; flex: 1 1 auto; font-size: var(--text-lg); letter-spacing: -0.01em; color: var(--ink); }
.imp-x { flex: none; padding: 3px 9px; margin: 0; line-height: 1; }
.imp-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.imp-lede { margin: 0; color: var(--ink); font-size: var(--text-base); }
.imp-fine { margin: 0; color: var(--ink-faint); font-size: var(--text-sm); }
.imp-fine a { color: var(--accent); }
.imp-steps { margin: 0; padding-left: 1.3em; color: var(--ink-dim); font-size: var(--text-sm); display: flex; flex-direction: column; gap: var(--s-1); }
.imp-steps code, .imp-note code { color: var(--code); }
.imp-actions { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin-top: var(--s-1); }
.imp-actions button { margin: 0; }

.imp-note {
  background: var(--stage-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3); color: var(--ink-dim); font-size: var(--text-sm);
}
.imp-note p { margin: 0; }

.imp-warn {
  color: var(--ink); font-size: var(--text-sm);
  padding: var(--s-3); border-left: 3px solid var(--accent);
  background: var(--accent-soft); border-radius: var(--r-sm);
}

.imp-field { display: flex; flex-direction: column; gap: var(--s-1); }
.imp-field-label { color: var(--ink-dim); font-size: var(--text-sm); font-weight: 700; }
.imp-input { width: 100%; margin: 0; }

.imp-people { display: flex; flex-direction: column; gap: var(--s-2); }
.imp-person {
  display: flex; align-items: flex-start; gap: var(--s-3);
  background: var(--stage-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: var(--s-3);
}
.imp-seat {
  flex: none; align-self: center; min-width: 4.5em;
  font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.04em;
  color: var(--accent); text-transform: uppercase;
}
.imp-person-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.imp-name { margin: 0; }
.imp-person-meta { color: var(--ink-faint); font-size: var(--text-xs); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.imp-tag { color: var(--ink-dim); font-size: var(--text-xs); }
.imp-tag-warn { color: var(--accent); }
.imp-person-ctrls { flex: none; display: flex; gap: 2px; align-self: center; }
.imp-move { padding: 2px 8px; margin: 0; line-height: 1; font-size: var(--text-sm); }
.imp-move:disabled { opacity: .35; cursor: default; }
.imp-move-danger:hover:not(:disabled) { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, transparent); }

.imp-working { display: flex; align-items: center; gap: var(--s-3); color: var(--ink); font-size: var(--text-base); }
.imp-work-status { min-width: 0; }
.imp-spinner {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--line-strong); border-top-color: var(--accent);
  animation: imp-spin 0.8s linear infinite;
}
@keyframes imp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .imp-spinner { animation: none; } }

/* ── Featured callouts ─────────────────────────────────────────────────────── */
/* Card overlay on the monitor stage: transparent (the live backdrop + header show
   through), pointer-transparent, fades in/out with the shared enter/exit animation. */
.pv-callout-canvas { position: absolute; inset: 0; width: 100%; height: 100%;
  display: none; z-index: 22; background: transparent; pointer-events: none;
  opacity: 0; transition: opacity 120ms ease; }
.pv-callout-canvas.is-active { display: block; opacity: 1; }

/* Clip-in-card: the muted <video> that plays cover-cropped INTO the landscape frame's
   content rect, over the card's baked still. Positioned/sized inline per frame from the
   shared layout geometry (WYSIWYG); opacity/transform set inline to fade+rise with the
   card (no CSS transition — the per-frame alpha IS the animation). z 23 > the card's 22. */
.pv-callout-clip { position: absolute; display: none; z-index: 23; object-fit: cover;
  background: #0c0e14; pointer-events: none; will-change: opacity, transform; }
.pv-callout-clip.is-active { display: block; }

/* Callouts drawer body */
.callout-panel { display: block; }
.callout-section .rail-h { margin-bottom: var(--s-1); }
.callout-list { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.callout-row { border: 1px solid var(--stage-3); border-left: 3px solid var(--accent);
  border-radius: var(--radius-s, 8px); background: var(--stage-1); padding: var(--s-2);
  display: flex; flex-direction: column; gap: var(--s-2); }
.callout-row-head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.callout-row-head.is-clickable { cursor: pointer; border-radius: 4px; }
.callout-row-head.is-clickable:hover { background: var(--stage-1); }
.callout-preview { color: var(--accent); }
.callout-type { min-width: 7rem; }
.callout-time-wrap { display: inline-flex; align-items: center; gap: 4px; }
.callout-time { width: 5.5rem; text-align: center; }
.callout-ctl { display: inline-flex; gap: 2px; margin-left: auto; }
.callout-del { color: var(--danger, #e5484d); }
.callout-kicker-hint { font-size: var(--text-xs); letter-spacing: .12em; font-weight: 700;
  color: var(--accent); opacity: .85; }
.callout-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-1); }
.callout-field { display: flex; flex-direction: column; gap: 2px; }
.callout-field-label { font-size: var(--text-xs); color: var(--ink-dim); }
.callout-field input, .callout-field select { width: 100%; }
.callout-duration { width: 6rem; }
.callout-cover-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.callout-cover-thumb { width: 48px; height: 66px; border-radius: 4px; border: 1px solid var(--stage-3);
  background: var(--stage-2) center/cover no-repeat; display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 9px; line-height: 1.1; color: var(--ink-faint); padding: 2px; flex: 0 0 auto; }
.callout-cover-thumb.has-img { color: transparent; }
.callout-cover-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.callout-cover-btn, .callout-fetch-cover { font-size: var(--text-xs); }

/* Per-type media section: link chips + visual controls + screenshot hint */
.callout-media { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-1); }
.callout-thumbs { display: flex; gap: 6px; flex: 0 0 auto; }
.callout-app-thumb { width: 66px; height: 42px; }   /* landscape app-shot inset thumb */
.callout-chip-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.callout-chip-label { font-size: var(--text-xs); color: var(--ink-faint); }
.callout-chip { font-size: var(--text-xs); font-weight: 600; }
.callout-chip-hint { font-size: var(--text-xs); color: var(--ink-faint); }
.callout-shot-hint { border-top: 1px dashed var(--stage-3); padding-top: var(--s-1); }
.callout-shot-hint .hint { margin: 0 0 4px; }
.callout-shot-cmd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.callout-shot-cmd code { font-size: 11px; background: var(--stage-2); border: 1px solid var(--stage-3);
  border-radius: 4px; padding: 2px 6px; overflow-x: auto; white-space: nowrap; max-width: 100%; }
.callout-shot-copy { font-size: var(--text-xs); flex: 0 0 auto; }
.callout-detect-row { margin-top: var(--s-2); }
.callout-detect { font-weight: 600; }

/* Candidate pick-list (from Detect mentions) */
.callout-candidates { margin-top: var(--s-2); border: 1px solid var(--stage-3);
  border-radius: var(--radius-s, 8px); background: var(--stage-0); padding: var(--s-2); }
.callout-cand-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.callout-cand-title { font-weight: 700; font-size: var(--text-s); }
.callout-cand-list { display: flex; flex-direction: column; gap: 4px; margin-top: var(--s-1); }
.callout-cand-row { display: flex; align-items: flex-start; gap: var(--s-2);
  padding: 4px 6px; border-radius: 6px; }
.callout-cand-row:hover { background: var(--stage-1); }
.callout-cand-star { font-size: 1.1rem; line-height: 1; padding: 0 4px; color: var(--accent); }
.callout-cand-body { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.callout-cand-l1 { display: flex; align-items: baseline; gap: 6px; }
.callout-cand-glyph { flex: 0 0 auto; }
.callout-cand-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.callout-cand-time { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-dim); font-size: var(--text-xs); }
.callout-cand-author { font-size: var(--text-xs); color: var(--ink-dim); }
.callout-cand-quote { font-size: var(--text-xs); color: var(--ink-faint); font-style: italic; }
.callout-cand-err { color: var(--danger, #e5484d); }

/* Callout workspace: a compact episode-wide library plus ONE focused editor. */
@media (min-width: 900px) {
  body[data-inspector-tool="callouts"] { --rail-l: min(430px, 40vw); }
}
.callout-section {
  container-type: inline-size; display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-2); min-width: 0;
}
.callout-lede { margin: 0; line-height: 1.35; }
.callout-panel-head { position: sticky; top: 0; z-index: 4; padding: 2px 0;
  background: var(--stage-0); }
.callout-fetch-shots { white-space: nowrap; }
.callout-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.callout-stat {
  min-width: 0; margin: 0; padding: 7px 4px; display: flex; flex-direction: column;
  align-items: center; gap: 1px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--stage-1); color: var(--ink-dim); font-size: 10px; line-height: 1.15;
}
.callout-stat:hover, .callout-stat.is-active { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); }
.callout-stat-value { color: var(--ink); font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.callout-quickadd { margin: 0 !important; padding: var(--s-2) !important; }
.callout-quickadd-hint { display: none; }
.callout-detect-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin: 0; }
.callout-detect-row button { margin: 0; white-space: nowrap; }
.callout-auto-find { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.callout-filterbar { display: flex; flex-direction: column; gap: 6px; padding-top: var(--s-1); border-top: 1px solid var(--line); }
.callout-filter-search { width: 100%; margin: 0; }
.callout-filter-chips { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 1px; }
.callout-filter { flex: 0 0 auto; margin: 0; padding: 3px 8px; font-size: var(--text-xs); }
.callout-filter.is-active { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.callout-workspace { display: block; position: relative; min-width: 0; }
.callout-browser { min-width: 0; max-height: min(54vh, 520px); overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; padding-right: 2px; scrollbar-gutter: stable; }
.callout-focused-library-head { display: none; }
.callout-section.has-open-editor { gap: 4px; }
/* Keep the comparison strip and focused editor inside the left rail's own viewport.
   Without this height chain, focusing a field makes the outer tool rail scroll and
   carries the callout library offscreen even though the detail pane scrolls itself. */
.editor-tool-context-scroll:has(.callout-section.has-open-editor) { overflow: hidden; }
.editor-tool-context-scroll:has(.callout-section.has-open-editor) .ed-drawer-callouts,
.editor-tool-context-scroll:has(.callout-section.has-open-editor) .ed-drawer-scroll,
.editor-tool-context-scroll:has(.callout-section.has-open-editor) .callout-panel,
.editor-tool-context-scroll:has(.callout-section.has-open-editor) .callout-section.has-open-editor {
  height: 100%; min-height: 0; max-height: 100%;
}
.editor-tool-context-scroll:has(.callout-section.has-open-editor) .callout-section.has-open-editor { overflow: hidden; }
/* Focus mode keeps the episode library visible above the editor. Hide creation and
   filtering chrome temporarily so the useful comparison strip + editor own the rail. */
.callout-section.has-open-editor > .callout-lede,
.callout-section.has-open-editor > .callout-overview,
.callout-section.has-open-editor > .callout-quickadd,
.callout-section.has-open-editor > .callout-detect-row,
.callout-section.has-open-editor > .callout-candidates,
.callout-section.has-open-editor > .callout-filterbar { display: none; }
.callout-workspace.has-open-editor { display: flex; flex: 1 1 auto; flex-direction: column; gap: 5px; min-height: 0; }
.callout-workspace.has-open-editor .callout-browser {
  display: block; flex: 0 0 auto; max-height: 150px; padding: 0 3px 3px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--stage-0);
}
.callout-workspace.has-open-editor .callout-focused-library-head {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 3px 4px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--stage-1) 96%, transparent); backdrop-filter: blur(8px);
}
body.editor button.callout-focused-library-back {
  min-height: 25px; margin: 0; padding: 2px 6px; color: var(--ink); font-size: 10px; font-weight: 750;
}
.callout-focused-library-count {
  min-width: 0; margin-left: auto; overflow: hidden; color: var(--ink-faint); font-size: 9px;
  font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap;
}
.callout-workspace.has-open-editor .callout-list { padding-top: 2px; }
.callout-list { gap: 4px; margin: 0; min-width: 0; }
.callout-library-card {
  display: grid; grid-template-columns: 30px 44px minmax(0, 1fr) auto auto; align-items: center;
  gap: 5px; height: 42px; min-height: 42px; min-width: 0; padding: 4px 5px; margin: 0; border: 1px solid var(--line);
  border-left: 3px solid transparent; border-radius: var(--r-sm); background: var(--stage-1);
  cursor: pointer; overflow: hidden; transition: border-color .12s, background .12s;
}
.callout-library-card:hover { border-color: var(--line-strong); background: var(--stage-2); }
.callout-library-card.is-selected { border-color: var(--accent-line); border-left-color: var(--accent); background: var(--accent-soft); }
.callout-library-card[data-status="needs"]:not(.is-selected) { border-left-color: color-mix(in srgb, var(--accent) 42%, transparent); }
.callout-summary-thumb.callout-library-thumb {
  width: 30px; height: 30px; border-radius: 4px; background: var(--stage-2) center/cover no-repeat;
  display: block;
}
.callout-library-main { min-width: 0; display: block; }
.callout-type-badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-dim); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; display: none; }
.callout-library-time { color: var(--ink-faint); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: center; }
.callout-library-title {
  width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent;
  color: var(--ink); font-size: var(--text-sm); font-weight: 750; line-height: 1.2; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.callout-library-title:hover, .callout-library-title:focus-visible { color: var(--accent); background: transparent; }
.callout-readiness-row, .callout-video-status { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.callout-library-status {
  display: inline-flex; align-items: center; gap: 4px; min-width: 49px; padding: 2px 5px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 9px; font-weight: 750;
  white-space: nowrap; justify-content: center;
}
.callout-library-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.callout-library-status.is-ready { color: #65d6a5; border-color: color-mix(in srgb, #65d6a5 35%, transparent); }
.callout-library-status.is-needs { color: #f0aa75; border-color: color-mix(in srgb, #f0aa75 35%, transparent); }
.callout-library-status[data-requested="true"]::after { content: '!'; color: var(--accent); font-weight: 900; }
.callout-readiness {
  display: inline-flex; align-items: center; min-height: 16px; padding: 1px 5px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-faint); font-size: 9px; line-height: 1.2; white-space: nowrap;
}
.callout-readiness.is-ready { color: #65d6a5; border-color: color-mix(in srgb, #65d6a5 35%, transparent); background: color-mix(in srgb, #65d6a5 8%, transparent); }
.callout-readiness.is-missing { color: #f0aa75; border-color: color-mix(in srgb, #f0aa75 35%, transparent); background: color-mix(in srgb, #f0aa75 8%, transparent); }
.callout-readiness.is-optional { opacity: .48; }
.callout-presentation-badge { width: fit-content; max-width: 108px; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink-dim); font-size: 9px; white-space: nowrap; display: none; }
.callout-request-badge { color: #f0aa75; font-size: 9px; font-weight: 750; text-transform: uppercase; white-space: nowrap; }
.callout-library-actions { display: flex; align-items: center; justify-content: flex-end; gap: 3px; min-width: 0; }
.callout-library-actions button { margin: 0; min-height: 28px; padding: 2px 6px; font-size: 10px; white-space: nowrap; }
.callout-library-actions .callout-preview { width: 27px; min-width: 27px; padding-inline: 3px; }
.callout-row-rescan { color: var(--accent); }
.callout-detail-pane { min-width: 0; max-height: min(64vh, 700px); overflow: auto; overscroll-behavior: contain;
  scrollbar-gutter: stable; animation: callout-editor-in 140ms ease-out; }
.callout-workspace.has-open-editor .callout-detail-pane { flex: 1 1 auto; max-height: none; }
.callout-detail-pane[hidden] { display: none !important; }
@keyframes callout-editor-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.callout-detail { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--stage-0); overflow: hidden; }
.callout-detail-head { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px var(--s-2);
  padding: var(--s-3); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--stage-1) 96%, transparent); backdrop-filter: blur(10px); }
.callout-detail-head-copy { grid-column: 1 / -1; min-width: 0; }
.callout-detail-eyebrow { display: block; color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.callout-detail-head h3 { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-base); }
.callout-detail-nav, .callout-detail-head-actions { display: flex; align-items: center; gap: 4px; min-width: 0; }
.callout-detail-head-actions { justify-self: end; }
.callout-detail-position {
  min-width: 34px; color: var(--ink-faint); font-size: 9px; font-weight: 750;
  font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap;
}
.callout-detail-preview { flex: 0 0 auto; margin: 0; white-space: nowrap; }
.callout-detail-close { flex: 0 0 auto; margin: 0; white-space: nowrap; color: var(--ink-dim); }
.callout-detail-rescan { flex: 0 0 auto; margin: 0; white-space: nowrap; }
body.editor button.callout-detail-previous,
body.editor button.callout-detail-next { width: 28px; min-width: 28px; min-height: 28px; margin: 0; padding: 2px; font-size: 18px; }
.callout-detail-group { padding: var(--s-3); border-bottom: 1px solid var(--line); }
.callout-detail-group:last-child { border-bottom: 0; }
.callout-detail-group-head { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-2); }
.callout-detail-group-head h4 { flex: 0 0 auto; margin: 0; color: var(--ink); font-size: var(--text-sm); }
.callout-detail-group-head .hint { margin-left: auto; text-align: right; font-size: 10px; }
.callout-detail-group-body { display: flex; flex-direction: column; gap: var(--s-2); }
.callout-detail .callout-row-head { align-items: flex-end; flex-wrap: wrap; }
.callout-detail .callout-type { flex: 1 1 130px; min-width: 0; }
.callout-detail .callout-time-wrap { flex: 0 1 120px; min-width: 0; }
.callout-detail .callout-time { width: 78px; min-width: 0; }
.callout-detail .callout-field:has(.callout-duration) { flex: 0 0 72px; }
.callout-detail .callout-duration { width: 100%; }
.callout-detail .callout-ctl { margin-left: auto; }
.callout-detail .callout-ctl button { margin: 0; padding: 3px 7px; }
.callout-identity-grid, .callout-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.callout-identity-grid .callout-field:first-child,
.callout-identity-grid .callout-field:nth-child(2),
.callout-video-grid .callout-field:nth-child(2),
.callout-video-grid .callout-field:nth-child(3),
.callout-video-grid .callout-field:nth-child(7) { grid-column: 1 / -1; }
.callout-url-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: end; }
.callout-open-link { align-self: end; margin: 0 0 1px; padding: 5px 8px; white-space: nowrap; text-decoration: none; }
.callout-detail .callout-cover-row { align-items: flex-start; }
.callout-detail .callout-thumbs { min-width: 0; }
.callout-detail .callout-cover-thumb { width: 70px; height: 90px; }
.callout-detail .callout-app-thumb { width: 112px; height: 70px; }
.callout-detail .callout-cover-btns { flex: 1 1 170px; }
.callout-video-editor { display: flex; flex-direction: column; gap: var(--s-2); }
.callout-video-status .hint { flex: 1 1 100%; margin: 2px 0 0; }
.callout-video-advanced { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-2); color: var(--ink-dim); font-size: var(--text-xs); }
.callout-video-advanced summary { cursor: pointer; }
.callout-video-advanced-grid { margin-top: var(--s-2); }
.callout-clear-video { align-self: flex-start; color: var(--ink-dim); margin: 0; }
.callout-link-status { display: flex; gap: 4px; flex-wrap: wrap; }
.callout-media-candidates { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.callout-media-candidates-empty { margin: 0; }
.callout-image-picker { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.callout-image-picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.callout-image-picker-head strong { font-size: var(--text-xs); }
.callout-image-picker-head .hint { margin: 0; font-size: 9px; text-align: right; }
.callout-image-picker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.callout-image-choice { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--stage-1); }
.callout-image-choice:first-child { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
.callout-image-choice-preview { position: relative; display: block; width: 100%; height: 104px; margin: 0; padding: 0;
  overflow: hidden; border: 0; border-radius: 0; background: var(--stage-2); cursor: pointer; }
.callout-image-choice-preview img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--stage-2); }
.callout-image-choice-preview:hover img { transform: scale(1.025); }
.callout-image-choice-rank { position: absolute; left: 5px; top: 5px; max-width: calc(100% - 10px); padding: 2px 5px;
  border-radius: 999px; overflow: hidden; text-overflow: ellipsis; color: #fff; background: rgba(0,0,0,.76);
  font-size: 9px; font-weight: 800; white-space: nowrap; }
.callout-image-choice-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 5px 6px 2px; }
.callout-image-choice-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.callout-image-choice-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-faint); font-size: 9px; }
.callout-image-choice-actions { display: flex; align-items: center; justify-content: space-between; gap: 3px; padding: 3px 5px 5px; }
.callout-image-choice-actions > * { margin: 0; min-width: 0; padding: 3px 5px; font-size: 9px; }
.callout-image-choice.is-tiny, .callout-image-choice.is-broken { order: 99; opacity: .42; filter: grayscale(.7); }
.callout-image-choice.is-tiny .callout-image-choice-preview,
.callout-image-choice.is-broken .callout-image-choice-preview { cursor: not-allowed; }
.callout-media-other { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.callout-media-other-title { font-size: var(--text-xs); }
.callout-media-choice {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: 6px; align-items: center;
  min-width: 0; padding: 5px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--stage-1);
}
.callout-media-choice-thumb, .callout-media-choice-glyph {
  width: 38px; height: 34px; border-radius: 4px; background: var(--stage-2); object-fit: cover;
}
.callout-media-choice-glyph { display: grid; place-items: center; color: var(--accent); font-weight: 800; }
.callout-media-choice-copy { min-width: 0; display: flex; flex-direction: column; }
.callout-media-choice-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); }
.callout-media-choice-kind { color: var(--ink-faint); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.callout-media-choice-open { margin: 0; padding: 3px 6px; color: var(--ink-dim); font-size: 10px; text-decoration: none; white-space: nowrap; }
.callout-media-choice-use { margin: 0; padding: 3px 6px; font-size: 10px; white-space: nowrap; }
.callout-detail-collaboration { padding: var(--s-3); }
.callout-detail-collaboration .callout-request { margin: 0; width: 100%; justify-content: center; }
.callout-foot { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; padding: var(--s-1) 0; }
.callout-foot button { margin: 0; padding: 3px 8px; font-size: var(--text-xs); }
.callout-foot .callout-add { flex: 1 1 auto; }
.callout-global-settings { border-top: 1px solid var(--line); padding-top: var(--s-2); color: var(--ink-dim); font-size: var(--text-xs); }
.callout-global-settings summary { cursor: pointer; }
.callout-affiliate-row { margin-top: var(--s-2); }

@container (min-width: 440px) {
  .callout-library-card { grid-template-columns: 32px 46px minmax(90px, 1fr) minmax(64px, auto) auto auto; gap: 6px; }
  .callout-summary-thumb.callout-library-thumb { width: 32px; height: 32px; }
  .callout-type-badge { display: block; max-width: 92px; }
  .callout-image-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 650px) {
  .callout-library-card { grid-template-columns: 34px 48px minmax(130px, 1fr) minmax(76px, auto) auto minmax(72px, auto) auto; gap: 7px; }
  .callout-summary-thumb.callout-library-thumb { width: 34px; height: 34px; }
  .callout-presentation-badge { display: block; }
  .callout-image-picker-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (max-width: 390px) {
  .callout-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .callout-detect-row { grid-template-columns: 1fr; }
  .callout-library-card { grid-template-columns: 30px minmax(60px, 1fr) auto auto; }
  .callout-library-time { display: none; }
  .callout-identity-grid, .callout-video-grid { grid-template-columns: minmax(0, 1fr); }
  .callout-identity-grid .callout-field,
  .callout-video-grid .callout-field { grid-column: auto !important; }
  .callout-detail-group-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .callout-detail-group-head .hint { margin-left: 0; text-align: left; }
  .callout-workspace.has-open-editor .callout-browser { max-height: 136px; }
  .callout-detail-head { padding: var(--s-2); }
  .callout-detail-nav, .callout-detail-head-actions { gap: 3px; }
  .callout-detail-preview, .callout-detail-rescan { flex: 0 1 auto; padding-inline: 6px; }
  .callout-focused-library-count { max-width: 178px; }
  .callout-image-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .callout-image-choice-preview { height: 92px; }
  .callout-media-choice { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .callout-media-choice-open { grid-column: 2; justify-self: start; }
  .callout-media-choice-use { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 899px) {
  body[data-inspector-tool="callouts"] { --rail-l: 100%; }
  .callout-browser { max-height: 300px; }
}
@media (pointer: coarse) {
  body.editor button.callout-focused-library-back,
  body.editor button.callout-detail-previous,
  body.editor button.callout-detail-next,
  body.editor button.callout-detail-close,
  body.editor button.callout-detail-preview,
  body.editor button.callout-detail-rescan { min-height: 44px; }
  body.editor button.callout-detail-previous,
  body.editor button.callout-detail-next { width: 44px; min-width: 44px; }
}

/* ── Font pickers (Name-tag / Section-box typeface) ──────────────────────────
   The bundled-font @font-face rules are injected from the shared registry
   (src/js/shared/fonts.mjs via preview.js / theme-panel.js / rail-panel.js), so this
   section only styles the picker <select>s. Each <option> carries an inline
   font-family (set in JS) so the dropdown previews the face; a touch more line-height
   keeps a display face (Bebas/Oswald) legible in the list. */
.tp-font-select, select.rp-font { line-height: 1.4; }
.tp-font-select option, select.rp-font option { padding: 3px 4px; font-size: var(--text-s, 0.875rem); }

/* ── COLLAB (Phase C1): live multi-person editing ────────────────────────────
   Header presence cluster (who's editing), the History drawer's op-stack list, and
   the timeline draws remote playheads on its own canvas (see timeline.js). All of
   this is inert/hidden when editing solo — the header is unchanged when alone. */
.collab-cluster { display: inline-flex; align-items: center; gap: -6px; margin: 0 4px; }
.collab-cluster[hidden] { display: none; }
.collab-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-left: -6px; border-radius: 50%;
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em; color: #0a0a0c;
  border: 2px solid var(--stage-0, #0a0a0c); box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
.collab-chip:first-child { margin-left: 0; }
.collab-chip.is-self { outline: 1.5px solid rgba(255,255,255,0.7); outline-offset: -1px; }
.collab-chip-more { background: var(--stage-3, #26262c) !important; color: var(--ink, #f4f3f6); }

/* A phone still has the same trustworthy status chrome as desktop: Back, dirty
   state, history, live editors, companion state and Save. Keep their DOM/tab order,
   but let the row wrap. The title uses a bounded flex basis and the presence stack
   owns its overflow, so a busy collaboration never pushes Save off-screen. */
@media (max-width: 520px) {
  body[data-screen="editor"] .ed-header {
    flex-wrap: wrap; align-content: center; column-gap: 6px; row-gap: 4px;
    padding-top: 6px; padding-bottom: 6px;
  }
  body.editor .ed-header .hbtn-back {
    width: 44px; padding-inline: 0; justify-content: center;
  }
  .ed-header .hbtn-back .hb-lbl { display: none; }
  body[data-screen="editor"] .ed-header .ed-title {
    flex: 1 1 72px; min-width: 72px; max-width: none;
  }
  body[data-screen="editor"] .ed-header .collab-cluster {
    flex: 1 1 100px; min-width: 72px; max-width: 126px; margin: 0;
    padding: 2px 1px 3px; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; scrollbar-width: thin;
  }
  body[data-screen="editor"] .ed-header .collab-chip { flex: 0 0 26px; }
  body.editor #save-btn { margin-left: 0; }
}

.collab-panel { display: flex; flex-direction: column; gap: 12px; }
.collab-status {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 8px; background: var(--stage-1, #141417);
  font-size: var(--text-s, 0.875rem);
}
.collab-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #35e07a; box-shadow: 0 0 6px #35e07a; flex: 0 0 auto; }
.collab-status-txt { flex: 1 1 auto; min-width: 0; }
.collab-savedby { font-size: var(--text-xs, 0.75rem); color: var(--ink-dim, #b9b7c2); white-space: nowrap; }
.collab-note summary { cursor: pointer; font-size: var(--text-xs, 0.75rem); color: var(--ink-dim, #b9b7c2); }
.collab-note p { margin: 6px 0 0; }

.collab-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.collab-filter-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: 999px; border: 1px solid var(--line, rgba(255,255,255,0.12));
  background: transparent; color: var(--ink-dim, #b9b7c2); font-size: var(--text-xs, 0.75rem);
  cursor: pointer;
}
.collab-filter-chip.is-on { background: var(--stage-3, #26262c); color: var(--ink, #f4f3f6); border-color: transparent; }
.collab-sw { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }

.collab-ops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.collab-empty { padding: 16px 8px; color: var(--ink-faint, #7d7b87); font-size: var(--text-s, 0.875rem); text-align: center; }
.collab-op {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px;
  border-radius: 8px; background: var(--stage-1, #141417); border: 1px solid transparent;
}
.collab-op.is-revert { background: transparent; border-color: var(--line, rgba(255,255,255,0.12)); }
.collab-op.is-reverted { opacity: 0.5; }
.collab-av {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #0a0a0c;
}
.collab-op-main { flex: 1 1 auto; min-width: 0; }
.collab-op-line { display: flex; align-items: baseline; gap: 8px; }
.collab-op-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collab-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 1px 6px; border-radius: 4px; background: var(--stage-3, #26262c); color: var(--ink-dim, #b9b7c2);
}
.collab-op-meta { display: flex; align-items: baseline; gap: 8px; font-size: var(--text-xs, 0.75rem); color: var(--ink-dim, #b9b7c2); }
.collab-op-scope { color: var(--ink-faint, #7d7b87); }
.collab-op-time { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.collab-revert {
  flex: 0 0 auto; align-self: center; padding: 4px 10px; border-radius: 6px;
  background: transparent; border: 1px solid var(--line, rgba(255,255,255,0.12));
  color: var(--ink-dim, #b9b7c2); font-size: var(--text-xs, 0.75rem); cursor: pointer;
}
.collab-revert:hover { color: var(--ink, #f4f3f6); border-color: var(--accent, #ff6a3d); }

.collab-force { flex: 1 1 100%; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--stage-0, #0a0a0c); border: 1px solid var(--accent, #ff6a3d); }
.collab-force-h { margin: 0 0 4px; font-weight: 700; font-size: var(--text-s, 0.875rem); }
.collab-force-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.collab-force-btn { padding: 4px 12px; border-radius: 6px; background: var(--accent, #ff6a3d); color: #0a0a0c; border: none; font-weight: 600; cursor: pointer; }

/* ── Near-full-page theme browser ────────────────────────────────────────────
   Body-appended by theme-browser-modal.js so the narrow Inspector cannot clip it.
   The center column scrolls with the dialog body; the filter and comparison rails
   stay sticky until the mobile single-column treatment takes over. */
.tbm-backdrop {
  position: fixed; inset: 0; z-index: 160;
  display: grid; place-items: center; box-sizing: border-box;
  padding: 4vh 2vw;
  background: rgba(2, 3, 7, .82);
  backdrop-filter: blur(8px);
}
.tbm-dialog {
  width: min(96vw, 1800px); height: min(92vh, 1100px); min-width: 0; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
  color: var(--ink); background: var(--stage-1);
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 28px 100px rgba(0, 0, 0, .68);
}
.tbm-header {
  flex: none; display: flex; align-items: center; gap: var(--s-4);
  min-height: 76px; padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line); background: var(--stage-1);
}
.tbm-heading-copy { flex: 1 1 auto; min-width: 0; }
.tbm-title { margin: 0; color: var(--ink); font-size: var(--text-xl); letter-spacing: -.025em; }
.tbm-subtitle { margin: 3px 0 0; color: var(--ink-dim); font-size: var(--text-sm); }
.tbm-header-count {
  display: inline-flex; margin-top: 5px; color: var(--accent);
  font-size: var(--text-xs); font-weight: 750; letter-spacing: .03em;
  text-transform: uppercase;
}
body.editor button.tbm-close {
  flex: none; min-width: 104px; min-height: 52px; margin: 0; padding: 10px 20px;
  color: var(--ink); font-size: var(--text-base); font-weight: 750;
  background: var(--stage-2); border-color: var(--accent-line);
}
.tbm-body {
  flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto;
  display: grid; grid-template-columns: minmax(180px, 220px) minmax(460px, 1fr) minmax(320px, 390px);
  align-items: start; gap: var(--s-4); padding: var(--s-4);
  overscroll-behavior: contain; scrollbar-gutter: stable;
}
.tbm-filters, .tbm-detail {
  position: sticky; top: 0; align-self: start; min-width: 0;
  max-height: min(calc(92vh - 144px), 956px); overflow: auto; box-sizing: border-box;
  scrollbar-width: thin;
}
.tbm-filters {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-3); background: var(--stage-0);
  border: 1px solid var(--line); border-radius: var(--r-card);
}
.tbm-pane-title, .tbm-detail-title {
  margin: 0; color: var(--ink); font-size: var(--text-lg); letter-spacing: -.015em;
}
.tbm-search-label {
  display: flex; flex-direction: column; gap: 5px;
  color: var(--ink-dim); font-size: var(--text-xs); font-weight: 650;
}
body.editor .tbm-search { width: 100%; min-height: 44px; margin: 0; padding: 8px 10px; box-sizing: border-box; }
.tbm-preview-toggle {
  display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 7px 9px;
  color: var(--ink); background: var(--stage-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer;
}
.tbm-preview-toggle:hover { border-color: var(--accent-line); }
.tbm-preview-toggle:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-line); }
.tbm-preview-toggle-input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.tbm-preview-toggle-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: var(--text-xs); }
.tbm-preview-toggle-copy strong { color: var(--ink); font-size: var(--text-xs); }
.tbm-preview-toggle-copy span, .tbm-preview-mode-status { color: var(--ink-dim); font-size: 10px; line-height: 1.35; }
.tbm-preview-mode-status { min-height: 1.35em; margin: -3px 1px 0; }
.tbm-filter-heading {
  margin: var(--s-2) 0 0; padding-top: var(--s-2);
  color: var(--ink-faint); border-top: 1px solid var(--line);
  font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.tbm-filter-options { display: flex; flex-direction: column; gap: 3px; }
.tbm-filter-select { width: 100%; min-height: 40px; margin: 0; padding: 7px 9px; box-sizing: border-box; }
body.editor button.tbm-filter-button {
  width: 100%; min-height: 36px; margin: 0; padding: 6px 9px;
  text-align: left; font-size: var(--text-xs); border-color: transparent;
}
body.editor button.tbm-filter-button:hover { border-color: var(--line); }
body.editor button.tbm-filter-button.is-active {
  color: var(--ink); background: var(--accent-soft); border-color: var(--accent-line);
  box-shadow: inset 3px 0 0 var(--accent);
}
body.editor button.tbm-clear {
  width: 100%; min-height: 42px; margin: var(--s-2) 0 0; padding: 7px 10px;
  font-size: var(--text-xs);
}
.tbm-gallery-pane { min-width: 0; }
.tbm-gallery-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.tbm-results { margin: 0; color: var(--ink-dim); font-size: var(--text-xs); text-align: right; }
.tbm-gallery {
  position: relative; display: block; min-width: 0; contain: layout paint;
}
body.editor .tbm-theme-card {
  position: absolute; top: 0; left: 0; display: flex; flex-direction: column; min-width: 0;
  margin: 0; padding: 0; overflow: hidden; text-align: left;
  color: var(--ink); background: var(--stage-0);
  border: 1px solid var(--line); border-radius: var(--r-tile); cursor: pointer;
  box-shadow: none; will-change: transform;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
body.editor .tbm-theme-card:hover { border-color: var(--accent-line); background: var(--stage-2); }
body.editor .tbm-theme-card.is-selected {
  background: var(--accent-soft); border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-line);
}
.tbm-card-canvas {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  background: var(--stage-3); object-fit: cover;
}
.tbm-card-copy { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; min-height: 0; padding: 10px 11px 12px; }
.tbm-card-title { padding-right: 56px; color: var(--ink); font-size: var(--text-sm); font-weight: 750; line-height: 1.2; }
.tbm-card-blurb {
  display: -webkit-box; overflow: hidden; color: var(--ink-dim);
  font-size: var(--text-xs); line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.tbm-card-selected {
  position: absolute; top: 8px; right: 8px; display: none;
  padding: 2px 6px; color: var(--ink); background: color-mix(in srgb, var(--accent) 84%, transparent);
  border-radius: var(--r-chip); font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase;
}
.tbm-theme-card.is-selected .tbm-card-selected { display: inline-flex; }
.tbm-empty {
  position: absolute; inset: 0; display: grid; place-items: center; min-height: 260px;
  padding: var(--s-5); color: var(--ink-dim); text-align: center;
  border: 1px dashed var(--line); border-radius: var(--r-card); background: var(--stage-0);
}
.tbm-empty strong { color: var(--ink); font-size: var(--text-lg); }
.tbm-empty p { max-width: 42ch; margin: 4px 0 0; }
.tbm-detail {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-3); background: var(--stage-0);
  border: 1px solid var(--line); border-radius: var(--r-card);
}
.tbm-detail-kicker {
  color: var(--accent); font-size: 10px; font-weight: 850;
  letter-spacing: .09em; text-transform: uppercase;
}
.tbm-detail-description { margin: 0; color: var(--ink-dim); font-size: var(--text-xs); line-height: 1.4; }
.tbm-layout-grid { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tbm-stage-preview, .tbm-palette-workspace {
  display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 9px;
  background: var(--stage-1); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.tbm-detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tbm-detail-section-head h3 { margin: 0; color: var(--ink); font-size: var(--text-sm); }
.tbm-section-count { color: var(--ink-faint); font-size: 10px; font-variant-numeric: tabular-nums; }
body.editor button.tbm-refresh-stage {
  min-height: 30px; margin: 0; padding: 4px 7px; color: var(--ink-dim); font-size: 10px;
}
.tbm-detail-preview { min-width: 0; }
.tbm-stage-preview .tbm-preview-mode-status { margin: 0; }
.tbm-palette-choices {
  display: flex; gap: 6px; max-width: 100%; overflow-x: auto; padding: 1px 1px 5px;
  scrollbar-width: thin; scroll-snap-type: x proximity;
}
body.editor button.tbm-palette-choice {
  display: flex; flex: 0 0 76px; min-width: 0; min-height: 60px; flex-direction: column; gap: 4px;
  margin: 0; padding: 5px; overflow: hidden; text-align: left; scroll-snap-align: start;
  color: var(--ink-dim); background: var(--stage-0); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: none;
}
body.editor button.tbm-palette-choice:hover { color: var(--ink); border-color: var(--accent-line); }
body.editor button.tbm-palette-choice.is-active {
  color: var(--ink); background: var(--accent-soft); border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.tbm-palette-swatch { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; height: 24px; overflow: hidden; border-radius: 4px; }
.tbm-palette-swatch > span { min-width: 0; }
.tbm-palette-name { max-width: 100%; overflow: hidden; font-size: 9px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
body.editor button.tbm-customize-theme { width: 100%; min-height: 38px; margin: 0; font-size: var(--text-xs); }
.tbm-layout-disclosure { margin: 0; padding: 0; background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); }
.tbm-layout-disclosure > summary { margin: 0; padding: 8px 9px; color: var(--ink-dim); font-size: var(--text-xs); font-weight: 750; cursor: pointer; }
.tbm-layout-disclosure[open] > summary { margin: 0; color: var(--ink); border-bottom: 1px solid var(--line); }
.tbm-layout-disclosure > .tbm-layout-choices { padding: 7px; }
.tbm-layout-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
body.editor button.tbm-layout-preview {
  display: grid; width: 100%; min-width: 0; min-height: 38px; place-items: center; margin: 0; padding: 5px 7px;
  color: var(--ink-dim); background: transparent; border: 1px solid transparent;
  border-radius: var(--r-sm); box-shadow: none; cursor: pointer;
}
body.editor button.tbm-layout-preview:hover { color: var(--ink); background: var(--stage-2); border-color: var(--line); }
body.editor button.tbm-layout-preview.is-active {
  color: var(--ink); background: var(--accent-soft); border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-line);
}
body.editor button.tbm-layout-preview:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tbm-layout-canvas {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  background: var(--stage-3); border: 1px solid var(--line); border-radius: calc(var(--r-sm) - 2px);
  pointer-events: none;
}
.tbm-layout-preview.is-active .tbm-layout-canvas { border-color: var(--accent-line); }
.tbm-layout-label {
  display: block; max-width: 100%; overflow: hidden; color: var(--ink-dim);
  font-size: 10px; line-height: 1.25; text-align: center; text-overflow: ellipsis; white-space: nowrap;
}
.tbm-layout-preview.is-active .tbm-layout-label { color: var(--ink); font-weight: 750; }
.tbm-detail-empty { grid-column: 1 / -1; margin: 0; padding: var(--s-4); color: var(--ink-dim); text-align: center; }
.tbm-apply-status { min-height: 1.2em; margin: 0; color: var(--danger, #ff6b6b); font-size: var(--text-xs); }
.tbm-detail-actions {
  position: sticky; bottom: calc(0px - var(--s-3)); display: grid; grid-template-columns: auto 1fr; gap: var(--s-2);
  margin: 0 calc(0px - var(--s-3)) calc(0px - var(--s-3)); padding: var(--s-3);
  background: linear-gradient(to bottom, transparent, var(--stage-0) 18%);
}
body.editor button.tbm-cancel, body.editor button.tbm-apply { min-height: 48px; margin: 0; padding: 9px 15px; }
body.editor button.tbm-apply { width: 100%; }

@media (max-width: 1180px) {
  .tbm-body { grid-template-columns: minmax(170px, 200px) minmax(380px, 1fr) minmax(280px, 330px); gap: var(--s-3); }
  .tbm-layout-choices { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .tbm-backdrop { padding: 0; place-items: stretch; }
  .tbm-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; border-radius: 0; }
  .tbm-header { min-height: 70px; padding: var(--s-2) var(--s-3); }
  .tbm-subtitle { display: none; }
  body.editor button.tbm-close { min-width: 88px; min-height: 50px; padding: 8px 14px; }
  .tbm-body { display: block; padding: var(--s-3); }
  .tbm-filters, .tbm-detail { position: static; max-height: none; overflow: visible; }
  .tbm-filters { margin-bottom: var(--s-3); }
  .tbm-filter-options { flex-flow: row wrap; }
  body.editor button.tbm-filter-button { width: auto; min-height: 40px; flex: 1 1 auto; text-align: center; }
  body.editor button.tbm-filter-button.is-active { box-shadow: inset 0 -3px 0 var(--accent); }
  .tbm-gallery-pane { margin-bottom: var(--s-3); }
  .tbm-detail { margin-top: var(--s-3); }
  .tbm-layout-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbm-detail-actions { bottom: 0; }
}

@media (max-width: 520px) {
  .tbm-heading-copy { min-width: 0; }
  .tbm-title { font-size: var(--text-lg); }
  .tbm-header-count { display: none; }
  .tbm-layout-choices { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  body.editor .tbm-theme-card { transition: none; }
}

/* ── Shorts derivative workspace ────────────────────────────────────────────────────
   A first-class 9:16 workspace beside the NLE. Definitions and renders are
   derivatives, so the global EDL Save button is intentionally absent here. */
body[data-editor-workspace="shorts"] #save-btn { display: none; }
body[data-editor-workspace="shorts"] #shorts-btn .hb-ico {
  font-size: 9px; font-weight: 850; letter-spacing: -.04em;
}
body[data-screen="editor"] #shorts-view {
  flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden;
  background: var(--stage-0);
}
/* Author display rules on #edit-view outrank the browser's built-in [hidden]
   rule, so workspace switching needs an explicit author-level hidden contract. */
body[data-screen="editor"] #edit-view[hidden],
body[data-screen="editor"] #shorts-view[hidden] { display: none !important; }
.shorts-workspace {
  display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0;
  color: var(--ink); background: var(--stage-0);
}
.shorts-topbar {
  display: flex; align-items: center; gap: var(--s-3); flex: none;
  min-height: 64px; padding: var(--s-2) var(--s-4);
  background: var(--stage-1); border-bottom: 1px solid var(--line);
}
.shorts-heading { min-width: 0; margin-right: auto; }
.shorts-heading h2, .shorts-heading p,
.shorts-workspace h3, .shorts-form-status, .shorts-safe-copy { margin: 0; }
.shorts-heading h2 { font-size: var(--text-lg); line-height: 1.15; }
.shorts-heading p { margin-top: 2px; }
.shorts-summary {
  flex: none; padding: 4px 9px; color: var(--ink-dim); background: var(--stage-2);
  border: 1px solid var(--line); border-radius: var(--r-chip); font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
body.editor .shorts-topbar button { flex: none; min-height: 38px; margin: 0; }
.shorts-grid {
  display: grid; grid-template-columns: minmax(210px, 260px) minmax(300px, 1fr) minmax(310px, 390px);
  gap: 1px; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--line);
}
.shorts-clips, .shorts-preview-column, .shorts-settings {
  min-width: 0; min-height: 0; padding: var(--s-3); overflow: auto; background: var(--stage-0);
}
.shorts-clips, .shorts-settings { scrollbar-gutter: stable; }
.shorts-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-2); }
.shorts-section-head h3, .shorts-preview-column > h3, .shorts-settings > h3 {
  color: var(--ink); font-size: var(--text-base); line-height: 1.2;
}
.shorts-new-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
body.editor .shorts-new-actions button,
body.editor .shorts-marker-row button {
  min-width: 0; min-height: 38px; margin: 0; padding: 6px 8px; font-size: var(--text-xs);
}
.shorts-marker-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-top: 6px; }
.shorts-marker-row select { min-width: 0; margin: 0; }
.shorts-draft-list { display: flex; flex-direction: column; gap: 7px; margin-top: var(--s-3); }
body.editor button.shorts-draft-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px;
  width: 100%; min-width: 0; margin: 0; padding: 10px 11px; text-align: left;
  color: var(--ink); background: var(--stage-1); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: none;
}
body.editor button.shorts-draft-card:hover { background: var(--stage-2); border-color: var(--accent-line); }
body.editor button.shorts-draft-card.is-selected {
  background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent);
}
.shorts-draft-title { min-width: 0; overflow: hidden; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.shorts-draft-meta { min-width: 0; color: var(--ink-dim); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.shorts-artifact-state {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 3px 7px;
  color: var(--ink-dim); background: var(--stage-2); border: 1px solid var(--line);
  border-radius: var(--r-chip); font-size: 10px; font-weight: 800; white-space: nowrap;
}
.shorts-artifact-state.is-ready { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.shorts-artifact-state.is-failed { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); }
.shorts-artifact-state.is-rendering, .shorts-artifact-state.is-queued { color: var(--warn); }

.shorts-preview-column { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.shorts-preview-column > h3 { align-self: stretch; }
.shorts-preview-root { display: flex; justify-content: center; width: 100%; min-height: 0; }
.shorts-preview-shell { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); width: 100%; min-height: 0; }
.shorts-preview-frame {
  position: relative; width: min(100%, 410px); max-height: calc(100vh - 205px); aspect-ratio: 9 / 16;
  overflow: hidden; isolation: isolate; background: #08090b;
  border: 1px solid var(--line-strong); border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.shorts-preview-sources { position: absolute; inset: 0; background: var(--stage-3); }
.shorts-source-tile {
  position: absolute; min-width: 0; min-height: 0; overflow: hidden; background: var(--stage-2);
  border: 1px solid color-mix(in srgb, white 20%, transparent);
}
.shorts-source-tile video,
.shorts-source-tile img {
  display: block; position: absolute; max-width: none; transform: none; transform-origin: center;
}
.shorts-source-placeholder, .shorts-source-empty {
  position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s-3);
  color: var(--ink-dim); font-weight: 700; text-align: center;
  background: radial-gradient(circle at 50% 35%, var(--stage-4), var(--stage-2) 68%);
}
.shorts-safe-guide { position: absolute; z-index: 4; pointer-events: none; }
.shorts-safe-guide::before {
  content: attr(data-guide); position: absolute; top: 3px; left: 4px; padding: 1px 4px;
  color: rgba(255,255,255,.9); background: rgba(0,0,0,.58); border-radius: 3px;
  font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.shorts-safe-action { border: 1px dashed rgba(255,255,255,.7); }
.shorts-safe-critical { border: 1px solid rgba(255,166,77,.95); }
.shorts-caption-preview {
  position: absolute; z-index: 5; left: 12%; right: 12%; bottom: 17%; padding: 5px 7px;
  color: white; font-size: clamp(13px, 2.2vw, 25px); font-weight: 900; line-height: 1.05;
  text-align: center; text-wrap: balance; text-shadow: 0 2px 4px rgba(0,0,0,.9);
}
.shorts-caption-preview.is-shorts-clean-plate { background: rgba(0,0,0,.68); border-radius: 5px; font-weight: 750; }
.shorts-caption-preview.is-shorts-high-contrast { color: #ffe44a; -webkit-text-stroke: 1px #050505; text-transform: uppercase; }
.shorts-preview-badge {
  position: absolute; z-index: 6; top: 8px; left: 8px; padding: 3px 7px;
  color: rgba(255,255,255,.9); background: rgba(0,0,0,.68); border-radius: var(--r-chip);
  font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.shorts-preview-controls { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; width: 100%; }
body.editor .shorts-preview-controls button { min-height: 38px; margin: 0; }
.shorts-preview-controls .hint { flex: 1 1 180px; min-width: 0; }
.shorts-safe-copy { align-self: stretch; color: var(--ink-faint); font-size: var(--text-xs); text-align: center; }

.shorts-form { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.shorts-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0; }
.shorts-field-label { color: var(--ink-dim); font-size: var(--text-xs); font-weight: 750; }
.shorts-field .hint { font-size: 10px; line-height: 1.35; }
.shorts-form input:not([type="checkbox"]), .shorts-form select, .shorts-form textarea {
  width: 100%; min-width: 0; box-sizing: border-box; margin: 0;
}
.shorts-form input[type="checkbox"] { width: 20px; height: 20px; margin: 1px 0; accent-color: var(--accent); }
.shorts-range-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.shorts-range-row input { font-variant-numeric: tabular-nums; }
.shorts-manual-fields {
  display: grid; grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-3);
  background: var(--stage-1); border: 1px solid var(--accent-line); border-radius: var(--r-card);
}
.shorts-manual-fields[hidden] { display: none; }
.shorts-check-grid { display: grid; gap: 6px; }
.shorts-check-grid .shorts-field {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-2);
  padding: 8px 10px; background: var(--stage-1); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.shorts-check-grid .shorts-field-label { grid-column: 1; grid-row: 1; color: var(--ink); }
.shorts-check-grid input { grid-column: 2; grid-row: 1; }
.shorts-form-status { min-height: 1.35em; color: var(--ink-dim); line-height: 1.35; }
.shorts-safety-note {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 11px;
  color: var(--ink-dim); background: color-mix(in srgb, var(--ok) 8%, var(--stage-1));
  border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--line)); border-radius: var(--r-card);
  font-size: var(--text-xs); line-height: 1.4;
}
.shorts-safety-note strong { color: var(--ok); }
.shorts-form-actions {
  position: sticky; bottom: calc(0px - var(--s-3)); z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
  margin: var(--s-2) calc(0px - var(--s-3)) calc(0px - var(--s-3)); padding: var(--s-3);
  background: color-mix(in srgb, var(--stage-0) 94%, transparent); border-top: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
body.editor .shorts-form-actions button { min-width: 0; min-height: 46px; margin: 0; }
body.editor .shorts-form-actions .danger { grid-column: 1 / -1; color: var(--danger); }
body.editor .shorts-form-actions .danger:hover { background: color-mix(in srgb, var(--danger) 10%, var(--stage-2)); }

@media (max-width: 1080px) {
  .shorts-grid { grid-template-columns: minmax(190px, 225px) minmax(280px, 1fr) minmax(280px, 330px); }
  .shorts-new-actions { grid-template-columns: 1fr; }
}

@media (max-width: 899px) {
  body[data-screen="editor"] #shorts-view { overflow: visible; }
  .shorts-workspace { height: auto; min-height: calc(100dvh - var(--ed-header-h)); }
  .shorts-topbar { position: sticky; top: 0; z-index: 8; flex-wrap: wrap; }
  .shorts-grid { display: flex; flex-direction: column; overflow: visible; background: var(--stage-0); }
  .shorts-clips, .shorts-preview-column, .shorts-settings { overflow: visible; border-bottom: 1px solid var(--line); }
  .shorts-new-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shorts-draft-list { flex-flow: row nowrap; overflow-x: auto; padding-bottom: 5px; scroll-snap-type: x proximity; }
  body.editor button.shorts-draft-card { flex: 0 0 min(78vw, 280px); scroll-snap-align: start; }
  .shorts-preview-frame { width: min(82vw, 360px); max-height: none; }
  .shorts-form { max-width: 640px; margin-inline: auto; }
  .shorts-settings > h3 { max-width: 640px; margin-inline: auto; }
  .shorts-form-actions { bottom: 0; }
}

@media (max-width: 520px) {
  .shorts-topbar { align-items: flex-start; padding: var(--s-2) var(--s-3); }
  .shorts-heading { flex: 1 1 100%; }
  .shorts-heading p { font-size: var(--text-xs); }
  .shorts-summary { margin-right: auto; }
  .shorts-clips, .shorts-preview-column, .shorts-settings { padding: var(--s-3); }
  .shorts-new-actions { grid-template-columns: 1fr; }
  .shorts-marker-row { grid-template-columns: 1fr; }
  .shorts-preview-frame { width: min(92vw, 360px); }
  .shorts-range-row { grid-template-columns: 1fr; }
  .shorts-form-actions { grid-template-columns: 1fr; }
  body.editor .shorts-form-actions .danger { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .shorts-preview-frame video { animation: none; }
}
.tp-filter-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tp-filter-card {
  display: grid; min-width: 0; min-height: 48px; grid-template-columns: 20px minmax(0, 1fr);
  align-items: center; gap: 5px; margin: 0; padding: 5px 7px; text-align: left;
}
.tp-filter-card strong {
  display: -webkit-box; overflow: hidden; font-size: 10px; line-height: 1.15;
  overflow-wrap: anywhere; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.tp-filter-icon { display: grid; width: 20px; height: 20px; place-items: center; color: var(--accent); font-size: 16px; line-height: 1; }
.tp-filter-card.is-active { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.tp-filter-description { min-height: 1.35em; margin: 7px 0 0; color: var(--ink-dim); font-size: 10px; line-height: 1.35; }
.tp-face-fx-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.tp-face-fx-colors .tp-row { min-width: 0; }
.tp-face-fx-groups { display: grid; gap: 10px; }
.tp-face-fx-group { display: grid; gap: 5px; min-width: 0; }
.tp-face-fx-group-title { color: var(--ink-dim); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tp-face-fx-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 5px; overflow: visible; }
.tp-face-fx-card { display: grid; min-width: 0; min-height: 48px; place-items: center; align-content: center; gap: 2px; margin: 0; padding: 4px 3px; text-align: center; border-radius: 7px; }
.tp-face-fx-card strong { max-width: 100%; overflow: hidden; font-size: 10px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.tp-face-fx-icon { display: grid; width: 20px; height: 18px; place-items: center; color: var(--accent); font-size: 16px; line-height: 1; }
.tp-face-fx-card.is-active { border-color: var(--accent-line); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); color: var(--accent); }
.tp-face-fx-description { min-height: 30px; margin: 7px 0 0; color: var(--ink-dim); font-size: 10px; line-height: 1.35; }
.tp-face-fx-customize { margin-top: 2px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--panel) 78%, transparent); }
.tp-face-fx-customize > summary { padding: 7px 9px; cursor: pointer; color: var(--ink); font-size: 10px; font-weight: 750; }
.tp-face-fx-customize[open] > summary { border-bottom: 1px solid var(--line); }
.tp-face-fx-customize > .tp-row,
.tp-face-fx-customize > .tp-face-fx-colors { margin: 7px; }

/* ==========================================================================
   COMPOSITION WORKFLOW
   Inspector owns current-scene composition; the stage row stays a summary.
   ========================================================================== */
.stage-source-mount { overflow: visible; }
body.editor button.composition-stage-launcher {
  flex: 0 1 auto; min-width: 0; min-height: 28px; margin: 0; padding: 3px 8px;
  overflow: hidden; color: var(--ink-dim); font-size: var(--text-xs);
  text-overflow: ellipsis; white-space: nowrap; box-shadow: none;
}
.stage-source-popover {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}
.composition-source-scope {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px;
  padding: 7px 7px 3px; background: var(--stage-1);
}
body.editor button.composition-scope-button {
  min-width: 0; min-height: 30px; margin: 0; padding: 4px 7px;
  font-size: 10px; box-shadow: none;
}
body.editor button.composition-scope-button.is-active {
  border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent);
}
.stage-source-popover .stage-source-quick-strip {
  flex: none; padding: 4px 7px 6px; border-bottom: 1px solid var(--line);
}
.composition-inspector-title {
  display: flex; min-width: 0; flex-direction: column; gap: 2px;
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--line);
}
.composition-inspector-title strong {
  overflow: hidden; color: var(--ink); font-size: var(--text-sm);
  text-overflow: ellipsis; white-space: nowrap;
}
.composition-advanced { display: grid; gap: 10px; min-width: 0; }
.composition-advanced-section { display: grid; gap: 6px; min-width: 0; }
.composition-advanced-section + .composition-advanced-section {
  padding-top: 9px; border-top: 1px solid var(--line);
}
.composition-advanced-section h4 {
  margin: 0; color: var(--ink-dim); font-size: 10px; letter-spacing: .03em;
}
.composition-order-row {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto auto;
  align-items: center; gap: 4px; min-width: 0;
}
.composition-order-number { color: var(--ink-faint); font-size: 10px; text-align: center; }
.composition-order-row select { width: 100%; min-width: 0; margin: 0; padding: 4px 6px; font-size: 10px; }
body.editor .composition-order-row button {
  min-width: 0; min-height: 28px; margin: 0; padding: 3px 6px; font-size: 9px; box-shadow: none;
}
.composition-corners,
.composition-callouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
body.editor .composition-corners button,
body.editor .composition-callouts button {
  min-width: 0; margin: 0; padding: 5px 6px; font-size: 10px; box-shadow: none;
}
body.editor .composition-corners button.is-active,
body.editor .composition-callouts button.is-active,
body.editor button.composition-hero.is-active {
  border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent);
}
.composition-tile-scope-badge {
  display: inline-flex; min-height: 22px; align-items: center; padding: 2px 7px;
  border: 1px solid rgba(255,255,255,.26); border-radius: var(--r-chip);
  background: rgba(0,0,0,.58); color: #fff; font-size: 9px; font-weight: 750;
  white-space: nowrap; backdrop-filter: blur(4px);
}
.composition-tile-scope-badge.is-layout { border-color: var(--accent-line); color: var(--accent); }

@media (max-width: 899px), (pointer: coarse) {
  body.editor button.composition-stage-launcher,
  body.editor button.composition-scope-button,
  body.editor .composition-order-row button,
  body.editor .composition-corners button,
  body.editor .composition-callouts button,
  .composition-order-row select { min-height: 44px; }
  .composition-order-row { grid-template-columns: 20px minmax(96px, 1fr) repeat(3, minmax(44px, auto)); }
  .composition-tile-scope-badge { min-height: 30px; }
}

@media (max-width: 520px) {
  .stage-source-mount { max-width: 78%; }
  body.editor button.composition-stage-launcher { max-width: 118px; }
  .composition-order-row { grid-template-columns: 18px minmax(0, 1fr) repeat(3, 44px); }
  body.editor .composition-order-row button { padding-inline: 3px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   LEFT LAYOUT WORKSPACE
   Sole owner of scene presets, arrangement, source inclusion/order and layout
   transforms. Scoped under .lp so Inspector/timeline controls cannot inherit it.
   ════════════════════════════════════════════════════════════════════════════ */
.layout-panel { min-width: 0; max-width: 100%; }
.lp {
  display: flex; min-width: 0; max-width: 100%; flex-direction: column; gap: var(--s-3);
  padding: var(--s-2) 0 var(--s-5); overflow-x: clip;
}
.lp-sticky-top {
  position: sticky; top: 0; z-index: 8; display: grid; min-width: 0; max-width: 100%;
  box-sizing: border-box; gap: var(--s-2);
  padding: 0 0 var(--s-2); background: linear-gradient(180deg,
    var(--stage-1) 0%, var(--stage-1) calc(100% - 8px), transparent 100%);
}
.lp-head { display: grid; min-width: 0; gap: 3px; }
.lp-title { margin: 0; color: var(--ink); font-size: var(--text-lg); line-height: 1.2; }
.lp-sub,
.lp-note,
.lp-preset-description { margin: 0; color: var(--ink-dim); font-size: var(--text-xs); line-height: 1.4; overflow-wrap: anywhere; }
.lp-section {
  min-width: 0; max-width: 100%; margin: 0; padding: var(--s-3); box-sizing: border-box;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--stage-1);
}
.lp-section-head { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); }
.lp-section-copy { display: grid; min-width: 0; gap: 2px; }
.lp-h,
.lp-subheading { margin: 0; color: var(--ink); font-size: var(--text-sm); line-height: 1.25; }
.lp-subheading { color: var(--ink-dim); font-size: var(--text-xs); }
.lp-badge {
  display: inline-flex; min-height: 22px; flex: none; align-items: center; padding: 2px 7px;
  border: 1px solid var(--line); border-radius: var(--r-chip); color: var(--ink-dim);
  font-size: 9px; font-weight: 750; line-height: 1;
}
.lp-empty { margin: 0; padding: var(--s-3); color: var(--ink-dim); font-size: var(--text-xs); line-height: 1.4; text-align: center; }

/* The roster is the one source-inclusion surface. It stays directly below the
   Layout heading while layout cards scroll beneath it; effects remain in their
   lower disclosure so this high-frequency control stays compact. */
.lp-source-strip {
  display: grid; min-width: 0; gap: 5px; padding: 7px;
  border: 1px solid var(--accent-line); border-radius: var(--r-card);
  background: color-mix(in srgb, var(--stage-2) 92%, var(--accent-soft));
  box-shadow: 0 5px 16px color-mix(in srgb, #000 28%, transparent);
}
.lp-source-strip-head {
  display: flex; min-width: 0; min-height: 20px; align-items: center;
  justify-content: space-between; gap: var(--s-2);
}
.lp-source-strip-title {
  min-width: 0; overflow: hidden; color: var(--ink); font-size: var(--text-xs);
  line-height: 1.15; text-overflow: ellipsis; white-space: nowrap;
}
.lp-source-count {
  display: inline-flex; min-height: 20px; flex: none; align-items: center; padding: 1px 6px;
  border: 1px solid var(--line); border-radius: var(--r-chip); color: var(--ink-dim);
  font-size: 9px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1;
}
.lp-source-chips {
  display: grid; min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 5px;
}
.lp-source-chip-shell { min-width: 0; }
.lp-source-chip {
  position: relative; display: grid; min-width: 0; min-height: 44px;
  grid-template-columns: 18px 18px minmax(0, 1fr) auto; align-items: center; gap: 5px;
  padding: 3px 6px; box-sizing: border-box; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--stage-1); cursor: pointer;
}
.lp-source-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.lp-source-chip.is-on { border-color: var(--accent-line); background: var(--accent-soft); }
.lp-source-chip input { width: 18px; height: 18px; margin: 0; }
.lp-source-chip input:disabled { cursor: not-allowed; }
.lp-source-icon {
  display: grid; width: 18px; height: 18px; place-items: center; border-radius: 4px;
  background: var(--stage-3); color: var(--ink-faint); font-size: 9px; line-height: 1;
}
.lp-source-icon.is-person { border-radius: 999px; }
.lp-source-chip.is-on .lp-source-icon { background: var(--accent); color: var(--on-accent); }
.lp-source-chip-copy { display: grid; min-width: 0; gap: 1px; }
.lp-source-chip .lp-source-name {
  display: block; font-size: 10px; font-weight: 750; line-height: 1.1;
}
.lp-source-meta {
  min-width: 0; overflow: hidden; color: var(--ink-faint); font-size: 8px;
  line-height: 1.1; text-overflow: ellipsis; white-space: nowrap;
}
.lp-source-state {
  min-width: 19px; color: var(--ink-faint); font-size: 8px; font-weight: 800;
  line-height: 1; text-align: right; text-transform: uppercase;
}
.lp-source-chip.is-on .lp-source-state { color: var(--accent); }
body.editor button.lp-source-manage {
  width: 100%; min-height: 44px; padding: 4px 7px; font-size: 9px; white-space: nowrap;
}

/* Shared geometry preview, scoped to this workspace. */
.lp .layout-choice-preview { display: block; width: 100%; min-width: 0; }
.lp .layout-choice-preview-frame {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  box-sizing: border-box; border: 1px solid currentColor; border-radius: 5px;
  background: var(--stage-0, #080b10); color: var(--ink-dim);
}
.lp .layout-choice-preview.is-portrait .layout-choice-preview-frame { width: 38%; margin-inline: auto; aspect-ratio: 9 / 16; }
.lp .layout-choice-preview-slot,
.lp .layout-choice-preview-decoration { position: absolute; display: grid; place-items: center; box-sizing: border-box; }
.lp .layout-choice-preview-slot {
  z-index: 1; overflow: hidden; border: 1px solid currentColor; border-radius: 2px;
  background: var(--stage-2); color: var(--ink); font-size: 7px; font-weight: 800; line-height: 1;
}
.lp .layout-choice-preview-slot.is-screen { background: var(--accent-soft); color: var(--accent); }
.lp .layout-choice-preview-decoration { z-index: 2; pointer-events: none; background: color-mix(in srgb, var(--ink) 62%, transparent); }
.lp .layout-choice-preview-decoration.is-accent { background: var(--accent); }

.lp-featured-list,
.lp-saved-list { display: grid; min-width: 0; gap: var(--s-2); }
.lp-preset-card {
  display: grid; min-width: 0; grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-2); padding: var(--s-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--stage-2);
}
.lp-preset-visual { min-width: 0; }
.lp-preset-copy { display: grid; min-width: 0; gap: 3px; }
.lp-preset-name { min-width: 0; overflow: hidden; color: var(--ink); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
body.editor .lp button { min-width: 0; max-width: 100%; margin: 0; box-shadow: none; }
body.editor button.lp-preset-use { min-height: 34px; padding: 5px 9px; font-size: var(--text-xs); }

.lp-current-preview {
  display: grid; min-width: 0; place-items: center; margin-bottom: var(--s-3); padding: var(--s-2);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--stage-0);
}
.lp-current-preview .layout-choice-preview { width: min(100%, 220px); }
.lp-preview-nameplate,
.lp-preview-logo {
  position: absolute; z-index: 4; box-sizing: border-box; overflow: hidden;
  pointer-events: none; color: #fff;
  font-size: 6px; font-weight: 850; line-height: 1; letter-spacing: .04em;
}
.lp-preview-nameplate {
  display: grid; align-items: center; padding: 1px 3px; border-left: 2px solid var(--accent);
  background: color-mix(in srgb, #05070b 82%, transparent);
}
.lp-preview-nameplate.is-tile { display: none; }
.lp-preview-logo { display: grid; place-items: center; opacity: .96; }
.lp-preview-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lp-preview-logo.is-custom {
  padding: 1px 2px; border: 1px dashed rgba(255,255,255,.6); border-radius: 2px;
  background: rgba(4,7,14,.65); font-size: 4px; letter-spacing: 0;
}
.lp-preview-footer {
  position: absolute; z-index: 3; display: block; overflow: hidden; pointer-events: none;
  box-sizing: border-box; color: #fff; font-size: 4px; line-height: 1;
}
.lp-preview-footer-segment {
  position: absolute; display: grid; min-width: 0; align-content: center; gap: 1px;
  padding: 2px 3px; box-sizing: border-box; overflow: hidden; background: rgba(4,7,14,.88);
}
.lp-preview-footer-segment.is-show { border-left: 2px solid var(--accent); }
.lp-preview-footer-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-preview-footer-line:first-child { font-weight: 850; }
.lp-branding-controls {
  display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  margin: 0 0 var(--s-3); padding: var(--s-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--stage-2);
}
.lp-branding-controls legend {
  padding: 0 4px; color: var(--ink-dim); font-size: var(--text-xs); font-weight: 750;
}
.lp-footer-controls {
  display: grid; min-width: 0; gap: 7px; margin: 0 0 var(--s-3); padding: var(--s-2);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--stage-2);
}
.lp-footer-controls:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lp-footer-controls legend { padding: 0 4px; color: var(--ink-dim); font-size: var(--text-xs); font-weight: 750; }
.lp-footer-toggle {
  display: grid; min-width: 0; min-height: 44px; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 7px; padding: 5px 7px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
}
.lp-footer-toggle:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }
.lp-footer-toggle input { width: 18px; height: 18px; margin: 0; }
.lp-footer-rect { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.lp-footer-number { display: grid; min-width: 0; gap: 3px; color: var(--ink-dim); font-size: 9px; }
.lp-footer-number input { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding-inline: 5px; box-sizing: border-box; }
body.editor button.lp-footer-reset { min-height: 44px; }
.lp-branding-toggle {
  display: grid; min-width: 0; min-height: 44px; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 7px; padding: 5px 7px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
}
.lp-branding-toggle:has(input:checked) {
  border-color: var(--accent-line); background: var(--accent-soft);
}
.lp-branding-toggle input { width: 18px; height: 18px; margin: 0; }
.lp-branding-copy { display: grid; min-width: 0; gap: 2px; }
.lp-branding-copy strong { color: var(--ink); font-size: var(--text-xs); }
.lp-branding-copy small { color: var(--ink-faint); font-size: 9px; line-height: 1.25; overflow-wrap: anywhere; }
body.editor button.lp-logo-choose { grid-column: 1 / -1; min-height: 44px; }
.lp-logo-chooser {
  min-width: 0; margin: 0 0 var(--s-3); padding: var(--s-2); box-sizing: border-box;
  border: 1px solid var(--accent-line); border-radius: var(--r-sm); background: var(--stage-2);
}
.lp-logo-chooser-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
body.editor button.lp-logo-close { min-width: 44px; min-height: 44px; padding: 5px 8px; font-size: var(--text-xs); }
.lp-logo-list {
  display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px; margin: var(--s-2) 0;
}
body.editor button.lp-logo-option {
  display: grid; min-width: 0; min-height: 72px; place-items: center; gap: 5px;
  padding: 6px; font-size: 9px; white-space: normal;
}
body.editor button.lp-logo-option.is-active {
  border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent);
}
.lp-logo-option img { display: block; width: 100%; height: 36px; object-fit: contain; }
.lp-logo-option-copy { display: grid; min-width: 0; gap: 1px; }
.lp-logo-option-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-logo-option-copy small { color: var(--ink-faint); font-size: 8px; text-transform: capitalize; }
.lp-logo-placeholder {
  display: grid; width: 100%; height: 36px; place-items: center; border-radius: 4px;
  background: var(--stage-0); color: var(--ink-faint); font-size: 8px; text-transform: uppercase;
}
.lp-logo-import {
  display: grid; min-width: 0; min-height: 44px; gap: 5px; padding-top: var(--s-2);
  border-top: 1px solid var(--line); color: var(--ink); font-size: var(--text-xs);
}
.lp-logo-import input {
  width: 100%; min-width: 0; min-height: 44px; max-width: 100%; box-sizing: border-box;
}
.lp-tile-workspace { min-width: 0; }
.lp-tile-editor { min-width: 0; margin-top: 0; }
.lp .tile-nums { min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp .tile-nums-lab { grid-column: 1 / -1; }
.lp .tile-num { min-width: 0; max-width: 100%; box-sizing: border-box; }
.lp .tile-scope { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp .tile-scope > .composition-scope-label { grid-column: 1 / -1; }
.lp .tile-scope-opt,
.lp .tile-crop-en { min-width: 0; min-height: 34px; }
.lp .tile-layer-inspector { align-self: stretch; white-space: normal; }
body.editor button.lp-auto-frame-face { width: 100%; min-height: 44px; white-space: normal; }
.lp-field-label { display: grid; min-width: 0; gap: 4px; color: var(--ink-dim); font-size: var(--text-xs); }
.lp-field-label textarea,
.lp-field-label select,
.lp-order-row select {
  width: 100%; min-width: 0; max-width: 100%; margin: 0; box-sizing: border-box;
}
.lp-description { min-height: 58px; resize: vertical; font-size: var(--text-xs); line-height: 1.4; }
.lp-save-actions { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: var(--s-2); }
body.editor .lp-save-actions button { min-height: 36px; padding: 5px 7px; font-size: 10px; white-space: normal; }
.lp-save-actions [data-testid="layout-reset-current"] { grid-column: 1 / -1; }
.lp-layout-dirty {
  display: grid; min-width: 0; gap: 5px; margin-top: var(--s-2); padding: 7px;
  border: 1px solid var(--accent-line); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent-soft) 48%, var(--stage-2));
}
.lp-layout-dirty-copy { color: var(--ink-dim); font-size: 9px; line-height: 1.3; }
.lp-layout-dirty .lp-save-actions { margin-top: 0; }
.lp-layout-dirty .lp-save-actions > button { min-height: 44px; }
.lp-save-copy-scope {
  grid-column: 1 / -1; display: grid; min-width: 0; gap: 3px;
  color: var(--ink-dim); font-size: 9px;
}
.lp-save-copy-scope select { width: 100%; min-width: 0; min-height: 44px; margin: 0; box-sizing: border-box; }
.lp-save-copy-fields { grid-column: 1 / -1; display: grid; min-width: 0; gap: 6px; padding-top: 5px; border-top: 1px solid var(--line); }
.lp-save-copy-fields input { width: 100%; min-width: 0; min-height: 44px; margin: 0; box-sizing: border-box; }
.lp-save-copy-actions { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
body.editor .lp-save-copy-actions button { min-height: 44px; }

.lp-disclosure,
.lp-auto-advanced { min-width: 0; margin-top: var(--s-2); border-top: 1px solid var(--line); }
.lp-disclosure > summary,
.lp-auto-advanced > summary,
.lp-section > summary {
  min-width: 0; min-height: 44px; box-sizing: border-box;
  padding: var(--s-2) 0; color: var(--ink-dim); font-size: var(--text-xs);
  font-weight: 750; line-height: 1.25; cursor: pointer; overflow-wrap: anywhere;
}
.lp-section > summary { color: var(--ink); }
.lp-section[open] > summary { margin-bottom: var(--s-2); }
.lp-source-list,
.lp-order-list { display: grid; min-width: 0; gap: 5px; }
.lp-source-item { display: grid; min-width: 0; }
.lp-source-index { color: var(--ink-faint); font-size: 10px; font-variant-numeric: tabular-nums; text-align: center; }
.lp-source-name { min-width: 0; overflow: hidden; color: var(--ink); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.lp-source-kind { color: var(--ink-faint); font-size: 9px; text-transform: uppercase; }
.lp-source-effects {
  min-width: 0; margin: 0; padding: 0 7px 6px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--stage-2) 76%, var(--stage-1));
}
.lp-source-effects > summary {
  display: flex; min-width: 0; min-height: 44px; align-items: center;
  box-sizing: border-box; color: var(--ink-dim); font-size: 10px; cursor: pointer;
}
.lp-source-effects-controls { display: grid; min-width: 0; gap: 6px; }
.lp-source-effect-toggle,
.lp-source-effect-color {
  display: flex; min-width: 0; min-height: 44px; align-items: center;
  justify-content: space-between; gap: 8px; box-sizing: border-box;
  color: var(--ink); font-size: var(--text-xs);
}
.lp-source-effect-toggle { justify-content: flex-start; }
.lp-source-effect-toggle input { width: 20px; height: 20px; margin: 0; }
.lp-source-effect-color input { width: 52px; min-width: 44px; height: 44px; padding: 3px; box-sizing: border-box; }
.lp-source-effect-range {
  display: grid; min-width: 0; min-height: 44px;
  grid-template-columns: 72px minmax(64px, 1fr) 38px; align-items: center; gap: 6px;
  color: var(--ink-dim); font-size: 10px;
}
.lp-source-effect-range input { width: 100%; min-width: 0; height: 44px; margin: 0; }
.lp-source-effect-output { color: var(--ink-faint); font-size: 9px; text-align: right; }
body.editor button.lp-source-effect-reset,
body.editor .lp-source-background-removal button { min-height: 44px; white-space: normal; }
.lp-source-background-removal { display: grid; min-width: 0; gap: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.lp-source-effect-status { color: var(--ink-faint); font-size: 9px; line-height: 1.35; overflow-wrap: anywhere; }
body.editor button.lp-full-action { width: 100%; min-height: 34px; padding: 5px 8px; font-size: var(--text-xs); white-space: normal; }

.lp-order-row {
  display: grid; min-width: 0; grid-template-columns: 20px minmax(76px, 1fr) 34px 34px;
  align-items: center; gap: 4px;
}
.lp-order-row:has(.lp-hero) { grid-template-columns: 20px minmax(76px, 1fr) 62px 34px 34px; }
.lp-order-row select { padding: 5px 6px; font-size: 10px; }
body.editor .lp-order-row button { min-height: 30px; padding: 3px 5px; font-size: 9px; }
body.editor .lp-order-row button.lp-order-button { padding-inline: 2px; font-size: 12px; }
body.editor .lp-order-row button.lp-hero.is-active,
.lp-position-buttons button.is-active,
.lp-callout-buttons button.is-active,
.lp-layout-choice.is-active { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.lp-subsection { display: grid; min-width: 0; gap: 5px; margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }
.lp-position-buttons,
.lp-callout-buttons { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
body.editor .lp-position-buttons button,
body.editor .lp-callout-buttons button { min-height: 34px; padding: 5px 6px; font-size: 10px; white-space: normal; }
body.editor [data-testid="layout-big-share-side"] button { min-height: 44px; }
.lp-footer-controls select { min-height: 44px; }

.lp-saved-card {
  display: grid; min-width: 0; grid-template-columns: 74px minmax(0, 1fr); gap: var(--s-2);
  padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--stage-2);
}
.lp-saved-fields { display: grid; min-width: 0; align-content: start; gap: 3px; }
.lp-saved-actions { grid-column: 1 / -1; display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
body.editor .lp-saved-actions button { min-height: 34px; padding: 5px 7px; font-size: 10px; }
body.editor button.lp-danger { color: var(--ink-dim); }

.lp-auto-toggles { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
/* THE SHARED LAYOUT PICKER, editor skin. The Studio's drawer is a fixed 4-up because it
   is a fixed 346px wide; the editor panel is resizable, so this fills with as many
   ~66px columns as it has room for and stays just as compact. Sizing, the two-line
   label clamp and the per-card containment deliberately mirror production-tools.css so
   the same component reads as the same control on both surfaces. */
.lp-layout-grid { display: grid; min-width: 0; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; }
body.editor button.lp-layout-choice {
  display: grid; min-width: 0; min-height: 68px; place-items: center; align-content: center;
  gap: 4px; margin: 0; padding: 5px; font-size: 9px; white-space: normal;
  contain: layout paint style;
}
/* A card the current scene cannot fill is dimmed with its reason in the tooltip, not
   removed. The old menu hid them, which is why a three-person scene looked like it
   owned five layouts. */
body.editor button.lp-layout-choice:disabled { opacity: .38; cursor: not-allowed; }
/* HIDING, unlike dimming, is for a family that does not apply to this OUTPUT at all —
   the tall layouts on a landscape episode. `display: grid` above outranks the UA's
   [hidden] rule, so it has to be said here or the hidden card stays on screen. */
body.editor button.lp-layout-choice[hidden] { display: none; }
/* Specificity has to beat `body.editor button.lp-layout-choice` above, or the chosen
   card looks exactly like the thirty-nine it was chosen over. */
body.editor button.lp-layout-choice.is-active {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}
body.editor button.lp-layout-choice.is-active .lp-layout-name { color: var(--accent); }
body.editor button.lp-layout-choice.is-active .layout-choice-preview-frame { color: var(--accent); }
body.editor button.lp-layout-choice[data-layout-kind="featured"] { border-color: var(--accent-line); }
.lp-layout-choice .layout-choice-preview-host { display: block; width: 100%; min-width: 0; }
.lp-layout-choice .layout-choice-preview { display: block; width: 100%; max-width: 68px; margin-inline: auto; }
.lp-layout-name {
  display: -webkit-box; width: 100%; min-width: 0; overflow: hidden;
  font-size: 8.5px; font-weight: 700; line-height: 1.15; text-align: center;
  overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.lp-auto-summary { display: flex; min-width: 0; flex-wrap: wrap; gap: 4px; margin: var(--s-2) 0; }
.lp-auto-chip { padding: 3px 6px; border: 1px solid var(--line); border-radius: var(--r-chip); color: var(--ink-dim); font-size: 9px; }
.lp-auto-chip.is-custom { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.lp-auto-simple { display: grid; min-width: 0; gap: var(--s-2); }
.lp-auto-count { min-width: 0; margin: var(--s-2) 0 0; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.lp-auto-count legend { padding: 0 4px; color: var(--ink-dim); font-size: 10px; }
.lp-auto-toggle { position: relative; display: grid; min-width: 0; min-height: 58px; place-items: center; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.lp-auto-toggle input { position: absolute; inset: 4px auto auto 4px; z-index: 2; margin: 0; }
.lp-auto-toggle:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.lp-auto-toggle .layout-choice-preview { max-width: 70px; }
.lp-auto-setup-launcher {
  display: flex; min-width: 0; max-width: 100%; min-height: 52px; align-items: center;
  gap: 6px; box-sizing: border-box; padding: 4px;
  border: 1px solid var(--accent-line); border-radius: var(--r-card);
  background: color-mix(in srgb, var(--stage-1) 84%, var(--accent-soft));
}
body.editor button.lp-auto-setup-open {
  flex: 1 1 auto; width: 100%; min-width: 0; min-height: 44px;
  padding: 8px 12px; white-space: normal;
}
.lp-auto-setup-status {
  flex: none; padding: 3px 6px; border-radius: var(--r-chip);
  color: var(--accent); background: var(--accent-soft); font-size: 9px; font-weight: 750;
}

/* Guided Auto-layout setup. The launcher belongs to the left Layout workspace;
   the fixed walkthrough gets enough width to show truthful geometry previews. */
.lp-wizard-backdrop {
  position: fixed; inset: 0; z-index: 1200; display: grid; min-width: 0; place-items: center;
  padding: 20px; box-sizing: border-box; overflow: auto; background: rgba(3,5,9,.78);
  backdrop-filter: blur(5px);
}
.lp-wizard-dialog {
  display: flex; width: min(760px, calc(100vw - 40px)); min-width: 0;
  height: min(760px, calc(100dvh - 40px)); max-width: 100%; max-height: calc(100dvh - 40px);
  flex-direction: column;
  box-sizing: border-box; overflow: hidden; border: 1px solid var(--accent-line);
  border-radius: var(--r-card); background: var(--stage-1); color: var(--ink);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
}
.lp-wizard-dialog:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lp-wizard-head {
  display: flex; flex: 0 0 auto; min-width: 0; min-height: 84px; align-items: flex-start;
  justify-content: space-between; gap: var(--s-3); box-sizing: border-box;
  padding: var(--s-4); border-bottom: 1px solid var(--line); background: var(--stage-2);
}
.lp-wizard-title,
.lp-wizard-step-title { margin: 0; color: var(--ink); line-height: 1.2; }
.lp-wizard-title { font-size: var(--text-lg); }
.lp-wizard-step-title { font-size: var(--text-base); }
body.editor button.lp-wizard-close {
  width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0;
  border-radius: 50%; font-size: 22px;
}
.lp-wizard-body {
  display: grid; flex: 1 1 auto; min-width: 0; min-height: 0; align-content: start;
  gap: var(--s-3); padding: var(--s-4); overflow: auto; scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.lp-wizard-progress { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-3); color: var(--ink-dim); font-size: var(--text-xs); }
.lp-wizard-progress progress { width: 100%; min-width: 0; height: 8px; accent-color: var(--accent); }
.lp-wizard-directing {
  display: grid; min-width: 0; gap: 8px; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--stage-2) 86%, var(--accent-soft));
}
.lp-wizard-directing-head { display: grid; min-width: 0; gap: 2px; }
.lp-wizard-directing-head strong { color: var(--ink); font-size: var(--text-sm); }
.lp-wizard-directing-head span { color: var(--ink-dim); font-size: 9px; line-height: 1.3; }
.lp-wizard-style-options {
  display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px;
}
.lp-wizard-style-option {
  position: relative; display: flex; min-width: 0; min-height: 44px; align-items: center; justify-content: center;
  gap: 6px; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: var(--r-input); background: var(--stage-1); color: var(--ink-dim);
  font-size: var(--text-xs); line-height: 1.2; text-align: center; cursor: pointer;
}
.lp-wizard-style-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lp-wizard-style-option:has(input:checked) {
  border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent);
}
.lp-wizard-style-option:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.lp-wizard-strength,
.lp-wizard-timing-control {
  display: grid; min-width: 0; min-height: 44px;
  grid-template-columns: minmax(116px, .72fr) minmax(90px, 1fr) 42px;
  align-items: center; gap: 8px;
}
.lp-wizard-control-copy { display: grid; min-width: 0; gap: 1px; }
.lp-wizard-control-copy strong { color: var(--ink); font-size: var(--text-xs); line-height: 1.2; }
.lp-wizard-control-copy small { color: var(--ink-faint); font-size: 8px; line-height: 1.25; }
.lp-wizard-strength input,
.lp-wizard-timing-control input,
.lp-wizard-mix input { width: 100%; min-width: 0; min-height: 44px; margin: 0; accent-color: var(--accent); }
.lp-wizard-range-output {
  min-width: 38px; color: var(--accent); font-size: 9px; font-weight: 800;
  font-variant-numeric: tabular-nums; text-align: right;
}
.lp-wizard-timing { min-width: 0; border-top: 1px solid var(--line); }
.lp-wizard-timing > summary {
  display: flex; min-width: 0; min-height: 44px; align-items: center;
  box-sizing: border-box; color: var(--ink-dim); font-size: var(--text-xs); cursor: pointer;
}
.lp-wizard-timing-grid { display: grid; min-width: 0; gap: 4px; padding-top: 4px; }
.lp-wizard-step-head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--s-2); }
.lp-wizard-step-copy { display: grid; min-width: 0; min-height: 108px; align-content: start; gap: var(--s-2); }
.lp-wizard-step-copy > .lp-note { margin: 0; }
.lp-wizard-explain,
.lp-wizard-safe-note {
  margin: 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--stage-2);
  color: var(--ink-dim); font-size: var(--text-xs); line-height: 1.4; overflow-wrap: anywhere;
}
.lp-wizard-safe-note { border: 1px solid var(--accent-line); color: var(--accent); }
.lp-wizard-options { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.lp-wizard-option {
  display: grid; min-width: 0; min-height: 212px; grid-template-rows: minmax(110px, auto) 101px;
  align-content: stretch; overflow: hidden; border: 1px solid var(--line);
  border-radius: var(--r-card); background: var(--stage-2);
}
.lp-wizard-option.is-selected { border-color: var(--accent-line); background: color-mix(in srgb, var(--stage-2) 86%, var(--accent-soft)); }
.lp-wizard-option-main {
  display: grid; min-width: 0; min-height: 104px; grid-template-columns: 22px 112px minmax(0, 1fr);
  align-items: center; gap: var(--s-2); padding: var(--s-2); box-sizing: border-box; cursor: pointer;
}
.lp-wizard-option-main input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.lp-wizard-option-preview { display: grid; min-width: 0; place-items: center; }
.lp-wizard-option-preview .layout-choice-preview { width: min(100%, 112px); }
.lp-wizard-option-copy { display: grid; min-width: 0; gap: 3px; overflow-wrap: anywhere; }
.lp-wizard-option-copy strong { color: var(--ink); font-size: var(--text-xs); line-height: 1.25; }
.lp-wizard-option-copy small { color: var(--ink-dim); font-size: 9px; line-height: 1.3; }
.lp-wizard-layout-name { color: var(--ink-faint); font-size: 8px; }
.lp-wizard-priority {
  display: grid; min-width: 0; min-height: 101px;
  grid-template-columns: minmax(0, 1fr) 44px 44px; grid-template-rows: 44px 48px;
  align-items: center; gap: 4px; box-sizing: border-box; padding: 4px 6px; border-top: 1px solid var(--line);
}
.lp-wizard-priority.is-placeholder { visibility: hidden; pointer-events: none; }
.lp-wizard-rank { color: var(--accent); font-size: 9px; font-weight: 800; }
body.editor button.lp-wizard-order { width: 44px; min-width: 44px; min-height: 44px; padding: 0; font-size: 15px; }
.lp-wizard-mix {
  display: grid; min-width: 0; min-height: 44px; grid-column: 1 / -1;
  grid-template-columns: 66px minmax(64px, 1fr) 38px; align-items: center; gap: 6px;
  color: var(--ink-dim); font-size: 9px;
}
.lp-wizard-review-head { display: grid; min-width: 0; gap: var(--s-2); }
.lp-wizard-review-list { display: grid; min-width: 0; gap: 6px; }
.lp-wizard-review-row {
  display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: var(--s-2); padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--stage-2);
}
.lp-wizard-review-copy { display: grid; min-width: 0; gap: 3px; }
.lp-wizard-review-copy strong { color: var(--ink); font-size: var(--text-xs); }
.lp-wizard-review-copy span { color: var(--ink-dim); font-size: 9px; line-height: 1.35; overflow-wrap: anywhere; }
body.editor button.lp-wizard-edit { min-width: 54px; min-height: 44px; }
.lp-wizard-actions {
  display: flex; flex: 0 0 69px; min-width: 0; height: 69px; min-height: 69px; align-items: center;
  justify-content: flex-end; gap: var(--s-2); box-sizing: border-box;
  padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); background: var(--stage-2);
}
body.editor .lp-wizard-actions button {
  min-width: 72px; height: 44px; min-height: 44px; padding: 7px 12px; white-space: nowrap;
}
body.editor .lp-wizard-actions .lp-wizard-save,
body.editor .lp-wizard-actions .lp-wizard-next { width: 146px; margin-left: auto; }
.lp-transform-row { display: grid; min-width: 0; min-height: 44px; grid-template-columns: 72px minmax(76px, 1fr) 40px; align-items: center; gap: 6px; margin: 6px 0; color: var(--ink-dim); font-size: var(--text-xs); }
.lp-transform-row input { width: 100%; min-width: 0; margin: 0; }
.lp-transform-out { color: var(--ink-faint); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }

@media (max-width: 899px), (pointer: coarse) {
  body.editor .lp button,
  .lp-source-chip,
  .lp-field-label select,
  .lp-order-row select,
  .lp .tile-num,
  .lp .tile-scope-opt,
  .lp .tile-crop-en { min-height: 44px; }
  .lp-source-chip input { width: 20px; height: 20px; }
  .lp-order-row { grid-template-columns: 20px minmax(72px, 1fr) 44px 44px; }
  .lp-order-row:has(.lp-hero) { grid-template-columns: 20px minmax(72px, 1fr) 64px 44px 44px; }
}

@media (max-width: 390px) {
  .lp-source-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-source-chip { grid-template-columns: 18px 16px minmax(0, 1fr); }
  .lp-source-state { display: none; }
  .lp-preset-card { grid-template-columns: 72px minmax(0, 1fr); }
  body.editor button.lp-preset-use { grid-column: 1 / -1; width: 100%; }
  .lp-order-row:has(.lp-hero) { grid-template-columns: 20px minmax(0, 1fr) 58px; }
  .lp-order-row:has(.lp-hero) .lp-order-button { grid-row: 2; }
  .lp-order-row:has(.lp-hero) .lp-order-button.is-up { grid-column: 2; }
  .lp-order-row:has(.lp-hero) .lp-order-button.is-down { grid-column: 3; }
  .lp-branding-controls { grid-template-columns: minmax(0, 1fr); }
  .lp-logo-list { grid-template-columns: minmax(0, 1fr); }
  .lp-footer-rect { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-source-effect-range { grid-template-columns: 64px minmax(0, 1fr) 34px; }
  .lp-auto-setup-card { grid-template-columns: minmax(0, 1fr); }
  body.editor button.lp-auto-setup-open { width: 100%; }
  .lp-wizard-backdrop { place-items: stretch; padding: 0; overflow: hidden; }
  .lp-wizard-dialog {
    width: 100vw; height: 100dvh; max-width: none; max-height: none; border-width: 0;
    border-radius: 0;
  }
  .lp-wizard-head,
  .lp-wizard-body { padding: var(--s-3); }
  .lp-wizard-head { min-height: 76px; }
  .lp-wizard-step-copy { min-height: 0; }
  .lp-wizard-options { grid-template-columns: minmax(0, 1fr); }
  .lp-wizard-option-main { grid-template-columns: 22px 92px minmax(0, 1fr); }
  .lp-wizard-actions {
    display: grid; flex-basis: 113px; height: 113px; min-height: 113px;
    grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, 44px);
    padding: var(--s-2);
  }
  body.editor .lp-wizard-actions button { width: 100%; min-width: 0; }
  body.editor .lp-wizard-actions .lp-wizard-save,
  body.editor .lp-wizard-actions .lp-wizard-next {
    width: 100%; grid-column: 1 / -1; grid-row: 2; margin-left: 0;
  }
}

@media (min-width: 391px) and (max-width: 680px) {
  .lp-wizard-options { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 391px) and (max-width: 520px) {
  .lp-wizard-actions {
    display: grid; flex-basis: 113px; height: 113px; min-height: 113px;
    grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, 44px);
    padding: var(--s-2);
  }
  body.editor .lp-wizard-actions button { width: 100%; min-width: 0; }
  body.editor .lp-wizard-actions .lp-wizard-save,
  body.editor .lp-wizard-actions .lp-wizard-next {
    width: 100%; grid-column: 1 / -1; grid-row: 2; margin-left: 0;
  }
}

/* ── unread-audio notice ────────────────────────────────────────────────────
   The editor now opens an episode whose audio could not be read, so the picture
   can be salvaged. This is the half that keeps that honest, so it is styled to
   be read rather than skimmed past: warning colour, full width, no dismiss
   control anywhere. It is re-derived from the analysis doc on every open, so a
   repaired episode clears it by itself and nobody has to remember to. */
.unread-audio-notice {
  border: 1px solid var(--warn, var(--danger));
  border-left-width: 4px;
  border-radius: var(--r-card, 10px);
  padding: 12px 14px;
  margin: 0 0 10px;
  background: color-mix(in srgb, var(--warn, var(--danger)) 10%, transparent);
}
.unread-audio-text {
  margin: 0;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.5;
}
.unread-audio-files {
  margin: 8px 0 6px;
  padding-left: 20px;
  color: var(--ink-dim);
  font-size: 0.86rem;
  line-height: 1.6;
}
.unread-audio-files code {
  /* Read character by character to find the file on disk, so an underscore and a
     hyphen must not blur together. */
  font-variant-ligatures: none;
  word-break: break-all;
}
.unread-audio-link {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.88rem;
  color: var(--accent);
}

/* Host for damage notices. Lives in the editor screen above the workspace, so a
   notice is visible whatever tool or tab is open — the first version mounted into
   the Header tab's panel and was never seen. Hidden until something mounts. */
.editor-notice-strip {
  padding: 10px var(--shell-gutter, 16px) 0;
}
.editor-notice-strip[hidden] { display: none; }