/* Editor chrome follows the page theme. The repeated scoped ID overrides
   legacy ID-specific fixed palette rules without changing their geometry.
   These tokens never color rendered
   footage, caption glyphs, hook/text overlays or preset sample artwork. */
:root {
    --studio-bg: #f3f4f5;
    --studio-panel: #ffffff;
    --studio-raised: #f8f8f8;
    --studio-inset: #eeeff1;
    --studio-control: #ffffff;
    --studio-hover: #e8eaed;
    --studio-selected: #e9edf3;
    --studio-text: #202124;
    --studio-muted: #595d63;
    --studio-border: #cbd0d6;
    --studio-border-soft: #e0e3e7;
    --studio-focus: #1014ef;
    --studio-danger: #b42318;
    --studio-warning: #805600;
    --studio-success: #166534;
    --studio-shadow: 0 8px 28px rgb(0 0 0 / .09);
    --studio-waveform-bg: #e9eaec;
    --studio-waveform-fill: #70757b;
    --studio-waveform-line: #b6b9bd;
    --studio-transition-waveform: #70757b;
}
html[data-theme="dark"] {
    --studio-bg: #202020;
    --studio-panel: #292929;
    --studio-raised: #303030;
    --studio-inset: #1b1b1b;
    --studio-control: #333333;
    --studio-hover: #404040;
    --studio-selected: #3b3b3b;
    --studio-text: #f2f2f2;
    --studio-muted: #bcbcbc;
    --studio-border: #505050;
    --studio-border-soft: #3b3b3b;
    --studio-focus: #93acff;
    --studio-danger: #ffafaf;
    --studio-warning: #ffc46a;
    --studio-success: #86efac;
    --studio-shadow: 0 8px 28px rgb(0 0 0 / .3);
    --studio-waveform-bg: #1b1b1b;
    --studio-waveform-fill: #b0b0b0;
    --studio-waveform-line: #515151;
    --studio-transition-waveform: #b0b0b0;
}
#editor-modal#editor-modal, body.reframe-studio-open {
    --v2-ink: var(--studio-bg);
    --v2-slate: var(--studio-panel);
    --v2-slate-2: var(--studio-raised);
    --v2-slate-3: var(--studio-hover);
    --v2-white: var(--studio-text);
    --v2-muted: var(--studio-muted);
    --v2-dim: var(--studio-muted);
    --v2-fill: var(--studio-inset);
    --v2-border: var(--studio-border-soft);
    --v2-border-strong: var(--studio-border);
    --v2-blue-light: var(--studio-focus);
    --v2-red: var(--studio-danger);
    --v2-amber: var(--studio-warning);
    --text-main: var(--studio-text);
    --text-muted: var(--studio-muted);
    --panel-bg: var(--studio-panel);
}
#editor-modal#editor-modal {
    color: var(--studio-text);
    color-scheme: light;
    background: var(--studio-bg) !important;
    backdrop-filter: none !important;
}
html[data-theme="dark"] #editor-modal#editor-modal { color-scheme: dark; }
#editor-modal#editor-modal .reframe-studio {
    background: var(--studio-bg) !important;
    border-color: var(--studio-border) !important;
    box-shadow: none !important;
}
#editor-modal#editor-modal :is(.studio-toolbar, .studio-preview-panel, .output-monitor,
    .studio-scene-panel, .crop-positions-panel, .editor-timeline-shell,
    .editor-drawer-panel, .scene-settings-popover-panel) {
    background: var(--studio-panel) !important;
    border-color: var(--studio-border-soft) !important;
    color: var(--studio-text);
}
#editor-modal#editor-modal :is(.editor-drawer-panel, .scene-settings-popover-panel) { box-shadow: var(--studio-shadow); }
#editor-modal#editor-modal :is(#editor-title, .monitor-label, .scene-row1, .crop-position-time,
    .editor-text-heading h3, .editor-inspector-section-title, .transcript-heading h3,
    .transcript-card-text, .transcript-card-editor, .music-track-title,
    .editor-hook-heading h3, .editor-music-heading h3, .editor-hook-settings label,
    .editor-hook-toggle, .editor-music-control > label, .editor-caption-profanity-heading,
    .editor-text-control-group > summary) {
    color: var(--studio-text) !important;
}
#editor-modal#editor-modal :is(.editor-open-state, .editor-save-state, .editor-mode-state,
    #editor-preview-hint, .monitor-label small, .control-hint, .control-label,
    .scene-row2, .crop-position-layout, .crop-position-meta, .editor-hook-heading p,
    .editor-text-heading p, .transcript-heading p, .transcript-column-headings,
    .transcript-card-badge, .transcript-edit-footer, .transcript-video-edit-heading,
    .transcript-tools-note, .editor-caption-preset-picker-head span,
    .editor-caption-controls label, .editor-text-control-group label, .music-track-meta,
    .music-duration-badge, .editor-text-color-field > span,
    .scene-settings-popover-panel label, .scene-settings-popover-panel .control-hint) {
    color: var(--studio-muted) !important;
}
#editor-modal#editor-modal .music-duration-badge { font-size: 12px; }
#editor-modal#editor-modal :is(.editor-mode-state, .transcript-line-count, .transcript-selection-count,
    .caption-preset-selected-label) {
    background: var(--studio-inset) !important;
    color: var(--studio-muted) !important;
    border-color: var(--studio-border-soft) !important;
}
#editor-modal#editor-modal .source-portrait .editor-transport {
    background: transparent !important;
}

