/* Emotion Engine app shell. Ported from the archived web design
   (app-shell-blueprint/design_reference/), minus everything the blueprint deleted. */
/* The caption renderer uses this exact Debian fonts-dejavu-core 2.37-6 bold
   TTF (sha256 0d977336...). Give the browser bytes a private family alias so
   an OS-installed font with the public "DejaVu Sans" name cannot win font
   selection and change preview metrics. Both weights intentionally resolve
   to the same bold face used by libass/Pillow. */
@font-face {
  font-family: "Emotion Engine DejaVu Sans";
  src: url("assets/fonts/DejaVuSans-Bold.ttf?v=0d977336a6d5fba34eab8e3199eb218327161b5143749f802982c2bc34df0c96") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: block;
}
@font-face {
  font-family: "Emotion Engine DejaVu Sans";
  src: url("assets/fonts/DejaVuSans-Bold.ttf?v=0d977336a6d5fba34eab8e3199eb218327161b5143749f802982c2bc34df0c96") format("truetype");
  font-style: normal;
  font-weight: 900;
  font-display: block;
}
:root {
  color-scheme: dark;
  --gold-100: #fbf3e1;
  --gold-200: #f6e7c4;
  --gold-300: #efd79e;
  --gold-400: #e8c169;
  --gold-500: #d9a93f;
  --gold-600: #c79a3c;
  --gold-700: #a87a1e;
  --gold-800: #6b4e14;
  --gold-900: #4a340b;

  --purple-100: #f1ebf8;
  --purple-200: #dccbee;
  --purple-300: #c0a9dc;
  --purple-400: #9a6fc6;
  --purple-500: #7a4cad;
  --purple-600: #63359a;
  --purple-700: #4e2a78;
  --purple-800: #3d1b54;
  --purple-900: #241033;

  --ink-100: #faf8fb;
  --ink-200: #f5f3f6;
  --ink-300: #e7e2eb;
  --ink-400: #cfc9d6;
  --ink-500: #9c93ac;
  --ink-600: #7a7186;
  --ink-700: #4a4453;
  --ink-800: #2a2434;
  --ink-900: #14101c;
  --ink-950: #0c080f;

  --bg: #0c080f;
  --stage-bg: #0c080f;
  --surface: #171020;
  --surface-hover: #1d1529;
  --surface-strong: #241a33;
  --border: #2e2540;
  --border-strong: #3b3052;
  --fg: #f7f3fa;
  --fg-strong: #ffffff;
  --fg-muted: #9c93ac;
  --fg-dim: #6f6680;
  --accent: #e8c169;
  --accent-dim: rgba(232, 193, 105, 0.16);
  --accent-purple: #c0a9dc;
  --accent-blue: #8ea5ff;
  --warning: #e2765c;
  --success: #46a873;
  --sidebar-bg: #171020;
  --timeline-canvas-bg: rgba(12, 8, 15, 0.92);
  --timeline-control-bg: rgba(12, 8, 15, 0.55);
  --timeline-segment: rgba(122, 76, 173, 0.18);
  --timeline-wave: rgba(232, 193, 105, 0.85);
  --timeline-segment-border: rgba(192, 169, 220, 0.55);
  --timeline-ruler: rgba(247, 243, 250, 0.30);
  --timeline-reference: rgba(247, 243, 250, 0.16);
  --timeline-grid: rgba(156, 147, 172, 0.22);
  --timeline-label: rgba(247, 243, 250, 0.32);
  --accent-on: #1c1420;
  --accent-text: #efd79e;
  --accent-hover: #efd79e;
  --accent-press: #d9a93f;
  --brand: #7a4cad;
  --brand-dim: rgba(122, 76, 173, 0.22);
  --brand-text: #c0a9dc;
  --border-accent: rgba(232, 193, 105, 0.28);
  --border-hover: rgba(232, 193, 105, 0.55);
  --surface-focus: linear-gradient(135deg, rgba(122, 76, 173, 0.30), rgba(23, 16, 32, 0.55) 60%), #171020;
  --glow: 0 0 40px rgba(122, 76, 173, 0.28);
  --focus-ring: 2px solid #e8c169;
  --bg-wash: radial-gradient(120% 90% at 78% 0%, #1b1428 0%, #0c080f 62%);
  --scrim: rgba(6, 4, 10, 0.62);
  --mono: ui-monospace, "SF Mono", monospace;
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f3f0;
  --stage-bg: #14101c;
  --surface: #ffffff;
  --surface-hover: #faf8fb;
  --surface-strong: #f5f3f6;
  --border: #e0d9e2;
  --border-strong: #cfc9d6;
  --fg: #1c1420;
  --fg-strong: #0c080f;
  --fg-muted: #7a7186;
  --fg-dim: #9c93ac;
  --accent: #d9a93f;
  --accent-dim: rgba(217, 169, 63, 0.18);
  --accent-purple: #4e2a78;
  --accent-blue: #3e6fa8;
  --warning: #b4482a;
  --success: #2f7d52;
  --sidebar-bg: #ffffff;
  --timeline-canvas-bg: rgba(20, 16, 28, 0.98);
  --timeline-control-bg: rgba(28, 20, 32, 0.06);
  --timeline-segment: rgba(122, 76, 173, 0.16);
  --timeline-wave: rgba(232, 193, 105, 0.92);
  --timeline-segment-border: rgba(78, 42, 120, 0.45);
  --timeline-ruler: rgba(240, 210, 138, 0.70);
  --timeline-reference: rgba(247, 243, 250, 0.24);
  --timeline-grid: rgba(156, 147, 172, 0.26);
  --timeline-label: rgba(240, 235, 248, 0.75);
  --thumbnail-control-bg: rgba(255, 255, 255, 0.94);
  --thumbnail-control-fg: #1c1420;
  --thumbnail-control-placeholder: #7a7186;
  --thumbnail-control-disabled-bg: rgba(231, 226, 235, 0.92);
  --app-card-surface: #ffffff;
  --app-control-surface: #ffffff;
  --app-disabled-surface: #f5f3f6;
  --app-disabled-fg: #7a7186;
  --ui-card-surface: #ffffff;
  --ui-card-border: rgba(78, 42, 120, 0.18);
  --ui-card-shadow: 0 10px 26px rgba(36, 16, 51, 0.08), 0 2px 6px rgba(36, 16, 51, 0.045);
  --ui-card-shadow-hover: 0 14px 30px rgba(36, 16, 51, 0.12), 0 3px 8px rgba(36, 16, 51, 0.06);
  --accent-on: #1c1420;
  --accent-text: #6b4e14;
  --accent-hover: #c79a3c;
  --accent-press: #a87a1e;
  --brand: #4e2a78;
  --brand-dim: rgba(122, 76, 173, 0.14);
  --brand-text: #4e2a78;
  --border-accent: rgba(168, 122, 30, 0.45);
  --border-hover: rgba(168, 122, 30, 0.75);
  --surface-focus: linear-gradient(135deg, rgba(122, 76, 173, 0.10), #ffffff 55%);
  --glow: 0 8px 30px rgba(61, 27, 84, 0.10);
  --focus-ring: 2px solid #a87a1e;
  --bg-wash: linear-gradient(150deg, #faf7fc 0%, #f6f3f0 55%, #fbf6ef 100%);
  --scrim: rgba(20, 16, 28, 0.42);
}

/* Light mode keeps the project controls airy and legible instead of using
   the dark-theme control well. The selected state remains the brand accent. */
:root[data-theme="light"] .fchip-row,
:root[data-theme="light"] .view-toggle,
:root[data-theme="light"] .view-toggle {
  background: rgba(226, 232, 240, 0.62);
  border-color: rgba(71, 85, 105, 0.18);
}
:root[data-theme="light"] .fchip,
:root[data-theme="light"] .view-toggle button {
  color: var(--fg-muted);
  font-size: 13px;
}
:root[data-theme="light"] .view-toggle button.active,
:root[data-theme="light"] .view-toggle button.active {
  background: rgba(255, 255, 255, 0.78);
  color: var(--fg);
}
:root[data-theme="light"] .clip-sort,
:root[data-theme="light"] .clip-sort {
  background: rgba(255, 255, 255, 0.76);
  color: var(--fg);
  border-color: rgba(71, 85, 105, 0.22);
  font-size: 12px;
}
:root[data-theme="light"] .start-tab,
:root[data-theme="light"] .url-input,
:root[data-theme="light"] .bs-input,
:root[data-theme="light"] .set-field input,
:root[data-theme="light"] .vocab-input,
:root[data-theme="light"] .content-type-field,
:root[data-theme="light"] .detail-search input,
:root[data-theme="light"] .gs-input,
:root[data-theme="light"] .chapter-edit-row input {
  background: rgba(255, 255, 255, 0.94);
  color: var(--fg);
  border-color: rgba(71, 85, 105, 0.24);
}
:root[data-theme="light"] .url-input::placeholder,
:root[data-theme="light"] .vocab-input::placeholder,
:root[data-theme="light"] .detail-search input::placeholder,
:root[data-theme="light"] .gs-input::placeholder {
  color: var(--fg-muted);
  opacity: 1;
}
:root[data-theme="light"] .start-tab { color: var(--fg-muted); }
:root[data-theme="light"] .start-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}
:root[data-theme="light"] .url-hint { color: var(--fg-muted); }
:root[data-theme="light"] .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
  box-shadow: 0 4px 18px rgba(199, 131, 8, 0.22);
}
:root[data-theme="light"] .btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .fchip-row,
  :root[data-theme="system"] .view-toggle {
    background: rgba(226, 232, 240, 0.62);
    border-color: rgba(71, 85, 105, 0.18);
  }
  :root[data-theme="system"] .fchip,
  :root[data-theme="system"] .view-toggle button {
    color: var(--fg-muted);
    font-size: 13px;
  }
  :root[data-theme="system"] .view-toggle button.active {
    background: rgba(255, 255, 255, 0.78);
    color: var(--fg);
  }
  :root[data-theme="system"] .clip-sort {
    background: rgba(255, 255, 255, 0.76);
    color: var(--fg);
    border-color: rgba(71, 85, 105, 0.22);
    font-size: 12px;
  }
  :root[data-theme="system"] .start-tab,
  :root[data-theme="system"] .url-input,
  :root[data-theme="system"] .bs-input,
  :root[data-theme="system"] .set-field input,
  :root[data-theme="system"] .vocab-input,
  :root[data-theme="system"] .content-type-field,
  :root[data-theme="system"] .detail-search input,
  :root[data-theme="system"] .gs-input,
  :root[data-theme="system"] .chapter-edit-row input {
    background: rgba(255, 255, 255, 0.94);
    color: var(--fg);
    border-color: rgba(71, 85, 105, 0.24);
  }
  :root[data-theme="system"] .url-input::placeholder,
  :root[data-theme="system"] .vocab-input::placeholder,
  :root[data-theme="system"] .detail-search input::placeholder,
  :root[data-theme="system"] .gs-input::placeholder {
    color: var(--fg-muted);
    opacity: 1;
  }
  :root[data-theme="system"] .start-tab { color: var(--fg-muted); }
  :root[data-theme="system"] .start-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-on);
  }
  :root[data-theme="system"] .url-hint { color: var(--fg-muted); }
  :root[data-theme="system"] .btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-on);
    box-shadow: 0 4px 18px rgba(199, 131, 8, 0.22);
  }
  :root[data-theme="system"] .btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
  }
}


@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    color-scheme: light;
    --bg: #f6f3f0;
    --surface: #ffffff;
    --surface-hover: #faf8fb;
    --surface-strong: #f5f3f6;
    --border: #e0d9e2;
    --border-strong: #cfc9d6;
    --fg: #1c1420;
    --fg-strong: #0c080f;
    --fg-muted: #7a7186;
    --fg-dim: #9c93ac;
    --accent: #d9a93f;
    --accent-dim: rgba(217, 169, 63, 0.18);
    --accent-purple: #4e2a78;
    --accent-blue: #3e6fa8;
    --warning: #b4482a;
    --success: #2f7d52;
    --sidebar-bg: #ffffff;
    --timeline-canvas-bg: rgba(20, 16, 28, 0.98);
    --timeline-control-bg: rgba(28, 20, 32, 0.06);
    --timeline-segment: rgba(122, 76, 173, 0.16);
    --timeline-wave: rgba(232, 193, 105, 0.92);
    --timeline-segment-border: rgba(78, 42, 120, 0.45);
    --timeline-ruler: rgba(240, 210, 138, 0.70);
    --timeline-reference: rgba(247, 243, 250, 0.24);
    --timeline-grid: rgba(156, 147, 172, 0.26);
    --timeline-label: rgba(240, 235, 248, 0.75);
    --thumbnail-control-bg: rgba(255, 255, 255, 0.94);
    --thumbnail-control-fg: #1c1420;
    --thumbnail-control-placeholder: #7a7186;
    --thumbnail-control-disabled-bg: rgba(231, 226, 235, 0.92);
    --app-card-surface: #ffffff;
    --app-control-surface: #ffffff;
    --app-disabled-surface: #f5f3f6;
    --app-disabled-fg: #7a7186;
    --ui-card-surface: #ffffff;
    --ui-card-border: rgba(78, 42, 120, 0.18);
    --ui-card-shadow: 0 10px 26px rgba(36, 16, 51, 0.08), 0 2px 6px rgba(36, 16, 51, 0.045);
    --ui-card-shadow-hover: 0 14px 30px rgba(36, 16, 51, 0.12), 0 3px 8px rgba(36, 16, 51, 0.06);
    --accent-on: #1c1420;
    --accent-text: #6b4e14;
    --accent-hover: #c79a3c;
    --accent-press: #a87a1e;
    --brand: #4e2a78;
    --brand-dim: rgba(122, 76, 173, 0.14);
    --brand-text: #4e2a78;
    --border-accent: rgba(168, 122, 30, 0.45);
    --border-hover: rgba(168, 122, 30, 0.75);
    --surface-focus: linear-gradient(135deg, rgba(122, 76, 173, 0.10), #ffffff 55%);
    --glow: 0 8px 30px rgba(61, 27, 84, 0.10);
    --focus-ring: 2px solid #a87a1e;
    --bg-wash: linear-gradient(150deg, #faf7fc 0%, #f6f3f0 55%, #fbf6ef 100%);
  }
}

:root {
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-mod: 28px; --s-sec: 56px; --s-sec-lg: 84px;
}

/* Light-theme surface contract: shared controls and editorial cards stay
   white. Dark wells are reserved for actual media/timeline canvases, never
   for ordinary buttons, copy cards, or form controls. */
:root[data-theme="light"] .vm-toggle,
:root[data-theme="light"] .tool-group,
:root[data-theme="light"] .fchip-row,
:root[data-theme="light"] .view-toggle,
:root[data-theme="light"] .aspect-toggle,
:root[data-theme="light"] .cap-seg-btns,
:root[data-theme="light"] .publish-copy-item,
:root[data-theme="light"] .publish-copy-btn,
:root[data-theme="light"] .filler-count,
:root[data-theme="light"] .clip-status,
:root[data-theme="light"] .gs-panel,
:root[data-theme="light"] .cal-form select,
:root[data-theme="light"] .proc-log,
:root[data-theme="light"] .type-list-item,
:root[data-theme="light"] .type-controls,
:root[data-theme="light"] .vol-key-controls {
  background: #ffffff;
}
:root[data-theme="light"] .type-controls textarea,
:root[data-theme="light"] .type-controls input[type="number"],
:root[data-theme="light"] .type-controls select,
:root[data-theme="light"] #type-render-source,
:root[data-theme="light"] .vol-key-controls select {
  background: #ffffff;
  color: var(--fg);
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .vm-toggle,
  :root[data-theme="system"] .tool-group,
  :root[data-theme="system"] .fchip-row,
  :root[data-theme="system"] .view-toggle,
  :root[data-theme="system"] .aspect-toggle,
  :root[data-theme="system"] .cap-seg-btns,
  :root[data-theme="system"] .publish-copy-item,
  :root[data-theme="system"] .publish-copy-btn,
  :root[data-theme="system"] .filler-count,
  :root[data-theme="system"] .clip-status,
  :root[data-theme="system"] .gs-panel,
  :root[data-theme="system"] .cal-form select,
  :root[data-theme="system"] .proc-log,
  :root[data-theme="system"] .type-list-item,
  :root[data-theme="system"] .type-controls,
  :root[data-theme="system"] .vol-key-controls {
    background: #ffffff;
  }
  :root[data-theme="system"] .type-controls textarea,
  :root[data-theme="system"] .type-controls input[type="number"],
  :root[data-theme="system"] .type-controls select,
  :root[data-theme="system"] #type-render-source,
  :root[data-theme="system"] .vol-key-controls select {
    background: #ffffff;
    color: var(--fg);
  }
}

/* Light-theme surface contract, second pass. Ordinary UI surfaces must stay
   white and readable. Dark wells are reserved for actual media, waveform, and
   caption-preview canvases; they must never leak into buttons, copy cards,
   filters, inputs, or editorial metadata. */
:root[data-theme="light"] :is(
  .publish-copy-item, .publish-copy-btn, .filler-count, .filler-review-item,
  .type-list-item, .type-controls, .gs-panel, .proc-log, .chapter-clip,
  .cal-form select, .set-field input, .set-field select, .vocab-input,
  .content-type-field, .detail-search input, .gs-input, .bs-input,
  .cap-preset, .cap-seg-btns, .fchip-row, .view-toggle, .aspect-toggle,
  .tool-group, .vol-key-controls, .text-modal-body, .detail-output-stat,
  .editor-clip-nav, .editor-back, .app-topbar, .cap-ctl select,
  .tp-rate, .tp-rate select, .clip-status, .project-menu, .edit-toolbar,
  .cut-popover
) {
  background: var(--app-card-surface) !important;
  color: var(--fg) !important;
  border-color: rgba(71, 85, 105, 0.24);
}
:root[data-theme="light"] :is(
  .publish-copy-head, .publish-copy-source, .filler-state, .filler-review-kind,
  .filler-review-source, .filler-review-reason, .cap-note, .cap-chip-motion,
  .cap-chip-name, .section-hint, .rail-note, .vol-hint, .vol-inline-hint,
  .tl-readout, .tl-zoom output, .editor-save-status, .btn-quiet,
  .publish-copy-btn
) { color: var(--fg-muted) !important; }
:root[data-theme="light"] :is(button, select, input, textarea):disabled {
  opacity: 1;
  background: var(--app-disabled-surface) !important;
  color: var(--app-disabled-fg) !important;
  -webkit-text-fill-color: var(--app-disabled-fg);
  border-color: rgba(71, 85, 105, 0.18);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] :is(
    .publish-copy-item, .publish-copy-btn, .filler-count, .filler-review-item,
    .type-list-item, .type-controls, .gs-panel, .proc-log, .chapter-clip,
    .cal-form select, .set-field input, .set-field select, .vocab-input,
    .content-type-field, .detail-search input, .gs-input, .bs-input,
    .cap-preset, .cap-seg-btns, .fchip-row, .view-toggle, .aspect-toggle,
    .tool-group, .vol-key-controls, .text-modal-body, .detail-output-stat,
    .editor-clip-nav, .editor-back, .app-topbar, .cap-ctl select,
    .tp-rate, .tp-rate select, .clip-status, .project-menu, .edit-toolbar,
    .cut-popover
  ) {
    background: var(--app-card-surface) !important;
    color: var(--fg) !important;
    border-color: rgba(71, 85, 105, 0.24);
  }
  :root[data-theme="system"] :is(
    .publish-copy-head, .publish-copy-source, .filler-state, .filler-review-kind,
    .filler-review-source, .filler-review-reason, .cap-note, .cap-chip-motion,
    .cap-chip-name, .section-hint, .rail-note, .vol-hint, .vol-inline-hint,
    .tl-readout, .tl-zoom output, .editor-save-status, .btn-quiet,
    .publish-copy-btn
  ) { color: var(--fg-muted) !important; }
  :root[data-theme="system"] :is(button, select, input, textarea):disabled {
    opacity: 1;
    background: var(--app-disabled-surface) !important;
    color: var(--app-disabled-fg) !important;
    -webkit-text-fill-color: var(--app-disabled-fg);
    border-color: rgba(71, 85, 105, 0.18);
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; inset-inline-start: 16px; top: 12px; z-index: 1000;
  display: inline-flex; min-height: 44px; align-items: center;
  padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface); color: var(--fg); font: 600 14px/1.4 var(--ui-font);
  opacity: 0; pointer-events: none; transform: translateY(-200%);
  transition: opacity .12s, transform .12s;
}
.skip-link:focus-visible {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg-wash), var(--bg);
  color: var(--fg);
  /* Readability baseline: primary copy and controls are comfortable at
     normal macOS window sizes; compact metadata stays intentionally dense. */
  font: 17px/1.58 var(--ui-font);
  -webkit-font-smoothing: antialiased;
}
:root[data-text-size="large"] body { font-size: 18px; }
:root[data-text-size="large"] .sidebar-item { font-size: 16px; }
:root[data-text-size="large"] .screen-sub,
:root[data-text-size="large"] .dashboard-hello-sub,
:root[data-text-size="large"] .set-note { font-size: 15px; }
.app-boot {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.app-boot.is-ready { opacity: 0; visibility: hidden; pointer-events: none; }
.app-boot-card {
  width: min(360px, calc(100vw - 48px));
  padding: 28px 30px 24px; display: grid; grid-template-columns: 42px 1fr;
  gap: 0 14px; align-items: center;
  border: 1px solid var(--border-strong); border-radius: 18px;
  background: var(--surface); box-shadow: 0 18px 60px rgba(0,0,0,0.22);
}
.app-boot-mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 12px; background: var(--accent); color: var(--accent-on);
  font-size: 22px; font-weight: 850; letter-spacing: -0.04em;
}
.app-boot-copy { min-width: 0; display: grid; gap: 2px; }
.app-boot-copy strong { color: var(--fg-strong); font-size: 17px; letter-spacing: -0.02em; }
.app-boot-copy span { color: var(--fg-muted); font-size: 13px; }
.app-boot-progress {
  grid-column: 1 / -1; height: 3px; margin-top: 22px;
  overflow: hidden; border-radius: 99px; background: var(--surface-strong);
}
.app-boot-progress span {
  display: block; width: 35%; height: 100%; border-radius: inherit;
  background: var(--accent); animation: app-boot-progress 1.2s ease-in-out infinite;
}
.app-boot-actions {
  grid-column: 1 / -1;
  display: grid;
  margin-top: 18px;
}
.app-boot-actions[hidden] { display: none; }
.app-boot-retry.btn {
  width: 100%;
  min-height: 44px;
}
.app-boot.is-error .app-boot-progress { display: none; }
@keyframes app-boot-progress {
  0% { transform: translateX(-120%); }
  55%, 100% { transform: translateX(320%); }
}
@media (prefers-reduced-motion: reduce) {
  .app-boot { transition: none; }
  .app-boot-progress span { animation: none; width: 100%; }
}

/* ===== LIGHT-MODE DEPTH CONTRACT =====
   Every ordinary page surface needs to read as a surface. Media canvases,
   waveform wells, and video frames intentionally remain dark; UI cards and
   controls do not. Keep this contract at the end so new screens inherit it. */
:root {
  --ui-card-shadow: none;
  --ui-card-shadow-hover: none;
  --ui-card-surface: var(--surface);
  --ui-card-border: var(--border);
}
:root[data-theme="light"] {
  --ui-card-shadow: 0 10px 26px rgba(36, 16, 51, 0.08), 0 2px 6px rgba(36, 16, 51, 0.045);
  --ui-card-shadow-hover: 0 14px 30px rgba(36, 16, 51, 0.12), 0 3px 8px rgba(36, 16, 51, 0.06);
  --ui-card-surface: #ffffff;
  --ui-card-border: rgba(78, 42, 120, 0.18);
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --ui-card-shadow: 0 10px 26px rgba(36, 16, 51, 0.08), 0 2px 6px rgba(36, 16, 51, 0.045);
    --ui-card-shadow-hover: 0 14px 30px rgba(36, 16, 51, 0.12), 0 3px 8px rgba(36, 16, 51, 0.06);
    --ui-card-surface: #ffffff;
    --ui-card-border: rgba(78, 42, 120, 0.18);
  }
}

:is(.app-topbar, .sidebar-account, .home-action, .home-capability,
  .hero, .editorial-brief, .project-card, .pub-card, .lrn-card, .bs-card,
  .clip-card, .proc-timeline, .connection-card, .chapter-clip,
  .oauth-provider-card, .campaign-publish-card, .tics-card, .stat-tile,
  .stage-row, .cal-day, .cal-entry, .filler-review-item, .type-list-item,
  .rerun-choice, .app-boot-card) {
  box-shadow: var(--ui-card-shadow);
}
:is(.home-action, .home-capability, .project-card, .pub-card, .lrn-card,
  .bs-card, .clip-card, .connection-card, .chapter-clip,
  .oauth-provider-card, .campaign-publish-card, .tics-card, .stat-tile,
  .cal-day, .cal-entry, .filler-review-item, .type-list-item, .rerun-choice):hover {
  box-shadow: var(--ui-card-shadow-hover);
}

:root[data-theme="light"] :is(
  .hero, .home-action, .home-capability, .project-card, .pub-card, .lrn-card,
  .bs-card, .clip-card, .proc-timeline, .connection-card, .chapter-clip,
  .oauth-provider-card, .campaign-publish-card, .tics-card, .stat-tile,
  .stage-row, .cal-day, .cal-entry, .filler-review-item, .type-list-item,
  .rerun-choice, .app-boot-card
) {
  background-color: var(--ui-card-surface);
  border-color: var(--ui-card-border);
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] :is(
    .hero, .home-action, .home-capability, .project-card, .pub-card, .lrn-card,
    .bs-card, .clip-card, .proc-timeline, .connection-card, .chapter-clip,
    .oauth-provider-card, .campaign-publish-card, .tics-card, .stat-tile,
    .stage-row, .cal-day, .cal-entry, .filler-review-item, .type-list-item,
    .rerun-choice, .app-boot-card
  ) {
    background-color: var(--ui-card-surface);
    border-color: var(--ui-card-border);
  }
}

/* Controls and page-specific panels that previously used dark-theme wells. */
:root[data-theme="light"] :is(
  .url-input, .editorial-field textarea, .editorial-field input[type="text"],
  .editorial-brief, .set-section, .set-field,
  .oauth-provider-card, .connection-card, .proc-log, .stage-row,
  .cal-day, .cal-entry, .type-list-item, .filler-review-item,
  .publish-copy-list, .highlights-list, .queue-list, .transcript-list,
  .chapters-list, .chapter-edit-list, .renders-list
) {
  background-color: var(--ui-card-surface);
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] :is(
    .url-input, .editorial-field textarea, .editorial-field input[type="text"],
    .editorial-brief, .set-section, .set-field,
    .oauth-provider-card, .connection-card, .proc-log, .stage-row,
    .cal-day, .cal-entry, .type-list-item, .filler-review-item,
    .publish-copy-list, .highlights-list, .queue-list, .transcript-list,
    .chapters-list, .chapter-edit-list, .renders-list
  ) { background-color: var(--ui-card-surface); }
}

a { color: inherit; text-decoration: none; }
code {
  font-family: var(--mono); font-size: 12px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  padding: 1px 5px; border-radius: 4px;
}
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon {
  width: 18px; height: 18px; display: block; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ===== LAYOUT ===== */
.app {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

/* ===== SIDEBAR ===== */
.app-sidebar {
  grid-column: 1; grid-row: 1 / -1;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 14px 10px 10px;
  height: 100vh; overflow: hidden;
  position: sticky; top: 0;
  align-self: start;
}
.sidebar-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 16px;
  padding: 12px 0; min-height: 0;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.sidebar-brand:hover .brand-name { color: var(--accent-text); }
.sidebar-brand[data-hosted-static-brand="true"] { cursor: default; }
.sidebar-brand[data-hosted-static-brand="true"]:hover .brand-name { color: var(--fg-strong); }
.brand-mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-press));
  color: var(--accent-on); font-weight: 800; font-size: 18px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.brand-name { color: var(--fg-strong); font-size: 16px; font-weight: 750; letter-spacing: -0.01em; transition: color 0.12s; }
.brand-tag { font-size: 13px; color: var(--fg-muted); margin-top: 1px; letter-spacing: 0.03em; }

.sidebar-section { display: flex; flex-direction: column; gap: 1px; }
.sidebar-section-title {
  padding: 6px 12px 4px;
  font-size: 12px; font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; border-radius: 8px;
  font-size: 16px; color: var(--fg);
  cursor: pointer; transition: background 0.12s, color 0.12s;
}
.sidebar-item:hover { background: var(--surface); }
.sidebar-item .side-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-muted);
}
.sidebar-item.active .side-icon { color: var(--accent-text); }
.sidebar-projects-link { position: relative; }
:root[data-ee-route="workspace"] .sidebar-projects-link {
  background: transparent;
  color: var(--fg);
  font-weight: 400;
}
:root[data-ee-route="workspace"] .sidebar-projects-link .side-icon { color: var(--fg-muted); }
.sidebar-chevron { margin-left: auto; color: var(--fg-dim); font-size: 13px; }
.sidebar-workspaces { display: grid; gap: 2px; margin: 1px 0 8px 26px; padding-left: 10px; border-left: 1px solid var(--border); }
.sidebar-workspace { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 5px 8px; border-radius: 7px; color: var(--fg-muted); font-size: 13px; text-decoration: none; }
.sidebar-workspace:hover, .sidebar-workspace.active { background: var(--surface); color: var(--fg-strong); }
.sidebar-workspace.is-drop-target { background: var(--accent-dim); outline: 1px dashed var(--accent); color: var(--fg-strong); }
.sidebar-workspace.active { font-weight: 700; }
.sidebar-workspace-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-dim); flex: 0 0 auto; }
.sidebar-workspace.active .sidebar-workspace-dot,
.sidebar-workspace.is-active-workspace .sidebar-workspace-dot { background: var(--accent); }
.sidebar-workspace-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-workspace-state {
  margin-left: auto; flex: 0 0 auto; color: var(--accent-text);
  font-size: 10px; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase;
}
.sidebar-new-workspace { border: 0; background: transparent; color: var(--fg-dim); text-align: left; padding: 6px 8px; font: 650 12px var(--ui-font); cursor: pointer; }
.sidebar-new-workspace:hover { color: var(--accent-text); }

.sidebar-footer { padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.sidebar-account {
  display: flex; gap: 9px; align-items: center; width: 100%; text-align: left;
  padding: 8px 12px; border-radius: 10px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--fg);
  transition: background 0.12s, border-color 0.12s;
}
.sidebar-account:hover { background: var(--surface); border-color: var(--border-strong); }
.local-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--success);
  flex-shrink: 0;
}
.account-text { display: flex; flex-direction: column; min-width: 0; }
.account-title { font-size: 14px; font-weight: 600; }
.account-sub { font-size: 13px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== TOPBAR ===== */
.app-topbar {
  grid-column: 2; grid-row: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.15); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 40;
  min-height: 54px;
  min-width: 0;
}
.breadcrumb-wrap { display: flex; align-items: center; gap: 12px; flex: 1 1 240px; min-width: 0; }
.route-back {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--fg-muted); font: 600 12px/1 var(--ui-font);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.route-back:hover, .route-back:focus-visible { background: var(--surface-hover); border-color: var(--border-strong); color: var(--fg); }
.route-back span:first-child { font-size: 16px; line-height: .75; }
.breadcrumb {
  flex: 1 1 240px; min-width: 80px; max-width: 420px;
  margin: 0; font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; color: var(--fg-muted);
}
.breadcrumb .crumb-current { color: var(--fg); font-weight: 600; }
.topbar-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; white-space: nowrap; }
.cost-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 14px; cursor: default;
}
.cost-pill .label { color: var(--fg-muted); }
.icon-btn {
  width: 34px; height: 34px; border-radius: 8px;
  background: transparent; border: 1px solid transparent;
  color: var(--fg); cursor: pointer;
  display: grid; place-items: center; font-size: 15px;
  transition: background 0.12s, border-color 0.12s;
}
.icon-btn:hover:not(:disabled) { background: var(--surface); border-color: var(--border); }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== MAIN ===== */
.app-main {
  grid-column: 2; grid-row: 2;
  padding: 30px 44px 64px;
  overflow-y: auto;
  /* min-width:0 clamps this column to the 1fr track so wide content (the
     editor's video) can't push the page wider than the window. */
  min-width: 0;
  /* Responsive content column: capped and CENTERED, so wide displays get
     balanced margins instead of a dead right side (Will, 2026-07-23). */
  max-width: 1280px; width: 100%;
  justify-self: center;
}
/* The editor is a workspace, not a reading page: let it use the whole window
   (the 1440px cap left a dead black gutter on wide displays) and reclaim the
   reading-page bottom padding so the NLE height math fills the viewport
   (topbar ~58px + padding-top 30 + padding-bottom 16 = the 104px offset). */
.app-main:has(#screen-editor:not([hidden])) { max-width: none; padding-bottom: 16px; }
.screen-head { margin: 4px 0 18px; }
.screen-head h2 { margin: 0 0 2px; font-size: 22px; letter-spacing: -0.01em; }
.screen-sub { font-size: 14px; color: var(--fg-muted); }

.dashboard-hello { margin: 6px 0 22px; }
.dashboard-hello-title { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 5px; }
.dashboard-hello-sub { font-size: 15px; color: var(--fg-muted); }

/* ===== HOME QUICK ACTIONS ===== */
.home-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.home-action {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  padding: 16px 18px; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--fg);
  text-decoration: none; transition: transform 0.12s, border-color 0.12s, background 0.12s;
}
.home-action:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.home-action-primary {
  background: linear-gradient(180deg, var(--accent-dim), var(--accent-dim));
  border-color: var(--border-accent);
}
.home-action-primary:hover { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-dim), var(--accent-dim)); }
.home-action-icon {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
}
.home-action-icon .ui-icon { width: 20px; height: 20px; stroke-width: 2; }
.home-action-primary .home-action-icon { background: var(--accent); color: var(--accent-on); border-color: transparent; }
.home-action-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.home-action-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.home-action-sub { font-size: 12px; color: var(--fg-muted); line-height: 1.4; }
.home-capabilities { margin: 0 0 30px; }
.home-capabilities-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 11px; }
.home-capabilities-sub { color: var(--fg-muted); font-size: 12px; margin-top: 4px; }
.home-capabilities-link { color: var(--accent-text); font-size: 12px; text-decoration: none; white-space: nowrap; }
.home-capabilities-link:hover { text-decoration: underline; }
.home-capabilities-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.home-capability {
  display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 13px 14px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface);
  color: var(--fg); text-decoration: none;
}
.home-capability-link-card { cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.home-capability-link-card:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.home-capability-icon { color: var(--accent-text); font-size: 17px; line-height: 1.15; flex: 0 0 auto; }
.home-capability strong, .home-capability span { display: block; }
.home-capability strong { font-size: 12px; margin-bottom: 4px; }
.home-capability div span { color: var(--fg-muted); font-size: 12px; line-height: 1.4; }
@media (max-width: 820px) { .home-capabilities-grid { grid-template-columns: 1fr; } }

/* ===== HERO DROP ZONE ===== */
#screen-home:not(.new-project-mode) .route-inline-back { display: none; }
#screen-home:not(.new-project-mode) .new-project-top { justify-content: flex-end; margin-bottom: 8px; }
#screen-home:not(.new-project-mode) .hero { display: block; }
#screen-home.new-project-mode > :not(.hero) { display: none; }
#screen-home.new-project-mode { max-width: 1120px; margin: 0 auto; }
.new-project-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 24px;
}
.route-inline-back {
  border: 0; background: transparent; color: var(--fg-muted); padding: 0;
  font: inherit; font-size: 13px; cursor: pointer;
}
.route-inline-back:hover { color: var(--fg); }
.new-project-context { display: inline-flex; align-items: center; gap: 9px; color: var(--fg-muted); font-size: 13px; }
.new-project-context label { white-space: nowrap; }
.new-project-workspace { min-height: 34px; min-width: 180px; }
.hero-head { margin-bottom: 20px; }
.hero-title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 5px; }
.hero-sub { font-size: 14px; color: var(--fg-muted); margin: 0; }
.start-tabs { display: flex; gap: 4px; margin-bottom: 14px; }
.start-tab:hover { color: var(--fg); }
.url-input {
  width: 100%; padding: 14px 16px; font-family: inherit; font-size: 14px;
  background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: 12px; color: var(--fg);
}
.url-input::placeholder { color: var(--fg-dim); }
.url-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.url-input:disabled { opacity: 0.5; }
.url-hint { font-size: 12px; color: var(--fg-dim); margin-top: 8px; line-height: 1.5; }