#editor-modal#editor-modal :is(.preview-control-dock, .editor-transport, .timeline-controls,
    .timeline-ruler, .timeline-ruler-scroll, .editor-timeline-ruler, .timeline-header, .timeline-lane, .timeline-track,
    #editor-text-track-scroll, #editor-text-track, .editor-text-track-empty,
    .timeline-track-label, .editor-quick-controls, .editor-tabs, #editor-tabs) {
    background: var(--studio-raised) !important;
    border-color: var(--studio-border-soft) !important;
    color: var(--studio-muted) !important;
}
#editor-modal#editor-modal :is(.editor-caption-layout-section, .editor-caption-preset-picker,
    .editor-text-control-group, .editor-text-style-panel, .editor-text-color-field, .editor-text-range-field,
    .editor-text-toggle-field, .editor-text-style-preset-tools, .editor-text-preset-actions, .editor-text-compose,
    .editor-hook-settings, .editor-hook-field, .editor-music-library, .editor-music-mix, .editor-music-control,
    .editor-music-controls, .transcript-search,
    .transcript-findbar, .transcript-tools-popover, .transcript-words-container, .transcript-card,
    .transcript-video-edit, .transcript-video-edits, .transcript-edit-footer) {
    background: var(--studio-raised) !important;
    border-color: var(--studio-border-soft) !important;
}
#editor-modal#editor-modal .transcript-card { background: transparent !important; }
/* Fields sit on the drawer itself; one surface per drawer. */
#editor-modal#editor-modal :is(.editor-caption-layout-section, .editor-caption-preset-picker,
    .editor-text-style-panel, .editor-text-compose, .editor-hook-field, .editor-music-control) {
    background: transparent !important;
}
#editor-modal#editor-modal :is(.editor-text-color-field, .editor-text-range-field, .editor-text-toggle-field) {
    background: transparent !important;
    border-color: transparent !important;
    padding-left: 0;
    padding-right: 0;
}
#editor-modal#editor-modal :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    select, textarea, .transcript-card-editor, .editor-text-font-option) {
    background: var(--studio-control) !important;
    color: var(--studio-text) !important;
    border-color: var(--studio-border) !important;
    -webkit-text-fill-color: var(--studio-text);
}
#editor-modal#editor-modal :is(input, textarea)::placeholder { color: var(--studio-muted); opacity: 1; }
/* Typing fields show focus as plainly as buttons do. */
#editor-modal#editor-modal :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    select, textarea, .transcript-card-editor):focus-visible {
    border-color: var(--studio-focus) !important;
}
#editor-modal#editor-modal :is(.fx-btn, .timeline-action, .tool-switch-btn, .output-mini-btn,
    .editor-drawer-close, .studio-close, .editor-tab, .transcript-card-video-toggle,
    .transcript-card-delete, .transcript-word-seek, .transcript-word-remove,
    .editor-transport > button, .editor-text-font-trigger, .editor-text-font-option,
    .scene-settings-heading button, .scene-settings-popover-panel button) {
    color: var(--studio-text) !important;
    background: var(--studio-control) !important;
    border-color: var(--studio-border) !important;
    box-shadow: none;
}
#editor-modal#editor-modal :is(.fx-btn, .timeline-action, .tool-switch-btn, .output-mini-btn,
    .editor-drawer-close, .studio-close, .editor-tab, .transcript-card-video-toggle,
    .transcript-card-delete, .transcript-word-seek, .transcript-word-remove,
    .editor-transport > button, .editor-text-font-trigger, .editor-text-font-option,
    .scene-settings-popover-panel button):hover:not(:disabled) {
    color: var(--studio-text) !important;
    background: var(--studio-hover) !important;
    border-color: var(--studio-border) !important;
}
#editor-modal#editor-modal :is(button:not(.editor-caption-preset-card), input:not([type="color"]), select, textarea):disabled {
    color: var(--studio-muted) !important; background: var(--studio-raised) !important;
    border-color: var(--studio-border-soft) !important; opacity: 1; cursor: not-allowed;
}
#editor-modal#editor-modal :is(.editor-tab.active, .tool-switch-btn.active,
    .editor-text-font-option[aria-selected="true"], .transcript-card-video-toggle[aria-expanded="true"]) {
    color: var(--studio-text) !important;
    background: var(--studio-selected) !important;
    border-color: var(--studio-focus) !important;
    box-shadow: inset 0 -2px var(--studio-focus);
}
#editor-modal#editor-modal :is(#editor-play-btn, #editor-loop-toggle, #editor-preview-loop-toggle,
    .editor-loop-badge, .tool-switch-btn.active) { color: var(--studio-focus) !important; }