.drop-zone.is-disabled {
  opacity: 1; cursor: default; border-style: solid; border-color: var(--border);
  background: var(--surface);
}
.drop-zone.is-disabled .drop-icon { color: var(--fg-muted); }
.drop-icon .ui-icon { width: 24px; height: 24px; stroke-width: 1.7; }
.drop-main { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.drop-hint { font-size: 13px; color: var(--fg-muted); max-width: 560px; margin: 0 auto; }
.hero-cta { display: flex; justify-content: center; margin-top: 26px; }
.hero-cta .btn-primary { font-size: 14px; padding: 13px 44px; border-radius: 10px; }
.hero-cta .btn-primary:disabled {
  opacity: 0.55; cursor: not-allowed; box-shadow: none;
  background: var(--accent-dim); border-color: transparent; color: var(--accent-on);
}
.hosted-intake-disclosure {
  max-width: 720px; margin: 12px auto 0; color: var(--fg-dim);
  font-size: 12px; line-height: 1.55; text-align: center;
}
.run-start-status {
  min-height: 18px; margin: 10px auto 0; color: var(--fg-muted);
  font-size: 12px; line-height: 1.5; text-align: center;
}
.processing-access-notice {
  max-width: 720px; margin: 12px auto 0; padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid var(--border-accent); border-radius: 10px;
  background: var(--accent-dim); color: var(--fg-muted); font-size: 12px; line-height: 1.5;
}
.processing-access-notice div { display: grid; gap: 2px; }
.processing-access-notice strong { color: var(--fg); font-size: 13px; }
.processing-access-notice a { flex: 0 0 auto; color: var(--accent-text); font-weight: 700; }
.intake-access-notice { margin: 0 auto 18px; }
@media (max-width: 600px) {
  .processing-access-notice { align-items: flex-start; flex-direction: column; gap: 8px; }
  /* When processing is blocked, Account is the only productive next step.
     Keep that recovery action and the intake-mode choice comfortably
     reachable without enlarging their compact desktop treatment. */
  #screen-home .intake-access-notice a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; min-height: 44px; padding: 10px 14px;
    border: 1px solid var(--border-accent); border-radius: var(--r-md);
    background: var(--surface-strong); text-align: center;
  }
  #screen-home .start-tab { min-height: 44px; }
}

.editorial-brief {
  margin-top: 20px; padding: 16px 18px 14px;
  border: 1px solid var(--border); border-radius: 12px;
  background: rgba(255,255,255,0.025);
}
.editorial-brief-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.editorial-brief-title { font-size: 14px; font-weight: 700; color: var(--fg); }
.editorial-brief-head span { color: var(--fg-dim); font-size: 12px; }
.editorial-brief-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px;
}
.editorial-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.editorial-field > span, .editorial-field legend {
  color: var(--fg-muted); font-size: 12px; font-weight: 650;
}
.editorial-field small { color: var(--fg-dim); font-size: 11px; font-weight: 500; }
.editorial-field-wide { grid-column: 1 / -1; }
.editorial-field textarea, .editorial-field input[type="text"] {
  display: block; width: 100%; min-height: 58px; resize: vertical;
  padding: 11px 12px; border: 1px solid var(--border); border-radius: 9px;
  background: rgba(0,0,0,0.24); color: var(--fg); font: inherit; font-size: 13px;
  line-height: 1.45;
}
.editorial-field input[type="text"] { min-height: 42px; resize: none; }
.editorial-field textarea::placeholder, .editorial-field input[type="text"]::placeholder { color: var(--fg-dim); }
.editorial-field textarea:focus, .editorial-field input[type="text"]:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim);
}
.editorial-platforms { margin: 0; padding: 0; border: 0; }
.editorial-platform-options { display: flex; flex-wrap: wrap; gap: 7px; }
.editorial-platform-options label {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--fg-muted); background: rgba(0,0,0,0.16); font-size: 12px; cursor: pointer;
}
.editorial-platform-options label:has(input:checked) {
  border-color: var(--accent); color: var(--accent-text); background: var(--accent-dim);
}
.editorial-platform-options input { accent-color: var(--accent); }
.editorial-brief-error {
  margin-top: 10px; padding: 8px 10px; border: 1px solid var(--warning);
  border-radius: 8px; background: rgba(226,118,92,0.12); color: var(--warning); font-size: 12px;
}
.editorial-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.brief-preset {
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px;
  background: transparent; color: var(--fg-muted); font: inherit; font-size: 12px; cursor: pointer;
}
.brief-preset:hover { color: var(--fg); border-color: var(--border-strong); background: var(--surface-hover); }
@media (max-width: 720px) {
  .editorial-brief-head { display: block; }
  .editorial-brief-head span { display: block; margin-top: 4px; }
  .editorial-brief-grid { grid-template-columns: 1fr; }
  .editorial-field-wide { grid-column: auto; }
}

.privacy-line {
  font-size: 12px; color: var(--fg-dim); max-width: 720px;
  margin: 0 0 30px; line-height: 1.6;
}

/* ===== BUTTONS ===== */
.btn {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--fg); border-radius: 8px; padding: 8px 14px; min-height: 36px;
  font-family: inherit; font-size: 14px; cursor: pointer; font-weight: 500;
  transition: background 0.12s, border-color 0.12s;
}
.btn:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
  background: var(--accent); color: var(--accent-on); border-color: var(--accent); font-weight: 700;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Shared control rhythm: every high-frequency selector uses the same readable
   height and type scale, while the editor's intentionally tiny transport
   controls keep their local sizing. */
:is(.clip-sort, .bs-input, .cal-form select, .set-field select, #vertical-frame-policy) {
  min-height: 34px;
  font-family: var(--ui-font);
  font-size: 14px;
  line-height: 1.2;
}
.vertical-policy { min-height: 36px; }

/* ===== SECTIONS / GRIDS ===== */
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin: 34px 0 16px; }
.section-head:first-child { margin-top: 0; }
.section-title {
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-muted);
}
.section-hint { font-size: 14px; color: var(--fg-dim); }

/* ===== ACCOUNT ===== */
.account-detail-grid {
  display: grid;
  max-width: 1000px;
}
.account-detail-panel { min-width: 0; }
.account-detail-panel + .account-detail-panel {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
}
.account-detail-panel > .section-title { margin-bottom: var(--s-2); }
.account-identity {
  color: var(--fg-muted);
  font-weight: 600;
  line-height: 1.5;
}
.account-panel-description {
  max-width: 820px;
  margin-top: var(--s-2);
  line-height: 1.55;
}
.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--s-4);
}
.account-plan-status {
  display: grid;
  gap: var(--s-2);
  max-width: 960px;
}
.account-plan-status strong {
  display: block;
  color: var(--fg);
  font-size: 17px;
  line-height: 1.35;
}
.account-plan-status small {
  display: block;
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1.55;
}
.account-billing-note {
  max-width: 960px;
  margin-top: var(--s-3);
  line-height: 1.55;
}

@media (max-width: 600px) {
  .account-actions { align-items: stretch; }
  .account-actions .btn { flex: 1 1 100%; min-height: 44px; }
}

.projects-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px;
  align-items: start;
}

/* rich empty state on Home, matching the original web dashboard */
.empty-card {
  grid-column: 1 / -1; padding: 44px 32px; text-align: center;
  background: linear-gradient(135deg, var(--accent-dim), rgba(183,141,255,0.03));
  border: 1px dashed var(--border-accent); border-radius: 16px;
}
.empty-card .empty-icon { font-size: 40px; margin-bottom: 10px; }
.empty-card h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); }
.empty-card p { margin: 0 auto 18px; font-size: 13px; color: var(--fg-muted); max-width: 520px; line-height: 1.6; }
.empty-card strong { color: var(--accent-text); }
.project-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; cursor: pointer; display: flex; flex-direction: column; min-height: 340px;
  transition: border-color 0.12s, transform 0.08s, background 0.12s;
}
.project-card:hover { border-color: var(--border-accent); background: var(--surface-hover); }
.project-card.is-dragging { opacity: .55; transform: scale(.99); }
.project-card:focus-visible {
  outline: var(--focus-ring); outline-offset: 3px;
  border-color: var(--border-accent); background: var(--surface-hover);
}
.project-card-link { color: inherit; text-decoration: none; }
.project-thumb {
  width: 100%; aspect-ratio: 16/9; flex: 0 0 auto; min-height: 0;
  background: var(--surface-strong); position: relative;
  display: grid; place-items: center; color: var(--fg-dim); font-size: 26px;
}
.project-thumb img { width: 100%; height: 100%; object-fit: contain; background: var(--surface-strong); display: block; }
.project-badges { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 5px; }
.project-card-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.project-card-topline .project-badges { position: static; flex-wrap: wrap; gap: 5px; }
.project-badge {
  font-size: 12px; font-weight: 700; font-family: var(--mono);
  background: rgba(0,0,0,0.65); border: 1px solid var(--border-strong);
  background: var(--surface-strong); border: 1px solid var(--border-strong);
  padding: 3px 7px; border-radius: 999px; color: var(--fg-muted);
}
.project-select { width: 24px; height: 24px; flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: 7px; background: transparent; color: var(--accent-text); font-weight: 800; cursor: pointer; }
.project-select:hover, .project-select[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-dim); }
.project-meta { padding: 10px 12px 12px; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.project-sub { font-size: 12px; color: var(--fg-muted); margin-top: auto; padding-top: 7px; line-height: 1.45; }

.empty-hero, .grid-empty {
  padding: 36px 32px;
  background: linear-gradient(135deg, var(--accent-dim), rgba(183,141,255,0.03));
  border: 1px dashed var(--border-accent); border-radius: 14px;
  text-align: center; color: var(--fg-muted); font-size: 14px;
  grid-column: 1 / -1;
}

/* ===== MEDIA LIBRARY ===== */
.lib-table { width: 100%; border-collapse: collapse; }
.lib-table th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-muted); font-weight: 700; padding: 8px 12px;
  border-bottom: 1px solid var(--border-strong);
}
.lib-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
.lib-table tr:hover td { background: var(--surface); }
.lib-table .mono { font-family: var(--mono); font-size: 12px; color: var(--fg-muted); }
.lib-proj-link { color: var(--accent-text); cursor: pointer; }
.lib-proj-link:hover { text-decoration: underline; }
.lib-proj-link:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: 2px; }

/* ===== PUBLISH ===== */
.pub-note {
  font-size: 13px; color: var(--fg-muted); line-height: 1.55;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 20px; max-width: 760px;
}
.pub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.pub-card {
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  padding: 18px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.pub-logo {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 4px;
}
.pub-logo.yt { background: #ff0000; }
.pub-logo.tt { background: #000; border: 1px solid var(--border-strong); }
.pub-logo.ig { background: linear-gradient(135deg, #feda75, #d62976, #4f5bd5); }
.pub-logo.li { background: #0a66c2; font-size: 16px; }
.pub-logo.x { background: #000; border: 1px solid var(--border-strong); }
.pub-name { font-size: 14px; font-weight: 700; }
.pub-sub { font-size: 13px; color: var(--fg-muted); }
.pub-status {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 7px;
  color: var(--fg-muted); font-size: 12px; font-weight: 650;
}
.pub-status span { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-dim); }

/* ===== LEARN ===== */
.sidebar-help { margin-top: auto; }
.lrn-section-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-muted); margin: 24px 0 12px;
}
.lrn-section-title:first-of-type { margin-top: 4px; }
.lrn-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.lrn-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; transition: border-color 0.12s;
}
.lrn-card > summary {
  list-style: none; cursor: pointer; padding: 15px 18px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
}
.lrn-card > summary::-webkit-details-marker { display: none; }
.lrn-card > summary::after {
  content: '▾'; color: var(--fg-muted); font-size: 12px;
  transition: transform 0.15s; justify-self: end;
}
.lrn-card[open] > summary::after { transform: rotate(180deg); }
.lrn-card > summary:hover { background: var(--surface-hover); }
.lrn-eyebrow {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: var(--accent-dim); color: var(--accent-text);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap;
}
.lrn-title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.lrn-teaser { grid-column: 2; font-size: 12px; color: var(--fg-muted); }
.lrn-card > summary .lrn-title { grid-column: 2; }
.lrn-card > summary { grid-template-areas: "eyebrow title chev" "eyebrow teaser chev"; }
.lrn-eyebrow { grid-area: eyebrow; align-self: center; }
.lrn-title { grid-area: title; }
.lrn-teaser { grid-area: teaser; }
.lrn-card > summary::after { grid-area: chev; align-self: center; }
.lrn-body {
  padding: 2px 18px 18px 18px; font-size: 13px; color: var(--fg); line-height: 1.65;
  border-top: 1px solid var(--border);
}
.lrn-body p { margin: 12px 0 0; }
.lrn-body ul { margin: 10px 0 0; padding-left: 18px; }
.lrn-body li { margin: 5px 0; color: var(--fg-muted); }
.lrn-body li strong { color: var(--fg); }
.lrn-body code {
  font-family: var(--mono); font-size: 13px; background: rgba(255,255,255,0.06);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--fg);
}
.lrn-body em { color: var(--accent-text); font-style: normal; }

/* ===== BRAND STUDIO ===== */
.bs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.bs-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column;
}
.bs-card h3 { margin: 0 0 6px; font-size: 14px; letter-spacing: -0.005em; }
.bs-card p { margin: 0 0 14px; font-size: 12px; color: var(--fg-muted); line-height: 1.5; }
.bs-swatches { display: flex; gap: 8px; margin-bottom: 12px; }
.bs-swatch {
  flex: 1; height: 32px; border-radius: 6px; cursor: pointer; padding: 0;
  border: 1px solid rgba(255,255,255,0.1); position: relative;
}
.bs-swatch.active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor; }
.bs-swatch.active::after {
  content: '✓'; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--accent-on); font-weight: 800; font-size: 13px;
}
.bs-custom-color { font-size: 12px; color: var(--fg-muted); display: flex; align-items: center; gap: 8px; }
.bs-custom-color input[type="color"] { width: 44px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
.bs-input {
  padding: 8px 12px; background: rgba(0,0,0,0.35); border: 1px solid var(--border);
  color: var(--fg); border-radius: 7px; font-family: inherit; font-size: 13px; width: 100%;
}
.bs-preview {
  margin-top: 12px; padding: 14px; background: var(--ink-950);
  border-radius: 8px; font-size: 20px; font-weight: 800; text-align: center;
}
.bs-file { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bs-format-files { display: grid; gap: 10px; }
.bs-format-label { color: var(--fg-muted); font-size: 12px; font-weight: 700; }
.bs-pick { font-size: 12px; }
.bs-file-name { font-size: 13px; color: var(--accent-text); font-family: var(--mono); word-break: break-all; }
.bs-foot {
  margin-top: 22px; max-width: 920px; padding: 13px 18px;
  background: var(--accent-dim); border: 1px solid var(--border-accent);
  border-radius: 10px; font-size: 12px; color: var(--fg-muted); line-height: 1.6;
}
.bs-save-status { min-height: 18px; margin-top: 12px; font-size: 13px; color: var(--fg-muted); }
.bs-save-status.is-saving { color: var(--accent-text); }
.bs-save-status.is-saved { color: var(--success); }
.bs-save-status.is-error { color: var(--warning); }

/* ===== PROJECT DETAIL ===== */
.detail-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin: 4px 0 22px; flex-wrap: wrap;
}
.detail-head h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.01em; }
.editor-back {
  margin: 0 0 11px; padding: 7px 11px;
  color: var(--fg-strong); font-size: 13px; font-weight: 650;
  background: rgba(255,255,255,0.045); border-color: var(--border-strong);
}
.editor-back:hover { color: var(--accent-text); border-color: var(--border-accent); }
.editor-clip-nav {
  display: inline-flex; align-items: center; overflow: hidden;
  border: 1px solid var(--border-strong); border-radius: 9px;
  background: rgba(255,255,255,0.025);
}
.editor-clip-nav .editor-step {
  min-height: 34px; padding: 7px 10px; border: 0; border-radius: 0;
  background: transparent; font-size: 12px; font-weight: 650;
}
.editor-clip-nav .editor-step:hover:not(:disabled) { color: var(--accent-text); background: var(--surface-hover); }
.editor-clip-position {
  min-width: 62px; padding: 0 8px; color: var(--fg-muted);
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  font: 650 12px var(--mono); text-align: center; white-space: nowrap;
}
#screen-editor .detail-head {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 12px;
}
#screen-editor .detail-actions {
  width: 100%; justify-content: flex-start; align-items: center;
  gap: 10px; padding-top: 0; flex-wrap: wrap;
}
#screen-editor .detail-actions > .btn { min-height: 34px; font-size: 13px; }
.editor-toolbar-status,
.editor-toolbar-primary {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.editor-toolbar-primary {
  margin-left: auto; padding: 4px; border: 1px solid var(--border-strong);
  border-radius: 12px; background: var(--surface-strong);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
.editor-toolbar-primary > .btn:not(.btn-primary) {
  background: var(--surface-hover); border-color: var(--border);
}
.editor-approval-control {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--fg-muted); font-size: 12px; font-weight: 650;
}
.editor-approval-control .clip-status { min-height: 34px; }
.editor-more-wrap { position: relative; }
.editor-more-menu.project-more-menu {
  right: 0; left: auto; width: 268px;
  background: var(--surface-strong); border-color: var(--border-strong);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.editor-more-menu .project-menu-item {
  display: grid; justify-content: start; align-items: start;
  min-height: 0; padding: 8px 10px; gap: 2px;
}
.editor-more-menu .project-menu-item small {
  flex: none; text-align: left; color: var(--fg-muted);
}
.editor-more-policy {
  display: grid; gap: 4px; margin: 6px 8px 8px; color: var(--fg-muted);
  font-size: 12px; font-weight: 650;
}
.editor-more-policy select { width: 100%; min-height: 32px; }
.tl-discard {
  min-height: 32px; padding: 6px 10px; border: 1px solid var(--border-strong);
  border-radius: 9px; background: var(--surface-strong);
  color: var(--fg); font-size: 12px; font-weight: 650;
}
.tl-discard:hover:not(:disabled) { color: var(--warning); border-color: var(--warning); }
.tl-discard:disabled { opacity: 0.45; }
.detail-meta { font-size: 12px; color: var(--fg-muted); font-family: var(--mono); }
.detail-output-summary {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px;
}
.detail-output-stat {
  min-width: 92px; padding: 8px 11px; border: 1px solid var(--border);
  border-radius: 10px; background: rgba(255,255,255,0.025);
  display: flex; align-items: baseline; gap: 7px;
}
.detail-output-stat strong {
  color: var(--fg-strong); font: 650 16px/1 var(--mono);
}
.detail-output-stat span {
  color: var(--fg-muted); font-size: 12px; white-space: nowrap;
}
.project-assets-count {
 display: inline-flex; align-items: center; justify-content: center;
 min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
 background: var(--brand-dim); color: var(--brand-text); font: 700 11px var(--mono);
}
#btn-project-assets { display: inline-flex; align-items: center; gap: 8px; }
#project-assets-modal .project-assets-modal-box { width: min(780px, calc(100vw - 32px)); border-radius: 14px; }
.project-assets-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.project-assets-modal-header .modal-sub { white-space: normal; max-width: 440px; }
.modal-close { flex: 0 0 auto; border: 0; background: transparent; color: var(--fg-muted); font-size: 24px; line-height: 1; cursor: pointer; }
.project-brand-asset-actions {
 display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 18px;
}
.project-brand-asset-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.project-brand-asset-group-header {
 display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px;
 padding: 12px 10px 6px; color: var(--fg); font-size: 11px; letter-spacing: 0.1em;
 text-transform: uppercase; font-weight: 750;
}
.project-brand-asset-group-ratio { color: var(--fg-dim); font: 11px var(--mono); letter-spacing: normal; text-transform: none; font-weight: 400; }
.project-brand-asset-group-rule { min-width: 0; height: 1px; background: var(--border); }
.project-brand-asset {
 display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto;
 align-items: center; gap: 12px; min-width: 0; padding: 9px 10px;
 border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-strong);
 transition: border-color 120ms ease, background-color 120ms ease;
}
.project-brand-asset.is-dragover { border: 1px dashed var(--brand); background: rgba(122,76,173,0.07); }
.project-brand-asset-label { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--fg-muted); font-size: 12px; font-weight: 750; white-space: nowrap; }
.project-brand-asset-preview { width: 34px; height: 20px; flex: 0 0 auto; border-radius: 3px; object-fit: contain; background: var(--stage-bg); background-position: center; background-repeat: no-repeat; background-size: contain; }
.project-brand-asset[data-project-brand-slot$="_v"] .project-brand-asset-preview { width: 20px; height: 34px; }
.project-brand-asset-preview:not(img) { display: inline-block; }
.project-brand-asset-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); font: 12px var(--mono); }
.project-brand-asset-name.is-empty { color: var(--fg-dim); font-family: var(--ui-font); }
.project-brand-asset .btn { min-height: 28px; padding: 5px 8px; font-size: 12px; }
.project-brand-asset-clear[hidden] { display: inline-flex !important; visibility: hidden; }
.project-brand-review { grid-column: 1 / -1; display: grid; gap: 10px; padding-top: 2px; }
.project-brand-transition-controls { display: grid; grid-template-columns: minmax(150px, 1fr) 82px 82px auto auto; align-items: end; gap: 8px; }
.project-brand-transition-controls label { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; color: var(--fg-dim); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.project-brand-transition-controls label select { grid-column: 1 / -1; }
.project-brand-transition-controls select,
.project-brand-transition-controls input { width: 100%; min-width: 0; height: 30px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--fg); padding: 4px 7px; font: 12px var(--ui-font); }
.project-brand-transition-controls input { font-family: var(--mono); }
.project-brand-transition-controls label > span { color: var(--fg-dim); font: 11px var(--mono); }
.project-brand-review-result { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 10px; padding: 10px; border-radius: 9px; background: var(--stage-bg); }
.project-brand-review-result[hidden] { display: none; }
.project-brand-review-player { position: relative; min-width: 0; min-height: 180px; overflow: hidden; border-radius: 7px; background: #09080d; }
.project-brand-review-result video { display: block; width: 100%; height: 100%; min-height: 180px; max-height: 250px; border-radius: 7px; background: #09080d; object-fit: contain; cursor: pointer; }
.project-brand-review-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 116px; min-height: 40px; padding: 8px 14px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(18,15,24,.84); color: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.28); font: 700 12px var(--ui-font); cursor: pointer; backdrop-filter: blur(10px); }
.project-brand-review-play:hover { background: rgba(31,25,41,.94); border-color: rgba(255,255,255,.48); }
.project-brand-review-play:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.project-brand-review-play:disabled { cursor: wait; opacity: .72; }
.project-brand-review-playback-status { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 4px 7px; border-radius: 5px; background: rgba(9,8,13,.78); color: rgba(255,255,255,.8); font: 10px var(--mono); pointer-events: none; }
.project-brand-review-decision { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 7px; }
.project-brand-review-status { margin-bottom: 3px; color: var(--fg-muted); font-size: 12px; font-weight: 700; }
.project-brand-review-status[data-status="approved"] { color: var(--success); }
.project-brand-review-status[data-status="changes_requested"] { color: var(--warning); }
.project-brand-review-context { display: grid; gap: 5px; margin: 0 0 5px; }
.project-brand-review-context > div { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 6px; }
.project-brand-review-context dt { color: var(--fg-dim); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.project-brand-review-context dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--fg-muted); font-size: 10px; line-height: 1.35; }
.project-transition-picker { margin-top: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-strong); }
.project-transition-picker[hidden] { display: none; }
.project-transition-picker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.project-transition-picker-head h3 { margin: 0 0 3px; font-size: 14px; }
.project-transition-picker-head p { margin: 0; color: var(--fg-dim); font-size: 11px; }
.project-transition-picker .transition-browser { max-width: none; gap: 10px; }
.project-transition-picker .transition-card { cursor: pointer; }
.project-transition-picker .transition-card.selected .transition-thumb { border-color: var(--brand); box-shadow: 0 0 0 2px var(--accent-dim); }
.project-assets-drop-caption { margin: 12px 0 0; color: var(--fg-dim); font-size: 13px; }
.project-assets-modal-actions { align-items: center; }
.project-assets-modal-actions a { color: var(--brand-text); font-size: 13px; text-decoration: none; }
.project-assets-modal-actions a:hover { text-decoration: underline; }

.export-folder-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.export-folder-row .set-hint { min-width: 0; overflow: hidden; white-space: nowrap; }
.export-folder-path { flex: 1 1 220px; text-overflow: ellipsis; }
.export-folder-path.is-custom { color: var(--fg); font-family: var(--mono); }
.export-folder-reset { flex: 0 0 auto; }
@media (max-width: 560px) {
  .project-brand-asset { gap: 7px; padding-inline: 6px; }
  .project-brand-asset .btn { padding-inline: 6px; }
  .project-brand-transition-controls { grid-template-columns: 1fr 1fr; }
  .project-brand-review-result { grid-template-columns: 1fr; }
}
.output-choice-error {
  margin-top: 8px; color: var(--warning); font-size: 12px;
}
.detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.project-more-wrap { position: relative; }
.project-more-trigger { display: inline-flex; align-items: center; gap: 7px; }
.project-more-chevron { display: inline-block; transform: rotate(0deg); transition: transform 0.18s cubic-bezier(0.32,0.72,0,1); }
.project-more-trigger[aria-expanded="true"] .project-more-chevron { transform: rotate(90deg); }
.project-more-trigger[aria-expanded="true"] {
  color: var(--fg-strong); background: var(--surface-hover); border-color: var(--border-strong);
}
.project-more-menu {
  position: absolute; z-index: 80; top: calc(100% + 8px); right: 0; width: 390px; max-width: calc(100vw - 24px);
  padding: 7px; border: 1px solid var(--border-strong); border-radius: 13px;
  background: var(--surface); box-shadow: 0 18px 50px rgba(0,0,0,0.24);
  backdrop-filter: blur(18px);
}
:root[data-theme="light"] .project-more-menu,
:root[data-theme="system"] .project-more-menu {
  background: #ffffff;
  color: var(--fg);
  border-color: rgba(15, 23, 42, 0.20);
}
.project-menu-item {
  width: 100%; min-height: 50px; padding: 10px 10px; border: 0; border-radius: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  color: var(--fg); background: transparent; font: 700 15px/1.25 var(--ui-font);
  text-align: left; cursor: pointer;
}
.project-menu-item:hover:not(:disabled), .project-menu-item:focus-visible {
  background: var(--surface-hover); outline: none;
}
:root[data-theme="light"] .project-menu-item:hover:not(:disabled),
:root[data-theme="light"] .project-menu-item:focus-visible,
:root[data-theme="system"] .project-menu-item:hover:not(:disabled),
:root[data-theme="system"] .project-menu-item:focus-visible {
  background: rgba(15, 23, 42, 0.07);
}
.project-menu-item > span { white-space: nowrap; }
.project-menu-item:disabled { opacity: 0.4; cursor: not-allowed; }
.project-menu-divider { height: 1px; margin: 6px 4px; background: var(--border); }
.project-menu-danger { color: var(--warning); }
.project-menu-danger:hover:not(:disabled), .project-menu-danger:focus-visible {
  background: rgba(255,139,139,0.1);
}

.clips-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px;
}
.clip-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color 0.12s, transform 0.08s;
}
.clip-card:hover { border-color: var(--border-accent); }
.clip-card-link {
  color: inherit; cursor: pointer; display: flex; flex: 1 1 auto;
  flex-direction: column; text-decoration: none;
}
.clip-card-link:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }
.clip-thumb-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--surface-strong); }
.clip-card video { width: 100%; height: 100%; aspect-ratio: 16/9; object-fit: contain; background: var(--surface-strong); display: block; }
.clip-card-still {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  object-fit: contain; background: var(--surface-strong); pointer-events: none;
  visibility: visible; transition: visibility 0s linear;
}
.clip-thumb-wrap.is-hovering .clip-card-still { visibility: hidden; }
.clip-preview-hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  padding: 5px 9px; border-radius: 7px; white-space: nowrap; pointer-events: none;
  color: #fff; background: rgba(5,7,12,0.72); backdrop-filter: blur(5px);
  font-size: 12px; font-weight: 700; opacity: 0; transition: opacity 0.12s;
}
.clip-thumb-wrap:hover .clip-preview-hint { opacity: 1; }
.clip-norender {
  aspect-ratio: 16/9; background: var(--surface-strong); display: grid; place-items: center;
  color: var(--fg-dim); font-size: 12px;
}
/* Opus-style headline score badge on the thumbnail */
.clip-score {
  position: absolute; top: 9px; left: 9px;
  min-width: 30px; height: 30px; padding: 0 7px;
  border-radius: 9px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 15px; font-weight: 800;
  color: var(--accent-on); box-shadow: 0 2px 10px rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
}
.clip-score.s-high { background: var(--success); }
.clip-score.s-mid  { background: linear-gradient(135deg, var(--accent), var(--accent-press)); }
.clip-score.s-low  { background: rgba(20,24,32,0.82); color: var(--fg-muted); box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
.clip-corner { position: absolute; top: 9px; right: 9px; display: flex; gap: 5px; }
.clip-unverified {
  width: 24px; height: 24px; border-radius: 7px;
  background: rgba(70,24,24,0.9); color: var(--warning);
  border: 1px solid rgba(255,139,139,0.45);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 14px; font-weight: 900;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.clip-edited {
  width: 24px; height: 24px; border-radius: 7px;
  background: rgba(20,24,32,0.82); color: var(--accent-text);
  display: grid; place-items: center; font-size: 12px; backdrop-filter: blur(4px);
}
.clip-stale {
  width: 24px; height: 24px; border-radius: 7px;
  background: rgba(96,64,18,0.92); color: #ffd166;
  border: 1px solid rgba(255,209,102,0.48);
  display: grid; place-items: center; font-size: 15px; font-weight: 800;
  backdrop-filter: blur(4px);
}
.clip-vert {
  height: 24px; padding: 0 7px; border-radius: 7px;
  background: rgba(20,24,32,0.82); color: var(--accent-blue);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  font-family: var(--mono); backdrop-filter: blur(4px);
}
.clip-branded {
  height: 24px; padding: 0 7px; border-radius: 7px;
  background: rgba(24, 58, 46, 0.92); color: #9be5bf;
  border: 1px solid rgba(126, 221, 173, 0.35);
  display: grid; place-items: center; font-size: 10px; font-weight: 800;
  letter-spacing: .035em; text-transform: uppercase; font-family: var(--mono);
  backdrop-filter: blur(4px);
}
.clip-body { padding: 12px 14px 6px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.posting-order-guide {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--border-accent);
  border-radius: 11px; background: var(--accent-dim); color: var(--fg-muted);
  font-size: 13px;
}
.posting-order-guide[hidden] { display: none; }
.posting-order-guide > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.posting-order-guide strong { color: var(--fg); font-size: 13px; }
.posting-order-guide-meta { color: var(--fg-dim); font-family: var(--mono); font-size: 12px; text-align: right; }
.posting-order-row { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 2px; }
.posting-order-number {
  flex-shrink: 0; padding: 3px 7px; border-radius: 6px; background: var(--accent);
  color: var(--accent-on); font-family: var(--mono); font-size: 11px; font-weight: 850;
  letter-spacing: 0.035em; text-transform: uppercase;
}
.posting-order-reason { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-dim); font-size: 12px; }
.clip-title {
  font-size: 14px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.clip-meta { font-size: 13px; color: var(--fg-muted); display: flex; gap: 8px; align-items: baseline; }
.clip-meta .mono { color: var(--fg-dim); flex-shrink: 0; }
.clip-hookline {
  font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.clip-actions { display: flex; gap: 8px; padding: 8px 14px 14px; margin-top: auto; }
.clip-actions .btn { font-size: 13px; padding: 6px 12px; }
.clip-actions .btn-primary { flex: 1; }

@media (max-width: 700px) {
  .posting-order-guide { align-items: flex-start; flex-direction: column; gap: 7px; }
  .posting-order-guide-meta { text-align: left; }
}


.renders-list { display: flex; flex-wrap: wrap; gap: 8px; }
.render-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-family: var(--mono);
  color: inherit; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  padding: 7px 12px; border-radius: 8px; cursor: pointer;
  transition: border-color 0.12s;
}
.render-chip:hover { border-color: var(--border-strong); background: var(--surface-hover); }

.drop-browse { color: var(--accent-text); text-decoration: underline; }

.picked-row { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.picked-file {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 10px 14px;
}
.picked-name { font-family: var(--mono); font-size: 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
.picked-clear {
  background: transparent; border: 0; color: var(--fg-muted); cursor: pointer;
  font-size: 13px; padding: 2px 6px; border-radius: 6px;
}
.picked-clear:hover { background: var(--surface-strong); color: var(--fg); }
.options-row { display: flex; gap: 16px; flex-wrap: wrap; padding: 0 2px; }
.opt {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--fg); cursor: pointer; user-select: none;
}
.opt input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.opt input:disabled { cursor: not-allowed; }
.opt:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.package-row {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  padding: 12px 2px 0; margin-top: 12px; border-top: 1px solid var(--border);
}
.package-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }
.build-stamp { margin-top: 10px; padding: 0 4px; font-family: var(--mono); font-size: 11px; color: var(--fg-dim); letter-spacing: 0.02em; }
.opt-strong { font-weight: 650; color: var(--accent-text); }

/* ===== TOPBAR RUN PILL ===== */
.run-pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0; max-width: min(360px, 32vw); overflow: hidden;
  padding: 6px 12px; border-radius: 999px;
  background: var(--accent-dim); border: 1px solid var(--border-accent);
  font-size: 12px; font-weight: 600; color: var(--accent-text); cursor: pointer;
}
#run-pill-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-pill-dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  animation: pulse 1.6s infinite;
}
.run-pill.is-action .run-pill-dot { background: var(--warning); animation: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ===== PROCESSING ===== */
.proc-layout { display: grid; grid-template-columns: 1fr 300px; gap: 26px; align-items: start; }
.proc-timeline {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 6px; display: flex; flex-direction: column;
}
.stage-icon { width: 18px; text-align: center; font-size: 13px; color: var(--fg-dim); }
.stage-label { flex: 1; color: var(--fg-dim); }
.stage-meta { display: flex; gap: 10px; font-family: var(--mono); font-size: 13px; color: var(--fg-muted); }
.stage-row.is-running { background: var(--accent-dim); }
.stage-row.is-running .stage-icon { color: var(--accent-text); animation: pulse 1.4s infinite; }
.stage-row.is-running .stage-label { color: var(--fg-strong); font-weight: 600; }
.stage-row.is-done .stage-icon { color: var(--success); }
.stage-row.is-done .stage-label { color: var(--fg); }
.stage-row.is-skipped .stage-icon { color: var(--fg-dim); }
.stage-row.is-skipped .stage-label { text-decoration: line-through; }
.stage-row.is-error .stage-icon { color: var(--warning); }
.stage-row.is-error .stage-label { color: var(--warning); font-weight: 600; }
.stage-row.is-action { background: color-mix(in srgb, var(--warning) 8%, transparent); }
.stage-row.is-action .stage-icon,
.stage-row.is-action .stage-label { color: var(--warning); font-weight: 600; }
.stage-cost { color: var(--accent-text); }

.proc-side { display: flex; flex-direction: column; gap: 12px; }
.proc-stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 16px;
}
.proc-stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); font-weight: 700; }
.proc-stat-value { font-size: 20px; font-weight: 700; font-family: var(--mono); margin-top: 2px; }
.btn-danger {
  color: var(--warning); border-color: rgba(255,139,139,0.35); background: rgba(255,139,139,0.07);
}
.btn-danger:hover:not(:disabled) { background: rgba(255,139,139,0.16); border-color: var(--warning); }
.proc-log-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: -4px; }
.proc-log-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); font-weight: 700; }
.proc-log-copy {
  font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 6px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--fg-muted);
}
.proc-log-copy:hover { border-color: var(--border-strong); color: var(--fg); }
.proc-log {
  background: rgba(0,0,0,0.4); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font-family: var(--mono); font-size: 12px; line-height: 1.6;
  color: var(--fg-muted); white-space: pre-wrap; word-break: break-word;
  max-height: 220px; overflow-y: auto; min-height: 60px;
  user-select: text; -webkit-user-select: text; cursor: text;
}
.proc-doneline {
  margin-top: 18px; padding: 14px 18px; border-radius: 10px; font-size: 13px;
}
.proc-doneline.is-error {
  background: rgba(255,139,139,0.08); border: 1px solid rgba(255,139,139,0.3); color: var(--warning);
}
.proc-doneline.is-action {
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border));
  color: var(--fg);
}