#editor-modal#editor-modal :is(.transcript-word-remove, .transcript-card-delete,
    .editor-open-state.error, #editor-hook-warning) { color: var(--studio-danger) !important; }
#editor-modal#editor-modal :is(.editor-open-state.error, .editor-open-state) { background: transparent; }
#editor-modal#editor-modal :is(.crop-position-row, .scene-item) {
    background: transparent !important;
    color: var(--studio-text);
    border-color: var(--studio-border-soft) !important;
}
#editor-modal#editor-modal :is(.crop-position-row.active, .scene-item.selected, .scene-item.multi-selected,
    .transcript-card.search-active, .transcript-card.editing) {
    background: var(--studio-selected) !important;
    border-color: var(--studio-focus) !important;
}
#editor-modal#editor-modal :is(.editor-text-font-options, .editor-text-font-list, .music-library) {
    background: var(--studio-panel) !important;
    color: var(--studio-text);
    border-color: var(--studio-border) !important;
}
#editor-modal#editor-modal .music-track { background: var(--studio-control); border-color: var(--studio-border); }
#editor-modal#editor-modal .music-track-name { color: var(--studio-text); }
#editor-modal#editor-modal .music-track.selected { background: var(--studio-selected); border-color: var(--studio-focus); }
#editor-modal#editor-modal #editor-music-summary { color: var(--studio-muted); }
#editor-modal#editor-modal .editor-caption-transcribe-gate {
    background: var(--studio-raised) !important; border-color: var(--studio-border) !important;
}
#editor-modal#editor-modal .editor-caption-transcribe-copy strong { color: var(--studio-text); }
#editor-modal#editor-modal .editor-caption-transcribe-copy span { color: var(--studio-muted); }
#editor-modal#editor-modal .editor-music-message-error { color: var(--studio-danger); }
#editor-modal#editor-modal .editor-music-message-warning { color: var(--studio-warning); }
#editor-modal#editor-modal .preview-truth-badge { color: var(--studio-muted); background: var(--studio-inset); border-color: var(--studio-border); }
#editor-modal#editor-modal .preview-truth-badge.draft { color: var(--studio-warning); }
#editor-modal#editor-modal :is(.studio-col-resizer, .preview-row-resizer, .timeline-resizer) {
    background: var(--studio-border-soft);
}
#editor-modal#editor-modal :is(.studio-col-resizer, .preview-row-resizer)::before { background: var(--studio-muted); }
#editor-modal#editor-modal :is(button, input, select, textarea, summary):focus-visible {
    outline-color: var(--studio-focus);
}
#editor-modal#editor-modal :is(.editor-ruler-label, .editor-seek-info, .editor-text-track-empty,
    #scrub-time-current, #scrub-time-total, #scrub-time-fps, .editor-timecode, .crop-position-range,
    .editor-caption-preset-card-label, .editor-text-style-field label, #editor-text-style-scope) { color: var(--studio-muted) !important; }
#editor-modal#editor-modal .editor-ruler-tick { background: var(--studio-border); }
#editor-modal#editor-modal .editor-ruler-tick.major { background: var(--studio-muted); }
#editor-modal#editor-modal :is(.editor-text-lane, .editor-text-lane-body) { background: transparent !important; border-color: var(--studio-border-soft); }
#editor-modal#editor-modal :is(.editor-text-lane-header, .editor-text-track-placeholder, .editor-waveform-status) {
    background: var(--studio-inset) !important; border-color: var(--studio-border); color: var(--studio-muted) !important;
}
#editor-modal#editor-modal .timeline-video-segment-label { color: var(--studio-text); text-shadow: none; }
#editor-modal#editor-modal .editor-caption-preset-card { background: var(--studio-control); border-color: var(--studio-border); }
#editor-modal#editor-modal .editor-caption-preset-card.active { border-color: var(--studio-focus); box-shadow: inset 0 -2px var(--studio-focus); }
#editor-modal#editor-modal .editor-caption-preset-visual { background: #242424; }
#editor-modal#editor-modal :is(.scene-layout-toolbar, .scene-layout-switch, .editor-tool-switch,
    #scene-layout-pills, .editor-tool-group, .editor-zoom-group, .editor-text-track-empty, #timeline-container,
    #editor-scene-track, .editor-caption-preset-active-label) {
    background: var(--studio-raised) !important; border-color: var(--studio-border) !important; box-shadow: none;
}
#editor-modal#editor-modal .editor-caption-preset-active-label { color: var(--studio-text) !important; }
#editor-modal#editor-modal :is(label, output) { color: var(--studio-muted) !important; }
#editor-modal#editor-modal :is(.editor-text-style-head, .editor-text-style-heading,
    .editor-text-style-heading strong, .editor-text-style-heading span,
    .editor-text-compose-label, .editor-text-style-panel > header, .editor-text-style-panel > div:first-child) { color: var(--studio-text) !important; }
#editor-modal#editor-modal .editor-text-lane { background: var(--studio-raised) !important; }
#editor-modal#editor-modal .editor-text-layer-block {
    background: #d7e6ff;
    border-color: #466fae;
    color: #153e75;
}
#editor-modal#editor-modal .editor-text-layer-copy { color: #153e75; }
#editor-modal#editor-modal .editor-text-layer-kicker { color: #355478; }
#editor-modal#editor-modal .editor-text-layer-handle { background: #2e58a0; }
#editor-modal#editor-modal .editor-text-layer-block:is(:hover, :focus-visible, .active) {
    background: #c7dbff;
    border-color: #1014ef;
    box-shadow: inset 0 0 0 1px #1014ef;
}
html[data-theme="dark"] #editor-modal#editor-modal .editor-text-layer-block {
    background: #183c63;
    border-color: #8bafff;
}
html[data-theme="dark"] #editor-modal#editor-modal .editor-text-layer-copy { color: #f3f7ff; }
html[data-theme="dark"] #editor-modal#editor-modal .editor-text-layer-kicker { color: #bdd4ff; }
html[data-theme="dark"] #editor-modal#editor-modal .editor-text-layer-handle { background: #a6c8ff; }
html[data-theme="dark"] #editor-modal#editor-modal .editor-text-layer-block:is(:hover, :focus-visible, .active) {
    background: #244f7c;
    border-color: #b5caff;
    box-shadow: inset 0 0 0 1px #b5caff;
}
#editor-modal#editor-modal :is(.editor-ruler-playhead, .editor-text-playhead, .editor-scene-playhead),
#editor-modal#editor-modal :is(.editor-ruler-playhead, .editor-scene-playhead)::before {
    background: var(--studio-focus);
    box-shadow: none;
}
/* The shared scene/media playhead is painted above both tracks. The native
   range remains the keyboard/pointer seek surface without a second marker. */
#editor-modal#editor-modal #clip-scrubber::-webkit-slider-thumb {
    background: transparent;
    border: 0;
    box-shadow: none;
}
#editor-modal#editor-modal #clip-scrubber::-moz-range-thumb {
    background: transparent;
    border: 0;
    box-shadow: none;
}
#editor-modal#editor-modal .editor-caption-preset-cards { scrollbar-color: var(--studio-focus) transparent; }
#editor-modal#editor-modal .editor-caption-preset-cards::-webkit-scrollbar-thumb { background: var(--studio-focus); }
#editor-modal#editor-modal :is(.crop-toolbar-title, .crop-positions-title, .crop-positions-title span,
    .crop-positions-head h4, .scene-layout-pill, .transcript-tools > summary,
    .transcript-words-toggle, .editor-timecode-readout, .timeline-zoom-label,
    .editor-caption-limits > summary) { color: var(--studio-text) !important; }