/* ===== SETTINGS MODAL ===== */
.modal-backdrop.open { display: flex; }
body.modal-open { overflow: hidden; }
body.modal-open .app-main { overflow: hidden; }
.set-section {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-muted); margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--border);
}
.set-note { margin: 4px 0 10px; font-size: 14px; color: var(--fg-muted); line-height: 1.6; }
.set-field { margin-bottom: 10px; }
.set-field label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.key-state { font-weight: 400; color: var(--fg-muted); font-family: var(--mono); font-size: 12px; margin-left: 6px; }
.set-field input {
  width: 100%; padding: 9px 12px;
  background: rgba(0,0,0,0.35); border: 1px solid var(--border);
  color: var(--fg); border-radius: 8px;
  font-family: var(--mono); font-size: 14px;
}
.set-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.set-toggles { display: flex; flex-wrap: wrap; gap: 12px 18px; }
.oauth-provider-list { display: grid; gap: 8px; margin: 8px 0 14px; }
.oauth-provider-card { border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,0.025); overflow: hidden; }
.oauth-provider-card summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.oauth-provider-card summary::-webkit-details-marker { display: none; }
.oauth-provider-card summary::after { content: '+'; color: var(--fg-dim); font-size: 18px; line-height: 1; text-align: right; }
.oauth-provider-card[open] summary::after { content: '−'; }
.oauth-provider-card summary > span:first-child { display: grid; gap: 3px; }
.oauth-provider-card summary strong { font-size: 14px; }
.oauth-provider-card summary small { color: var(--fg-dim); font-size: 13px; }
.oauth-provider-card summary .key-state { white-space: nowrap; color: var(--fg-dim); font-family: var(--ui-font); font-size: 12px; font-weight: 650; letter-spacing: .01em; line-height: 1; padding: 7px 9px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.04); }
.oauth-provider-card summary .key-state.is-needs-setup { color: #ffd778; border-color: var(--border-accent); background: var(--accent-dim); }
.oauth-provider-card summary .key-state.is-ready { color: #98e6b3; border-color: rgba(80,190,120,.38); background: rgba(80,190,120,.10); }
.oauth-provider-card summary .key-state.is-connected { color: #9be9ff; border-color: rgba(77,190,230,.42); background: rgba(77,190,230,.11); }
.oauth-provider-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; padding: 0 14px 4px; border-top: 1px solid var(--border); }
.oauth-provider-fields .set-field { min-width: 0; margin-top: 12px; }
.oauth-help-wrap { grid-column: 1 / -1; margin: 10px 0 2px; }
.oauth-help-button { display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; border: 0; background: none; color: var(--fg-muted); font: 600 12px/1.2 var(--ui-font); cursor: pointer; }
.oauth-help-button:hover, .oauth-help-button:focus-visible { color: var(--fg); }
.oauth-help-icon { display: inline-grid; place-items: center; width: 17px; height: 17px; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; font-weight: 700; }
.oauth-help { margin: 8px 0 4px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-strong); color: var(--fg-muted); font-size: 13px; line-height: 1.5; }
.oauth-help strong { display: block; color: var(--fg); margin-bottom: 4px; }
.oauth-help ol { margin: 6px 0 8px 18px; padding: 0; }
.oauth-help p { margin: 0; }
.oauth-help a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.oauth-connection-row { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 10px; padding: 10px 0 2px; border-top: 1px solid var(--border); }
.oauth-connection-row > span:first-child { display: grid; gap: 3px; min-width: 0; }
.oauth-connection-row strong { font-size: 12px; }
.oauth-connection-row small { color: var(--fg-dim); font-size: 12px; }
.oauth-connection-row .connection-platform-actions { display: flex; align-items: center; flex-shrink: 0; }
@media (max-width: 620px) { .oauth-provider-fields { grid-template-columns: 1fr; } }
.mono { font-family: var(--mono); font-size: 12px; }
.btn-inline { padding: 4px 10px; font-size: 12px; margin-left: 8px; }

/* ===== VOCAB FIELD ===== */
.vocab-input {
  width: 100%; padding: 10px 14px;
  background: rgba(0,0,0,0.35); border: 1px solid var(--border);
  color: var(--fg); border-radius: 10px;
  font-family: inherit; font-size: 13px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.vocab-input::placeholder { color: var(--fg-dim); }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; }
.meta-row .vocab-input { flex: 1; min-width: 180px; }
.meta-row .meta-narrow { flex: 0 0 110px; }
.content-type-field {
  flex: 0 0 210px; display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: 8px; padding: 0 10px;
  background: rgba(0,0,0,0.35); border: 1px solid var(--border);
  border-radius: 10px; color: var(--fg-muted); font-size: 12px;
}
.content-type-field select {
  min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--fg); font: inherit; font-size: 12px;
}
.content-type-field:focus-within {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim);
}
.vocab-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

/* ===== FIXTURE PILL ===== */
.fixture-pill {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(183,141,255,0.1); border: 1px solid rgba(183,141,255,0.35);
  font-size: 13px; font-weight: 700; color: var(--accent-purple); cursor: default;
}

/* ===== DETAIL TABS ===== */
.detail-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.detail-tab {
  padding: 9px 16px; background: transparent; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--fg-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.detail-tab:hover { color: var(--fg); }
.detail-tab.active { color: var(--accent-text); border-bottom-color: var(--accent-text); font-weight: 600; }
.detail-search { margin-left: auto; display: flex; align-items: center; gap: 8px; padding-bottom: 4px; }
.detail-search input {
  width: 200px; padding: 7px 11px; font-family: inherit; font-size: 13px;
  background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: 8px; color: var(--fg);
}
.detail-search input::placeholder { color: var(--fg-dim); }
.detail-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); width: 240px; }
.detail-search-count { font-family: var(--mono); font-size: 12px; color: var(--fg-dim); white-space: nowrap; }
.clip-sort {
  padding: 7px 10px; font-family: inherit; font-size: 13px;
  background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: 8px; color: var(--fg);
  cursor: pointer;
}
.clip-sort:focus { outline: none; border-color: var(--accent); }
.seg-match { cursor: default; }
.seg-text mark { background: var(--accent-dim); color: var(--fg); border-radius: 2px; padding: 0 1px; }

/* ===== TRANSCRIPT ===== */
.transcript-legend {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 13px; color: var(--fg-dim); margin: 0 0 14px;
}
.legend-chip { padding: 2px 8px; border-radius: 5px; font-weight: 600; font-size: 12px; }
.transcript-list { display: flex; flex-direction: column; }
.seg-row {
  display: flex; gap: 16px; padding: 10px 12px; border-radius: 8px;
}
.seg-row:hover { background: var(--surface); }
.seg-gutter {
  width: 86px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px;
  font-family: var(--mono); font-size: 12px; color: var(--fg-dim); padding-top: 2px;
}
.seg-speaker { color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg-body { flex: 1; min-width: 0; }
.seg-text .emph-loud, .legend-chip.emph-loud {
  color: var(--accent-text); background: var(--accent-dim); border-radius: 4px; padding: 0 3px; font-weight: 600;
}
.seg-text .emph-slow, .legend-chip.emph-slow {
  color: var(--accent-purple); background: rgba(183,141,255,0.1); border-radius: 4px; padding: 0 3px; font-weight: 600;
}
.seg-badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.seg-badge {
  font-size: 12px; font-family: var(--mono); font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--fg-muted);
}
.seg-badge.take { color: var(--accent-blue); border-color: rgba(142,165,255,0.3); background: rgba(142,165,255,0.07); }
.seg-badge.take.best { color: var(--accent-text); border-color: var(--border-accent); background: var(--accent-dim); }
.seg-badge.warn { color: var(--warning); border-color: rgba(255,139,139,0.3); }
.transcript-more { display: flex; justify-content: center; padding: 16px 0 4px; }

/* ===== TICS CARD ===== */
.tics-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 16px;
}
.tic-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 5px 0; }
.tic-speaker { font-size: 13px; font-weight: 700; margin-right: 6px; }
.tic-rate { font-size: 12px; font-family: var(--mono); color: var(--warning); margin-right: 6px; }
.tic-chip {
  font-size: 12px; font-family: var(--mono);
  padding: 2px 8px; border-radius: 999px;
  background: rgba(255,139,139,0.06); border: 1px solid rgba(255,139,139,0.2); color: var(--fg-muted);
}
.tic-chip.phrase { background: rgba(183,141,255,0.06); border-color: rgba(183,141,255,0.25); }

/* ===== INPUT MODAL ===== */
.chapter-edit-list { display: grid; gap: 8px; max-height: 58vh; overflow-y: auto; }
.chapter-edit-row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 120px 120px;
  gap: 10px; align-items: end; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.chapter-edit-number {
  width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  background: var(--accent-dim); color: var(--accent-text); font: 800 12px var(--mono);
}
.chapter-edit-row label { display: grid; gap: 4px; color: var(--fg-muted); font-size: 12px; font-weight: 700; }
.chapter-edit-row input {
  width: 100%; padding: 8px 9px; background: rgba(0,0,0,0.3);
  border: 1px solid var(--border); border-radius: 7px; color: var(--fg);
  font: 13px var(--mono);
}
.chapter-edit-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
@media (max-width: 700px) {
  .chapter-edit-row { grid-template-columns: 28px 1fr 1fr; }
  .chapter-edit-row label:first-of-type { grid-column: 2 / -1; }
}
.rerun-choice { display: grid; gap: 5px; margin-top: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.rerun-choice-primary { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.rerun-choice strong { color: var(--fg); }
.rerun-choice span { color: var(--fg-muted); font-size: 12px; line-height: 1.45; }
.rerun-actions { flex-wrap: wrap; }
.input-modal-error { color: var(--warning); font-size: 12px; margin-top: 8px; }

/* ===== PROJECT EXPORT ===== */
.project-export-options { display: grid; gap: 7px; margin: 12px 0; }
.project-export-option {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 11px;
  border: 1px solid var(--border); border-radius: 9px;
  background: rgba(255,255,255,0.018); cursor: pointer;
}
.project-export-option:hover { border-color: var(--border-strong); }
.project-export-option input { margin-top: 2px; accent-color: var(--accent); }
.project-export-option span { font-size: 12px; font-weight: 650; }
.project-export-option small {
  display: block; margin-top: 2px; color: var(--fg-muted); font-weight: 500;
}
.project-export-option:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.project-export-option:has(input:disabled):hover { border-color: var(--border); }
.project-export-zip { margin: 10px 0; }

/* ===== INTERRUPTED BANNER ===== */
.interrupted-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: var(--accent-dim); border: 1px solid var(--border-accent);
  border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; flex-wrap: wrap;
}
.interrupted-text { font-size: 13px; flex: 1; min-width: 260px; }
.interrupted-actions { display: flex; gap: 8px; }

/* ===== MULTI-FILE PICK ===== */
.picked-files { display: flex; flex-direction: column; gap: 6px; }

/* ===== QUEUE ===== */
.queue-list { display: flex; flex-direction: column; gap: 6px; }
.queue-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 14px; font-size: 13px;
}
.queue-pos {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-dim); color: var(--accent-text);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  font-family: var(--mono); flex-shrink: 0;
}

/* ===== DETAIL PLAYER ===== */
.detail-player-wrap { margin-bottom: 18px; }
.detail-player-wrap video {
  width: 100%; max-height: 420px; background: var(--surface-strong); border-radius: 12px;
  border: 1px solid var(--border);
}
.detail-player-wrap.is-native-vertical .rail-body {
  display: flex; justify-content: center; align-items: center;
}
.detail-player-wrap.is-native-vertical video {
  width: auto; height: min(62vh, 560px); max-width: 100%; max-height: none;
  aspect-ratio: 9 / 16; object-fit: contain;
}
@media (max-width: 700px) {
  .detail-player-wrap.is-native-vertical video {
    height: min(62vh, 500px);
  }
}
.seg-time[data-seek] { cursor: pointer; }
.seg-time[data-seek]:hover { color: var(--accent-text); text-decoration: underline; }
.seg-time[data-eseek] {
  border: 0; padding: 0; background: transparent; color: inherit;
  font: inherit; cursor: pointer;
}
.seg-time[data-eseek]:hover { color: var(--accent-text); text-decoration: underline; }

/* ===== CHAPTERS ===== */
.chapters-list { display: flex; flex-direction: column; gap: 14px; }
.chapter-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; cursor: pointer; transition: border-color 0.12s;
}
.chapter-card:hover { border-color: var(--border-accent); }
.chapter-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.chapter-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 10px 0 0; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.chapter-actions .btn-inline { min-height: 28px; }
.chapter-num {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; align-self: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-press)); color: var(--accent-on);
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
}
.chapter-label { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; flex: 1; }
.chapter-time { font-family: var(--mono); font-size: 12px; color: var(--fg-muted); }
.chapter-video-wrap { margin-top: 12px; }
.chapter-video-wrap video {
  width: 100%; max-height: 380px; background: var(--surface-strong); display: block;
  border-radius: 10px; border: 1px solid var(--border);
}
.chapter-video-bar {
  display: flex; align-items: center; gap: 10px; margin-top: 7px; flex-wrap: wrap;
}
.chapter-video-badge {
  font-size: 12px; font-family: var(--mono); color: var(--success);
  background: rgba(108,232,184,0.1); border: 1px solid rgba(108,232,184,0.28);
  border-radius: 999px; padding: 2px 10px;
}
.chapter-video-badge.is-raw {
  color: var(--fg-muted); background: var(--surface); border-color: var(--border-strong);
}
.chapter-teeup {
  margin-top: 10px; font-size: 13px; font-style: italic; color: var(--fg-muted);
  line-height: 1.6; border-left: 2px solid var(--border-accent); padding-left: 12px;
}
.chapter-teeup-meta { font-style: normal; font-size: 12px; color: var(--fg-dim); font-family: var(--mono); }
.chapter-beats { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.chapter-beat {
  display: flex; gap: 10px; align-items: baseline; cursor: pointer;
  font-size: 13px; color: var(--fg); padding: 4px 8px; border-radius: 6px;
}
.chapter-beat:hover { background: rgba(183,141,255,0.07); }
.beat-tag {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent-purple); background: rgba(183,141,255,0.12);
  border: 1px solid rgba(183,141,255,0.3); border-radius: 4px; padding: 1px 5px; flex-shrink: 0;
}
.beat-time { font-family: var(--mono); font-size: 12px; color: var(--fg-dim); flex-shrink: 0; }
.chapter-questions { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.chapter-q {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 13px; color: var(--fg); padding: 4px 8px; border-radius: 6px;
}
.chapter-q:hover { background: rgba(142,165,255,0.06); }
.chapter-q .q-time { font-family: var(--mono); font-size: 12px; color: var(--accent-blue); flex-shrink: 0; }

/* ===== CHAPTERS EXPLAINER ===== */
.info-btn {
  width: 18px; height: 18px; border-radius: 50%; margin-left: 6px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--fg-muted); font-size: 12px; font-weight: 700; cursor: pointer;
  display: inline-grid; place-items: center; vertical-align: 1px;
  transition: background 0.12s, color 0.12s;
}
.info-btn:hover { background: var(--accent-dim); color: var(--accent-text); border-color: var(--border-accent); }
.info-copy p { font-size: 13px; line-height: 1.7; color: var(--fg); margin: 0 0 12px; }
.info-copy strong { color: var(--accent-text); font-weight: 700; }
.section-actions { display: flex; gap: 8px; }
.text-modal-body {
  font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--fg);
  white-space: pre-wrap; word-break: break-word;
  max-height: 52vh; overflow-y: auto; margin: 0 0 6px;
  background: rgba(0,0,0,0.3); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
}

/* ===== SETTINGS EXTRAS ===== */
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.shortcut-grid { display: grid; gap: 8px; margin: 18px 0; }
.shortcut-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px; align-items: center; gap: 18px; }
.shortcut-row label { color: var(--fg); font-size: 13px; }
.shortcut-row select { width: 100%; }
.shortcut-fixed { border-top: 1px solid var(--border); padding-top: 14px; color: var(--fg-muted); font-size: 12px; line-height: 1.7; }
.shortcut-fixed > span { display: block; color: var(--fg); font-size: 12px; font-weight: 700; margin-bottom: 3px; }
.shortcut-fixed kbd { border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; color: var(--fg); background: var(--surface-strong); font-family: inherit; }
.shortcut-error { color: var(--warning); margin-top: 12px; }
.modal-spacer { flex: 1; }
.set-field select {
  width: 100%; padding: 9px 12px;
  background: rgba(0,0,0,0.35); border: 1px solid var(--border);
  color: var(--fg); border-radius: 8px; font-family: inherit; font-size: 14px;
}
.set-field select:focus { outline: none; border-color: var(--accent); }
.set-hint { font-size: 13px; color: var(--fg-dim); margin-top: 4px; }
.connection-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--surface); margin-bottom: 14px; }
.connection-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.connection-platform-list { display: grid; gap: 6px; margin: -6px 0 14px; }
.connection-platform-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.connection-platform-row span:first-child { display: grid; gap: 2px; }
.connection-platform-row small { color: var(--fg-dim); font-size: 13px; }
.connection-platform-row .connection-platform-detail { max-width: 520px; line-height: 1.35; color: var(--fg-dim); font-size: 12px; }
.connection-platform-badge { color: var(--fg-dim); font-size: 12px; white-space: nowrap; }
.connection-platform-actions { display: flex; align-items: center; gap: 8px; }

/* ===== CLIPS INSIDE CHAPTERS ===== */
.chapter-head { cursor: pointer; }
.chapter-teeup { cursor: pointer; }
.chapter-clips {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px; margin-top: 12px;
}
.chapter-clip {
  background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden;
}
.chapter-clip video { width: 100%; aspect-ratio: 16/9; object-fit: contain; background: var(--surface-strong); display: block; }
.chapter-clip-title { font-size: 12px; font-weight: 600; padding: 8px 10px 2px; }
.chapter-clip-meta { font-size: 12px; font-family: var(--mono); color: var(--fg-muted); padding: 0 10px 9px; }
.chapter-noclips {
  margin-top: 10px; font-size: 13px; color: var(--fg-dim); font-style: italic;
}

/* ===== CLIP EDITOR (Phase 1) ===== */
.editor-banner {
  display: none;
}
.hosted-word-editor {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
/* Optional tools stay in the wireframe's shared right-side workspace. */
#rail-adjustments-body .hosted-word-editor {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
#rail-adjustments-body { display: block; }
#rail-adjustments-body[hidden] { display: none; }
.editor-disclosure {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}
.editor-disclosure > summary {
  color: var(--fg-muted);
  cursor: pointer;
  font-size: 14px;
  padding: var(--s-2) 0;
}
.editor-disclosure > summary:focus-visible { outline: var(--focus-ring); border-radius: var(--r-sm); }
#rail-adjustments-body .row { flex-wrap: wrap; gap: var(--s-2); }
#rail-adjustments-body .set-grid { grid-template-columns: minmax(0, 1fr); }
#rail-adjustments-body fieldset { min-width: 0; margin: var(--s-3) 0; padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); }
#rail-adjustments-body .bs-input { max-width: 100%; }
#rail-adjustments-body audio { width: 100%; margin: var(--s-3) 0; }
.precise-review-state { color: var(--accent-text); }
.editor-receipts {
  display: inline-flex; align-items: center; max-width: 11.5rem;
  margin: 0; padding: 5px 9px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface-hover);
  color: var(--fg); font-size: 12px; font-weight: 650; line-height: 1.2;
  white-space: nowrap; cursor: pointer;
}
.editor-receipts.is-unverified {
  color: var(--warning); border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
}
.editor-receipts[hidden] { display: none; }
.editor-save-status { min-width: 56px; color: var(--fg-muted); font-size: 12px; text-align: right; }
.editor-save-status.is-saving { color: var(--accent-text); }
.editor-save-status.is-saved { color: var(--success); }
.editor-save-status.is-unsaved { color: var(--warning); }
.editor-save-status.is-error { color: var(--warning); }
.btn-quiet {
  background: transparent; border-color: transparent; color: var(--fg-muted);
  font-size: 12px; padding: 6px 8px;
}
.btn-quiet:hover { background: var(--surface); border-color: var(--border); color: var(--fg); }
.action-split { width: 1px; height: 18px; background: var(--border); margin: 0 2px; align-self: center; }
/* ===== NLE LAYOUT (Will, 2026-07-23): the editor fills the window like a real
   NLE. Player center-left, transcript beside it, tool rail locked right (its
   own scroll), timeline docked at the bottom spanning panel to panel. Nothing
   here page-scrolls; each column scrolls internally. ===== */
#screen-editor:not([hidden]) {
  display: flex; flex-direction: column;
  height: calc(100vh - 104px); min-height: 480px;
  position: relative;
}
.editor-route-loading {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(2px);
}
.editor-route-loading-card {
  display: grid; gap: 5px; width: min(360px, calc(100% - 48px));
  padding: 22px 24px; border: 1px solid var(--border-strong);
  border-radius: 14px; background: var(--surface-strong);
  box-shadow: 0 18px 50px rgba(0,0,0,.22); text-align: center;
}
.editor-route-loading-card strong { color: var(--fg-strong); font-size: 16px; }
.editor-route-loading-card span { color: var(--fg-muted); font-size: 13px; line-height: 1.45; }
.editor-main { grid-column: 1; grid-row: 1; height: var(--editor-row); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#editor-player { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; display: block; cursor: pointer; }
.editor-seam-player {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  max-width: 100%; max-height: 100%; margin: auto; object-fit: contain;
  border-radius: var(--r-md); background: var(--stage-bg);
  opacity: 0; pointer-events: none;
}
.editor-seam-player.is-seam-running {
  /* WebKit throttles rVFC delivery for near-transparent video layers. Keep
     hard-muted future decoders fully composited underneath the active deck;
     the active element's opaque stage background covers them completely. */
  opacity: 1; z-index: 0;
}
.editor-seam-player.is-active { opacity: 1; z-index: 1; }
.editor-seam-audio-master,
.editor-source-audio { display: none; }
#editor-player.is-seam-inactive { opacity: 0; }
#editor-player.is-seam-inactive.is-seam-running { opacity: 1; z-index: 0; }
.seam-freeze-frame {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none; background: var(--bg);
}
.seam-preview-status {
  /* Keep the live status node for assistive text and tooltips. Never cover
     the viewfinder with ready/error monitor copy. */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.seam-preview-status.is-ready,
.seam-preview-status.is-basic,
.seam-preview-status.is-error { color: inherit; }
.editor-script {
  grid-column: 2; grid-row: 1; height: 0; min-height: 100%; max-height: none;
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  overflow: hidden;
}
.script-head {
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; color: var(--fg-muted);
  display: flex; gap: 8px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.script-hint { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--fg-dim); }
.transcript-mark-legend {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-left: auto; text-transform: none; letter-spacing: 0;
}
.legend-chip.outside-chip {
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  color: var(--fg-dim);
}
.legend-chip.audio-chip {
  background: rgba(142,165,255,0.12); border: 1px solid rgba(142,165,255,0.35);
  color: #c8d2ff;
}
.editor-script .editor-transcript { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px; scrollbar-width: thin; }
.editor-script .seg-text { font-size: 16px; line-height: 1.76; }
.editor-script .seg-gutter { font-size: 12px; }
.editor-workspace { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px; scrollbar-width: thin; }
.editor-workspace > .rail-body { min-height: 100%; padding: 0; }
/* Scroll the complete review, not a list squeezed between fixed controls.
   Compact editor rows can be shorter than the counts, filters and actions;
   a height:100% flex body then collapses its list to zero and clips buttons. */
.editor-workspace.is-filler-workspace { overflow-y: auto; }
.editor-workspace.is-filler-workspace > .rail-body { height: auto; min-height: 100%; overflow: visible; }
.editor-workspace.is-filler-workspace > .rail-body > .filler-review-list { flex: 0 0 auto; overflow: visible; }
.workspace-empty { display: grid; place-items: center; min-height: 220px; color: var(--fg-dim); font-size: 13px; }
.workspace-close { margin-left: auto; border: 0; background: transparent; color: var(--fg-dim); font: 700 12px var(--ui-font); cursor: pointer; }
.workspace-close:hover { color: var(--fg); }
.editor-script.is-workspace .script-hint,
.editor-script.is-workspace .transcript-mark-legend { display: none; }
.editor-script.is-workspace .editor-workspace { display: block; }
.editor-script.is-workspace .editor-transcript { display: none; }
.editor-side > .rail-sec.is-focused .rail-title { color: var(--fg-strong); }
.editor-side {
  grid-column: 3; grid-row: 1 / 3; min-height: 0;
  display: flex; flex-direction: column; gap: 0;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
}
/* Inside the full-height panel the sections sit flat, split by hairlines. */
.editor-side > .rail-sec { border: 0; border-radius: 0; background: transparent; border-bottom: 1px solid var(--border); }
.editor-side > .rail-sec:last-child { border-bottom: 0; }
/* Editor readability pass: the rail carries approval and subjective review
   decisions, so its labels must not fall back to the tiny metadata scale used
   by project cards. Keep the compact NLE geometry, but give the eye/ear gate
   a comfortable reading size. */
.editor-side > .rail-sec .rail-head { font-size: 14px; }
.editor-side .rail-note,
.editor-side .filler-explainer,
.editor-side .filler-review-status { font-size: 13px; }
.editor-side .publish-copy-source,
.editor-side .filler-state { font-size: 12px; }
.editor-side .publish-copy-head { font-size: 12px; }
.editor-side .publish-copy-btn { font-size: 12px; }
.editor-side .publish-copy-value { font-size: 12px; }
.editor-side .filler-count span { font-size: 13px; }
.editor-side .filler-filter,
.editor-side .filler-review-kind,
.editor-side .filler-review-source,
.editor-side .silence-review-evidence,
.editor-side .filler-toggle { font-size: 13px; }
.editor-side .filler-review-text { font-size: 14px; }
.editor-side .filler-review-reason { font-size: 13px; }
.editor-side .cap-studio-title,
.editor-side .cap-toggle,
.editor-side .cap-gallery-label,
.editor-side .cap-customize,
.editor-side .cap-ctl,
.editor-side .cap-seg-label,
.editor-side .cap-subhead,
.editor-side .cap-timing-label { font-size: 12px; }
.editor-side .cap-preset .cap-chip-name { font-size: 12px; }
.editor-side .cap-edit-hint,
.editor-side .cap-note { font-size: 12px; }

/* Dark thin scrollbars everywhere (the OS default white bar reads broken on this UI). */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }
::-webkit-scrollbar-track { background: transparent; }
:root[data-theme="light"], :root[data-theme="system"] {
  scrollbar-color: rgba(71, 85, 105, 0.36) transparent;
  scrollbar-width: thin;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] ::-webkit-scrollbar-thumb,
  :root[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(71, 85, 105, 0.34); }
  :root[data-theme="system"] ::-webkit-scrollbar-thumb:hover,
  :root[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(71, 85, 105, 0.52); }
}
/* The three-column NLE needs enough room for the full transport and enough
   height for both the monitor and docked timeline. Below either threshold,
   use the existing scrollable editor layout instead of letting the monitor
   collapse or the transport spill underneath the transcript. Wide windows
   keep the desktop NLE exactly as shipped. */
@media (max-width: 1240px), (max-height: 820px) {
  #screen-editor:not([hidden]) { display: block; height: auto; }
  #editor-player { height: auto; max-height: 48vh; }
  .editor-seam-player { height: 100%; max-height: 48vh; }
  .player-wrap { flex: none; }
}

/* Viewfinder transport: the player is clip-scoped (clip-relative clock),
   driven from here, never by clicking the video like a stock player. */