#editor-modal#editor-modal :is(.scene-layout-pill, .transcript-tools > summary,
    .transcript-words-toggle, .editor-timecode-readout, .crop-positions-action) {
    background: var(--studio-control) !important; border-color: var(--studio-border) !important;
}
#editor-modal#editor-modal :is(.scene-layout-pill.active, .scene-layout-pill[aria-checked="true"],
    .transcript-words-toggle[aria-expanded="true"], .editor-loop-toggle.active, .editor-autokey-toggle.active) {
    background: var(--studio-selected) !important; color: var(--studio-focus) !important; border-color: var(--studio-focus) !important;
}
#editor-modal#editor-modal :is(.editor-frame-rate-label, .crop-positions-count, #editor-preview-time) { color: var(--studio-muted) !important; }
#editor-modal#editor-modal .crop-positions-count { background: var(--studio-inset); }
#editor-modal#editor-modal .range-value { background: var(--studio-selected); color: var(--studio-text); border-color: var(--studio-border); }
#editor-modal#editor-modal .transcript-edit-footer strong { color: var(--studio-text) !important; }
#editor-modal#editor-modal #btn-transcribe-source {
    background: var(--v2-blue) !important; color: #fff !important; border-color: var(--v2-blue) !important; box-shadow: none;
}
#editor-modal#editor-modal .editor-theme-toggle {
    display: grid; place-items: center; width: 38px; height: 38px;
    min-width: 38px; padding: 0; color: var(--studio-text);
    background: var(--studio-control); border: 1px solid var(--studio-border); border-radius: 6px;
}
#editor-modal#editor-modal .editor-theme-toggle::before { content: none; }
#editor-modal#editor-modal .editor-theme-toggle svg { grid-area: 1/1; width: 20px; height: 20px; }
#editor-modal#editor-modal .editor-theme-toggle .icon-sun { display: block; }
#editor-modal#editor-modal .editor-theme-toggle .icon-moon { display: none; }
html[data-theme="light"] #editor-modal#editor-modal .editor-theme-toggle .icon-sun { display: none; }
html[data-theme="light"] #editor-modal#editor-modal .editor-theme-toggle .icon-moon { display: block; }
@media (max-width: 700px) {
    #editor-modal#editor-modal .editor-theme-toggle { position: absolute; top: 8px; right: 50px; width: 44px; height: 44px; min-width: 44px; }
    #editor-modal#editor-modal .studio-title-block { min-height: 44px; padding-right: 88px; }
    #editor-modal#editor-modal .studio-close { top: 12px; }
    #editor-modal#editor-modal .editor-drawer-panel { max-height: calc(100dvh - 184px - var(--studio-tools-inset)); }
    #editor-modal#editor-modal #editor-tab-transcript.is-expanded { height: calc(100dvh - 184px - var(--studio-tools-inset)); }
}
/* Scene/media color keys and crop guides remain functional colors. Monitor
   interiors stay black so letterboxing and the actual media are truthful. */
#editor-modal#editor-modal :is(.source-frame-wrap, .output-frame-wrap) { background: #000000 !important; }
#editor-modal#editor-modal .crop-label { color: #ffffff !important; background: rgb(0 0 0 / .75); }
/* Floating editor menus live outside the modal but use the same theme tokens. */
body.reframe-studio-open :is(.editor-context-menu, .editor-audio-transition-popover,
    .paste-effects-card) {
    background: var(--studio-panel) !important;
    color: var(--studio-text);
    border-color: var(--studio-border) !important;
    box-shadow: var(--studio-shadow);
}
body.reframe-studio-open .editor-audio-transition-curve { background: var(--studio-waveform-bg) !important; }
body.reframe-studio-open .editor-audio-transition-curve::after { border-color: var(--studio-waveform-line); }
@media (prefers-contrast: more) {
    #editor-modal#editor-modal :is(.editor-drawer-panel, input, select, textarea, .editor-tab) { border-color: var(--studio-text) !important; }
}
@media (prefers-reduced-transparency: reduce) {
    #editor-modal#editor-modal, #editor-modal#editor-modal .reframe-studio { background: var(--studio-bg) !important; }
}