.transport { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 2px 0; }
.tp-btn:hover { border-color: var(--accent); color: var(--accent-text); }
.tp-btn svg { width: 14px; height: 14px; }
.tp-btn svg path { fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.tp-btn svg text { fill: currentColor; stroke: none; font: 700 11px -apple-system, BlinkMacSystemFont, sans-serif; }
#tp-play svg path { fill: currentColor; stroke: none; }
.tp-time { font-size: 13px; color: var(--fg-muted); flex-shrink: 0; min-width: 96px; text-align: center; }
.tp-spacer { flex: 1; }
.render-playback-status {
  color: var(--fg-muted); font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
}
.vm-toggle {
  display: inline-flex; gap: 2px; background: rgba(0,0,0,0.35);
  border: 1px solid var(--border); border-radius: 8px; padding: 2px; flex-shrink: 0;
}
.vm-btn {
  font-size: 12px; font-weight: 700; padding: 5px 11px; border: 0; border-radius: 6px;
  cursor: pointer; background: transparent; color: var(--fg-muted);
}
.vm-btn.active { background: var(--accent); color: var(--accent-on); }
.brand-preview-control { margin-left: 4px; font-size: 13px; white-space: nowrap; }
.tp-guide.active { border-color: var(--accent); color: var(--accent-text); }
/* Draggable 9:16 crop guide over the viewfinder */
.vguide {
  position: absolute; z-index: 4; cursor: grab; touch-action: none;
  border: 2px dashed var(--accent); border-radius: 6px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
}
.vguide:active { cursor: grabbing; }
.vguide.is-both { cursor: default; border-style: solid; border-color: var(--accent-blue); }
.vguide.is-both .vguide-auto { display: none; }
.vertical-policy { display: inline-flex; align-items: center; gap: 5px; color: var(--fg-muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.vertical-policy span { text-transform: uppercase; letter-spacing: .06em; }
.vertical-policy select { max-width: 185px; min-height: 28px; }
.vguide-tag {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; font-family: var(--mono);
  color: var(--accent-on); background: var(--accent); border-radius: 5px; padding: 1px 7px;
  pointer-events: none;
}
.vguide-auto {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,0.35); border-radius: 6px;
  padding: 4px 8px; white-space: nowrap; cursor: pointer;
  color: #fff; background: rgba(10,12,18,0.78); font-size: 11px; font-weight: 700;
}
.vguide-auto:hover { border-color: var(--accent); color: var(--accent-text); }

/* Rail accordion sections (right panel + detail source video) */
.rail-head {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px;
  cursor: pointer; user-select: none;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; color: var(--fg-muted);
}
.rail-head:hover { color: var(--fg); }
.rail-title { flex: 1; text-align: left; }
.rail-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.transition-preview-frame { position: relative; min-height: 150px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--stage-bg); }
.transition-preview-frame video { width: 100%; max-height: 240px; object-fit: contain; display: block; cursor: pointer; }
.transition-preview-empty { padding: 18px; color: var(--fg-dim); font-size: 12px; text-align: center; }
.transition-preview-play { position: absolute; bottom: 8px; left: 8px; z-index: 1; min-height: 28px; padding: 5px 9px; border: 1px solid var(--border-strong); border-radius: 6px; color: var(--fg); background: rgba(12,8,15,.82); font: 11px var(--mono); }
.transition-timeline { display: grid; gap: 4px; padding: 8px 0; }
.transition-ruler { display: flex; justify-content: space-between; color: var(--fg-dim); font: 10px var(--mono); letter-spacing: .08em; }
.transition-ruler-bottom { color: var(--accent-text); }
.transition-track { height: 42px; position: relative; display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: var(--timeline-canvas-bg); }
.transition-main-block { flex: 0 0 auto; min-width: 0; display: grid; place-items: center start; padding-left: 10px; color: var(--fg-muted); background: linear-gradient(90deg, rgba(122,76,173,.22), rgba(122,76,173,.08)); font: 11px var(--mono); }
.transition-overlap-block { flex: 0 0 auto; min-width: 34px; display: grid; place-items: center; padding: 0 4px; color: var(--accent-text); background: var(--accent-dim); border-inline: 1px solid var(--accent); font: 10px var(--mono); text-align: center; }
.transition-asset-block { position: relative; flex: 0 0 auto; min-width: 48px; display: grid; place-items: center; color: var(--fg); background: var(--brand-dim); border: 1px solid var(--brand); font: 11px var(--mono); }
.transition-asset-label, .transition-overlap-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 4px; }
.transition-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.transition-actions .btn { flex: 1 1 140px; min-width: 0; }
.transition-status { min-height: 18px; margin: 0; color: var(--fg-muted); font-size: 12px; }
.transition-catalog { display: grid; gap: 10px; }
.transition-group-label { margin-top: 2px; color: var(--fg-dim); font: 10px var(--mono); letter-spacing: .10em; text-transform: uppercase; }
.transition-handle { position: absolute; top: 0; bottom: 0; width: 7px; padding: 0; border: 0; background: var(--accent); cursor: ew-resize; }
.transition-handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: -5px; right: -5px; }
.transition-browser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 14px 12px; max-width: 720px; }
.transition-card { display: grid; width: 100%; gap: 6px; min-width: 0; padding: 0; border: 0; color: var(--fg-muted); background: transparent; text-align: left; cursor: grab; appearance: none; font: inherit; }
.transition-card:active, .transition-card.is-dragging { cursor: grabbing; opacity: .72; }
.transition-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 7px; }
.transition-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--stage-bg); }
.transition-thumb canvas { display: block; width: 100%; height: 100%; }
.transition-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.transition-card-meta { color: var(--fg-dim); font: 10px var(--mono); }
.transition-card:disabled { cursor: not-allowed; opacity: .48; }
@media (max-width: 980px) {
  .transition-browser { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tl-transition-lane { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; min-height: 42px; border-bottom: 1px solid var(--border); background: var(--timeline-control-bg); }
.tl-transition-label { padding-left: 7px; color: var(--fg-muted); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.tl-transition-track { position: relative; min-height: 32px; margin: 4px 0; border: 1px solid var(--border); border-radius: 5px; background: rgba(12,8,15,.22); }
.tl-transition-track.is-drop-target { border-color: var(--accent); background: var(--accent-dim); }
.tl-transition-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; color: var(--fg-dim); font: 10px var(--mono); text-align: center; pointer-events: none; }
.tl-transition-seam { position: absolute; z-index: 0; top: 3px; bottom: 3px; width: 1px; transform: translateX(-.5px); background: var(--border-strong); pointer-events: none; }
.tl-transition-seam::after { content: ''; position: absolute; top: -2px; left: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--fg-dim); }
.tl-transition-seam.selected { width: 2px; background: var(--accent); }
.tl-transition-seam.selected::after { left: -1.5px; background: var(--accent); }
.tl-transition-boundary { position: absolute; top: 3px; bottom: 3px; width: 18px; transform: translateX(-50%); border: 1px solid var(--border-strong); border-radius: 3px; color: var(--fg-dim); background: var(--surface); cursor: copy; font: 9px var(--mono); }
.tl-transition-boundary:hover, .tl-transition-boundary.selected { border-color: var(--accent); color: var(--accent-text); background: var(--accent-dim); }
.tl-transition-item { position: absolute; z-index: 1; top: 3px; bottom: 3px; min-width: 8px; overflow: visible; padding: 0; transform: translateX(-50%); border: 0; color: var(--accent-text); background: transparent; cursor: grab; font: 10px var(--mono); white-space: nowrap; }
.tl-transition-item::before { content: ''; position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: max(32px, 100%); transform: translateX(-50%); }
.tl-transition-chip { position: absolute; inset: 0; display: grid; place-items: center; min-width: 8px; overflow: hidden; padding: 0 4px; border: 1px solid var(--accent); border-radius: 4px; background: var(--accent-dim); text-overflow: clip; }
.tl-transition-chip > span { overflow: hidden; text-overflow: ellipsis; }
.tl-transition-item.selected { z-index: 2; }
.tl-transition-item.selected .tl-transition-chip { outline: 2px solid var(--fg); outline-offset: 1px; }
.tl-transition-item:active { cursor: grabbing; }
.tl-transition-item.transition-film_burn .tl-transition-chip { background: linear-gradient(110deg, rgba(232,193,105,.42), rgba(122,76,173,.40)); }
.tl-transition-item.transition-light_leak .tl-transition-chip { background: linear-gradient(110deg, rgba(232,193,105,.46), rgba(226,118,92,.36)); }
.tl-transition-item.transition-prism_sweep .tl-transition-chip { background: linear-gradient(110deg, rgba(255,105,180,.42), rgba(126,92,255,.42), rgba(255,188,92,.38)); }
.tl-transition-item.transition-gate_burn .tl-transition-chip { background: linear-gradient(110deg, rgba(255,90,35,.42), rgba(255,218,112,.54), rgba(91,30,21,.36)); }
.tl-transition-item.transition-edge_burn .tl-transition-chip { background: linear-gradient(110deg, rgba(112,19,19,.38), rgba(242,78,36,.48), rgba(255,184,72,.44)); }
.tl-transition-item.transition-amber_roll .tl-transition-chip { background: linear-gradient(110deg, rgba(74,18,7,.42), rgba(228,92,20,.46), rgba(255,213,110,.52)); }
.tl-transition-item.transition-soft_fade .tl-transition-chip { background: linear-gradient(110deg, rgba(247,243,250,.22), rgba(156,147,172,.24)); }
.tl-transition-item.transition-dissolve .tl-transition-chip { background: linear-gradient(110deg, rgba(192,169,220,.40), rgba(122,76,173,.34)); }
.tl-transition-item.transition-cross_dissolve .tl-transition-chip { background: linear-gradient(110deg, rgba(142,165,255,.34), rgba(192,169,220,.36)); }
.transition-kind { position: absolute; right: 6px; bottom: 6px; padding: 2px 5px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: #fff; background: rgba(8,6,14,.62); font: 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.transition-handle-start { left: 0; }
.transition-handle-end { right: 0; }
.transition-control-grid { display: grid; gap: 8px; }
.rail-body .cap-studio { border: 0; background: transparent; padding: 0; margin-top: 0; }
.chev { display: inline-block; transition: transform 0.16s ease; font-size: 12px; }
.rail-sec.open > .rail-head .chev { transform: rotate(90deg); }
.vol-chev { display: inline-block; transition: transform 0.16s ease; }
.vol-chev.open { transform: rotate(90deg); }
#cap-cust-chev { display: inline-block; transition: transform 0.16s ease; }
#cap-cust-chev.open { transform: rotate(90deg); }
.rail-sec.is-soon .rail-title { color: var(--fg-dim); }
.soon-pill {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--fg-dim);
}
.rail-soon { margin: 0; font-size: 13px; color: var(--fg-dim); line-height: 1.55; }
/* Inline emoji markers in the clip transcript (Caption studio Emoji mode on). */
.w-emoji { font-size: 0.95em; margin-left: 2px; opacity: 0.9; }
.editor-transcript.emoji-off .w-emoji { display: none; }
/* Free-floating draggable emoji on the viewfinder (Opus-style overlay). */
.emo-float {
  position: absolute; transform: translate(-50%, -50%);
  cursor: grab; pointer-events: auto; user-select: none; line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
  touch-action: none; z-index: 3;
}
.emo-float:active { cursor: grabbing; }
.emo-float:hover { outline: 1px dashed rgba(255,255,255,0.4); outline-offset: 4px; border-radius: 10px; }
.type-overlay-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.type-preview-item {
  position: absolute; transform: translate(-50%, -50%); max-width: 88%;
  padding: .14em .32em; color: #fff; line-height: 1.06; white-space: pre-wrap;
  overflow-wrap: anywhere; text-shadow: 0 2px 6px rgba(0,0,0,.5); pointer-events: auto;
  cursor: grab; touch-action: none; border: 1px dashed transparent;
}
.type-preview-item.is-selected { border-color: rgba(255,255,255,.65); }
.type-preview-item:active { cursor: grabbing; }
.type-track { display: grid; grid-template-columns: 44px 1fr; align-items: stretch; min-height: 30px; border: 1px solid var(--border); border-top: 0; background: rgba(0,0,0,.22); }
.type-track-label { display: grid; place-items: center; border-right: 1px solid var(--border); color: var(--fg-dim); font: 700 11px var(--mono); text-transform: uppercase; }
.type-track-items { position: relative; min-width: 0; overflow: hidden; }
.type-track-item { position: absolute; top: 5px; bottom: 5px; min-width: 3px; border: 1px solid var(--border-accent); border-radius: 5px; background: var(--accent-dim); color: var(--accent-text); font: 700 11px var(--ui-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 6px; cursor: pointer; }
.type-track-item.active { background: var(--accent); color: var(--accent-on); }
.type-ready { margin-left: auto; color: var(--fg-dim); font-size: 11px; letter-spacing: 0; text-transform: none; }
.type-explainer, .type-status { margin: 0; color: var(--fg-dim); font-size: 12px; line-height: 1.45; }
.type-status { min-height: 14px; color: var(--success); }
.type-list { display: grid; gap: 5px; max-height: 120px; overflow-y: auto; }
.type-list-item { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; background: rgba(0,0,0,.14); color: var(--fg-muted); font: 650 12px var(--ui-font); cursor: pointer; text-align: left; }
.type-list-item.active { border-color: var(--accent); color: var(--fg); }
.type-list-item span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.type-list-item time { color: var(--fg-dim); font-family: var(--mono); }
.type-controls { display: grid; gap: 8px; padding: 9px; border: 1px solid var(--border); border-radius: 9px; background: rgba(0,0,0,.14); }
.type-controls textarea, .type-controls input[type="number"], .type-controls select, #type-render-source { width: 100%; border: 1px solid var(--border); border-radius: 7px; background: rgba(0,0,0,.28); color: var(--fg); padding: 7px 8px; font: 12px var(--ui-font); }
.type-time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.rail-note { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px; color: var(--fg-dim); }

/* ===== HOME: stats + recent-projects toolbar ===== */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0 26px; }
.workspace-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 6px 0 30px; }
.workspace-head { align-items: flex-start; gap: 28px; padding: 18px 2px 6px; margin: 0 0 28px; }
.workspace-head > div { min-width: 0; }
.workspace-head h2 { font-size: 28px; margin-bottom: 7px; }
.workspace-head .eyebrow { color: var(--accent-text); font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.workspace-head .screen-sub { line-height: 1.5; }
.workspace-head-actions { display: flex; align-items: center; gap: 10px; margin-top: 30px; flex: 0 0 auto; }
.workspace-head-actions .btn { white-space: nowrap; }
.workspace-audience { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-strong); }
.workspace-audience-label { padding: 0 var(--s-2); color: var(--fg-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.workspace-audience-btn { border: 0; border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); background: transparent; color: var(--fg-muted); cursor: pointer; font: 700 11px var(--ui-font); }
.workspace-audience-btn:hover { color: var(--fg); }
.workspace-audience-btn.active { background: var(--accent); color: var(--accent-on); }
.workspace-audience-note { color: var(--fg-dim); font-size: 11px; white-space: nowrap; }
#screen-workspace[data-audience="client"] .workspace-operator-only { display: none; }
.workspace-section-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 24px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-strong);
}
.workspace-section-tab {
  min-width: 132px;
  border: 0;
  border-radius: var(--r-sm);
  padding: 10px 18px;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  font: 750 13px var(--ui-font);
}
.workspace-section-tab:hover { color: var(--fg); }
.workspace-section-tab.active { background: var(--accent); color: var(--accent-on); }
.workspace-section-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.workspace-projects-head { margin-top: 22px; }
.workspace-toolbar { margin-bottom: 22px; }
.workspace-naming-card {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 2fr);
  gap: 14px 20px;
  align-items: center;
  margin: -12px 0 22px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.workspace-naming-help { margin: 4px 0 0; color: var(--fg-muted); font-size: 13px; line-height: 1.45; }
.workspace-naming-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 8px; align-items: center; }
.workspace-naming-fields .btn { white-space: nowrap; }
.workspace-naming-status { grid-column: 2; min-height: 18px; color: var(--fg-muted); font-size: 13px; }
.brand-naming-card { margin: 0 0 16px; }
.project-detection-note {
  margin: 8px 0 0;
  padding: 7px 10px;
  border: 1px solid var(--border-accent);
  border-radius: var(--r-sm);
  background: var(--accent-dim);
  color: var(--accent-text);
  font-size: 13px;
}
.intake-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.intake-controls label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--fg-muted);
  font-size: 12px;
}
.intake-controls select { min-width: 0; width: 100%; }
.intake-controls .toggle-field { justify-content: flex-end; }
.intake-controls .toggle-field input { width: 18px; height: 18px; accent-color: var(--accent); }
@media (max-width: 760px) {
  .intake-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) { .workspace-stats { grid-template-columns: repeat(2, 1fr); } }
.stat-tile {
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  padding: 14px 18px;
}
.stat-val { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--fg-muted); margin-top: 3px; }
.recent-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.recent-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.fchip-row { display: inline-flex; gap: 2px; background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.fchip {
  font-size: 12px; font-weight: 700; padding: 5px 10px; border: 0; border-radius: 6px;
  cursor: pointer; background: transparent; color: var(--fg-muted);
}
.fchip.active { background: var(--accent); color: var(--accent-on); }
.view-toggle { display: inline-flex; gap: 2px; background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.view-toggle button {
  font-size: 12px; padding: 3px 9px; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--fg-muted);
}
.view-toggle button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.project-badge.is-arch { background: rgba(255,139,139,0.2); }
.projects-grid.as-list { display: flex; flex-direction: column; gap: 8px; }
.projects-grid.as-list .project-card { display: flex; align-items: center; gap: 14px; }
.projects-grid.as-list .project-thumb { width: 168px; flex-shrink: 0; aspect-ratio: 16 / 9; }
.projects-grid.as-list .project-meta { padding: 8px 12px 8px 0; }
.projects-grid.as-list .project-card { min-height: 0; }
.projects-grid.as-list .project-title { min-height: 0; }
.projects-grid.as-list .project-card-topline { order: 2; }
.projects-grid.as-list .project-title { order: 1; }
.projects-grid.as-list .project-sub { order: 3; padding-top: 3px; }
#recent-grid .project-select { display: none; }
.project-selection-actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--fg-muted); font-size: 12px; }
.project-selection-actions .btn { min-height: 34px; }

/* ===== CONTENT CALENDAR ===== */
.cal-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cal-title { font-size: 16px; font-weight: 700; min-width: 160px; text-align: center; }
.cal-hint { font-size: 13px; color: var(--fg-dim); margin-left: auto; }
.cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 4px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--fg-dim);
}
.cal-dow span { padding: 0 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-day:hover { border-color: var(--border-strong); }
.cal-day.is-out { opacity: 0.4; }
.cal-day.is-today { border-color: var(--accent); }
.cal-num { font-size: 12px; font-weight: 700; color: var(--fg-muted); font-family: var(--mono); }
.cal-day-add { border: 0; background: transparent; padding: 0; cursor: pointer; align-self: flex-start; }
.cal-day-add:hover { color: var(--accent-text); }
.cal-day.is-today .cal-num { color: var(--accent-text); }
.cal-entry {
  display: flex; align-items: center; gap: 5px; width: 100%; text-align: left;
  border: 1px solid var(--border); border-radius: 6px; background: var(--accent-dim);
  padding: 3px 6px; cursor: pointer; color: var(--fg); font-size: 12px;
}
.cal-entry:hover { border-color: var(--accent); }
.cal-entry.is-approved { background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.cal-entry.is-published { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.cal-entry.is-blocked { background: color-mix(in srgb, var(--warning) 11%, var(--surface)); }
.cal-entry-state { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-dim); flex-shrink: 0; }
.cal-entry.is-approved .cal-entry-state { background: var(--success); }
.cal-entry.is-published .cal-entry-state { background: var(--accent); }
.cal-entry.is-blocked .cal-entry-state { background: var(--warning); }
.cal-plat { font-size: 11px; font-weight: 700; color: var(--accent-text); flex-shrink: 0; }
.cal-entry-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-time { font-size: 11px; color: var(--fg-muted); flex-shrink: 0; }
.cal-form { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 4px; }
.cal-form select, .cal-form input { flex: 1; min-width: 0; }
.cal-form select {
  background: var(--surface); color: var(--fg); border: 1px solid var(--border);
  border-radius: 7px; padding: 5px 7px; font-size: 12px; text-transform: none;
}

/* ===== CLIP LIFECYCLE (Phase C) ===== */
.clip-status-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.clip-status-row #btn-create-clip { margin-left: auto; }
.clip-status-filter-heading { display: none; }
.clip-status-scroll-hint { color: var(--fg-dim); font-size: 12px; }
.clip-status-scroll-hint[hidden] { display: none; }
.clip-format-row { display: flex; align-items: center; gap: 10px; margin: -4px 0 14px; flex-wrap: wrap; }
.clip-format-label { color: var(--fg-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.clip-format-help { color: var(--fg-dim); font-size: 12px; }
.clip-lifecycle {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 10px; border-top: 1px solid var(--border);
}
.clip-status {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--surface); color: var(--fg-muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 8px; cursor: pointer;
}
.clip-status.is-approved { color: var(--success); border-color: rgba(108,232,184,0.4); }
.clip-status.is-rejected { color: var(--warning); border-color: rgba(255,139,139,0.4); }
.clip-status.is-published { color: var(--accent-text); border-color: var(--border-accent); }
.clip-status.is-archived { opacity: 0.6; }
.clip-card.is-rejected .clip-thumb-wrap { outline: 1px solid var(--warning); outline-offset: -1px; }
.clip-card.is-archived .clip-thumb-wrap { outline: 1px dashed var(--border-strong); outline-offset: -1px; }
.btn-sm { font-size: 12px; padding: 4px 9px; }
.clip-lifecycle .btn-sm { margin-left: auto; }
.clip-sched { font-size: 12px; }
.clip-score.s-manual { background: rgba(142,165,255,0.85); color: var(--accent-on); }

/* Source-position map: where the clip sits in the episode */
.clip-posmap {
  position: relative; height: 4px; margin: 0 12px;
  background: rgba(255,255,255,0.08); border-radius: 2px;
}
.clip-posmark {
  position: absolute; top: 0; bottom: 0; min-width: 3px;
  background: var(--accent); border-radius: 2px;
}

/* ===== GLOBAL SEARCH (topbar) ===== */
.gs-wrap { position: relative; flex: 1 1 280px; min-width: 180px; max-width: 420px; margin: 0 12px; }
.mobile-search-toggle, .gs-mobile-close { display: none; }
.gs-input {
  width: 100%; background: rgba(0,0,0,0.35); border: 1px solid var(--border);
  border-radius: 9px; padding: 7px 12px; font-size: 13px; color: var(--fg);
}
.gs-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.gs-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--surface-strong); border: 1px solid var(--border-strong, rgba(255,255,255,0.14));
  border-radius: 12px; padding: 8px; max-height: 60vh; overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55); scrollbar-width: thin;
}
.gs-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--fg-dim); padding: 7px 8px 3px; }
.gs-item {
  display: block; padding: 7px 8px; border-radius: 8px; text-decoration: none;
  color: var(--fg); font-size: 13px; line-height: 1.45;
}
.gs-item:hover, .gs-item.active { background: rgba(255,255,255,0.08); }
.gs-item.active { box-shadow: inset 2px 0 0 var(--accent); }
.gs-sub { display: block; font-size: 12px; color: var(--fg-dim); }
.gs-empty { padding: 12px; font-size: 12px; color: var(--fg-dim); }

/* ===== PROJECTS PAGE TOOLBAR ===== */
.proj-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.proj-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.workspace-picker { display: inline-flex; align-items: center; gap: 9px; margin-right: auto; padding: 8px 10px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.workspace-picker-label { color: var(--fg-muted); font-size: 12px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.workspace-picker select { min-width: 220px; min-height: 36px; font-size: 13px; }
.workspace-picker .btn { min-height: 36px; padding: 7px 11px; font-size: 12px; }
@media (max-width: 900px) { .workspace-picker { width: 100%; order: -1; } }
.proj-search { max-width: 240px; }

/* ===== PUBLISH QUEUE ===== */
.pub-queue { display: flex; flex-direction: column; gap: 8px; max-width: 860px; }
.pub-queue-item {
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--fg);
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  padding: 10px 14px; font-size: 13px;
}
.pub-queue-item:hover { border-color: var(--border-strong); }
.pub-q-date { font-size: 12px; color: var(--fg-muted); flex-shrink: 0; min-width: 118px; }
.pub-q-plat {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent-text); flex-shrink: 0; min-width: 84px;
}
.pub-q-clip { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-q-state {
  flex-shrink: 0; border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 8px; font-size: 12px; font-weight: 750; letter-spacing: 0.02em;
  white-space: nowrap;
}
.pub-q-state.is-approved { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.pub-q-state.is-published { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.pub-q-state.is-blocked { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); }
.pub-q-state.is-project { color: var(--fg-muted); }
.pub-q-note { font-size: 12px; color: var(--fg-dim); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== IDEAS (trend research) ===== */
.ideas-bar { display: flex; gap: 10px; align-items: center; max-width: 920px; }
.ideas-bar .bs-input { flex: 2; min-width: 0; }
.ideas-bar .ideas-focus { flex: 1.4; }

.highlights-bar { max-width: 980px; }
.highlights-bar .bs-input { flex: 1; min-width: 180px; }
.highlights-policy {
  max-width: 980px; margin: 14px 0 24px; padding: 12px 14px;
  border: 1px solid var(--border-accent); border-radius: 10px;
  color: var(--fg-dim); font-size: 13px; line-height: 1.5;
  background: var(--accent-dim);
}
.highlights-schedule-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; max-width: 980px; margin: 0 0 20px; }
.highlights-schedule-bar label { display: grid; gap: 5px; min-width: 190px; color: var(--fg-muted); font-size: 12px; }
.highlights-schedule-bar .bs-input { box-sizing: border-box; width: 190px; min-width: 190px; height: 38px; }
.highlights-schedule-bar > .btn { height: 38px; box-sizing: border-box; }
.highlight-schedule-status { align-self: center; color: var(--fg-dim); font-size: 12px; }
.highlights-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.highlights-campaign-note { grid-column: 1 / -1; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--fg-dim); font-size: 12px; line-height: 1.45; }
.highlights-campaign-note strong { color: var(--fg); }
.highlight-card { padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.highlight-card.is-suppressed { opacity: .62; }
.highlight-card-head, .highlight-meta, .highlight-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.highlight-lane { font-size: 12px; letter-spacing: .09em; color: var(--fg-muted); font-weight: 700; }
.highlight-score { color: var(--accent-text); font-weight: 800; }
.highlight-card h3 { margin: 12px 0 6px; font-size: 17px; line-height: 1.2; }
.highlight-card p { min-height: 42px; margin: 0 0 12px; color: var(--fg-dim); line-height: 1.45; font-size: 13px; }
.highlight-meta { justify-content: flex-start; color: var(--fg-muted); font-size: 12px; }
.highlight-reasons, .highlight-flags { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0; }
.highlight-reasons span, .highlight-flag { padding: 4px 7px; border-radius: 5px; background: var(--surface-hover); color: var(--fg-dim); font-size: 12px; }
.highlight-flag { color: #ffb5b5; background: rgba(220,70,70,.12); }
.highlight-package-preview { margin-top: 12px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-hover); }
.highlight-package-label { color: var(--fg-muted); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.highlight-package-title { margin-top: 7px; color: var(--fg); font-size: 14px; font-weight: 700; line-height: 1.3; }
.highlight-package-options { display: grid; gap: 3px; margin-top: 6px; color: var(--fg-muted); font-size: 12px; line-height: 1.3; }
.highlight-package-description { margin-top: 6px; color: var(--fg-dim); font-size: 12px; line-height: 1.4; }
.highlight-package-meta { display: flex; gap: 10px; margin-top: 8px; color: var(--fg-muted); font-size: 12px; }
.highlight-package-preview > [data-highlight-ai] { margin-top: 9px; }
.highlight-delivery-controls { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.highlight-delivery-controls .bs-input { min-width: 130px; }
.highlight-delivery-controls .btn-primary { white-space: nowrap; }
.campaign-publish-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 980px; margin: 22px 0; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.campaign-publish-card .section-title { color: var(--fg); }
.campaign-publish-card .section-hint { margin-top: 4px; color: var(--fg-muted); font-size: 12px; }

/* Content Analytics stays evidence-first: real metrics, visible confidence,
   and explicit experiment labels instead of decorative vanity charts. */
.analytics-toolbar { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin: 20px 0 12px; }
.analytics-toolbar label { display: grid; gap: 6px; color: var(--fg-muted); font-size: 12px; }
#analytics-status { flex: 1 1 340px; color: var(--fg-muted); font-size: 12px; line-height: 1.45; }
.analytics-method { max-width: 1080px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--fg-muted); font-size: 12px; line-height: 1.5; }
.analytics-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.analytics-stat { display: grid; gap: 5px; min-height: 96px; padding: 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.analytics-stat span { color: var(--fg-muted); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.analytics-stat strong { overflow: hidden; color: var(--fg-strong); font-size: 22px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.analytics-stat small { color: var(--fg-dim); font-size: 11px; }
.analytics-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 1.15fr); gap: 14px; align-items: start; }
.analytics-panel { margin: 0; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.analytics-panel .section-head { margin: 0 0 12px; }
.analytics-entry > summary { cursor: pointer; color: var(--fg-strong); font-weight: 750; }
.analytics-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.analytics-form-grid label, .analytics-metric-grid label { display: grid; gap: 5px; color: var(--fg-muted); font-size: 11px; }
.analytics-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.analytics-form-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
#analytics-save-status { color: var(--fg-muted); font-size: 12px; }
.analytics-winners { display: grid; gap: 9px; }
.analytics-winner { display: grid; gap: 4px; padding: 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-strong); }
.analytics-winner strong { color: var(--fg-strong); font-size: 13px; }
.analytics-winner span { color: var(--fg-muted); font-size: 11px; line-height: 1.4; }
.analytics-ranking { margin-top: 14px; }
.analytics-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.analytics-table th, .analytics-table td { padding: 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.analytics-table th { color: var(--fg-muted); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.analytics-table td strong { color: var(--fg-strong); }
.analytics-score { color: var(--accent-text); font-weight: 800; }
.analytics-empty { padding: 24px; border: 1px dashed var(--border); border-radius: 10px; color: var(--fg-muted); text-align: center; }
@media (max-width: 1050px) {
  .analytics-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .analytics-summary, .analytics-form-grid, .analytics-metric-grid { grid-template-columns: 1fr; }
  .analytics-table { min-width: 760px; }
  .analytics-ranking { overflow-x: auto; }
  /* Analytics is a real data-entry workflow on mobile. Keep every source,
     experiment, metric and save control comfortably reachable without
     changing the desktop dashboard's compact density. */
  #screen-analytics :is(
    #analytics-project,
    .analytics-form-grid input,
    .analytics-form-grid select,
    .analytics-metric-grid input,
    #btn-analytics-refresh,
    #btn-analytics-import,
    #btn-analytics-save
  ) { min-height: 44px; }
  #screen-analytics .analytics-entry > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}
.highlight-actions { justify-content: flex-start; margin-top: 14px; }
.ideas-note { font-size: 13px; min-height: 18px; margin: 8px 0 4px; color: var(--fg-dim); }
.ideas-note.busy { color: var(--accent-text); }
.ideas-note.err { color: var(--warning); }
.ideas-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.ideas-result {
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  padding: 18px 22px; min-height: 220px; font-size: 13px; line-height: 1.65;
}
.ideas-empty { color: var(--fg-dim); font-size: 13px; max-width: 480px; }
.ideas-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.ideas-meta span { font-size: 12px; color: var(--fg-dim); }
.ideas-body h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent-text); margin: 16px 0 6px;
}
.ideas-body li { margin: 4px 0 4px 18px; }
.idea-num { color: var(--accent-text); font-weight: 700; margin-right: 7px; }
.ideas-history {
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  padding: 12px; max-height: 70vh; overflow-y: auto; scrollbar-width: thin;
}
.ideas-hist-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--fg-muted); margin-bottom: 8px; }
.ideas-hist-item {
  display: flex; align-items: center; gap: 2px; border-radius: 8px; font-size: 13px;
}
.ideas-hist-open {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
  border: 0; border-radius: 8px; background: transparent; color: inherit;
  cursor: pointer; font: inherit; padding: 7px 8px; text-align: left;
}
.ideas-hist-open:hover { background: rgba(255,255,255,0.05); }
.ideas-hist-niche { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ideas-hist-date { font-size: 12px; color: var(--fg-dim); flex-shrink: 0; }
.ideas-hist-del {
  border: 0; background: transparent; color: var(--fg-dim); cursor: pointer;
  font-size: 11px; padding: 5px 6px; border-radius: 6px; flex-shrink: 0;
}
.ideas-hist-del:hover { color: var(--warning); }
.ideas-hist-empty { font-size: 13px; color: var(--fg-dim); }

/* ===== BRAND KITS ROW ===== */
.bs-kit-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  padding: 12px 16px; margin-bottom: 16px; max-width: 920px;
}
.bs-kit-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--fg-muted); }
.bs-kit-note { font-size: 13px; color: var(--success); }
.editor-side-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-muted); font-weight: 700;
  display: flex; align-items: center; justify-content: space-between;
}
.aspect-toggle { display: inline-flex; gap: 2px; background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: 7px; padding: 2px; }
.aspect-btn {
  font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 3px 7px;
  border: 0; border-radius: 5px; cursor: pointer; background: transparent; color: var(--fg-muted);
}
.aspect-btn.active { background: var(--accent); color: var(--accent-on); }
.editor-side video {
  width: 100%; object-fit: contain; background: var(--surface-strong); border-radius: 10px; border: 1px solid var(--border);
}
.editor-side video.is-vertical { max-height: 420px; width: auto; margin: 0 auto; display: block; aspect-ratio: 9/16; }
.editor-scores { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.delivery-signal {
  width: 100%; font-size: 11px; color: var(--fg-muted); letter-spacing: 0.03em;
  padding-top: 5px; border-top: 1px solid var(--border);
}
.delivery-signal.visual { color: var(--success); }
.editor-why { font-size: 13px; color: var(--fg-dim); line-height: 1.6; margin: 8px 0 0; }

/* Publish Copy exposes the words the engine already wrote. It is deliberately
   compact and read-only: copying never starts analysis or changes the clip. */
.publish-copy-source {
  margin-left: auto; font-size: 11px; letter-spacing: 0.04em;
  color: var(--fg-dim); text-transform: none;
}
.publish-copy-list { display: grid; gap: 10px; }
.publish-copy-item {
  border: 1px solid var(--border); border-radius: 9px;
  background: rgba(0,0,0,0.16); overflow: hidden;
}
.publish-copy-head {
  min-height: 30px; padding: 5px 6px 5px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--fg-muted); font-size: 11px; font-weight: 750;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.publish-copy-btn {
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px;
  background: rgba(255,255,255,0.035); color: var(--fg-muted);
  font: 700 12px var(--ui-font); cursor: pointer;
}
.publish-copy-btn:hover, .publish-copy-btn:focus-visible {
  border-color: var(--accent); color: var(--accent-text); outline: none;
}
.publish-copy-btn:disabled { cursor: default; opacity: 0.45; }
.publish-copy-value {
  padding: 9px 10px; color: var(--fg); font-size: 12px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; user-select: text;
}
.publish-copy-value.is-empty { color: var(--fg-dim); font-style: italic; }
.publish-copy-tags { color: var(--accent-text); }
.publish-copy-status {
  min-height: 16px; margin: 7px 1px 0; color: var(--success);
  font-size: 11px; line-height: 1.4;
}

/* Review-only dialogue cleanup. Proposed words are visible but are not in the
   edit list until the user explicitly applies them. */
.filler-state {
  margin-left: auto; font-size: 11px; letter-spacing: 0.02em;
  color: var(--fg-dim); text-transform: none;
}
.rail-info-button { margin: 0 12px 10px auto; display: block; }
.rail-info-popover { margin: 0 12px 10px; }
.filler-state.is-ready { color: var(--success); }
.filler-state.is-preview { color: var(--accent-text); }
.filler-state.is-warning { color: var(--warning); }
.filler-explainer {
  margin: 0; color: var(--fg-dim); font-size: 13px; line-height: 1.5;
}
.tool-intro { display: flex; align-items: center; gap: 7px; color: var(--fg-dim); font-size: 13px; line-height: 1.35; }
.tool-info-button { flex: 0 0 auto; width: 20px; height: 20px; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%; background: transparent; color: var(--fg-muted); font: 700 12px var(--ui-font); cursor: pointer; }
.tool-info-button:hover, .tool-info-button[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-text); background: var(--accent-dim); }
.tool-info-popover { margin: -2px 0 2px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-strong); color: var(--fg-dim); font-size: 12px; line-height: 1.45; }
.filler-counts { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; padding: 7px 0 8px; color: var(--fg-dim); font-size: 12px; }
.filler-counts > span + span::before { content: '·'; margin-right: 7px; color: var(--fg-muted); }
.silence-summary-count { color: var(--fg); font-weight: 700; }
.filler-count {
  padding: 7px 5px; border: 1px solid var(--border); border-radius: 8px;
  background: rgba(0,0,0,0.16); text-align: center;
}
.filler-count strong { display: block; color: var(--fg); font-size: 15px; }
.filler-count span { color: var(--fg-dim); font-size: 12px; line-height: 1.25; }
.filler-filter-bar { display: flex; gap: 4px; flex-wrap: wrap; margin: 7px 0 2px; }
.filler-filter {
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 8px;
  background: transparent; color: var(--fg-dim); font: 700 12px var(--ui-font);
  cursor: pointer;
}
.filler-filter:hover, .filler-filter[aria-pressed="true"] {
  border-color: var(--accent); color: var(--accent-text); background: var(--accent-dim);
}
.filler-review-list { display: grid; gap: 5px; max-height: 190px; overflow-y: auto; }
.editor-workspace .filler-review-list {
  max-height: none; min-height: 220px; flex: 1;
  grid-auto-rows: max-content; align-content: start; padding-right: 4px;
}
.editor-workspace .filler-review-item {
  min-height: 88px; height: auto; align-items: start; padding: 10px 12px;
  overflow: visible;
}
.editor-workspace .filler-review-copy { min-width: 0; }
.editor-workspace .filler-review-buttons {
  grid-column: 1 / -1; align-self: start; padding-top: 1px;
  flex-wrap: wrap; justify-content: flex-start;
}
.editor-workspace .filler-review-text { white-space: normal; overflow: visible; text-overflow: clip; }
.editor-workspace .filler-review-reason { -webkit-line-clamp: 3; }
.filler-review-item {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px;
  align-items: center; padding: 7px 8px; border: 1px solid var(--border);
  border-radius: 8px; background: rgba(0,0,0,0.13);
}
.filler-review-item.is-kept { opacity: 0.58; }
.filler-review-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.silence-review-copy { min-width: 0; }
.silence-review-topline { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.silence-review-time, .silence-review-duration { color: var(--fg-dim); font: 12px var(--mono); }
.silence-review-duration { margin-left: auto; padding: 2px 5px; border-radius: 5px; background: var(--accent-dim); color: var(--accent-text); }
.filler-review-kind {
  color: var(--fg-dim); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.05em;
}
.filler-review-source {
  display: block; margin-top: 2px; color: var(--fg-muted);
  font-size: 12px; font-style: italic;
}
.silence-review-details { margin-top: 5px; color: var(--fg-dim); font-size: 12px; line-height: 1.35; }
.silence-review-details summary { display: inline-block; color: var(--fg-muted); cursor: pointer; list-style: none; }
.silence-review-details summary::-webkit-details-marker { display: none; }
.silence-review-details summary::before { content: '⌄'; display: inline-block; margin-right: 4px; color: var(--accent-text); }
.silence-review-details[open] summary::before { transform: rotate(180deg); }
.silence-review-details > span { display: block; padding: 4px 0 0 13px; }
.silence-review-details ul { margin: 5px 0 0 27px; padding: 0; }
.silence-review-details li { margin: 2px 0; }
.pause-intent { display: inline-flex; align-items: center; border: 1px solid currentColor; border-radius: 999px; padding: 2px 7px; font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.pause-intent.likely_awkward { color: #ff9f7f; }
.pause-intent.likely_intentional { color: var(--success); }
.pause-intent.uncertain { color: var(--accent-text); }
.pause-intent-recommendation { margin: 6px 0 0; max-width: 68ch; color: var(--fg-muted); font-size: 12px; line-height: 1.4; }
.silence-keep-action.is-recommended { border-color: var(--success); color: var(--success); }
.filler-confidence { font-weight: 800; }
.filler-confidence.safe { color: var(--success); }
.filler-confidence.maybe { color: var(--accent-text); }
.filler-confidence.risky { color: #ff9f7f; }
.filler-review-text {
  display: block; color: var(--fg); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.filler-review-reason {
  display: block; margin-top: 2px; color: var(--fg-dim); font-size: 13px;
  line-height: 1.3; white-space: normal; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.filler-toggle {
  border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px;
  background: transparent; color: var(--fg-muted); font: 700 12px var(--ui-font);
  cursor: pointer; white-space: nowrap;
}
.filler-toggle:hover { border-color: var(--accent); color: var(--accent-text); }
.silence-review-buttons { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.silence-primary-action { border-color: var(--accent); color: var(--accent-text); }
.silence-keep-action { color: var(--fg-dim); }
.filler-review-buttons { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {
  .editor-workspace .filler-review-item { grid-template-columns: minmax(0, 1fr); }
  .editor-workspace .filler-review-buttons { justify-content: flex-start; }
}
.filler-review-item.is-applied { border-color: rgba(91,211,176,0.45); }
.filler-review-item.is-applied .filler-review-kind { color: var(--success); }
.cleanup-decision-note { grid-column: 1 / -1; color: var(--fg-muted); font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.cleanup-decision-note > summary { width: max-content; cursor: pointer; color: var(--accent-text); font-size: 10px; }
.cleanup-decision-note[data-save-state="saving"] > summary { color: var(--fg-muted); }
.cleanup-decision-note[data-save-state="saved"] > summary { color: var(--success); }
.cleanup-decision-note[data-save-state="error"] > summary { color: var(--danger); }
.cleanup-decision-note > label { display: grid; gap: 5px; margin-top: 7px; }
.cleanup-decision-note textarea { box-sizing: border-box; width: 100%; min-height: 54px; resize: vertical; padding: 8px 9px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--fg); font: 500 12px/1.4 var(--ui-font); }
.cleanup-decision-note textarea:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 24%, transparent); outline-offset: 1px; }
.silence-review-buttons .filler-toggle:disabled { cursor: default; opacity: 0.6; }
.filler-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.filler-actions .btn { font-size: 12px; padding: 8px 10px; }
.filler-review-status { min-height: 15px; margin: 0; color: var(--success); font-size: 13px; line-height: 1.4; }
.thumbnail-frames { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 8px 0 10px; }
.thumbnail-frame { position: relative; padding: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--surface-strong); cursor: pointer; aspect-ratio: 16 / 9; }
.thumbnail-frame img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--surface-strong); }
.thumbnail-frame[aria-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.thumbnail-frame-time { position: absolute; right: 4px; bottom: 3px; padding: 1px 3px; border-radius: 3px; background: rgba(0,0,0,.72); color: #fff; font: 11px var(--mono); }
.thumbnail-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.thumbnail-actions .btn { font-size: 11px; padding: 7px 9px; }
.thumbnail-output { display: grid; gap: 7px; margin-top: 9px; }
.thumbnail-output img { width: 100%; max-height: 240px; object-fit: contain; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-strong); }
#rail-thumbnail-studio .bs-input {
  background: var(--thumbnail-control-bg, rgba(0, 0, 0, 0.35));
  color: var(--thumbnail-control-fg, var(--fg));
  border-color: var(--border-strong);
}
#rail-thumbnail-studio .bs-input::placeholder {
  color: var(--thumbnail-control-placeholder, var(--fg-dim));
  opacity: 1;
}
#rail-thumbnail-studio .bs-input:disabled {
  opacity: 1;
  background: var(--thumbnail-control-disabled-bg, rgba(0, 0, 0, 0.35));
  color: var(--thumbnail-control-fg, var(--fg));
  -webkit-text-fill-color: var(--thumbnail-control-fg, var(--fg));
  cursor: not-allowed;
}
#rail-thumbnail-studio select.bs-input option {
  background: var(--thumbnail-control-bg, #111827);
  color: var(--thumbnail-control-fg, #eef1f7);
}
.filler-proposed, .filler-proposed * {
  color: inherit !important; background: transparent;
  text-decoration: none;
  cursor: context-menu;
}
.filler-proposed-maybe, .filler-proposed-maybe * { color: #ffcf70 !important; background: rgba(255,207,112,.13); }
.filler-proposed-risky, .filler-proposed-risky * { color: #ff9f7f !important; background: rgba(255,159,127,.13); }
.filler-kept { cursor: context-menu; border-bottom: 1px dotted var(--fg-dim); }
.filler-overlap-count {
  display: inline-block; margin-left: 3px; padding: 0 3px; border-radius: 4px;
  color: var(--fg-strong); background: var(--accent-purple); font: 800 11px/1.35 var(--mono);
  vertical-align: top; text-decoration: none;
}

/* ===== CAPTION STUDIO ===== */
.player-wrap {
  position: relative; line-height: 0; min-width: 0; max-width: 100%;
  flex: 1; min-height: 0; height: auto; max-height: none;
  display: grid; place-items: center; background: var(--stage-bg);
  /* A portrait video's intrinsic height must not grow the implicit grid
     track beyond the flex-sized viewfinder and clip its burned captions. */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  border-radius: 12px; border: 1px solid var(--border); overflow: hidden;
}
.player-wrap.is-native-vertical {
  flex: 1 1 auto; min-height: 0; width: auto; max-width: 100%;
  height: auto; max-height: 100%; aspect-ratio: 9 / 16;
  align-self: center;
}
.player-tag {
  /* Provenance stays in the transport tooltip. Do not paint monitor
     labels over the footage. */
  display: none;
}
.player-wrap.is-proposal-viewer > :not(#editor-proposal-viewer) { visibility: hidden; }
#editor-proposal-viewer { grid-area: 1 / 1; width: 100%; min-height: 0; line-height: normal; }
/* A dedicated strip BELOW the picture, independent of timeline visibility.
   Keep it in normal flow: neither its touch target nor keyboard focus ring
   may cover footage/captions. Native mouse, touch and keyboard seeking stays. */
.preview-scrub {
  position: relative; flex: 0 0 auto; width: 100%; min-width: 0;
  display: flex; align-items: center; padding: 2px 8px;
  box-sizing: border-box; background: transparent;
}
#tp-scrub {
  --preview-progress: 0%;
  appearance: none; -webkit-appearance: none;
  display: block; width: 100%; min-width: 0; height: 32px; min-height: 32px;
  margin: 0; padding: 0; border: 0; border-radius: 4px;
  background: transparent; cursor: pointer; touch-action: none;
}
#tp-scrub::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(to right, var(--accent) var(--preview-progress), var(--fg-muted) var(--preview-progress));
}
#tp-scrub::-moz-range-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(to right, var(--accent) var(--preview-progress), var(--fg-muted) var(--preview-progress));
}
#tp-scrub::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px; margin-top: -5px; border-radius: 50%;
  border: 2px solid #fff; background: var(--accent); box-shadow: 0 1px 4px #000;
}
#tp-scrub::-moz-range-thumb {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid #fff; background: var(--accent); box-shadow: 0 1px 4px #000;
}
#tp-scrub:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 0; }
#tp-scrub:disabled { opacity: .45; cursor: default; }
@media (pointer: coarse) { #tp-scrub { height: 44px; } }
.cap-overlay {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none;
  z-index: 3; overflow: hidden;
}
/* The line anchors to --cap-x/--cap-y (% of the frame) and is draggable:
   grab the caption on the player and put it where you want it. */
.cap-box {
  position: absolute; left: var(--cap-x, 50%); top: var(--cap-y, 85%);
  transform: translate(-50%, -50%);
  width: var(--cap-box-w, 88%); min-width: 30%; max-width: 88%;
  border: 1px dashed rgba(255,255,255,0.42); border-radius: 7px;
  padding: 5px 2px; box-sizing: border-box;
  pointer-events: auto; cursor: grab; touch-action: none; user-select: none;
}
.cap-box:active { cursor: grabbing; }
.cap-box[data-resize-hot="true"], .cap-box[data-resize-hot="true"]:active { cursor: nwse-resize; }
.cap-line {
  position: relative; width: 100%;
  line-height: 1.12; text-align: center; letter-spacing: 0.005em;
  font-weight: 800;
  font-size: var(--cap-size, 42px);
  font-family: var(--cap-font, "Emotion Engine DejaVu Sans"), system-ui, sans-serif;
  font-synthesis: none;
  -webkit-text-stroke: var(--cap-outlinew, 3px) var(--cap-outline, #000);
  paint-order: stroke fill;
  text-shadow: var(--cap-shadow, none);
  pointer-events: none;
}
.cap-box:has(.cap-line:empty) { pointer-events: none; opacity: 0; }
.cap-row { display: block; min-height: 1.12em; white-space: nowrap; }
.cap-line .cap-w {
  display: inline-block; margin: 0 0.14em; color: var(--cap-primary, #fff);
  pointer-events: auto; cursor: text;
  transition: transform 0.08s ease, color 0.08s ease;
}
.cap-line.up .cap-w { text-transform: uppercase; }
@media (max-width: 1399px), (max-height: 820px) {
  .player-wrap.is-native-vertical { height: min(58vh, 720px); width: auto; }
}
/* karaoke: past + active words filled with the highlight color */
.cap-line[data-anim="karaoke"] .cap-w.done,
.cap-line[data-anim="karaoke"] .cap-w.active { color: var(--cap-highlight, #ffd700); }
/* Pop needs extra breathing room because transforms do not participate in
   inline layout. The prior 1.18 scale expanded long words over their
   neighbors ("theemployeeheadcounts"); 1.08 stays visibly emphatic without
   turning ordinary four-word lines into collisions. */
.cap-line[data-anim="pop"] .cap-w { margin-left: 0.22em; margin-right: 0.22em; }
.cap-line[data-anim="pop"] .cap-w.active {
  color: var(--cap-highlight, #ffd700); transform: scale(calc(1.08 * var(--cap-kwscale, 1)));
}
/* Box reserves its padding on every word. Adding it only to the active word
   changed the line width every time the highlight moved, making the whole
   caption appear to shake. */
.cap-line[data-anim="box"] .cap-w {
  border-radius: 0.12em; padding: 0 0.1em;
}
.cap-line[data-anim="box"] .cap-w.active {
  background: var(--cap-highlight, #ffd700); color: var(--accent-on);
  transform: scale(var(--cap-kwscale, 1)); -webkit-text-stroke: 0;
}
/* keyword highlights: the line's highest vocal-energy word (engine prosody) */
.cap-line .cap-w.kw { color: var(--cap-highlight, #ffd700); transform: scale(calc(1.06 * var(--cap-kwscale, 1))); }
/* Secondary (highlighted-word) styling: separate font/weight/scale for the
   word being spoken and the prosody keyword. Vars fall back to the main look. */
.cap-line .cap-w.active, .cap-line .cap-w.kw {
  font-family: var(--cap-kwfont, var(--cap-font, "Emotion Engine DejaVu Sans")), system-ui, sans-serif;
  font-weight: var(--cap-kwweight, 800);
}
.cap-line[data-anim="karaoke"] .cap-w.active {
  transform: scale(var(--cap-kwscale, 1));
}
/* Emoji rides its word's span (so it scales/moves with it) but takes no
   text stroke and no highlight-box background bleed. */
.cap-line .cap-w .cap-emoji {
  display: inline-block; margin-left: 0.18em;
  -webkit-text-stroke: 0; text-shadow: none;
}

.cap-studio-head { display: flex; align-items: center; justify-content: space-between; }
.cap-studio-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-muted); font-weight: 700;
}
.cap-toggle { font-size: 12px; color: var(--fg-muted); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
/* Native inputs pick up the brand amber instead of the OS default blue/white. */
input[type="range"], input[type="checkbox"] { accent-color: var(--accent); }
.cap-presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.cap-preset {
  position: relative; border: 1px solid var(--border); border-radius: 9px; cursor: pointer;
  height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; background: var(--surface) center/cover; overflow: hidden; padding: 5px 6px 8px;
}
.cap-preset:hover { border-color: var(--border-strong); }
.cap-preset.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 4px 12px rgba(0,0,0,.18); }
.cap-preset .cap-chip-preview {
  display: inline-flex; align-items: baseline; justify-content: center; gap: 4px;
  max-width: 100%; font-weight: 900; font-size: 15px; line-height: 1;
  font-synthesis: none;
  paint-order: stroke fill; text-align: center; white-space: nowrap;
}
.cap-preset .cap-chip-word { display: inline-block; }
.cap-preset .cap-chip-word.is-active {
  border-radius: 3px; padding: 1px 2px; paint-order: stroke fill;
}
.cap-preset .cap-chip-motion {
  font-size: 11px; line-height: 1; letter-spacing: .11em; color: var(--fg-dim);
  font-weight: 800; text-transform: uppercase;
}
.cap-preset .cap-chip-name {
  position: absolute; bottom: 2px; left: 0; right: 0; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--fg-muted);
  text-transform: uppercase; -webkit-text-stroke: 0; text-shadow: 0 1px 2px #000;
}
.cap-preset.cap-custom .cap-chip-text { font-size: 13px; color: var(--fg-muted); -webkit-text-stroke: 0; }
.cap-preset .cap-burn-dot {
  position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
}
.cap-preset .cap-burn-dot.has-delete { right: 21px; }
.cap-preset .cap-burn-dot.preview, .cap-preset.preview-only .cap-burn-dot { background: var(--fg-dim); }
.cap-gallery-label {
  grid-column: 1 / -1; margin: 4px 0 -2px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-muted);
}
.cap-gallery-label:first-child { margin-top: 0; }
.cap-lines-control {
  margin-top: 4px; padding: 8px 9px; border: 1px solid var(--border);
  border-radius: 9px; background: rgba(255,255,255,0.02);
}
.cap-themes-empty {
  grid-column: 1 / -1; font-size: 12px; color: var(--fg-dim); line-height: 1.5;
  border: 1px dashed var(--border); border-radius: 9px; padding: 9px 10px;
}
.cap-theme-del {
  position: absolute; top: 2px; right: 2px; z-index: 2;
  width: 16px; height: 16px; border-radius: 5px; border: 0; cursor: pointer;
  background: rgba(0,0,0,0.5); color: var(--fg-muted); font-size: 11px; line-height: 1;
  display: grid; place-items: center;
}
.cap-theme-del:hover { background: var(--warning); color: var(--accent-on); }
.cap-theme-row { display: flex; gap: 7px; align-items: center; padding-top: 4px; border-top: 1px solid var(--border); margin-top: 4px; }
.cap-theme-row .bs-input { flex: 1; min-width: 0; }
.cap-theme-row .btn { flex-shrink: 0; font-size: 12px; }
.cap-customize {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  padding: 7px 9px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px dashed var(--border); color: var(--fg-muted);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.cap-customize:hover { border-color: var(--border-strong); color: var(--fg); }
.cap-controls { display: flex; flex-direction: column; gap: 9px; padding-top: 2px; }
/* Controls read as one compact row each (label left, control right): the
   panel stays scannable instead of a mile-long stack of full-width sliders. */
.cap-ctl { font-size: 12px; color: var(--fg-muted); display: flex; align-items: center; gap: 7px; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.cap-ctl select, .cap-ctl input[type="range"] { flex: 1; min-width: 0; width: auto; }
.cap-ctl select {
  background: var(--surface); color: var(--fg); border: 1px solid var(--border);
  border-radius: 7px; padding: 5px 7px; font-size: 12px; text-transform: none;
}
.cap-swatches { display: flex; gap: 8px; }
.cap-color { flex: 1; flex-direction: column; align-items: center; gap: 4px; }
.cap-color input[type="color"] {
  width: 100%; height: 26px; padding: 0; border: 1px solid var(--border);
  border-radius: 7px; background: none; cursor: pointer;
}
.cap-seg { display: flex; align-items: center; gap: 7px; }
.cap-seg-label { font-size: 12px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; flex-shrink: 0; min-width: 58px; }
.cap-seg .cap-seg-btns { flex: 1; }
.cap-toggles { display: flex; flex-wrap: wrap; gap: 7px 14px; padding: 2px 0; }
.cap-subhead {
  font-size: 12px; color: var(--fg-muted); text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 700; margin-top: 6px; padding-top: 8px;
  border-top: 1px solid var(--border);
}
.cap-edit-hint { margin: -3px 0 0; color: var(--fg-dim); font-size: 12px; line-height: 1.4; }
.cap-text-edit { display: flex; gap: 6px; align-items: center; }
.cap-text-edit .bs-input { flex: 1; min-width: 0; }
.cap-text-edit .btn { flex-shrink: 0; font-size: 12px; padding: 6px 8px; }
.cap-timing-edit { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.cap-timing-label { color: var(--fg-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.cap-timing-edit .btn { font-size: 12px; padding: 5px 7px; }
.cap-timing-edit .cap-val { min-width: 48px; text-align: center; }
.cap-seg-btns button {
  flex: 1; font-size: 12px; font-weight: 700; padding: 5px 6px; border: 0; border-radius: 6px;
  cursor: pointer; background: transparent; color: var(--fg-muted);
}
.cap-seg-btns button.active { background: var(--accent); color: var(--accent-on); }
.cap-actions { display: flex; flex-direction: column; gap: 6px; }
.cap-note { font-size: 12px; color: var(--fg-dim); line-height: 1.45; }
.cap-note.busy { color: var(--accent-text); }
.cap-note.ok { color: var(--success); }
.cap-note.err { color: var(--warning); }

/* ===== TIMELINE ===== */
.timeline { margin-top: 14px; }
.tool-group { display: flex; gap: 3px; padding: 3px; border-radius: 10px;
  background: var(--timeline-control-bg); border: 1px solid var(--border); }
.tool-btn svg { width: 16px; height: 16px; }
.tool-btn:hover:not(:disabled) { background: rgba(255,255,255,0.07); color: var(--fg); }
.tool-btn.active { background: var(--accent); color: var(--accent-on); }
.tool-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tool-btn.is-gated { color: var(--fg-dim); }
.tool-btn.is-gated:hover { background: transparent; color: var(--fg-muted); }
.tool-undo .tool-btn { color: var(--fg-muted); }
.tl-head { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.tl-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); font-weight: 700; }
.tl-readout { font-size: 12px; color: var(--fg-dim); }
.tl-zoom { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.tl-zoom input[type="range"] {
  width: 112px; height: 3px; margin: 0 2px; accent-color: var(--accent);
  cursor: ew-resize;
}
.tl-zoom output {
  min-width: 28px; color: var(--fg-dim); font-family: var(--mono);
  font-size: 11px; text-align: right;
}
.tl-lane canvas { display: block; width: 100%; height: 100%; }
.tl-segment-overlays {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
}
.tl-segment-bubble {
  position: absolute; top: 5px; bottom: 12px;
  box-sizing: border-box; border: 1px solid var(--timeline-segment-border);
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
}
.tl-segment-bubble.is-alt { background: transparent; }
.tl-segment-bubble.is-selected {
  border: 2px solid var(--accent); background: transparent;
  box-shadow: none;
}
.tl-filler-overlays { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.tl-filler-marker {
  position: absolute; top: 10px; bottom: 16px; min-width: 4px; padding: 0 3px;
  border: 1px solid rgba(255,207,112,.95); border-radius: 4px;
  background: rgba(255,207,112,.2); color: #ffe6a5;
  font: 700 11px/1 var(--mono); cursor: pointer; pointer-events: auto;
  overflow: visible; white-space: nowrap;
}
.tl-filler-marker::after { content: 'filler'; position: absolute; top: 3px; left: 3px; opacity: .85; }
.tl-filler-marker:hover, .tl-filler-marker:focus-visible { background: rgba(255,207,112,.42); outline: none; }
.tl-filler-marker.is-maybe { border-color: #ffcf70; background: rgba(255,207,112,.17); }
.tl-filler-marker.is-risky { border-color: #ff9f7f; background: rgba(255,159,127,.18); color: #ffc1ad; }
.tl-filler-marker.is-applied { border-color: var(--success); background: rgba(91,211,176,.2); color: #b8f4c9; }
.tl-filler-marker.is-kept { border-style: dotted; opacity: .56; }
.tl-silence-overlays { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.tl-silence-marker {
  position: absolute; top: 8px; bottom: 14px; min-width: 2px; padding: 0 1px;
  display: flex; align-items: flex-start; justify-content: center;
  border: 1px dashed var(--border-accent); border-radius: 5px;
  background: var(--accent-dim); color: #ffe29a;
  font: 700 11px/1 var(--mono); white-space: nowrap; cursor: pointer;
  pointer-events: auto; overflow: visible;
}
.tl-silence-label { pointer-events: none; }
.tl-silence-handle {
  position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize;
  background: var(--accent-dim); border-radius: 3px; opacity: .9;
}
.tl-silence-handle-start { left: -5px; }
.tl-silence-handle-end { right: -5px; }
.tl-silence-marker.is-applied .tl-silence-handle { cursor: default; opacity: .45; }
.tl-silence-marker::after { content: 'cut'; position: absolute; top: 4px; opacity: .75; }
.tl-silence-marker:hover, .tl-silence-marker:focus-visible { background: var(--accent-dim); border-style: solid; outline: none; }
.tl-silence-marker.is-auditioned { border-color: #8ee7b0; background: rgba(80,190,120,.18); color: #b8f4c9; }
.tl-silence-marker.is-kept { border-color: var(--fg-dim); background: rgba(120,130,150,.14); color: var(--fg-dim); }
.tl-silence-marker.is-applied { border-color: #8ea5ff; background: rgba(142,165,255,.18); color: #c8d2ff; }
.tl-silence-marker.is-applied::after { content: 'applied'; }
.tl-lane.tl-dragging { cursor: ew-resize; }
.tl-selbar {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  padding: 7px 10px; border-radius: 9px;
  background: var(--accent-dim); border: 1px solid var(--border-accent);
}
.tl-selbar .btn { font-size: 13px; padding: 5px 12px; }
.vol-head { display: flex; align-items: center; gap: 10px; margin: 8px 0 5px; }
.vol-disclose {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px;
  background: transparent; border: 0; cursor: pointer; color: inherit;
  border-radius: 6px;
}
.vol-disclose:hover { background: var(--surface); }
.vol-chev { font-size: 12px; color: var(--fg-muted); width: 10px; }
.vol-hint { font-size: 12px; color: var(--fg-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vol-head .nudge-btn { margin-left: auto; }
.vol-key-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 7px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 9px; background: var(--timeline-control-bg);
}
.vol-inline-hint { color: var(--fg-dim); font-size: 12px; margin-right: auto; }
.vol-key-controls label {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--fg-dim); font-size: 12px;
}
.vol-key-controls select {
  max-width: 118px; min-width: 94px; padding: 4px 24px 4px 7px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--fg); font: 12px var(--mono);
}
.vol-key-controls input[type="range"] { width: 110px; accent-color: var(--accent); }
.vol-key-controls output {
  min-width: 46px; color: var(--fg); font: 12px var(--mono); text-align: right;
}
.vol-key-controls .btn { padding: 5px 9px; font-size: 12px; }
.vol-key-controls .btn-danger { margin-left: 0; }
.tp-rate {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 5px 3px 9px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.tp-rate-label {
  color: var(--fg-muted); font-size: 11px; font-weight: 750;
  letter-spacing: 0.11em; text-transform: uppercase;
}
.tp-rate select {
  min-width: 66px; padding: 5px 24px 5px 8px; border: 0; border-radius: 6px;
  background: rgba(255,255,255,0.045); color: var(--fg); font: 750 14px var(--mono);
}
.tp-rate.is-adjusted {
  border-color: var(--border-accent); background: var(--accent-dim);
  box-shadow: 0 0 0 1px var(--accent-dim);
}
.tp-rate.is-adjusted .tp-rate-label,
.tp-rate.is-adjusted select { color: var(--accent-text); }
.tl-playhead {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-dim); pointer-events: none;
}
.tl-context-menu {
  position: fixed; z-index: 30; padding: 4px; border: 1px solid var(--border-accent);
  border-radius: 7px; background: var(--surface-strong); box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.tl-context-menu button {
  border: 0; border-radius: 5px; padding: 7px 10px; background: transparent;
  color: var(--fg); cursor: pointer; font: 12px var(--ui-font); white-space: nowrap;
}
.tl-context-menu button:hover { background: var(--accent-dim); color: var(--accent-text); }
.tl-playhead::before {
  content: ''; position: absolute; top: -1px; left: -4px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--accent);
}
/* Main waveform playhead: a generous invisible hit target around the 2px
   line makes a single press-and-drag practical without changing its look. */
#tl-playhead {
  width: 12px; margin-left: -6px; background: transparent; box-shadow: none;
  pointer-events: auto; cursor: grab; touch-action: none;
}
#tl-playhead::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-dim);
}
#tl-playhead::before { left: 1px; }
.tl-lane.tl-scrubbing, .tl-lane.tl-scrubbing #tl-playhead { cursor: grabbing; }

.splice-strip {
  display: flex; align-items: stretch; gap: 3px;
  margin-top: 12px; height: 44px;
  background: var(--timeline-canvas-bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 5px;
}
.strip-block {
  appearance: none; color: inherit; font: inherit; text-align: left;
  background: rgba(108,232,184,0.13); border: 1px solid rgba(108,232,184,0.3);
  border-radius: 6px; min-width: 14px; flex-basis: 0;
  cursor: pointer; overflow: hidden; position: relative;
  display: flex; align-items: center; padding: 0 7px;
  transition: background 0.12s;
}
.strip-block:hover { background: rgba(108,232,184,0.24); }
.strip-block-label {
  font-size: 11px; color: var(--fg-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.strip-cut {
  appearance: none;
  width: 20px; flex-shrink: 0; border-radius: 6px; cursor: pointer;
  background: rgba(255,139,139,0.12); border: 1px dashed rgba(255,139,139,0.45);
  color: var(--warning); font-size: 12px;
  display: grid; place-items: center;
  transition: background 0.12s;
}
.strip-cut:hover { background: rgba(255,139,139,0.28); }
.strip-cut.is-retake { background: rgba(183,141,255,0.12); border-color: rgba(183,141,255,0.45); color: var(--accent-purple); }
.strip-cut.is-retake:hover { background: rgba(183,141,255,0.26); }
.splice-legend {
  display: flex; gap: 10px; align-items: center;
  font-size: 12px; color: var(--fg-dim); margin-top: 8px; flex-wrap: wrap;
}
.legend-chip.block-chip { background: rgba(108,232,184,0.13); border: 1px solid rgba(108,232,184,0.3); color: var(--success); }
.legend-chip.cut-chip { background: rgba(255,139,139,0.12); border: 1px dashed rgba(255,139,139,0.45); color: var(--warning); text-decoration: line-through; }
.legend-chip.user-cut-chip { background: var(--accent-dim); border: 1px dashed var(--border-accent); color: var(--accent-text); }
.score-chip.edited { color: var(--accent-text); border-color: var(--border-accent); }
.strip-cut.is-user { background: var(--accent-dim); border-color: var(--border-accent); color: var(--accent-text); }
.strip-cut.is-user:hover { background: var(--accent-dim); }
.strip-cut.is-silence { background: rgba(91,211,176,0.10); border-color: rgba(91,211,176,0.45); color: var(--success); }
.strip-cut.is-silence:hover { background: rgba(91,211,176,0.22); }
.splice-legend #btn-play-edited { margin-left: auto; }
.outside-word, .outside-word * { color: var(--fg-dim) !important; opacity: 0.55; }

/* ===== EDITOR PHASE 2: trim bar, toolbar, popover ===== */
.trim-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.trim-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--fg-muted);
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.trim-label .mono { font-size: 12px; color: var(--fg); font-weight: 500; }
.nudge-btn {
  font-family: var(--mono); font-size: 11px; padding: 2px 5px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 5px;
  color: var(--fg-muted); transition: background 0.12s;
}
.nudge-btn:hover:not(:disabled) { background: var(--accent-dim); color: var(--accent-text); }
.nudge-btn:disabled { opacity: 0.35; cursor: default; }
.edit-toolbar {
  position: fixed; z-index: 60; display: flex; gap: 6px;
  background: var(--surface-strong); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 6px; box-shadow: 0 8px 30px rgba(0,0,0,0.55);
}
.cut-popover {
  position: fixed; z-index: 60; width: 392px;
  background: var(--surface-strong); border: 1px solid var(--border-strong); border-radius: 12px;
  padding: 12px 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.cut-popover-title { font-size: 12px; font-weight: 650; margin-bottom: 6px; }
.cutpop-reason {
  font-size: 13px; color: var(--accent-blue); line-height: 1.5; margin-bottom: 8px;
  padding-left: 9px; border-left: 2px solid rgba(142,165,255,0.4);
}
.cutpop-wave { width: 100%; height: 56px; border-radius: 8px; background: rgba(0,0,0,0.35); display: block; margin-bottom: 8px; }
.cutpop-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; margin-bottom: 10px; }
.cutpop-lab { font-size: 12px; color: var(--fg-muted); }
.cutpop-lab .mono { color: var(--fg); }
.cutpop-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.editor-transcript { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow-y: auto; }
.editor-transcript .seg-text span[data-eseek] { cursor: pointer; border-radius: 3px; }

/* One quiet, app-wide keyboard focus language. Mouse users never see this;
   keyboard users can always tell where the next action will land. */
:where(a, button, input, select, textarea, summary, [role="button"], [role="link"]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}
.project-menu-item:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -2px;
}
.editor-transcript .seg-text span[data-eseek]:hover { background: rgba(142,165,255,0.12); }
.editor-transcript .transcript-word-active {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--fg-strong);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.editor-transcript .audio-confirmed-word {
  border-bottom: 2px dotted var(--success);
  text-decoration-color: var(--success);
}
.editor-transcript .audio-confirmed-word::after {
  content: '·'; color: var(--success); font-weight: 900; margin-left: 2px;
}

/* Regalia token sheet: selection follows the active theme without touching media. */
::selection { background: var(--accent-dim); color: var(--fg-strong); }
.silence-inline-marker {
  display: inline-block; min-width: 18px; margin: 0 3px; padding: 0 3px;
  border: 1px solid rgba(255, 207, 112, 0.55); border-radius: 999px;
  background: rgba(255, 207, 112, 0.12); color: #ffcf70;
  font: 800 12px/1.25 var(--mono); vertical-align: 1px; cursor: pointer;
}
.silence-inline-marker:hover, .silence-inline-marker:focus-visible {
  border-color: var(--accent); background: var(--accent-dim); color: var(--fg-strong);
}
.silence-inline-marker.is-kept { border-style: dotted; opacity: 0.62; }
.silence-inline-marker.is-auditioned { border-color: var(--accent-blue); color: var(--accent-blue); }
.silence-inline-marker.is-applied { border-color: var(--success); background: rgba(91,211,176,0.12); color: var(--success); }
.cut-word:hover, .cut-word:hover * { color: var(--warning) !important; }
.seg-excluded { opacity: 0.75; }

/* Respect macOS Reduce Motion without removing state changes or feedback.
   Processing status, focus, and approval transitions remain visible; only
   decorative movement and animated pulses are shortened to a single frame. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Final light-mode pass: these rules intentionally come last so page-specific
   dark-theme declarations cannot flatten ordinary UI surfaces back into the
   page background. Actual media and waveform wells are excluded. */
:root[data-theme="light"] :is(
  .hero, .home-action, .home-capability, .project-card, .pub-card, .lrn-card,
  .bs-card, .clip-card, .proc-timeline, .connection-card, .chapter-clip,
  .oauth-provider-card, .campaign-publish-card, .tics-card, .stat-tile,
  .stage-row, .cal-day, .cal-entry, .filler-review-item, .type-list-item,
  .rerun-choice, .set-section, .editorial-brief, .proc-log, .publish-copy-list,
  .highlights-list, .queue-list, .transcript-list, .chapters-list,
  .chapter-edit-list, .renders-list
) {
  background-color: #ffffff !important;
  border-color: var(--ui-card-border);
  box-shadow: var(--ui-card-shadow);
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] :is(
    .hero, .home-action, .home-capability, .project-card, .pub-card, .lrn-card,
    .bs-card, .clip-card, .proc-timeline, .connection-card, .chapter-clip,
    .oauth-provider-card, .campaign-publish-card, .tics-card, .stat-tile,
    .stage-row, .cal-day, .cal-entry, .filler-review-item, .type-list-item,
    .rerun-choice, .set-section, .editorial-brief, .proc-log, .publish-copy-list,
    .highlights-list, .queue-list, .transcript-list, .chapters-list,
    .chapter-edit-list, .renders-list
  ) {
    background-color: #ffffff !important;
    border-color: var(--ui-card-border);
    box-shadow: var(--ui-card-shadow);
  }
}
/* ===== REGALIA HANDOFF: SINGLE FINAL CASCADE LAYER =====
   Tokens remain at the top of this file. These component and shell rules are
   merged after all original app rules so the handoff is the final authority. */

:root {
--screen-sidebar: 248px;
  --screen-topbar: 60px;
  --screen-content: 1120px;
  --screen-detail: 1180px;
}

body {
background: var(--bg-wash), var(--bg); color: var(--fg);
}

.app {
grid-template-columns: var(--screen-sidebar) minmax(0, 1fr);
  grid-template-rows: var(--screen-topbar) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--bg-wash), var(--bg);
}

.app-sidebar {
background: var(--surface); padding: 14px 10px 10px; border-right-color: var(--border);
}

.sidebar-brand {
padding: 4px 10px 14px; gap: 10px;
}

.brand-mark {
width: 34px; height: 34px; border-radius: var(--r-md); background: linear-gradient(140deg, var(--gold-400), var(--gold-700));
}

.brand-name {
font-size: 15px;
}

.brand-tag {
font-size: 12px;
}

.sidebar-scroll {
gap: 18px; padding: 12px 0;
}

.sidebar-section {
gap: 2px;
}

.sidebar-section-title {
padding: 0 11px 6px; font-size: 12px; letter-spacing: .14em; color: var(--fg-dim);
}

.sidebar-item {
padding: 9px 11px; border: 0; border-left: 2px solid transparent;
  border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--fg-muted);
  font-size: 13px; font-weight: 600;
}

.sidebar-item:hover {
background: var(--surface-hover); color: var(--fg);
}

.sidebar-item.active {
background: var(--brand-dim); border-left-color: var(--accent-text); color: var(--fg);
background: var(--brand-dim);
  border-left: 2px solid var(--accent);
  color: var(--fg);
}

.sidebar-item .side-icon, .sidebar-item.active .side-icon {
color: var(--accent-text);
}

.sidebar-workspaces {
gap: 1px; margin: 0; padding: 2px 0 4px 13px; border-left: 0;
}

.sidebar-workspace-section .sidebar-workspaces { padding-left: 0; }

.sidebar-workspace-section .sidebar-workspace { padding-left: 11px; }

.sidebar-workspace-section .sidebar-new-workspace { padding: 7px 11px; }

.sidebar-workspace {
min-height: 30px; padding: 7px 11px 7px 24px;
  border-left: 2px solid transparent; border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 12px;
}

.sidebar-workspace:hover, .sidebar-workspace.active {
background: var(--brand-dim); border-left-color: var(--accent-text); color: var(--fg);
}

.sidebar-workspace.active .sidebar-workspace-dot {
background: var(--brand);
}

.sidebar-footer {
padding: 12px 2px 0; gap: 8px;
}

.sidebar-account {
padding: 10px; border-radius: var(--r-md);
}

.account-title {
font-size: 12px;
}

.account-sub, .build-stamp {
font-size: 12px;
}

.build-stamp {
color: var(--fg-dim);
}

.app-topbar {
min-height: var(--screen-topbar); padding: 0 22px; background: var(--surface); border-bottom-color: var(--border); backdrop-filter: none;
}

.breadcrumb {
max-width: 300px; font-size: 13px;
}

.gs-wrap {
flex: 1; min-width: 220px; max-width: 460px;
}

.gs-input {
padding: 8px 12px; border-radius: var(--r-md); background: var(--bg);
}

.topbar-actions {
gap: 10px;
}

.cost-pill, .icon-btn, .route-back {
border-radius: var(--r-md);
}

.cost-pill {
padding: 6px 11px;
}

.cost-pill .value {
color: var(--accent-text);
font-weight: 700;
}

.app-main {
max-width: var(--screen-content); padding: 28px; background: transparent;
}

.app-main:has(#screen-detail:not([hidden])) {
max-width: var(--screen-detail);
}

.screen-head {
margin: 4px 0 24px;
}

.screen-head h2 {
font-size: 24px; letter-spacing: -.02em;
}

.screen-sub {
font-size: 13px; line-height: 1.5;
}

.dashboard-hello {
margin: 0;
}

.dashboard-hello-title {
font-size: 30px;
}

.dashboard-hello-sub {
font-size: 14px;
}

.home-actions {
display: block; margin: 0;
}

.home-action {
width: max-content; min-width: 350px; padding: 14px 18px; border-radius: var(--r-lg);
}

.home-action-icon {
border-radius: var(--r-md);
}

.hero {
border: 1px solid var(--border-accent);
border-radius: var(--r-xl);
padding: 26px 28px;
margin-bottom: 28px;
background: linear-gradient(160deg, var(--accent-dim), var(--surface) 55%);
box-shadow: none;
}

.hero-title {
font-size: 24px;
}

.start-tab {
padding: 9px 15px;
border-radius: var(--r-md);
}

.drop-zone:hover:not(.is-disabled), .drop-zone.dragover {
background: var(--surface-focus);
border-color: var(--accent);
}

.drop-browse, .home-capabilities-link {
color: var(--accent-text);
}

.hero-cta .btn-primary { border-radius: var(--r-md); }

.home-capabilities {
margin-top: 28px;
}

.home-capabilities-grid {
gap: 12px;
}

.home-capability {
padding: 13px 14px; border-radius: var(--r-lg);
}

.privacy-line {
max-width: 78ch;
}

.btn, .start-tab, .clip-sort, .bs-input, input, select, textarea {
border-radius: var(--r-md);
}

.btn, [data-chip], [data-tab], [data-quiet], [data-primary], button, select {
white-space: nowrap;
}

.btn-primary { border-color: transparent; }

.btn-primary:active {
background: var(--accent-press);
}

.section-head {
margin: 28px 0 16px;
}

.section-title {
font-size: 12px; letter-spacing: .14em;
}

.projects-grid, .clips-grid {
gap: 12px;
}

.project-card, .clip-card, .pub-card, .lrn-card, .bs-card, .proc-timeline, .connection-card, .chapter-clip, .stat-tile, .stage-row, .cal-day, .cal-entry {
border-radius: var(--r-lg);
}

.project-card:hover, .clip-card:hover, [data-card]:hover {
border-color: var(--border-accent);
}

.project-meta, .clip-body {
padding: 12px 14px;
}

.project-badge, .clip-score, .clip-vert {
border-radius: var(--r-sm);
}

.workspace-head {
padding: 0 0 6px; margin: 0 0 28px; gap: 28px;
display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.workspace-head h2 {
font-size: 26px;
}

.workspace-head .eyebrow {
color: var(--accent-text); letter-spacing: .14em;
}

.workspace-head-actions {
margin-top: 28px;
margin-top: 0;
}

.workspace-stats, .stats-row {
gap: 12px;
}

.stat-tile {
padding: 16px 18px;
}

.stat-val {
font-size: 26px;
}

.workspace-projects-head {
margin-top: 28px;
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
}

.workspace-toolbar {
margin-bottom: 20px;
}

.lib-table, .queue-list, .highlights-list {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
}

.lib-table th {
background: var(--surface-strong);
}

.lib-table td {
padding: 11px 12px;
}

.pub-note, .editor-banner {
border-color: var(--brand); background: var(--brand-dim); border-radius: var(--r-md); color: var(--fg);
}

.pub-grid, .bs-grid {
gap: 12px;
}

.pub-card, .bs-card {
padding: 18px;
}

.bs-card:has(.bs-swatches) {
border-color: var(--border-accent);
}

.bs-preview {
background: var(--ink-900); border-radius: var(--r-sm);
}

.lrn-list {
max-width: 860px; gap: 10px;
}

.lrn-card > summary {
padding: 15px 18px;
}

.lrn-eyebrow {
color: var(--accent-text); border-radius: var(--r-pill);
}

.proc-layout {
grid-template-columns: minmax(0, 1fr) 320px; gap: 28px;
}

.proc-timeline {
padding: 20px;
}

.proc-stat {
border-radius: var(--r-lg);
}

.proc-log {
border-radius: var(--r-md);
}

.detail-output-summary {
gap: 8px;
}

.detail-output-stat {
border-radius: var(--r-pill); border-color: var(--border-accent);
}

.detail-tabs {
gap: 4px;
}

.detail-tab.active {
color: var(--fg); border-bottom-color: var(--accent-text);
}

.clip-card-open {
background: var(--surface-focus); border-color: var(--border-accent); box-shadow: var(--glow);
}

.detail-player-wrap video {
border-radius: var(--r-lg);
}

.timeline, .tl-lane, .vol-lane {
border-radius: var(--r-md);
}

.timeline {
background: var(--timeline-canvas-bg);
}

.tool-btn, .tp-btn, .nudge-btn {
border-radius: var(--r-sm);
}

.vol-head, .vol-key-controls {
border-color: var(--border);
}

.set-section {
border-radius: var(--r-lg);
}

:where(a, button, input, select, textarea, summary, [role="button"], [role="link"]):focus-visible {
outline: var(--focus-ring); outline-offset: 3px;
}

.app-main, .app-main:has(#screen-detail:not([hidden])), .app-main:has(#screen-editor:not([hidden])) {
width: 100%;
  max-width: 1120px;
  margin: 0;
  padding: 28px;
  justify-self: start;
  box-sizing: border-box;
}

.screen {
max-width: 1120px; margin: 0;
}

.workspace-projects-head .btn {
margin-left: auto;
}

.btn-primary:disabled {
background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
  opacity: .45;
}

.sidebar-item.active .side-icon {
color: var(--accent-text);
}

.projects-grid {
align-items: stretch;
}

.project-card {
display: flex; flex-direction: column; height: 100%;
}

.project-thumb {
position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex: 0 0 auto;
}

.project-thumb img, .project-thumb video {
width: 100%;
  height: 100%;
  object-fit: contain;
}

.project-select {
position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

.project-card-topline {
min-width: 0;
}

.project-badges {
min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
  overflow: hidden;
}

.project-badges > .project-badge {
flex: 0 0 auto;
}

.project-badges > .project-badge:nth-child(n + 4) {
display: none;
}

.project-meta {
min-width: 0;
}

.project-sub {
min-width: 0;
  margin-top: auto;
  padding-top: 7px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.projects-grid.as-list .project-thumb {
aspect-ratio: 16 / 9;
}

.projects-grid.as-list .project-select {
top: 8px; right: 8px;
}

.project-thumb.is-vertical {
aspect-ratio: 9 / 16;
}

.project-thumb.is-vertical img, .project-thumb.is-vertical video {
object-fit: contain;
  background: var(--surface-strong);
}

.theme-toggle {
display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--fg);
  font: 650 12px/1 var(--ui-font);
  cursor: pointer;
  white-space: nowrap;
}

.theme-toggle:hover {
background: var(--surface-hover); border-color: var(--border-strong);
}

.theme-toggle-icon {
color: var(--accent-text); font-size: 15px; line-height: 1;
}

.start-tabs {
gap: 8px; margin: 20px 0 0;
}

.start-tab:hover:not(.active) {
background: var(--surface-hover); color: var(--fg);
}

.start-tab.active {
background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}

.start-tab:active.active {
background: var(--accent-press); border-color: var(--accent-press);
}

.drop-zone:hover, .drop-zone.dragover, .drop-zone.is-dragover {
background: var(--surface-focus);
  border-color: var(--accent);
}

.drop-icon .ui-icon {
width: 22px; height: 22px;
}

.drop-main {
color: var(--fg);
}

.drop-browse {
color: var(--accent-text); text-underline-offset: 3px;
}

.drop-hint {
font-size: 12px; color: var(--fg-muted);
}

.stats-row {
gap: 12px; margin-bottom: 28px;
}

.stats-row .stat-tile:last-child {
border-color: var(--border-accent);
}

.stats-row .stat-tile:last-child .stat-val {
color: var(--accent-text);
}

/* ===== REGALIA TYPE SCALE: FINAL TYPOGRAPHY CASCADE ===== */
.hero-sub, .dashboard-hello-sub, .home-capabilities-sub,
.rail-soon, .empty-card p { font-size: 15px; line-height: 1.55; }
.lrn-card-body p { font-size: 15px; line-height: 1.65; }

.home-action-sub, .home-capability span, .privacy-line, .drop-hint,
.breadcrumb, .account-sub, .oauth-help, .oauth-help p, .tool-info-popover,
.type-explainer, .type-status, .set-field-note { font-size: 14px; line-height: 1.5; }
.privacy-line { line-height: 1.6; }

.home-action-title, .home-capability strong, .project-card-title,
.clip-card-title, .pub-card-title, .bs-card-title { font-size: 16px; }
.card-title, .lrn-card-title { font-size: 17px; }
.hero-title { font-size: 26px; }
.dashboard-hello-title { font-size: 32px; }

.sidebar-item { font-size: 14px; }
.sidebar-workspaces .sidebar-item { font-size: 13px; }
.account-title { font-size: 13px; }
.btn, .btn-primary, .btn-secondary, .btn-ghost { font-size: 14px; }
.hero-cta .btn-primary { font-size: 15px; }
.start-tab { font-size: 14px; }
.detail-tab { font-size: 15px; }
.gs-input, .bs-input, .url-input, .vocab-input, .clip-sort,
.set-field input, .set-field select, .detail-search input { font-size: 14px; }
.drop-main { font-size: 17px; }

.project-card-meta, .clip-card-meta, .pub-card-sub, .stage-note, .cal-entry,
.detail-meta, .editor-meta, .filler-review-status,
.silence-review-duration { font-size: 13px; }
.cost-pill .label { font-size: 12px; }
.cost-pill .value { font-size: 14px; }

.section-title, .lrn-section-title, .stat-label { font-size: 12px; letter-spacing: 0.12em; }
.sidebar-section-title { font-size: 12px; letter-spacing: 0.13em; }

.fchip, .tag, .status-chip, .lane-chip, .clip-chip, .detail-chip,
.aspect-btn, .vm-btn, .view-toggle button,
.cap-seg-btns button { font-size: 12px; }

.lib-table th, .table th { font-size: 12px; letter-spacing: 0.1em; }
.lib-table td, .table td { font-size: 14px; }

.timecode, .engine-log, .proc-log, .vol-readout, .editor-time { font-size: 13px; }
.engine-log, .proc-log { line-height: 1.6; }
.build-stamp { font-size: 12px; }

/* ===== MEDIA ASPECT CORRECTION: PRESERVE FULL SOURCE FRAME ===== */
.project-thumb, .clip-thumb-wrap { background: var(--surface-strong); }

.project-thumb img, .project-thumb video,
.clip-card video, .clip-card-still {
object-fit: contain;
background: var(--surface-strong);
}

.detail-player-wrap video { object-fit: contain; }
.detail-player-wrap.is-vertical, .detail-player-wrap.is-native-vertical {
display: flex;
justify-content: center;
}
.detail-player-wrap.is-vertical video, .detail-player-wrap.is-native-vertical video {
width: auto;
height: min(62vh, 560px);
max-width: 100%;
max-height: none;
aspect-ratio: 9 / 16;
object-fit: contain;
}

/* ===== REGALIA TYPE AND CONTROL CORRECTIONS ===== */
.sidebar-item { font-size: 15px; }
.sidebar-workspaces .sidebar-item { font-size: 14px; }
.clip-meta, .clip-card-meta, .project-card-meta, .detail-meta,
.editor-meta, .pub-card-sub, .stage-note { font-size: 14px; }
.project-sub, .chapter-clip-meta, .chapter-time, .detail-output-stat span,
.clip-format-help { font-size: 13px; }

.cost-pill {
border-color: var(--border-accent);
background: var(--accent-dim);
}
.cost-pill .label { color: var(--fg-muted); }
.cost-pill .value {
color: var(--accent-text);
font-weight: 700;
font-size: 15px;
}

.app-topbar { border-bottom: 1px solid var(--border); }

/* ===== REGALIA HOVER SIGNAL ===== */
.project-card, .clip-card, .pub-card, .lrn-card, .bs-card,
.home-action, .home-capability, [data-card] {
transition: border-color 120ms, background-color 120ms;
}

.project-card:hover, .clip-card:hover, .pub-card:hover, .lrn-card:hover,
.bs-card:hover, .home-action:hover, .home-capability:hover, [data-card]:hover {
border-color: var(--border-hover);
background: var(--surface-hover);
}

.project-card:hover, .clip-card:hover:not(.clip-card-open), .pub-card:hover,
.lrn-card:hover:not([open]), .bs-card:hover, .home-action:hover,
.home-capability:hover, [data-card]:hover {
box-shadow: none;
}

/* Vertical thumbnail frames keep the full generated/source output visible. */
.clip-thumb-wrap { background: var(--surface-strong); }
.clip-thumb-wrap.is-vertical { aspect-ratio: 9 / 16; }
.clip-thumb-wrap.is-vertical img, .clip-thumb-wrap.is-vertical video { object-fit: contain; }
.clip-card video, .clip-card-still { background: var(--surface-strong); }
.chapter-clip video { aspect-ratio: 16 / 9; object-fit: contain; background: var(--surface-strong); }
.chapter-clip.is-vertical { aspect-ratio: 9 / 16; }
.chapter-clip.is-vertical video { aspect-ratio: 9 / 16; }
.thumbnail-frame { background: var(--surface-strong); }
.thumbnail-frame img { object-fit: contain; background: var(--surface-strong); }
.thumbnail-frame.is-vertical { aspect-ratio: 9 / 16; }
.thumbnail-frame.is-vertical img { object-fit: contain; }
/* ===========================================================================
   Regalia — EXACT spec: the Editor
   Written against app/ui/app.css on branch regalia-palette @ 8ee8f26.
   Every selector below is a real class from that file.

   PLACEMENT — read this first, it is where the last three attempts went wrong.
   This block must be appended AFTER every existing rule in app/ui/app.css,
   including the earlier Regalia blocks. When you are done there must be exactly
   ONE rule per selector for: .editor-work, .editor-dock, .tl-lane, .vol-lane,
   .trim-bar, .trim-range, .trim-handle, .tool-strip, .tool-btn, .tp-btn,
   .cap-studio, .cap-seg-btns, .rail-sec, .seg-text, .cut-word, .tl-selinfo,
   .cap-val, .rail-workspace-label. If a selector already appears twice, merge
   them into one and delete the duplicate.

   Resolved values for both themes are in the comments, so nothing is inferred.
   Nothing in this file applies a filter to media.
   =========================================================================== */

/* ===========================================================================
   1. THREE LIGHT-MODE LEGIBILITY BUGS — fix these first, they are the worst
      thing on the screen in light mode.

      --accent is a FILL color (#d9a93f in light). Used as type on a white
      surface it fails contrast badly. Gold as type is always --accent-text
      (#6b4e14 light / #efd79e dark). These three rules currently break it.
   =========================================================================== */

/* Then sweep: grep app/ui/app.css for `color: var(--accent-text)` and for
   `color: var(--accent-text);` inside any rule. EVERY hit that sets TEXT color must
   become var(--accent-text). Gold-as-fill (`background: var(--accent)`) is
   correct and stays. Report the list of what you changed. */

.rail-workspace-label { color: var(--accent-text); }

/* ===========================================================================
   2. EDITOR LAYOUT
   =========================================================================== */

/* ===========================================================================
   3. EDITOR HEAD
   =========================================================================== */

.editor-back {
  color: var(--fg-muted);
  font-size: 14px;
  border-radius: var(--r-md);
}
.editor-back:hover { color: var(--fg); background: var(--surface-hover); }

.editor-clip-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.editor-clip-position {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  min-width: 58px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.editor-save-status { min-width: 62px; font-size: 13px; color: var(--success); text-align: right; }
/* --success is dark #46a873 · light #2f7d52. Only the SAVED state is green;
   an unsaved or error state uses var(--warning). */

.editor-meta { font-size: 14px; color: var(--fg-muted); }

/* ===========================================================================
   4. THE BANNER — a rule, not a hint. Body text is --fg, never muted.
   =========================================================================== */

.editor-banner {
  border: 1px solid var(--brand);              /* dark #7a4cad · light #4e2a78 */
  border-radius: var(--r-md);
  background: linear-gradient(0deg, var(--brand-dim), var(--brand-dim)), var(--surface);
  /* composited over surface so it never picks up whatever is behind it:
     light rgba(122,76,173,.14) over #ffffff = #f4f0f9
     dark  rgba(122,76,173,.22) over #171020 = #251b33 */
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
  padding: 13px 16px;
}

/* ===========================================================================
   5. PLAYER + OVERLAYS

   THE PLAYER MUST RESPECT SOURCE ORIENTATION. #editor-player already uses
   object-fit: contain — keep it. .editor-side video.is-vertical already sets
   aspect-ratio 9/16 — keep it. Do not introduce any 16/9 crop here, and do not
   apply any filter, blend mode or opacity to the video.
   =========================================================================== */

/* caption preview over the video */
.cap-overlay { pointer-events: none; }

.cap-box {
  background: rgba(12, 8, 15, 0.55);     /* fixed dark scrim in BOTH themes —
                                            it sits on footage, not on the UI */
  border-radius: var(--r-sm);
  padding: 8px 14px;
}

.cap-line { color: #ffffff; text-shadow: 0 2px 6px rgba(12, 8, 15, 0.7); }
.cap-line .is-highlight { color: var(--gold-400); }   /* #e8c169 in both themes */

/* ===========================================================================
   6. TRANSPORT
   =========================================================================== */

.tp-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.tp-btn:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-hover); }
.tp-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* the play button is the only gold one in the transport */
.tp-btn.is-play,
.tp-btn[data-role="play"] {
  width: 36px;
  height: 36px;
  border: 0;
  background: var(--accent);
  color: var(--accent-on);            /* #1c1420 both themes */
}
.tp-btn.is-play:hover, .tp-btn[data-role="play"]:hover { background: var(--accent-hover); }
.tp-btn.is-play:active, .tp-btn[data-role="play"]:active { background: var(--accent-press); }

.tp-time {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg);                   /* the current time is primary, not muted */
  min-width: 104px;                   /* widened: 13px mono needs the room */
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.tp-rate { border: 1px solid var(--border); border-radius: var(--r-md); }
.tp-rate select { background: transparent; color: var(--fg); font-size: 13px; }
.tp-rate-label { font-size: 12px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

/* ===========================================================================
   7. TOOL STRIP
   =========================================================================== */

.tool-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

.tool-group {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: transparent;
}

.tool-btn {
  width: 30px;
  height: 28px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.tool-btn:hover:not(.active) { background: var(--surface-hover); color: var(--fg); }
.tool-btn.active { background: var(--accent); color: var(--accent-on); }
.tool-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.tool-btn .ui-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* ===========================================================================
   8. TIMELINE HEAD
   =========================================================================== */

.tl-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-muted); font-weight: 600; }
.tl-readout { font-size: 13px; color: var(--fg-muted); font-family: var(--mono); }
.tl-zoom output { font-size: 13px; color: var(--fg-muted); font-family: var(--mono); }

.tl-selbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-accent);
  border-radius: var(--r-md);
  background: var(--accent-dim);
}
.tl-selinfo { font-family: var(--mono); font-size: 13px; color: var(--accent-text); flex: 1; }

/* ===========================================================================
   9. THE CANVAS LANES

   The timeline canvas stays DARK in every theme — it is a viewport onto audio,
   not a UI surface. This is already the app's behavior; keep it.
   =========================================================================== */

.tl-lane {
  position: relative;
  height: 68px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--timeline-canvas-bg);
  /* dark  rgba(12,8,15,.92) · light rgba(20,16,28,.98) */
  overflow: hidden;
}

.tl-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #f7f3fa;                /* fixed near-white in both themes —
                                         it reads against the dark canvas */
  pointer-events: auto;
  z-index: 20;
}

/* filler + silence markers on the canvas */
.tl-filler-marker {
  background: rgba(180, 72, 42, 0.35);
  border-left: 1px solid #b4482a;
  border-right: 1px solid #b4482a;
}
.tl-silence-marker {
  background: rgba(122, 76, 173, 0.30);
  border-left: 1px solid #9a6fc6;
  border-right: 1px solid #9a6fc6;
}
.tl-silence-label { color: #f7f3fa; font: 700 11px/1 var(--mono); }
.tl-silence-handle { background: var(--gold-400); width: 3px; }

/* --- the volume lane -------------------------------------------------------
   It is 80px and behind .vol-disclose today. Keep the disclosure, but the lane
   must be OPEN by default whenever the Pen tool is the active tool, because the
   pen has nothing to act on otherwise. Set aria-expanded and the open class in
   app.js when the tool changes to pen. -------------------------------------- */

.vol-lane {
  height: 80px;
  cursor: crosshair;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: linear-gradient(0deg, rgba(122,76,173,0.12), rgba(122,76,173,0.12)), var(--timeline-canvas-bg);
}

.vol-head { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; }
.vol-disclose { background: transparent; border: 0; color: var(--fg); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.vol-chev { font-size: 12px; color: var(--fg-muted); width: 10px; }
.vol-hint { font-size: 13px; color: var(--fg-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vol-inline-hint { color: var(--fg-muted); font-size: 13px; margin-right: auto; }

.vol-key-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

/* ===========================================================================
   10. TRIM BAR
   =========================================================================== */

.trim-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }

.trim-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--fg-muted);
  min-width: 46px;
  flex: 0 0 auto;
}

.trim-bar {
  position: relative;
  flex: 1;
  height: 26px;
  border-radius: var(--r-sm);
  background: rgba(122, 76, 173, 0.28);     /* purple track, both themes */
  overflow: hidden;
}

.trim-range {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(232, 193, 105, 0.30);    /* gold selected span */
}

.trim-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gold-400);              /* #e8c169 */
  cursor: ew-resize;
}

/* ===========================================================================
   11. TRANSCRIPT
   =========================================================================== */

.seg-row { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.seg-row:hover { background: var(--surface-hover); }

.seg-gutter { font-family: var(--mono); font-size: 13px; color: var(--fg-muted); }
.seg-speaker { color: var(--fg-muted); font-size: 13px; }

/* a cut word: struck through and dimmed, never hidden */
.cut-word, .cut-word * {
  text-decoration: line-through;
  color: var(--fg-dim) !important;
  background: transparent !important;
}

/* the selected phrase: gold tint with a gold underline */
.seg-text .is-selected,
.seg-match {
  background: var(--accent-dim);
  border-bottom: 2px solid var(--accent);
  border-radius: 2px;
}

.seg-excluded { opacity: 0.7; }

.seg-badge {
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border: 1px solid var(--border);
  color: var(--fg-muted);
}

.transcript-legend { font-size: 13px; color: var(--fg-muted); }
.legend-chip { border-radius: var(--r-sm); font-size: 12px; font-weight: 600; }

/* Review proposals no longer paint the transcript as discarded speech. */
.filler-proposed-maybe, .filler-proposed-maybe *,
.filler-proposed-risky, .filler-proposed-risky * {
  color: inherit !important;
  background: transparent;
}
.filler-kept { border-bottom: 1px dotted var(--fg-dim); }

/* ===========================================================================
   12. RIGHT RAIL
   =========================================================================== */

.rail-sec {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);        /* 12px, was 14 */
  background: var(--surface);
  overflow: hidden;
  flex-shrink: 0;
}

.rail-head {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 12px;
  min-height: 48px;
  background: transparent;
  border: 0;
  width: 100%;
  cursor: pointer;
}
.rail-head:hover { background: var(--surface-hover); }

.rail-title {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--accent-text);         /* rail section eyebrows are brass */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-side > .rail-sec .rail-workspace-label,
.editor-side > .rail-sec .filler-state,
.editor-side > .rail-sec .publish-copy-source,
.editor-side > .rail-sec .soon-pill,
.editor-side > .rail-sec .type-ready {
  flex: 0 0 92px;
  min-width: 92px;
  max-width: 92px;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.rail-soon { font-size: 14px; color: var(--fg-muted); line-height: 1.55; }
.rail-note { font-size: 13px; color: var(--fg-muted); text-transform: none; letter-spacing: 0; font-weight: 400; }

/* ONE focused rail section — this is one of the three places --glow is legal */
.editor-side > .rail-sec.is-focused {
  border-color: var(--border-accent);
  background: var(--surface-focus);
  box-shadow: var(--glow);
}

.editor-side-title { font-size: 15px; font-weight: 700; color: var(--fg); }
.editor-why { font-size: 14px; color: var(--fg-muted); line-height: 1.6; }

.editor-scores { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
/* the virality number is brass and large; sub-scores are --fg at 14px */

/* ===========================================================================
   13. CAPTION STUDIO
   =========================================================================== */

.cap-studio { display: flex; flex-direction: column; gap: 10px; }
.cap-studio-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--accent-text); }
.cap-toggle { font-size: 13px; color: var(--fg-muted); }

.cap-presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }

.cap-preset {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.cap-preset:hover:not(.active) { background: var(--surface-hover); border-color: var(--border-hover); color: var(--fg); }
.cap-preset.active { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.cap-chip-name { font-size: 12px; font-weight: 600; }
.cap-chip-motion { font-size: 12px; }

.cap-ctl { font-size: 12px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }
.cap-val { color: var(--accent-text); font-weight: 700; }
.cap-seg-label, .cap-timing-label { font-size: 12px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }
.cap-note, .cap-edit-hint { font-size: 13px; color: var(--fg-muted); line-height: 1.45; }
.cap-subhead { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--fg-muted); }

/* this currently hard-codes rgba(0,0,0,0.35), which is wrong on a light rail */
.cap-seg-btns {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-strong);
}
.cap-seg-btns button {
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.cap-seg-btns button:hover:not(.active) { background: var(--surface-hover); color: var(--fg); }
.cap-seg-btns button.active { background: var(--accent); color: var(--accent-on); }

.cap-swatches { display: flex; gap: 8px; }
.cap-color input[type="color"] { border: 1px solid var(--border); border-radius: var(--r-sm); }
.cap-theme-del { border-radius: var(--r-sm); color: var(--fg-muted); }
.cap-theme-del:hover { background: var(--warning); color: var(--accent-on); }

/* ===========================================================================
   14. FILLER REVIEW
   =========================================================================== */

.filler-state { font-size: 13px; color: var(--fg-muted); }
.filler-counts { font-size: 13px; color: var(--fg-muted); }
.filler-count { font-weight: 700; color: var(--fg); }
.filler-confidence { font-weight: 800; color: var(--accent-text); }

.filler-filter {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.filler-filter:hover:not(.active) { background: var(--surface-hover); color: var(--fg); }
.filler-filter.active { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }

.filler-review-item { border: 1px solid var(--border); border-radius: var(--r-sm); background: transparent; }
.filler-review-item:hover { background: var(--surface-hover); border-color: var(--border-hover); }
.filler-review-kind { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); }
.filler-review-text { font-size: 14px; color: var(--fg); }
.filler-review-source, .filler-review-reason { font-size: 13px; color: var(--fg-muted); }
.filler-review-status { font-size: 13px; color: var(--success); }
.filler-explainer, .tool-info-popover { font-size: 13px; color: var(--fg-muted); background: var(--surface-strong); border-radius: var(--r-md); }
.tool-intro { font-size: 13px; color: var(--fg-muted); }
.tool-info-button { border: 1px solid var(--border-strong); color: var(--fg-muted); font: 700 12px var(--ui-font); }
.tool-info-button:hover, .tool-info-button[aria-expanded="true"] {
  border-color: var(--accent); background: var(--accent-dim); color: var(--accent-text);
}

/* ===========================================================================
   15. CUT POPOVER
   =========================================================================== */

.cut-popover {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-strong);
  box-shadow: 0 12px 32px rgba(12, 8, 15, 0.35);   /* a popover MAY float */
}
.cut-popover-title { font-size: 13px; font-weight: 700; color: var(--fg); }

/* ===========================================================================
   16. WHAT MUST CHANGE IN app.js

   a) CANVAS PAINT. All canvas colors read from tokens via timelinePaint().
      Confirm each of these token names is used, and correct the fallback:

        waveform bars        --accent                fallback #e8c169
        waveform baseline    --timeline-ruler        fallback rgba(240,210,138,.5)
        playhead             --fg                    fallback #f7f3fa
        cut region fill      --timeline-segment      fallback rgba(180,72,42,.35)
        cut region edge      --timeline-segment-border  fallback rgba(192,169,220,.55)
        keyframe dot fill    --accent                fallback #e8c169
        keyframe dot stroke  --accent-on             fallback #1c1420
        grid lines           --timeline-grid         fallback rgba(156,147,172,.22)
        lane labels          --timeline-label        fallback rgba(247,243,250,.32)

      Line 5484 still falls back to rgba(174,190,224,0.62) for
      --timeline-segment-border. That is the old blue-gray. Change it to
      rgba(192,169,220,0.55).

      Cache the getComputedStyle lookups once per draw call, not per element.

   b) VOLUME LANE OPEN WITH PEN. When the active tool becomes 'pen', open the
      volume disclosure (set the open class and aria-expanded="true" on
      .vol-disclose, reveal .vol-lane). When the tool changes away from pen,
      leave it as the user left it — do not force it closed.

   c) NO MEDIA FILTERS. Do not add filter, mix-blend-mode or opacity to
      #editor-player, any poster frame, the Render view, or the export path.

   =========================================================================== */

/* ===========================================================================
   17. VERIFY BEFORE PUSHING — do all six, and report each result

   1. grep app/ui/app.css for `color: var(--accent-text)` — every hit that sets TEXT
      must now be var(--accent-text). Report the list.
   2. grep for `font-size:` values below 12px in the editor region — there
      should be none except 11px on uppercase micro badges.
   3. grep for rgba(0,0,0, and rgba(255,255,255, in the editor rules — each is
      a theme-blind value. Replace with a token unless it is a scrim sitting on
      footage (.cap-box) or a canvas value.
   4. Confirm exactly one rule per selector for the list at the top of this file.
   5. Open the editor in light, dark, and system. The canvas stays dark in all
      three; the rail, transcript and transport follow the theme.
   6. Play a vertical clip. It must fill its box in the correct orientation, in
      full color, with no crop and no filter.

   Run the suite — the editor contracts are the largest group (timeline zoom,
   volume pen, trim, splice keyboard, responsive layout) plus the focus,
   contrast and appearance contracts.
   =========================================================================== */

/* ===========================================================================
   SCREEN REPAIR — detail source media and editor geometry
   =========================================================================== */
.detail-player-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 16px;
  background: var(--surface-strong);
  border-radius: var(--r-lg);
}
.detail-player-wrap.is-vertical,
.detail-player-wrap.is-native-vertical {
  /* The aspect helper used to turn the entire source card into a horizontal
     flex row, so the video was centered only in the right-hand remainder.
     Keep the card stacked; the rail body below centers the media against the
     full card width. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
}
.detail-player-wrap > .rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-bottom: 12px;
  padding: 0;
}
.detail-player-wrap > .rail-head .chev { display: none; }
.detail-player-wrap > .rail-head .rail-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-text);
  font-weight: 600;
}
.detail-player-wrap > .rail-head .rail-note { font-size: 13px; color: var(--fg-muted); }
.detail-player-wrap > .rail-body {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
}
.detail-player-playback-feedback {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--fg-muted);
  font-size: 13px;
}
.detail-player-playback-feedback[hidden] { display: none; }
.detail-player-playback-feedback[data-tone="error"] {
  color: var(--danger-text, #f4a3a3);
}
.detail-player-wrap video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 520px;
  margin: 0 auto;
  object-fit: contain;
}
.detail-player-wrap.is-vertical video,
.detail-player-wrap.is-native-vertical video {
  width: auto;
  height: 520px;
  max-width: 100%;
  max-height: 520px;
  aspect-ratio: 9 / 16;
  object-fit: contain;
}

.app-main:has(#screen-editor:not([hidden])) { max-width: none; padding: 20px 24px 16px; }
.editor-work {
  --editor-row: min(52vh, 560px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 310px;
  grid-template-rows: var(--editor-row) auto;
  gap: 14px;
  align-items: start;
  min-width: 0;
  min-height: max-content;
}
.editor-rail {
  grid-column: 3;
  grid-row: 1 / -1;
  align-self: stretch;
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 310px;
  min-width: 310px;
  min-height: 0;
  max-height: calc(100vh - 96px);
  contain: size;
  overflow-y: auto;
}
#editor-player {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  border-radius: var(--r-md);
  background: var(--stage-bg);
}
.player-wrap.is-vertical #editor-player,
.player-wrap.is-native-vertical #editor-player,
.player-wrap.is-vertical .editor-seam-player,
.player-wrap.is-native-vertical .editor-seam-player {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.tl-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  white-space: nowrap;
}
.tl-title, .tl-readout { flex: 0 0 auto; white-space: nowrap; }
.tl-zoom {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* WIDE-SCREEN LAYOUT — fluid content caps and comfortable reading measures */
.app-main > .screen { width: 100%; max-width: 1120px; margin: 0 auto; }
.app-main > #screen-detail { max-width: 1180px; }
.app-main > #screen-editor { max-width: none; margin: 0; }
@media (min-width: 1700px) {
  .app-main > .screen { max-width: 1400px; }
  .app-main > #screen-detail { max-width: 1460px; }
}
@media (min-width: 2100px) {
  .app-main > .screen { max-width: 1680px; }
  .app-main > #screen-detail { max-width: 1740px; }
}
@media (min-width: 2500px) {
  .app-main > .screen { max-width: 1920px; }
  .app-main > #screen-detail { max-width: 1980px; }
}
.projects-grid, .home-capabilities-grid, .clips-grid, .pub-cards {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.stats-row { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.hero-sub, .privacy-line, .home-capabilities-sub, .lrn-card-body p,
.editor-why, .pub-note, .highlights-policy { max-width: 78ch; }
.seg-text { max-width: 90ch; font-size: 16px; line-height: 1.85; color: var(--fg); }

/* FINAL WIDE-SCREEN CORRECTIONS — the shell is fluid; each reading screen
   owns its responsive cap and centers inside the main column. */
.app-main,
.app-main:has(#screen-detail:not([hidden])),
.app-main:has(#screen-editor:not([hidden])) {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

.app-main > :is(#screen-home, #screen-processing, #screen-projects,
  #screen-workspace, #screen-learn, #screen-brand, #screen-publish, #screen-analytics,
  #screen-calendar, #screen-detail, #screen-library, #screen-highlights,
  #screen-ideas, #screen-empty) {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}
.app-main > #screen-detail { max-width: 1180px; }
.app-main > #screen-editor { max-width: none; margin: 0; }
#screen-home.new-project-mode { margin: 0 auto; }

@media (min-width: 1700px) {
  .app-main > :is(#screen-home, #screen-processing, #screen-projects,
    #screen-workspace, #screen-learn, #screen-brand, #screen-publish, #screen-analytics,
    #screen-calendar, #screen-detail, #screen-library, #screen-highlights,
    #screen-ideas, #screen-empty) { max-width: 1400px; }
  .app-main > #screen-detail { max-width: 1460px; }
}
@media (min-width: 2100px) {
  .app-main > :is(#screen-home, #screen-processing, #screen-projects,
    #screen-workspace, #screen-learn, #screen-brand, #screen-publish, #screen-analytics,
    #screen-calendar, #screen-detail, #screen-library, #screen-highlights,
    #screen-ideas, #screen-empty) { max-width: 1680px; }
  .app-main > #screen-detail { max-width: 1740px; }
}
@media (min-width: 2500px) {
  .app-main > :is(#screen-home, #screen-processing, #screen-projects,
    #screen-workspace, #screen-learn, #screen-brand, #screen-publish, #screen-analytics,
    #screen-calendar, #screen-detail, #screen-library, #screen-highlights,
    #screen-ideas, #screen-empty) { max-width: 1920px; }
  .app-main > #screen-detail { max-width: 1980px; }
}

.drop-main { margin: 0; align-self: auto; text-align: center; }
.drop-hint { margin: 0; align-self: auto; text-align: center; }

/* The calendar is a full-height planning surface. Keep the controls at the
   top while the month grid consumes the remaining viewport. */
#screen-calendar {
  min-height: calc(100vh - var(--screen-topbar) - 92px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
#screen-calendar .cal-grid {
  flex: 1 1 auto;
  min-height: 0;
  grid-auto-rows: minmax(0, 1fr);
}
/* ===========================================================================
   Regalia — EXACT spec: Stage 4, the remaining screens
   Written against app/ui/app.css on branch regalia-palette @ d725be9.
   Every selector below is a real class from that file.

   PLACEMENT: append AFTER every existing rule in app.css, including the earlier
   Regalia blocks. When done, exactly ONE rule per selector for everything named
   here — merge and delete duplicates. This is the same instruction as every
   prior stage and it is where each prior stage went wrong.

   Covers: the rename affordances, Processing, Projects, Client workspace,
   Media Library, Learn, Publish, Calendar, Highlights/Campaign, Ideas,
   the modals and the Settings dialog.
   =========================================================================== */

/* ===========================================================================
   0. THE RENAME AFFORDANCES — a design problem, not a styling one.

   There are currently THREE ways to rename a project:
     a) click the detail title       (.detail-title-editable)
     b) an inline link on each card  (card rename link)
     c) the project menu             (#btn-rename)

   Three affordances for one action is why it reads as clutter. Reduce to two,
   each appropriate to its surface:

     - ON DETAIL: the title is editable in place. This is right — a detail
       screen is where you work on one thing. But the affordance must be a
       hover-revealed pencil in the title row, NOT a 2px outline floating 4px
       off the heading.
     - FROM A CARD OR A LIST ROW: rename lives in the overflow menu only. A card
       is for choosing, not editing. DELETE the inline card rename link link
       entirely — remove it from the markup, not just the CSS.

   =========================================================================== */

/* the detail title: inline-editable, with a quiet pencil that appears on hover */
.detail-title-editable {
  cursor: text;
  border-radius: var(--r-sm);
  outline: none;                       /* kill the floating outline box */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.detail-title-editable::after {
  content: "✎";
  font-size: 15px;
  color: var(--fg-dim);
  opacity: 0;
  transition: opacity 120ms ease;
}
.detail-title-editable:hover::after { opacity: 1; }

/* only KEYBOARD focus gets a ring, and it hugs the text */
.detail-title-editable:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

/* when it becomes an input, it keeps the title's size and weight */
.detail-title-input {
  font: inherit;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
  padding: 2px 8px;
  border: 1px solid var(--border-accent);
  border-radius: var(--r-sm);
  background: var(--surface);
  width: 100%;
  max-width: 640px;
}
.detail-title-input:focus { outline: none; border-color: var(--accent); }

/* DELETE card rename link and card rename input from cards. Renaming from
   a card goes through the overflow menu. */

/* card titles clamp to TWO lines and reserve no empty height ------------- */
.project-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 0;                       /* was 3.45em — reserved 3 empty lines */
}
/* cards stay even height via the grid, not via reserved title space: */
.project-card, .clip-card, .pub-card { display: flex; flex-direction: column; }
.project-card-meta, .clip-card-meta { margin-top: auto; }

.project-menu-item { border-radius: var(--r-sm); font-size: 14px; color: var(--fg); }
.project-menu-item:hover { background: var(--surface-hover); }
.project-menu-danger { color: var(--warning); }
.project-menu-danger:hover { background: rgba(180, 72, 42, 0.12); }

/* ===========================================================================
   1. THE WORKSPACE NAMING CARD — a 5-column form is too dense to read.
      Two rows of labelled fields instead of one crammed line.
   =========================================================================== */

.workspace-naming-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: var(--s-mod);               /* 28 */
}

.workspace-naming-help { margin: 4px 0 14px; color: var(--fg-muted); font-size: 14px; line-height: 1.5; }

.workspace-naming-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 12px;
  align-items: end;                    /* labels stack above inputs, bottoms align */
}
/* each field is a label + input stacked, so the row is readable at any width */
.workspace-naming-fields > label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.workspace-naming-status { grid-column: 1 / -1; min-height: 18px; color: var(--success); font-size: 13px; }

/* ===========================================================================
   2. CLIENT WORKSPACE — remove the arbitrary vertical offsets
   =========================================================================== */

.workspace-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding: 0;
  margin: 0 0 var(--s-mod);
}

/* was margin-top: 30px to fake alignment — align to the baseline instead */
.workspace-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  align-self: flex-start;
  flex: 0 0 auto;
}

.workspace-head .eyebrow {
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.workspace-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 var(--s-sec); }

.workspace-pulse { margin: 0 0 var(--s-sec); }
.workspace-pulse-head { margin: 0 0 var(--s-5); }
.workspace-pulse-links { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.workspace-pulse-link { color: var(--accent-text); text-decoration: none; }
.workspace-pulse-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.workspace-pulse-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.workspace-pulse-card {
  min-width: 0; min-height: 112px; display: flex; flex-direction: column; gap: 7px;
  padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface);
}
.workspace-pulse-card strong { color: var(--fg); font-size: 15px; line-height: 1.25; }
.workspace-pulse-card p { margin: 0; color: var(--fg-muted); font-size: 12px; line-height: 1.45; }
.workspace-pulse-card-link { display: inline-block; margin-top: var(--s-3); color: var(--accent-text); font-size: 12px; text-decoration: none; }
.workspace-pulse-card-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.workspace-pulse-label { color: var(--accent-text); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.workspace-pulse-prompt { border-color: var(--border-accent); background: var(--surface-focus); }
.planner-policy {
  max-width: 980px; margin: 0 0 var(--s-5); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-accent); border-radius: var(--r-md);
  color: var(--fg-dim); background: var(--accent-dim); font-size: 13px; line-height: 1.5;
}
.planner-layout { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: var(--s-5); max-width: 1060px; align-items: start; }
.planner-form-card, .planner-result, .planner-history { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.planner-form-card { display: grid; gap: var(--s-4); padding: var(--s-5); }
.planner-form-card .section-hint { margin-top: calc(var(--s-1) * -1); }
.planner-form-card .cap-ctl { display: grid; gap: var(--s-2); }
.planner-form-card textarea { resize: vertical; min-height: 96px; }
.planner-deadline { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--border); }
.planner-field-label { color: var(--fg-muted); font-size: 12px; font-weight: 700; }
.planner-field-note { color: var(--fg-dim); font-family: var(--mono); font-size: 11px; font-weight: 400; }
.planner-deadline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.planner-deadline .btn { justify-self: start; }
.planner-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.planner-actions .btn { flex: 1 1 150px; text-align: center; }
.planner-provider-note { margin: calc(var(--s-2) * -1) 0 0; color: var(--fg-dim); font-size: 11px; line-height: 1.45; }
.planner-status { min-height: 18px; margin: 0; color: var(--fg-dim); font-size: 12px; }
.planner-status.busy { color: var(--accent-text); }
.planner-status.err { color: var(--warning); }
.planner-result { min-height: 320px; padding: var(--s-5); }
.planner-empty { display: grid; gap: var(--s-2); color: var(--fg-dim); font-size: 13px; line-height: 1.5; }
.planner-empty strong { color: var(--fg); font-size: 15px; }
.planner-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); border-bottom: 1px solid var(--border); padding-bottom: var(--s-4); }
.planner-result-kicker, .planner-history .section-title { color: var(--accent-text); font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.planner-result-title { margin-top: var(--s-2); color: var(--fg); font-size: 17px; font-weight: 700; line-height: 1.3; }
.planner-result-meta { color: var(--fg-dim); font-size: 12px; line-height: 1.45; }
.planner-local-badge { flex-shrink: 0; border: 1px solid var(--border-accent); border-radius: var(--r-pill); padding: var(--s-1) var(--s-2); color: var(--accent-text); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.planner-prompts { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.planner-prompt { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-hover); }
.planner-prompt-number { color: var(--accent-text); font-family: var(--mono); font-size: 12px; font-weight: 700; }
.planner-prompt-text { color: var(--fg); font-size: 13px; line-height: 1.45; }
.planner-prompt-note { margin-top: var(--s-1); color: var(--fg-dim); font-size: 12px; line-height: 1.4; }
.planner-result-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.planner-history { max-width: 1060px; margin-top: var(--s-5); padding: var(--s-5); }
.planner-history .section-head { margin-bottom: var(--s-3); }
.planner-history-list { display: grid; gap: var(--s-2); }
.planner-history-item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--fg); }
.planner-history-item strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.planner-history-item span { color: var(--fg-dim); font-size: 12px; }
.planner-history-empty { color: var(--fg-dim); font-size: 13px; }
@media (max-width: 760px) {
  .planner-layout { grid-template-columns: 1fr; }
  .workspace-pulse-links { width: 100%; }
}

.workspace-projects-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}

.workspace-toolbar { margin-bottom: var(--s-5); }

.workspace-picker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);          /* was 11px */
  background: var(--surface);
}
.workspace-picker-label { color: var(--fg-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

.workspace-empty { display: grid; place-items: center; min-height: 220px; color: var(--fg-muted); font-size: 14px; }
.workspace-close { margin-left: auto; border: 0; background: transparent; color: var(--fg-muted); font: 600 12px var(--ui-font); cursor: pointer; }
.workspace-close:hover { color: var(--fg); }

/* ===========================================================================
   3. PROCESSING
   =========================================================================== */

.proc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-mod); align-items: start; }

.proc-timeline {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  padding: var(--s-5);
}

.stage-row:last-child { border-bottom: 0; }

.stage-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; color: var(--fg-muted); flex: 0 0 auto; }
.stage-row.is-done .stage-icon { border-color: var(--success); color: var(--success); }
.stage-row.is-active .stage-icon { border-color: var(--accent); color: var(--accent-text); }

.stage-label { flex: 1; font-size: 14px; font-weight: 600; color: var(--fg); }   /* was --fg-dim */
.stage-note { font-size: 13px; color: var(--fg-muted); }
.stage-meta { display: flex; gap: 10px; font-family: var(--mono); font-size: 13px; color: var(--fg-muted); }
.stage-cost { color: var(--accent-text); }

.proc-side { display: flex; flex-direction: column; gap: 12px; }

.proc-stat { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: 16px; }
.proc-stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-muted); font-weight: 600; }
.proc-stat-value { font-size: 24px; font-weight: 700; font-family: var(--mono); margin-top: 3px; color: var(--fg); font-variant-numeric: tabular-nums; }
/* the cost stat is the emphasized one */
.proc-stat.is-cost { border-color: var(--border-accent); }
.proc-stat.is-cost .proc-stat-value { color: var(--accent-text); }

.proc-log-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-muted); font-weight: 600; }
.proc-log {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-strong);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  max-height: 220px;
  overflow-y: auto;
  padding: 12px;
  color: var(--fg-muted);
}
.proc-log .is-latest { color: var(--accent-text); }
.proc-doneline { font-size: 14px; color: var(--success); }

/* ===========================================================================
   4. MEDIA LIBRARY + all data tables
   =========================================================================== */

.lib-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }

.lib-table thead th {
  background: var(--surface-strong);
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

.lib-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
.lib-table tbody tr:last-child td { border-bottom: 0; }
.lib-table tbody tr:hover { background: var(--surface-hover); }

.lib-proj-link { color: var(--accent-text); cursor: pointer; font-weight: 600; }
.lib-proj-link:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* remove the hard caps so tables and lists reflow on wide screens */
.lib-table, .queue-list, .highlights-list, .pub-queue, .lrn-list,
.highlights-bar, .highlights-schedule-bar { max-width: none; }
.lrn-list { max-width: 860px; }    /* long-form reading is the ONE exception */

/* ===========================================================================
   5. LEARN
   =========================================================================== */

.lrn-section-title { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }

.lrn-list { display: flex; flex-direction: column; gap: 10px; }

.lrn-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 14px 16px;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.lrn-card:hover { border-color: var(--border-hover); background: var(--surface-hover); }

/* the open card is one of the three places --glow is legal */
.lrn-card[open] {
  border-color: var(--border-accent);
  background: var(--surface-focus);
  box-shadow: var(--glow);
  padding: 20px;
}

.lrn-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.lrn-card[open] .lrn-eyebrow {
  border-color: var(--border-accent);
  background: var(--accent-dim);
  color: var(--accent-text);
}

.lrn-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); }
.lrn-card[open] .lrn-title { font-size: 18px; }
.lrn-teaser { font-size: 14px; color: var(--fg-muted); }
.lrn-body { font-size: 15px; line-height: 1.65; color: var(--fg-muted); max-width: 78ch; }
.lrn-body strong { color: var(--fg); }

/* ===========================================================================
   6. PUBLISH & SCHEDULE
   =========================================================================== */

/* the approval note is a RULE — body text is --fg, not muted */
.pub-note {
  border: 1px solid var(--brand);
  border-radius: var(--r-md);
  background: linear-gradient(0deg, var(--brand-dim), var(--brand-dim)), var(--surface);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
  padding: 13px 16px;
}
.pub-note strong { color: var(--fg-strong); }

.pub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }

.pub-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 16px;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.pub-card:hover { border-color: var(--border-hover); background: var(--surface-hover); }

.pub-logo {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  flex: 0 0 auto;
  font-weight: 700;
}
/* platform brand colors are deliberately NOT themed — leave .pub-logo.yt/.tt/
   .ig/.fb/.li/.x exactly as they are */

.pub-name { font-size: 15px; font-weight: 700; color: var(--fg); }
.pub-sub { font-size: 13px; color: var(--fg-muted); }

.pub-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-muted); white-space: nowrap; }
.pub-status span { width: 6px; height: 6px; border-radius: 999px; background: var(--fg-dim); flex: 0 0 auto; }
.pub-status.is-connected { color: var(--success); }
.pub-status.is-connected span { background: var(--success); box-shadow: 0 0 8px var(--success); }

.pub-queue { display: flex; flex-direction: column; gap: 8px; }

.pub-queue-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 12px 14px;
}
.pub-queue-item:hover { background: var(--surface-hover); border-color: var(--border-hover); }

.pub-q-date { font-size: 13px; color: var(--fg-muted); min-width: 132px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.pub-q-plat { font-size: 13px; color: var(--fg-muted); min-width: 96px; flex-shrink: 0; }
.pub-q-clip { flex: 1; min-width: 0; font-size: 14px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-q-state {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border: 1px solid var(--border); border-radius: var(--r-pill);
  color: var(--fg-muted); white-space: nowrap; flex-shrink: 0;
}
.pub-q-state.is-scheduled { border-color: var(--border-accent); background: var(--accent-dim); color: var(--accent-text); }
.pub-q-state.is-published { border-color: var(--success); color: var(--success); }
.pub-q-note { font-size: 13px; color: var(--fg-muted); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===========================================================================
   7. CALENDAR — hairline rules between cells, not a 6px gap
   =========================================================================== */

.cal-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cal-title { font-size: 17px; font-weight: 700; min-width: 180px; text-align: center; color: var(--fg); }
.cal-hint { font-size: 13px; color: var(--fg-muted); margin-left: auto; }

.cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding-bottom: 8px;
}

/* the grid background IS the rule colour — 1px gaps become hairlines */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.cal-day {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  min-height: 104px;
  padding: 8px;
  background: var(--surface);
  border: 0;
}
.cal-day:hover { background: var(--surface-hover); }
.cal-day.is-outside { background: var(--surface-strong); }
.cal-day.is-today { box-shadow: inset 0 0 0 2px var(--accent); }

.cal-num { font-size: 12px; font-weight: 700; color: var(--fg-muted); font-family: var(--mono); }
.cal-day.is-today .cal-num { color: var(--accent-text); }

.cal-entry {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border: 0;
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--accent-dim);
  font-size: 12px;
  color: var(--fg);
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.cal-entry:hover { background: var(--accent); color: var(--accent-on); }
.cal-entry:hover .cal-plat, .cal-entry:hover .cal-time { color: var(--accent-on); }
.cal-entry-state { width: 6px; height: 6px; border-radius: 999px; background: var(--fg-dim); flex-shrink: 0; }
.cal-entry.is-published .cal-entry-state { background: var(--success); }
.cal-plat { font-size: 11px; font-weight: 700; color: var(--accent-text); flex-shrink: 0; }
.cal-entry-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-time { font-size: 11px; color: var(--fg-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.cal-day-count, .cal-agenda { display: none; }

@media (max-width: 720px) {
  #screen-calendar { min-height: auto; }
  #screen-calendar .cal-grid { flex: none; grid-auto-rows: 48px; }
  .cal-bar { flex-wrap: wrap; justify-content: center; }
  #screen-calendar :is(#cal-prev, #cal-next) {
    width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0;
  }
  .cal-title { flex: 1 1 auto; min-width: 0; }
  .cal-hint { flex: 1 0 100%; order: 2; margin-left: 0; text-align: center; }
  .cal-dow span { padding: 0; text-align: center; }
  .cal-day { position: relative; min-height: 48px; height: 48px; padding: 6px; gap: 0; }
  /* Desktop date cells can contain separate entry buttons. Those entries move
     into the mobile agenda, so the remaining plan action can safely own the
     entire visible date cell for touch, keyboard focus, and voice targeting. */
  .cal-day > .cal-day-add {
    position: absolute; inset: 0; z-index: 1;
    display: flex; align-items: flex-start; justify-content: flex-start;
    width: 100%; height: 100%; padding: 6px;
    border-radius: 0;
  }
  .cal-day > .cal-day-add:focus-visible {
    outline: 2px solid var(--accent); outline-offset: -3px;
  }
  .cal-day > .cal-entry { display: none; }
  .cal-day-count {
    position: absolute; right: 5px; bottom: 5px; z-index: 2;
    display: grid; place-items: center; pointer-events: none;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    background: var(--accent-dim); color: var(--accent-text); font-size: 10px; font-weight: 800;
  }
  .cal-agenda { display: block; margin-top: 22px; }
  .cal-agenda-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding-bottom: 10px;
  }
  .cal-agenda-list { display: grid; gap: 8px; }
  .cal-agenda-item {
    display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center;
    gap: 11px; width: 100%; padding: 12px; border: 1px solid var(--border);
    border-left: 3px solid var(--accent); border-radius: var(--r-md);
    background: var(--surface); color: var(--fg); text-align: left; cursor: pointer;
  }
  .cal-agenda-item:hover, .cal-agenda-item:focus-visible {
    border-color: var(--border-accent); background: var(--surface-hover); outline: none;
  }
  .cal-agenda-item:disabled { cursor: default; opacity: .68; }
  .cal-agenda-date, .cal-agenda-body { display: grid; gap: 2px; min-width: 0; }
  .cal-agenda-date strong { color: var(--accent-text); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
  .cal-agenda-date span, .cal-agenda-body span { color: var(--fg-muted); font-size: 12px; }
  .cal-agenda-body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  .cal-agenda-state { color: var(--fg-muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
  .cal-agenda-item.is-approved .cal-agenda-state,
  .cal-agenda-item.is-published .cal-agenda-state { color: var(--success); }
  .cal-agenda-item.is-blocked .cal-agenda-state { color: var(--warning); }
  .cal-agenda-empty {
    padding: 18px; border: 1px dashed var(--border); border-radius: var(--r-md);
    color: var(--fg-muted); font-size: 13px; line-height: 1.5; text-align: center;
  }
}

/* Seven date columns need 308 CSS pixels to remain true 44px targets. At the
   narrowest supported phone width, let the calendar use that bounded width
   and draw its hairlines on the cells instead of spending six pixels on grid
   gaps. The rest of the route keeps the normal mobile page inset. */
@media (max-width: 360px) {
  #screen-calendar .cal-dow,
  #screen-calendar .cal-grid {
    width: 308px; max-width: calc(100vw - 12px); align-self: center;
  }
  #screen-calendar .cal-dow,
  #screen-calendar .cal-grid { gap: 0; }
  #screen-calendar .cal-grid {
    border: 0; box-shadow: inset 0 0 0 1px var(--border);
  }
  #screen-calendar .cal-day {
    box-shadow: inset -1px -1px 0 var(--border);
  }
  #screen-calendar .cal-day.is-today {
    box-shadow: inset 0 0 0 2px var(--accent), inset -1px -1px 0 var(--border);
  }
}

/* ===========================================================================
   8. CAMPAIGN STUDIO / HIGHLIGHTS
   =========================================================================== */

.highlights-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 16px; }

/* the QC policy is a RULE — --fg body text */
.highlights-policy {
  border: 1px solid var(--brand);
  border-radius: var(--r-md);
  background: linear-gradient(0deg, var(--brand-dim), var(--brand-dim)), var(--surface);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
  padding: 13px 16px;
  max-width: 78ch;
}

.highlights-schedule-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin: 0 0 var(--s-5);
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.highlights-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }

.highlights-campaign-note {
  grid-column: 1 / -1;
  padding: 13px 16px;
  border: 1px solid var(--border-accent);
  border-radius: var(--r-md);
  background: var(--surface-focus);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
}

.idea-num { color: var(--accent-text); font-weight: 700; margin-right: 7px; font-variant-numeric: tabular-nums; }

/* ===========================================================================
   9. MODALS + SETTINGS
   =========================================================================== */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: var(--scrim); backdrop-filter: blur(2px);
  overscroll-behavior: contain;
}
.modal-box {
  width: min(660px, calc(100vw - 48px));
  max-height: 84vh; overflow: hidden; overscroll-behavior: contain;
  display: flex; flex-direction: column; scrollbar-gutter: stable;
  padding: 24px 26px; border: 1px solid var(--border-strong);
  border-radius: var(--r-xl); background: var(--surface);
  box-shadow: var(--ui-card-shadow);
}
/* Legacy contract marker: #settings-modal .modal-box { max-width: 780px; } */
#settings-modal .modal-box { width: min(780px, calc(100vw - 48px)); }
#settings-modal.hosted-settings .modal-box {
  width: min(1040px, calc(100vw - 48px));
  height: min(720px, calc(100dvh - 48px));
  max-height: none;
}
#settings-modal.hosted-settings .modal-body {
  display: flex;
  min-height: 0;
  overflow: hidden;
}
.hosted-settings-shell { flex: 1; min-width: 0; min-height: 0; }
.hosted-settings-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-strong);
}
.hosted-settings-mobile-picker { display: none; }
.hosted-settings-nav {
  min-width: 0;
  overflow-y: auto;
  padding: 14px 12px;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}
.hosted-settings-nav-label {
  margin: 14px 10px 5px;
  color: var(--fg-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.hosted-settings-nav-label:first-child { margin-top: 3px; }
.hosted-settings-nav [role="tab"] {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 38px;
  margin: 1px 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-muted);
  font: 600 13px/1.25 var(--ui-font);
  text-align: left;
  cursor: pointer;
}
.hosted-settings-nav [role="tab"]:hover { background: var(--surface-hover); color: var(--fg); }
.hosted-settings-nav [role="tab"][aria-selected="true"] {
  border-color: var(--border-accent);
  background: var(--accent-dim);
  color: var(--accent-text);
}
.hosted-settings-nav [role="tab"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.hosted-settings-content {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(22px, 3vw, 36px);
  background: var(--surface);
}
.hosted-settings-panel { max-width: 710px; margin: 0 auto; }
.hosted-settings-eyebrow {
  margin-bottom: 7px;
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hosted-settings-panel h3 { margin: 0; color: var(--fg); font-size: clamp(21px, 2.5vw, 28px); line-height: 1.15; letter-spacing: -.025em; }
.hosted-settings-intro { max-width: 65ch; margin: 10px 0 24px; color: var(--fg-muted); font-size: 14px; line-height: 1.6; }
.hosted-settings-card-list {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-strong);
}
.hosted-settings-row,
.hosted-settings-control-row,
.hosted-settings-plan-card,
.hosted-settings-account-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 17px 18px;
  color: var(--fg);
}
.hosted-settings-row + .hosted-settings-row,
.hosted-settings-control-row + .hosted-settings-control-row { border-top: 1px solid var(--border); }
.hosted-settings-row > div,
.hosted-settings-control-row > span,
.hosted-settings-plan-card > div,
.hosted-settings-account-card > div { flex: 1; min-width: 0; }
.hosted-settings-row strong,
.hosted-settings-control-row strong,
.hosted-settings-plan-card strong,
.hosted-settings-account-card strong { display: block; color: var(--fg); font-size: 14px; line-height: 1.35; }
.hosted-settings-row div > span,
.hosted-settings-control-row small,
.hosted-settings-plan-card div > span,
.hosted-settings-account-card div > span { display: block; margin-top: 4px; color: var(--fg-muted); font-size: 12px; line-height: 1.5; }
.hosted-settings-control-row { cursor: pointer; }
.hosted-settings-control-row select { flex: 0 0 min(210px, 40%); min-width: 0; }
.hosted-settings-state {
  flex: 0 0 auto;
  max-width: 180px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.hosted-settings-state.is-ready { border-color: var(--border-accent); background: var(--accent-dim); color: var(--accent-text); }
.hosted-settings-plan-card,
.hosted-settings-account-card {
  border: 1px solid var(--border-accent);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--accent-dim), transparent 72%), var(--surface-strong);
}
.hosted-settings-avatar {
  display: grid;
  flex: 0 0 42px !important;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--border-accent);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 800;
}
.hosted-settings-boundary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 14px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-strong);
  font-size: 12px;
  line-height: 1.5;
}
.hosted-settings-boundary strong { color: var(--accent-text); }
.hosted-settings-boundary span { color: var(--fg-muted); }
#settings-modal.hosted-settings .modal-actions { margin-top: 14px; }
.settings-desktop-content { min-width: 0; }
.modal-narrow { width: min(440px, calc(100vw - 48px)); }
.modal-wide { width: min(880px, calc(100vw - 48px)); }
.modal-box > h2 { flex: 0 0 auto; margin: 0; color: var(--fg); font-size: 19px; line-height: 1.25; font-weight: 700; }
.modal-sub { flex: 0 0 auto; margin: 6px 0 0; color: var(--fg-muted); font-size: 14px; line-height: 1.45; white-space: normal; overflow: visible; text-overflow: clip; }
.modal-message { flex: 0 0 auto; margin: 6px 0 0; color: var(--fg-muted); font-size: 14px; line-height: 1.45; }
.modal-box > :not(.modal-body) { flex: 0 0 auto; }
.modal-box > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.modal-box > :not(h2):not(.modal-sub):not(.modal-actions):not(.modal-action-status) { min-width: 0; }
.modal-box .shortcut-fixed, .modal-box .text-modal-body { max-height: 68vh; overflow-y: auto; }
.modal-action-status { flex: 0 0 auto; color: var(--warning); font-size: 13px; line-height: 1.4; margin: 12px 0 0; }
.modal-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: var(--s-5); }
.modal-actions .modal-spacer { margin-right: auto; }

.set-section { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 18px; }
.set-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.set-section > h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 6px;
}
.set-note { margin: 4px 0 12px; font-size: 14px; color: var(--fg-muted); line-height: 1.55; }
.set-hint { font-size: 13px; color: var(--fg-muted); margin-top: 4px; }
.set-provider-state { color: var(--warning); }
.local-provider-prep { display: grid; gap: var(--s-2); margin-top: var(--s-2); color: var(--fg-muted); font-size: 13px; }
.local-provider-prep-head { display: flex; align-items: center; gap: var(--s-2); }
.local-provider-prep-head span { min-width: 0; flex: 1; }
.local-provider-prep progress { width: 100%; accent-color: var(--brand); }
.local-provider-error { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-2); color: var(--warning); font-size: 13px; line-height: 1.45; }
.local-provider-error span { flex: 1; min-width: 0; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 10px; }
.set-field { margin-bottom: 12px; }
.set-field > label,
.set-field > .set-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 5px;
}
.set-toggles { display: flex; flex-wrap: wrap; gap: 12px 18px; }

/* a "Set" badge next to a filled key */
.key-state {
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fg-muted);
}
.key-state.is-set { border-color: var(--border-accent); background: var(--accent-dim); color: var(--accent-text); }

/* this uses rgba(255,255,255,0.025) — invisible in light, wrong in both */
.oauth-provider-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-strong);
  overflow: hidden;
}
.oauth-provider-card summary { padding: 12px 14px; cursor: pointer; font-size: 14px; color: var(--fg); }
.oauth-provider-card summary:hover { background: var(--surface-hover); }
.oauth-provider-card summary small { color: var(--fg-muted); font-size: 13px; }
.oauth-provider-fields { border-top: 1px solid var(--border); }
.oauth-help {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.55;
  padding: 11px 12px;
}
.oauth-help-button { color: var(--fg-muted); font: 600 13px/1.2 var(--ui-font); }
.oauth-help-button:hover { color: var(--accent-text); }
.oauth-connection-row { border-top: 1px solid var(--border); }

/* ===========================================================================
   10. DETAIL OUTPUT SUMMARY
   =========================================================================== */

.detail-output-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--s-5); }

.detail-output-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  white-space: nowrap;
}
.detail-output-stat strong { font-size: 16px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.detail-output-stat span { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }
.detail-output-stat.is-primary { border-color: var(--border-accent); }
.detail-output-stat.is-primary strong { color: var(--accent-text); }
.detail-output-stat.is-warning { border-color: var(--danger-border, #9b5a4f); }
.detail-output-stat.is-warning strong { color: var(--danger-text, #e08a76); }
.detail-output-action { cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.detail-output-action:hover,
.detail-output-action:focus-visible { border-color: var(--border-accent); background: var(--surface-hover); outline: none; }

/* ===========================================================================
   11. HALF-PIXEL TYPE SIZES — remove them. The scale has no .5 steps.

   These currently exist and must be rounded to the nearest scale step:
     13½px → 14px   (.project-title in list mode, .set-note,
                      #screen-editor .detail-actions > .btn, .seg-text base)
     12½px → 13px   (.oauth-help, .set-hint)
     11½px → 13px   (any remaining)
     10½px → 12px   (any remaining)

   grep for half-pixel font sizes in app/ui/app.css and fix every hit. Report the list.
   =========================================================================== */

/* ===========================================================================
   12. VERIFY BEFORE PUSHING — do all seven and report each

   1. grep for half-pixel font sizes — zero hits.
   2. grep for `rgba(255,255,255,` and `rgba(0,0,0,` in screen rules — each is
      theme-blind. Replace with a token unless it is a scrim over footage or a
      canvas value.
   3. grep for `color: var(--accent)` used as TEXT — must be --accent-text.
   4. Confirm one rule per selector for everything named in this file.
   5. Confirm card rename link is GONE from both the CSS and the markup, and
      that Rename still works from the project menu and from the detail title.
   6. Walk all twelve screens in light, dark and system. Nothing illegible,
      nothing overlapping, no element still carrying an old color.
   7. Drag the window 1280px → full width. Grids add columns; no dead bands; no
      paragraph runs past ~80 characters.

   Run the full suite, including the two new naming contracts
   (test_project_title_edit_scope_contract.py,
   test_workspace_project_naming_contract.py) and the appearance, focus and
   contrast contracts.
   =========================================================================== */

/* ===== Stage 4 corrective geometry ===== */
.drop-zone {
 width: 100%;
 max-width: none;
 min-height: 194px;
 margin: 16px 0 0;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 padding: 44px;
 box-sizing: border-box;
 border: 2px dashed var(--border-accent);
 border-radius: var(--r-lg);
 background: linear-gradient(0deg, var(--brand-dim), var(--brand-dim)), var(--surface);
 box-shadow: none;
 gap: 10px;
}

.drop-icon {
 width: 48px;
 height: 48px;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0;
 padding: 0;
 line-height: 0;
 flex: 0 0 auto;
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 background: var(--surface);
 color: var(--accent-text);
}
.drop-icon .ui-icon,
.drop-icon svg {
 width: 22px;
 height: 22px;
 display: block;
 margin: 0;
}

/* Processing card refinement: one cohesive surface, with status rows acting
   as content rather than a stack of separate white bars. */
.proc-timeline {
  border-color: var(--border-accent);
  background: linear-gradient(135deg, var(--surface), var(--brand-dim));
  padding: 22px 24px;
}
.stage-row + .stage-row { margin-top: 4px; }
.stage-row.is-active { background: var(--accent-dim); }
.stage-row.is-error { background: var(--surface-strong); }
.stage-icon { width: 30px; height: 30px; }
.stage-label { min-width: 0; }
.stage-meta { margin-left: auto; padding-right: 8px; flex: 0 0 auto; }

/* Project actions need room for both the action name and its explanation.
   Let the explanation wrap inside a wider menu instead of clipping at the
   right edge. */
.project-more-menu {
  width: min(460px, calc(100vw - 24px));
  padding: 9px;
}
.project-menu-item {
  min-height: 52px;
  padding: 10px 9px;
  gap: 20px;
}
.project-menu-item > span {
  flex: 0 1 auto;
  min-width: 0;
}
.project-menu-item small {
  color: var(--fg-muted);
  flex: 1 1 180px;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
  text-align: right;
}

.editor-dock {
  grid-column: 1 / 3;
  grid-row: 2;
  min-width: 0;
  align-self: start;
  overflow: hidden;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.editor-dock #tl-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* Keep the transition lane and the picture/waveform lane on one shared
   editorial grid. The old transition row reserved a label column that the
   video lane did not have, which made the two tracks look disconnected. */
.editor-dock .tl-transition-lane {
  position: relative;
  display: block;
  min-height: 48px;
  margin: 0 24px 7px;
  padding-top: 16px;
  border: 0;
  background: transparent;
}
.editor-dock .tl-transition-label {
  position: absolute;
  top: 0;
  left: 2px;
  padding: 0;
  color: var(--fg-dim);
  font-size: 9px;
  line-height: 12px;
  letter-spacing: .1em;
}
.editor-dock .tl-transition-track {
  min-height: 31px;
  margin: 0;
  border-color: var(--border-strong);
  border-radius: var(--r-sm);
}
.editor-dock .tl-lane {
  margin: 0 24px;
}
@media (max-width: 700px) {
  .editor-dock .tl-transition-lane,
  .editor-dock .tl-lane { margin-left: 10px; margin-right: 10px; }
}

/* Responsive collapse: keep the rail and timeline full-width below the
   three-column breakpoint. */
@media (max-width: 1240px), (max-height: 820px) {
  .editor-work {
    grid-template-columns: minmax(240px, 300px) minmax(320px, 1fr);
    grid-template-rows: auto auto auto;
  }
  .editor-main { grid-column: 1; grid-row: 1; height: auto; }
  .editor-script { grid-column: 2; grid-row: 1; max-height: none; }
  .transport { flex-wrap: wrap; gap: 8px; overflow: hidden; }
  .transport .tp-spacer { display: none; }
  .transport #tp-mute { order: 1; }
  .transport .tp-rate { order: 2; min-width: 0; }
  .transport .render-playback-status {
    order: 2; flex: 1 1 100px; min-width: 0; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis;
  }
  .editor-rail {
    grid-column: 1 / -1;
    grid-row: 2;
    position: static;
    contain: none;
    width: auto;
    min-width: 0;
    max-height: none;
  }
  .editor-dock { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 900px) {
  .editor-work {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
  }
  .editor-main { grid-column: 1; grid-row: 1; }
  .editor-script {
    grid-column: 1;
    grid-row: 2;
    height: auto;
    min-height: 0;
    max-height: 70vh;
  }
  .editor-rail { grid-column: 1; grid-row: 3; }
  .editor-dock { grid-column: 1; grid-row: 4; }
}
@media (max-width: 600px) {
  .transport { flex-wrap: wrap; gap: 8px; }
  .transport .tp-time { min-width: 90px; }
  .transport .tp-spacer { display: none; }
  .transport .tp-rate { order: 2; }
  .transport .render-playback-status {
    order: 3; min-width: 0; max-width: 100%; margin-left: auto;
    overflow: hidden; text-overflow: ellipsis;
  }
  /* Mobile editor primary controls need a real finger target without
     enlarging the compact desktop NLE. Keep this scoped to the editor so
     secondary tool panels can retain their denser editing rhythm. */
  #screen-editor .editor-back,
  #screen-editor .editor-clip-nav .editor-step,
  #screen-editor .editor-approval-control .clip-status,
  #screen-editor .editor-toolbar-primary > .btn,
  #screen-editor .editor-toolbar-primary > .editor-more-wrap > .btn {
    min-height: 44px;
  }
  #screen-editor .transport .tp-btn {
    width: 44px; height: 44px; flex: 0 0 44px;
  }
  #screen-editor .transport .tp-rate { min-height: 44px; padding-block: 0; }
  #screen-editor .transport .tp-rate select { min-height: 44px; }
  #screen-editor :is(
    .seg-time[data-seek],
    .seg-time[data-eseek],
    .editor-side .publish-copy-btn,
    #hosted-optical-render,
    #hosted-review-artifact,
    #hosted-download-artifact,
    #hosted-request-changes,
    #hosted-approve-artifact,
    #hosted-span-edit,
    #hosted-span-update,
    #hosted-span-cancel,
    #hosted-cut-add,
    #hosted-cut-add-another,
    #hosted-cut-add-cancel,
    #hosted-cut-edit,
    #hosted-cut-update,
    #hosted-cut-edit-cancel,
    #hosted-cut-remove,
    #hosted-cut-remove-confirm,
    #hosted-cut-remove-cancel,
    #hosted-editor-undo,
    #hosted-editor-redo
  ) { min-height: 44px; }
  #screen-editor :is(
    #hosted-span-start,
    #hosted-span-end,
    #hosted-cut-index,
    #hosted-cut-start,
    #hosted-cut-end
  ) { min-height: 44px; }
  #screen-editor label.opt {
    min-height: 44px; display: flex; align-items: center;
  }
  #screen-editor .tl-zoom .nudge-btn {
    min-width: 44px; min-height: 44px;
  }
  #screen-editor .tl-zoom input[type="range"] { height: 44px; }
  #screen-editor .splice-strip { height: 56px; }
  #screen-editor .splice-strip .strip-block { min-height: 44px; }
  #screen-editor .set-note strong { overflow-wrap: anywhere; word-break: break-word; }
  .run-pill { max-width: min(220px, 58vw); }
  #screen-editor .editor-toolbar-primary {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%; margin-left: 0;
  }
  #screen-editor .editor-toolbar-primary > .btn,
  #screen-editor .editor-toolbar-primary > .editor-more-wrap,
  #screen-editor .editor-toolbar-primary > .editor-more-wrap > .btn {
    width: 100%; min-width: 0;
  }
  #screen-editor .tl-head { flex-wrap: wrap; white-space: normal; }
  #screen-editor .tl-zoom {
    flex: 1 1 100%; width: 100%; min-width: 0; margin-left: 0;
  }
  #screen-editor .tl-zoom input[type="range"] { flex: 1 1 auto; width: auto; min-width: 0; }
  #screen-editor .set-note .mono { overflow-wrap: anywhere; word-break: break-word; }
}

/* Stage 7b/7c — shared state contract. Empty, loading and error states keep
   the real container geometry and use only the Regalia token system. */
.grid-empty {
  min-height: 132px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; background: var(--accent-dim); border: 1px dashed var(--border-accent);
  color: var(--fg-muted); text-align: center;
}
.grid-empty strong, .error-card strong { color: var(--fg); font-size: 16px; font-weight: 700; }
.grid-empty span, .error-card span { max-width: 58ch; line-height: 1.5; }
.grid-empty .btn, .error-card .btn { margin-top: 4px; }
.loading-skeleton { display: grid; gap: 8px; min-height: 132px; }
.skeleton-row { height: 48px; border-radius: var(--r-md); background: var(--surface-strong); }
.loading-skeleton.is-grid { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; min-height: 0; }
.skeleton-card { aspect-ratio: 16 / 9; min-height: 160px; border-radius: var(--r-lg); background: var(--surface-strong); }
.skeleton-table { min-height: 220px; padding: 8px; }
.skeleton-table .skeleton-row { height: 42px; }
.error-card {
  min-height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 24px; border: 1px solid var(--warning); border-radius: var(--r-lg);
  background: var(--surface); color: var(--fg-muted); text-align: center;
}
.error-card details { width: 100%; max-width: 58ch; text-align: left; }
.error-card summary { color: var(--fg-muted); cursor: pointer; }
.error-card code { display: block; margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg-dim); }
.thumbnail-frame { border: 1px solid var(--border); background: var(--surface-strong); }
.thumbnail-frame[aria-selected="true"] { border: 2px solid var(--accent); box-shadow: none; }
.thumbnail-frame.is-unavailable { display: grid; place-items: center; padding: 12px; color: var(--fg-muted); font-size: 13px; }
.thumbnail-output { background: var(--surface-strong); padding: 8px; border-radius: var(--r-md); }
.silence-inline-marker.is-auditioned, .tl-silence-marker.is-auditioned { border-color: var(--accent-text); background: var(--accent-dim); color: var(--accent-text); }
.silence-inline-marker.is-kept, .tl-silence-marker.is-kept { border-color: var(--fg-dim); background: var(--surface-strong); color: var(--fg-muted); }
.silence-inline-marker.is-applied, .tl-silence-marker.is-applied { border-color: var(--success); background: var(--surface-focus); color: var(--fg); }
.filler-counts { min-height: 22px; display: flex; flex-wrap: wrap; gap: 8px; color: var(--fg-muted); }

/* Stage 8a — derived intake values stay reviewable without crowding the form. */
.project-detection {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-strong);
}
.project-detection summary { color: var(--fg-muted); cursor: pointer; font-weight: 700; }
.project-detection-note { margin-top: 8px; color: var(--fg-muted); font-size: 13px; }
.project-detection-list { display: grid; gap: 8px; margin-top: 10px; }
.project-detection-row { display: flex; align-items: end; gap: 8px; }
.project-detection-row label { flex: 1; display: grid; gap: 4px; color: var(--fg-muted); font-size: 12px; }
.project-detection-row input { width: 100%; }

/* Stage 8c — processing is one cohesive card; rows carry the stage state. */
.proc-layout { display: block; }
.proc-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--border-accent);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--surface), var(--brand-dim));
}
.proc-card .proc-timeline {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.proc-card .proc-side { min-width: 0; }
.proc-card .proc-stat { background: var(--surface-strong); }
.stage-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 10px;
  border-bottom: 0;
  border-radius: var(--r-md);
  background: transparent;
  font-size: 14px;
}
.stage-row.is-active {
  border-left: 3px solid var(--accent);
  padding-left: 7px;
  background: var(--accent-dim);
}
.stage-row.is-error {
  border-left: 3px solid var(--warning);
  padding-left: 7px;
  background: var(--surface-strong);
}
.stage-label { display: grid; gap: 3px; min-width: 0; }
.stage-label strong { font-weight: 700; }
.stage-cause { color: var(--warning); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.stage-meta { padding-right: 4px; }
@media (max-width: 900px) {
  .proc-card { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  /* A failed stage can carry a useful explanation plus duration and cost.
     Keep the explanation as the primary reading column on phones instead of
     squeezing it between the icon and desktop metadata rail. */
  #screen-processing .proc-card { gap: var(--s-4); padding: var(--s-4); }
  #screen-processing .stage-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    column-gap: var(--s-3);
    row-gap: var(--s-2);
  }
  #screen-processing .stage-icon { grid-column: 1; grid-row: 1; margin-top: 2px; }
  #screen-processing .stage-label { grid-column: 2; grid-row: 1; }
  #screen-processing .stage-meta {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  #screen-processing .proc-side :is(
    #btn-run-resume-upload,
    #btn-run-retry,
    #btn-run-open-project,
    #btn-cancel,
    #btn-log-copy
  ) {
    min-height: 44px;
  }
  #screen-processing .proc-side > :is(
    #btn-run-resume-upload,
    #btn-run-retry,
    #btn-run-open-project,
    #btn-cancel
  ) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  #screen-processing #btn-log-copy { min-width: 44px; }
}

/* Stage 8d — action explanations are a keyboard-reachable, viewport-safe popover. */
.project-menu-explanation { display: none; }
.project-menu-help {
  position: fixed;
  z-index: 1200;
  max-width: calc(100vw - 24px);
  padding: 10px 12px;
  border: 1px solid var(--border-accent);
  border-radius: var(--r-md);
  background: var(--surface-strong);
  color: var(--fg);
  box-shadow: var(--ui-card-shadow);
  font-size: 13px;
  line-height: 1.45;
  pointer-events: none;
}

/* Native pywebview may inject a non-selectable body rule before app CSS.
   Keep ordinary app copy selectable while preserving explicit drag-surface
   exceptions such as timeline handles and tool overlays. */
html body {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* Hosted authentication keeps Clerk's security flow while presenting the
   approved Regalia identity and an explicit route back to the website. */
body.hosted-auth-active { overflow: hidden; }
body.hosted-auth-active .app-boot { visibility: hidden; }
.hosted-auth-shell {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: auto;
  min-height: 100vh;
  min-height: 100svh;
  padding: 40px 20px;
  isolation: isolate;
  background:
    radial-gradient(70% 55% at 50% -5%, rgba(122, 76, 173, .34), transparent 72%),
    radial-gradient(42% 36% at 100% 100%, rgba(232, 193, 105, .09), transparent 72%),
    linear-gradient(155deg, #171020 0%, #0c080f 64%, #120c19 100%);
  color: #f7f3fa;
}
.hosted-auth-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .12;
  background-image:
    linear-gradient(rgba(246, 231, 196, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 231, 196, .12) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 50% 36%, #000 0%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 36%, #000 0%, transparent 70%);
}
.hosted-auth-frame {
  position: relative;
  z-index: 1;
  width: min(452px, 100%);
  display: grid;
  justify-items: center;
  gap: 15px;
}
.hosted-auth-frame:focus { outline: none; }
.hosted-auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #f7f3fa;
  text-decoration: none;
  font-size: 16px;
  letter-spacing: -.01em;
}
.hosted-auth-brand > span {
  display: block;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 12px;
  background: url("assets/emotion-engine-mark.svg") center / contain no-repeat;
  color: transparent;
  font-size: 0;
  box-shadow: 0 14px 36px rgba(61, 27, 84, .42);
}
.hosted-auth-stage {
  padding: 5px 9px;
  border: 1px solid rgba(232, 193, 105, .25);
  border-radius: 999px;
  background: rgba(232, 193, 105, .08);
  color: #efd79e;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hosted-auth-intro {
  max-width: 390px;
  margin: -1px 0 3px;
  color: #cfc9d6;
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
}
#hosted-auth-clerk {
  width: 100%;
  min-height: 380px;
}
.hosted-auth-back {
  margin-top: 1px;
  color: #c0a9dc;
  font-size: 13px;
  text-decoration: none;
  text-underline-offset: 3px;
}
.hosted-auth-brand[href]:hover,
.hosted-auth-back:hover {
  color: #efd79e;
  text-decoration: underline;
}
.hosted-auth-brand[href]:focus-visible,
.hosted-auth-back:focus-visible {
  outline: 2px solid #e8c169;
  outline-offset: 3px;
}

/* Browser MVP mobile shell: the full desktop rail becomes an accessible
   drawer so the working surface keeps the viewport instead of overflowing. */
.mobile-nav-toggle,
.mobile-nav-close,
.mobile-nav-scrim { display: none; }

@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--screen-topbar) minmax(0, 1fr);
    width: 100%; min-width: 0;
  }
  .app-sidebar {
    display: flex;
    position: fixed; inset: 0 auto 0 0; z-index: 110;
    width: min(84vw, 292px); height: 100dvh;
    transform: translateX(-105%);
    transition: transform .18s ease;
    box-shadow: 18px 0 42px rgba(12, 8, 15, .28);
  }
  .app-sidebar .sidebar-brand { padding-right: 62px; }
  .mobile-nav-close {
    display: grid; place-items: center; position: absolute; z-index: 1;
    top: 16px; right: 14px; width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); color: var(--fg);
    font: 500 24px/1 var(--ui-font); cursor: pointer;
  }
  .mobile-nav-close:hover,
  .mobile-nav-close:focus-visible {
    background: var(--surface-hover); border-color: var(--border-strong);
  }
  .app-sidebar :is(.sidebar-item, .sidebar-workspace, .sidebar-new-workspace) {
    min-height: 44px;
  }
  .app.mobile-nav-open .app-sidebar { transform: translateX(0); }
  .mobile-nav-scrim:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 100;
    width: 100%; height: 100%; padding: 0; border: 0;
    background: var(--scrim);
  }
  .mobile-nav-toggle {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); color: var(--fg);
    font: 700 18px/1 var(--ui-font); cursor: pointer;
  }
  .app-topbar {
    grid-column: 1; grid-row: 1; gap: 9px;
    width: 100%; min-width: 0; padding: 0 12px;
  }
  .breadcrumb-wrap { flex: 1 1 auto; min-width: 0; gap: 7px; }
  .breadcrumb { min-width: 0; max-width: none; font-size: 12px; }
  .breadcrumb a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* Every persistent mobile-shell action gets a full finger target while the
     60px topbar and compact desktop controls keep their existing rhythm. */
  .route-back {
    width: 44px; height: 44px; padding: 0; justify-content: center;
  }
  .route-back span:last-child { display: none; }
  .gs-wrap, .cost-pill { display: none; }
  .topbar-actions { gap: 4px; }
  .mobile-search-toggle { display: inline-grid; place-items: center; }
  .gs-wrap.mobile-open {
    display: block;
    position: fixed;
    z-index: 180;
    top: 8px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
  }
  .gs-wrap.mobile-open .gs-input {
    min-height: 44px;
    padding: 10px 84px 10px 14px;
    border-color: var(--accent);
    background: var(--surface-strong);
    font-size: 16px;
    box-shadow: 0 0 0 3px var(--accent-dim), 0 12px 32px rgba(0,0,0,.42);
  }
  .gs-wrap.mobile-open .gs-mobile-close {
    display: grid;
    place-items: center;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 68px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fg);
    font: 650 13px/1 var(--ui-font);
    cursor: pointer;
  }
  .gs-wrap.mobile-open .gs-panel {
    max-height: min(68dvh, 520px);
    overscroll-behavior: contain;
  }
  .gs-wrap.mobile-open .gs-item {
    min-height: 44px;
    padding: 11px 10px;
    overflow-wrap: anywhere;
    box-sizing: border-box;
  }
  .theme-toggle { min-width: 44px; min-height: 44px; padding-inline: 10px; }
  .theme-toggle .theme-label { display: none; }
  .topbar-actions .icon-btn { width: 44px; height: 44px; }
  #hosted-user-button {
    display: grid; place-items: center; min-width: 44px; min-height: 44px;
  }
  #hosted-user-button button { width: 44px; height: 44px; }
  .app-main,
  .app-main:has(#screen-detail:not([hidden])),
  .app-main:has(#screen-editor:not([hidden])) {
    grid-column: 1; grid-row: 2;
    width: 100%; min-width: 0; max-width: none;
    padding: 20px 16px 48px; justify-self: stretch;
  }
  .screen, .app-main > .screen, .app-main > #screen-detail {
    width: 100%; min-width: 0; max-width: none;
  }
  .detail-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .detail-actions { width: 100%; justify-content: flex-start; }
  .detail-actions .project-more-trigger,
  .clip-actions .btn { min-height: 44px; }
  .detail-output-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-output-stat { min-width: 0; }
  .detail-tabs { flex-wrap: wrap; min-width: 0; }
  .detail-tab { min-height: 44px; padding-inline: 12px; }
  .detail-search {
    order: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%; min-width: 0; margin-left: 0; padding: 6px 0 10px;
  }
  .detail-search #clip-sort,
  .detail-search input,
  .detail-search input:focus { width: 100%; min-width: 0; min-height: 44px; }
  .detail-search #clip-sort[hidden] + #detail-search-input,
  .detail-search #clip-sort[hidden] ~ .detail-search-count { grid-column: 1 / -1; }
  .clip-status-row { min-width: 0; }
  .clip-status-filter-heading {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-width: 0; gap: 12px;
  }
  #clip-status-tabs {
    display: flex; width: 100%; max-width: 100%; min-width: 0;
    gap: 4px; padding: 3px; overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-padding-inline: 3px; scrollbar-width: thin;
  }
  #clip-status-tabs .fchip,
  #clip-format-tabs .fchip { flex: 0 0 auto; min-height: 44px; padding: 8px 12px; }
  .clip-status-row #btn-create-clip { min-height: 44px; }
  .project-more-wrap { position: static; }
  .project-more-menu {
    position: fixed; top: auto; right: 12px; bottom: 12px; left: 12px;
    width: auto; max-width: none; max-height: calc(100dvh - 24px); overflow-y: auto;
  }
  .clips-grid { grid-template-columns: minmax(0, 1fr); }
}

/* At the narrowest supported width, Search is the higher-frequency global
   action and Appearance remains available in Settings. Reclaim one button
   width so the current route stays readable instead of collapsing to a few
   characters. */
@media (max-width: 360px) {
  .app-topbar #btn-theme-toggle { display: none; }
}

@media (max-width: 600px) {
  /* The shared wide-screen grid has a 300px minimum track. At the supported
     320px viewport, the screen content column is only 279px wide, so that
     track otherwise clips five pixels through the main scroller. Let project
     cards fit the content column on all three project surfaces. */
  :is(#screen-home, #screen-projects, #screen-workspace) .projects-grid {
    grid-template-columns: minmax(0, 1fr); max-width: 100%; min-width: 0;
  }
  #screen-home .home-capabilities-grid {
    grid-template-columns: minmax(0, 1fr); max-width: 100%; min-width: 0;
  }

  .recent-head { display: grid; grid-template-columns: minmax(0, 1fr); }
  .recent-tools { width: 100%; min-width: 0; margin-left: 0; flex-wrap: wrap; }
  .recent-tools .fchip-row {
    flex: 1 1 100%; width: 100%; min-width: 0;
    overflow-x: auto; overscroll-behavior-inline: contain;
  }
  .recent-tools .fchip { flex: 0 0 auto; }
  .recent-tools .clip-sort { flex: 1 1 auto; width: auto; min-width: 0; }

  /* Home is the fastest route back into daily work. Give its Recent Projects
     controls the same mobile reachability as Projects without changing the
     compact desktop toolbar. */
  #screen-home .recent-tools {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    width: 100%; min-width: 0; align-items: stretch; gap: 10px;
  }
  #screen-home #home-filter {
    grid-column: 1 / -1; display: flex; width: 100%; max-width: 100%; min-width: 0;
    gap: 4px; padding: 3px; overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-padding-inline: 3px; scrollbar-width: thin;
  }
  #screen-home #home-filter .fchip {
    flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 8px 12px;
  }
  #screen-home #home-sort {
    grid-column: 1; width: 100%; min-width: 0; min-height: 44px;
  }
  #screen-home #home-view { grid-column: 2; }
  #screen-home #home-view button {
    width: 44px; height: 44px; padding: 0;
  }

  .workspace-picker {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    width: 100%; min-width: 0;
  }
  .workspace-picker select { width: 100%; min-width: 0; }
  .workspace-picker .btn { grid-column: 1 / -1; width: 100%; }

  /* Projects is a daily mobile surface, so its hierarchy and hit areas must
     survive a one-handed 320px viewport without changing the desktop density. */
  #screen-projects .proj-head { align-items: center; }
  #screen-projects #btn-new-project { min-height: 44px; }
  #screen-projects .proj-toolbar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    width: 100%; min-width: 0; align-items: stretch; gap: 10px;
  }
  #screen-projects .workspace-picker { grid-column: 1 / -1; margin-right: 0; }
  #screen-projects .workspace-picker :is(select, .btn) { min-height: 44px; }
  #screen-projects .proj-search {
    grid-column: 1 / -1; width: 100%; max-width: none; min-width: 0; min-height: 44px;
  }
  #screen-projects #proj-filter {
    grid-column: 1 / -1; display: flex; width: 100%; max-width: 100%; min-width: 0;
    gap: 4px; padding: 3px; overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-padding-inline: 3px; scrollbar-width: thin;
  }
  #screen-projects #proj-filter .fchip {
    flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 8px 12px;
  }
  #screen-projects #proj-sort {
    grid-column: 1; width: 100%; min-width: 0; min-height: 44px;
  }
  #screen-projects #proj-view { grid-column: 2; }
  #screen-projects #proj-view button {
    width: 44px; height: 44px; padding: 0;
  }
  #screen-projects .project-selection-actions:not([hidden]) {
    grid-column: 1 / -1; display: flex; width: 100%; min-width: 0;
    margin-left: 0; flex-wrap: wrap;
  }
  #screen-projects .project-selection-actions .btn { min-height: 44px; }

  /* Media Library starts with search and media scope, then exposes sorting
     only where it applies. Keep that reading order and a full finger target
     without carrying the roomier mobile controls into the desktop library. */
  #screen-library .lib-toolbar {
    display: grid; grid-template-columns: minmax(0, 1fr);
    width: 100%; min-width: 0; align-items: stretch; gap: 10px;
  }
  #screen-library #lib-search {
    width: 100%; max-width: none; min-width: 0; min-height: 44px;
  }
  #screen-library #lib-tabs {
    display: flex; width: 100%; max-width: 100%; min-width: 0;
    gap: 4px; padding: 3px; overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-padding-inline: 3px; scrollbar-width: thin;
  }
  #screen-library #lib-tabs .fchip {
    flex: 0 0 auto; min-height: 44px; padding: 8px 12px;
  }
  #screen-library #lib-sort {
    width: 100%; min-width: 0; min-height: 44px;
  }

  .workspace-head { flex-direction: column; }
  .workspace-head-actions { width: 100%; min-width: 0; flex-wrap: wrap; }
  .workspace-audience-note { flex: 1 1 100%; width: 100%; white-space: normal; }

  /* The hosted workspace keeps a second project toolbar below its summary.
     Give that complete route, including its alternate Client Pulse view, the
     same mobile target floor as the dedicated Projects surface. */
  #screen-workspace .workspace-section-tab { min-height: 44px; }
  #screen-workspace .workspace-toolbar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    width: 100%; min-width: 0; align-items: stretch; gap: 10px;
  }
  #screen-workspace #workspace-search {
    grid-column: 1 / -1; width: 100%; max-width: none; min-width: 0; min-height: 44px;
  }
  #screen-workspace #workspace-filter {
    grid-column: 1 / -1; display: flex; width: 100%; max-width: 100%; min-width: 0;
    gap: 4px; padding: 3px; overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-padding-inline: 3px; scrollbar-width: thin;
  }
  #screen-workspace #workspace-filter .fchip {
    flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 8px 12px;
  }
  #screen-workspace #workspace-sort {
    grid-column: 1; width: 100%; min-width: 0; min-height: 44px;
  }
  #screen-workspace #workspace-view { grid-column: 2; }
  #screen-workspace #workspace-view button { width: 44px; height: 44px; padding: 0; }
  #screen-workspace #btn-workspace-new-project { min-height: 44px; }
  #screen-workspace :is(.workspace-pulse-link, .workspace-pulse-card-link) {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  #screen-home .home-capabilities-link {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  #lib-sources {
    width: 100%; max-width: 100%; overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .workspace-naming-card { grid-template-columns: minmax(0, 1fr); }
  .workspace-naming-fields { grid-template-columns: minmax(0, 1fr); width: 100%; min-width: 0; }
  .workspace-naming-fields :is(input, select, button) { width: 100%; min-width: 0; }

  .cal-bar { flex-wrap: wrap; }
  .cal-hint { flex: 1 1 100%; width: 100%; min-width: 0; margin-left: 0; }

  /* Ideation is a complete brief-to-starter workflow, not a desktop row to
     squeeze into the remaining mobile width. Stack its inputs, result and
     history in reading order and keep both history actions finger-sized. */
  #screen-ideas :is(.ideas-bar, .ideas-note, .ideas-layout, .ideas-result, .ideas-history) {
    width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  }
  #screen-ideas .ideas-bar {
    display: grid; grid-template-columns: minmax(0, 1fr);
    align-items: stretch; gap: 10px;
  }
  #screen-ideas .ideas-bar :is(input, button) {
    width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box;
  }
  #screen-ideas .ideas-layout {
    grid-template-columns: minmax(0, 1fr); gap: 12px;
  }
  #screen-ideas .ideas-hist-item {
    display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 4px;
  }
  #screen-ideas .ideas-hist-open {
    width: 100%; min-width: 0; min-height: 44px;
  }
  #screen-ideas .ideas-hist-del {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  }

  /* Long Form Planner carries the recording brief from idea to upload. Keep
     every nested grid inside the viewport and make its repeated actions
     comfortably reachable without changing the denser desktop workspace. */
  #screen-planner :is(
    .planner-layout,
    .planner-form-card,
    .planner-result,
    .planner-history,
    .planner-form-card .cap-ctl,
    .planner-deadline,
    .planner-deadline-fields,
    .planner-actions,
    .planner-result-actions,
    .planner-history-list
  ) {
    width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  }
  #screen-planner .planner-form-card :is(input, select, textarea) {
    width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  }
  #screen-planner .planner-form-card .cap-ctl {
    grid-template-columns: minmax(0, 1fr);
    white-space: normal; overflow-wrap: anywhere; line-height: 1.4;
  }
  #screen-planner .planner-deadline-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #screen-planner :is(
    .planner-form-card input,
    .planner-form-card select,
    .planner-form-card button,
    .planner-actions .btn,
    .planner-result-actions .btn,
    .planner-history-item
  ) {
    min-height: 44px;
  }
  #screen-planner :is(.planner-actions .btn, .planner-result-actions .btn) {
    display: inline-flex; align-items: center; justify-content: center;
  }
  #screen-planner .planner-history-item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    width: 100%; max-width: 100%; min-width: 0; text-align: left;
    white-space: normal;
  }
  #screen-planner .planner-history-item strong {
    grid-column: 1 / -1; width: 100%; white-space: normal;
    overflow: visible; text-overflow: clip; line-height: 1.4;
  }
  #screen-planner .planner-history-item span { min-width: 0; white-space: normal; }
}

@media (max-width: 360px) {
  #screen-planner .planner-deadline-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Hosted Brand Studio is intentionally narrower than the desktop brand kit:
   only durable browser preferences are available, so keep the three useful
   cards and their capability boundary on one aligned reading measure. */
.hosted-brand-surface > :is(.screen-head, .brand-naming-card, .bs-kit-row, .bs-grid, .bs-save-status, .bs-foot) {
  width: 100%;
  max-width: 920px;
}
.hosted-brand-surface .brand-naming-card {
  grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr);
  gap: 12px 24px;
  padding: 22px 24px;
}
.hosted-brand-surface .brand-naming-card .workspace-naming-fields {
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
}
.hosted-brand-surface .brand-naming-card .workspace-naming-status {
  grid-column: 2;
}
.hosted-brand-surface .bs-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hosted-brand-surface .bs-foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 12px;
  align-items: baseline;
  margin-top: 22px;
  padding: 14px 16px;
}
.hosted-brand-surface .bs-foot strong {
  color: var(--accent-text);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .hosted-brand-surface .brand-naming-card { grid-template-columns: minmax(0, 1fr); }
  .hosted-brand-surface .brand-naming-card .workspace-naming-fields { grid-template-columns: minmax(0, 1fr); }
  .hosted-brand-surface .brand-naming-card .workspace-naming-fields .btn { width: 100%; }
  .hosted-brand-surface .brand-naming-card .workspace-naming-status { grid-column: 1; }
  .hosted-brand-surface .bs-grid { grid-template-columns: minmax(0, 1fr); }
  .hosted-brand-surface .bs-foot { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  #settings-modal.hosted-settings { padding: 12px; }
  #settings-modal.hosted-settings .modal-box {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
    padding: 18px;
    border-radius: var(--r-lg);
  }
  #settings-modal.hosted-settings .modal-sub { font-size: 13px; }
  .hosted-settings-shell { display: flex; flex-direction: column; }
  .hosted-settings-mobile-picker {
    display: grid;
    flex: 0 0 auto;
    gap: 6px;
    margin-top: 14px;
  }
  .hosted-settings-mobile-picker label {
    color: var(--fg-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
  }
  .hosted-settings-mobile-picker select { width: 100%; min-height: 44px; }
  .hosted-settings-layout {
    flex: 1;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    margin-top: 12px;
  }
  .hosted-settings-nav { display: none; }
  .hosted-settings-content { padding: 20px 18px; }
  .hosted-settings-panel h3 { font-size: 22px; }
  .hosted-settings-intro { margin-bottom: 18px; }
}

@media (max-width: 600px) {
  /* Settings is a frequent global action. Keep its compact desktop dialog,
     but give every visible hosted preference and next step a dependable
     finger target on phones. The extra modal ID deliberately outranks the
     shared ID-bearing form-control baseline. */
  #settings-modal :is(
    #set-appearance,
    #set-text-size,
    #hosted-set-appearance,
    #hosted-set-text-size,
    #hosted-settings-section-select,
    #btn-hosted-open-shortcuts,
    #btn-hosted-settings-security,
    #btn-hosted-settings-plan,
    #btn-hosted-settings-feedback,
    [data-settings-route],
    #btn-open-shortcuts,
    #btn-settings-close,
    #btn-settings-save
  ) {
    min-height: 44px;
  }

  .hosted-settings-row,
  .hosted-settings-control-row,
  .hosted-settings-plan-card,
  .hosted-settings-account-card {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 15px;
  }
  .hosted-settings-control-row select,
  .hosted-settings-row .btn,
  .hosted-settings-plan-card .btn,
  .hosted-settings-account-card .btn { width: 100%; flex-basis: auto; }
  .hosted-settings-account-card .hosted-settings-avatar { align-self: flex-start; }
  .hosted-settings-state { align-self: flex-start; max-width: 100%; text-align: left; }
  .hosted-settings-boundary { grid-template-columns: minmax(0, 1fr); }

  /* Keyboard Shortcuts is opened from Settings, so its complete mobile path
     must keep the same dependable target floor. Give the destructive reset
     action its own row, then keep Cancel and Save visible together instead of
     letting the desktop spacer push reset beyond the left edge. */
  #shortcut-modal .shortcut-row select,
  #shortcut-modal .modal-actions .btn {
    min-height: 44px;
  }
  #shortcut-modal .modal-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: stretch;
  }
  #shortcut-modal .modal-actions .modal-spacer { display: none; }
  #shortcut-modal #btn-shortcut-reset {
    grid-column: 1 / -1;
    width: 100%;
  }
  #shortcut-modal #btn-shortcut-save {
    width: 100%;
    min-width: 0;
  }

  /* Learn is a reading surface. Stack each disclosure's label, title, and
     supporting sentence so the desktop three-column summary never squeezes
     its message into narrow fragments on a phone. The whole summary remains
     the disclosure target while the chevron keeps a stable visual column. */
  #screen-learn .lrn-card > summary {
    grid-template-columns: minmax(0, 1fr) 24px;
    grid-template-areas:
      "eyebrow chev"
      "title chev"
      "teaser chev";
    align-items: start;
    column-gap: 12px;
    row-gap: 7px;
    min-width: 0;
    min-height: 44px;
    padding: 16px;
  }
  #screen-learn .lrn-card > summary::after {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    align-self: start;
  }
  #screen-learn .lrn-card > summary :is(.lrn-eyebrow, .lrn-title, .lrn-teaser) {
    min-width: 0;
    max-width: 100%;
  }
  #screen-learn .lrn-card > summary .lrn-eyebrow {
    grid-area: eyebrow;
    justify-self: start;
    width: fit-content;
  }
  #screen-learn .lrn-card > summary .lrn-title { grid-area: title; }
  #screen-learn .lrn-card > summary .lrn-teaser { grid-area: teaser; }
  #screen-learn .lrn-title,
  #screen-learn .lrn-teaser {
    overflow-wrap: anywhere;
  }
  #screen-learn .lrn-body {
    padding: 2px 16px 16px;
  }

  /* Campaign Studio is a repeated review surface, not a desktop-only admin
     form. Keep its source choices and every candidate-level next step
     comfortably reachable on mobile without inflating the desktop layout. */
  #screen-highlights :is(
    #highlights-project,
    #highlights-lane,
    #btn-campaign-build,
    #btn-highlights-scan
  ),
  #screen-highlights .grid-empty .btn,
  #screen-highlights .highlight-actions .btn {
    min-height: 44px;
  }
  #screen-highlights .highlight-actions { flex-wrap: wrap; }
  #screen-highlights .highlight-actions .btn {
    flex: 1 1 140px;
  }

  /* Publish is the final review handoff, so its two empty-state next steps
     stay easy to reach and read instead of competing in a cramped row. */
  #screen-publish .pub-queue .grid-empty .btn,
  #screen-publish .campaign-publish-card .btn {
    min-height: 44px;
  }
  #screen-publish .campaign-publish-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  #screen-publish .campaign-publish-card .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .hosted-brand-surface :is(
    .workspace-naming-fields input,
    .workspace-naming-fields .btn,
    .bs-kit-row .btn,
    .bs-card .btn
  ) { min-height: 44px; }
  /* The shared select baseline uses :is(...) with an ID selector, which gives
     it ID-level specificity. Name the four shipped hosted selectors here so
     the mobile target floor wins that cascade deliberately. */
  .hosted-brand-surface :is(
    #workspace-default-format,
    #bs-kit,
    #bs-font,
    #bs-caption-style
  ) { min-height: 44px; }
  .hosted-brand-surface .bs-swatches {
    width: 100%; max-width: 100%; overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
  .hosted-brand-surface .bs-swatch {
    flex: 0 0 44px; min-width: 44px; min-height: 44px;
  }
  .hosted-brand-surface .bs-custom-color input[type="color"] {
    min-width: 44px; min-height: 44px;
  }
}

.hosted-optical-studio {
  display: grid; grid-template-columns: minmax(0, 1fr);
  width: 100%; min-width: 0; max-width: 100%; gap: 12px;
}
.hosted-optical-studio > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.hosted-optical-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.hosted-optical-card {
  appearance: none; display: grid; gap: 7px; min-width: 0; padding: 7px;
  overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--fg); text-align: left; cursor: pointer;
}
.hosted-optical-card:hover:not(:disabled) { border-color: var(--accent); }
.hosted-optical-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent); }
.hosted-optical-card:disabled { opacity: .45; cursor: not-allowed; }
.hosted-optical-visual {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; border-radius: calc(var(--r-md) - 4px); background: #080808;
}
.hosted-optical-studio.is-vertical .hosted-optical-visual {
  width: min(100%, 132px); aspect-ratio: 9 / 16; justify-self: center; margin-inline: auto;
}
.hosted-optical-visual img,
.hosted-optical-visual video,
.hosted-optical-none { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hosted-optical-visual video { opacity: 0; }
.hosted-optical-card:hover .hosted-optical-visual video { opacity: 1; }
.hosted-optical-none { display: grid; place-items: center; color: var(--fg-muted); font-size: 11px; }
.hosted-optical-card strong { padding: 0 2px 2px; font-size: 12px; }
@media (max-width: 900px) {
  .hosted-optical-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .hosted-optical-studio > .btn {
    width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.25;
  }
}

/* One local mark across boot, app shell, favicon, and hosted authentication. */
.app-boot-mark,
.brand-mark {
  overflow: hidden;
  background: url("assets/emotion-engine-mark.svg") center / contain no-repeat;
  color: transparent;
  font-size: 0;
}

@media (max-width: 520px) {
  .hosted-auth-shell { align-items: start; padding: 24px 14px 28px; }
  .hosted-auth-frame { gap: 13px; }
  .hosted-auth-brand > span { width: 38px; height: 38px; }
  .hosted-auth-intro { font-size: 13px; }
  #hosted-auth-clerk { min-height: 360px; }
  .hosted-auth-brand,
  .hosted-auth-back,
  #hosted-auth-clerk a[href],
  #hosted-auth-clerk button,
  #hosted-auth-clerk input {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .hosted-auth-brand,
  .hosted-auth-back,
  #hosted-auth-clerk a[href] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hosted-auth-shell *,
  .hosted-auth-shell *::before,
  .hosted-auth-shell *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

#hosted-upload-preflight-modal .modal-box { width: min(720px, calc(100vw - 48px)); }
.hosted-upload-preflight-facts {
  margin: 0; padding: 0 0 0 1.15rem; display: grid; gap: 0.35rem;
  max-height: 42vh; overflow: auto;
}
.hosted-upload-preflight-facts li { line-height: 1.45; }
.hosted-upload-preflight-details {
  margin-top: 1rem; padding: 0.75rem 0.9rem;
  border: 1px solid var(--border); border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.hosted-upload-preflight-details summary { cursor: pointer; font-weight: 650; }
.assistant-prompt-label { display: grid; gap: 6px; font-size: 12px; }
.assistant-prompt-label textarea { width: 100%; min-height: 90px; resize: vertical; }
#rail-assistant-body .row { flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#rail-assistant-body [data-assistant-suggestions] { display: grid; gap: 6px; }
.assistant-message { border-left: 2px solid var(--accent); padding-left: 10px; margin: 12px 0; }
.assistant-message p { white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-authority { border-top: 1px solid var(--border); padding-top: 10px; }
.hosted-upload-preflight-details .hosted-upload-preflight-facts { margin-top: 0.75rem; }
.speaker-framing-review .cap-ctl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.speaker-framing-review select { width: 100%; min-width: 0; box-sizing: border-box; }
.framing-faces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.framing-faces figure { margin: 0; max-width: 160px; font-size: 12px; overflow-wrap: anywhere; }
.framing-faces img { max-width: 100%; height: auto; object-fit: contain; }

/* Complete-thought review tier on clip cards (hosted candidate set). */
.clip-thought-tier {
  position: absolute;
  left: 0.4rem;
  bottom: 0.4rem;
  padding: 0.12rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(15, 23, 42, 0.82);
  color: #e2e8f0;
}
.clip-thought-tier.is-primary { background: rgba(14, 116, 144, 0.92); color: #ecfeff; }
.clip-thought-tier.is-more { background: rgba(51, 65, 85, 0.88); }
.clip-thought-tier.is-hold { background: rgba(120, 53, 15, 0.9); color: #ffedd5; }