/* SlicePost Reframe Studio
   Viewport-scale review surface layered over the existing blueprint editor.
   IDs and control behavior remain owned by templates/index.html. */

body.reframe-studio-open {
    overflow: hidden;
}

#editor-modal {
    --v2-blue-light: #3b82f6; /* Legacy fallbacks; editor-neutral-theme.css owns the palette. */
    --v2-white: #F1F4F7;
    --v2-muted: #9DA6AF;
    --v2-dim: #9DA6AF;
    --v2-slate: #181D21;
    --v2-slate-2: #20262B;
    --v2-slate-3: #262C32;
    --v2-fill: rgba(255,255,255,.035);
    --v2-border: rgba(255,255,255,.075);
    --v2-border-strong: rgba(255,255,255,.14);
    --text-main: var(--v2-white);
    --text-muted: var(--v2-muted);
    --panel-bg: var(--v2-slate);
    color-scheme: dark;
    padding: 12px !important;
    overflow: hidden !important;
    background: rgba(5, 7, 13, 0.96) !important;
    backdrop-filter: blur(18px) !important;
}

#editor-modal .reframe-studio {
    width: 100%;
    max-width: none !important;
    height: calc(100dvh - 24px);
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(152, 162, 179, 0.2) !important;
    border-radius: 18px !important;
    background: #0a0f1c !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.56) !important;
}

#editor-modal .studio-toolbar {
    min-height: 70px;
    margin: 0 !important;
    padding: 12px 18px !important;
    flex: 0 0 auto;
    background: #0d121f;
    border-bottom-color: rgba(152, 162, 179, 0.18) !important;
}

.studio-title-block {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.studio-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid rgba(16, 20, 239, 0.46);
    border-radius: 999px;
    background: rgba(16, 20, 239, 0.12);
    color: var(--v2-blue-light, #3b82f6);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
}

#editor-modal #editor-title {
    overflow: hidden;
    color: #e6eaf2 !important;
    font-size: 1.05rem !important;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

#editor-modal .editor-open-state {
    flex: 1 1 auto;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #aeb8c9;
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0.01em;
}

#editor-modal .editor-open-state[hidden] {
    display: none !important;
}

#editor-modal .editor-open-spinner {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border: 2px solid rgba(103, 232, 249, 0.22);
    border-top-color: #67e8f9;
    border-radius: 50%;
    animation: editor-open-spin 0.8s linear infinite;
}

#editor-modal .editor-open-spinner[hidden] {
    display: none;
}

#editor-modal .editor-open-state.error {
    color: #fca5a5;
}

@keyframes editor-open-spin {
    to { transform: rotate(360deg); }
}

.editor-save-state,
.editor-mode-state {
    white-space: nowrap;
}

.editor-save-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #98a2b3;
    font-size: 0.74rem;
}

.editor-mode-state {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid rgba(152, 162, 179, 0.18);
    border-radius: 999px;
    color: #c7cfdd;
    background: rgba(255, 255, 255, 0.025);
    font-size: 0.68rem;
    font-weight: 700;
}

.editor-save-state::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #27c58b;
    content: "";
}

.editor-save-state.dirty {
    color: #f2b84b;
}

.editor-save-state.dirty::before {
    background: #f2b84b;
}

.editor-save-state.rendering {
    color: var(--v2-blue-light, #3b82f6);
}

.editor-save-state.rendering::before {
    background: var(--v2-blue, #1014ef);
    box-shadow: 0 0 0 4px rgba(16, 20, 239, 0.14);
}

.studio-close {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(152, 162, 179, 0.16) !important;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025) !important;
    font-size: 1.35rem !important;
}

.studio-close:hover {
    border-color: rgba(230, 234, 242, 0.34) !important;
    color: #e6eaf2 !important;
}

/* The scene panel is mounted into .studio-output-rail by the editor script,
   leaving the outer grid as one full-width workspace. */
#editor-modal .editor-grid {
    min-height: 0;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
}

#editor-modal #editor-workspace {
    min-width: 0;
    min-height: 0;
    gap: 16px !important;
    padding: 16px 18px 30px;
    overflow: auto;
    scrollbar-color: var(--v2-blue, #1014ef) transparent;
}

/* JS deliberately toggles this element with inline display:flex / display:none.
   Only the active state is promoted to the 68/32 desktop studio grid. The
   left column width is a draggable custom property (#studio-col-resizer,
   same custom-property pattern as --timeline-h) so Position crop and
   Preview can be resized against each other like Premiere Pro panels
   (2026-08-05, Carter). Default is the fr fraction, same as the original
   fixed ratio - NOT a flat px number, which stayed hostage to whatever
   default I picked regardless of window size and left the crop canvas
   small and a huge share of a wide window empty next to it (2026-08-06,
   Carter). Once dragged, JS overrides this with an absolute px value,
   which is correct there: a manually set split should hold its size, not
   re-proportion on every reflow. */
#editor-modal #editor-workspace[style*="display: flex"] {
    display: grid !important;
    grid-template-columns: minmax(320px, var(--studio-col-w, 2.125fr)) 8px minmax(300px, 1fr);
    align-items: start;
}

.studio-edit-column {
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.studio-col-resizer {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    width: 8px;
    border-radius: 4px;
    background: rgba(152, 162, 179, 0.10);
    cursor: ew-resize;
    position: relative;
    touch-action: none;
}

.studio-col-resizer::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 32px;
    border-radius: 2px;
    background: rgba(152, 162, 179, 0.45);
    transform: translate(-50%, -50%);
}

.studio-col-resizer:hover,
.studio-col-resizer:focus-visible {
    background: rgba(34, 211, 238, 0.16);
    outline: none;
}

.studio-col-resizer:hover::before,
.studio-col-resizer:focus-visible::before {
    background: rgba(34, 211, 238, 0.65);
}

/* Drag boundary between Preview (9:16) and Crop Positions, both stacked
   inside .studio-output-rail. Shrinks the preview (via --preview-frame-w
   on .output-frame-wrap) so Crop Positions - already flex: 1 - can grow
   into the freed height instead of scrolling internally (2026-08-06,
   Carter). */
.preview-row-resizer {
    flex: 0 0 auto;
    height: 10px;
    margin: -2px 0;
    border-radius: 4px;
    background: rgba(152, 162, 179, 0.10);
    cursor: ns-resize;
    position: relative;
    touch-action: none;
}

.preview-row-resizer::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 3px;
    border-radius: 2px;
    background: rgba(152, 162, 179, 0.45);
    transform: translate(-50%, -50%);
}

.preview-row-resizer:hover,
.preview-row-resizer:focus-visible {
    background: rgba(34, 211, 238, 0.16);
    outline: none;
}

.preview-row-resizer:hover::before,
.preview-row-resizer:focus-visible::before {
    background: rgba(34, 211, 238, 0.65);
}

.studio-output-rail {
    min-width: 0;
    max-height: calc(100dvh - 164px);
    grid-column: 3;
    grid-row: 1;
    position: sticky;
    top: 0;
    /* Stretch (not start) so the rail actually reaches the row's full
       height - set by whichever column is naturally taller, almost always
       .studio-edit-column - instead of shrink-wrapping its own content and
       leaving the difference as visible dead space below Crop Positions
       (2026-08-06, Carter). Sticky still works while stretched: it's
       positioned against the nearest scrolling ancestor, not its own
       height. */
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--v2-blue, #1014ef) transparent;
}

/* Compact, color-keyed Crop Positions rail. Stable scene colors are supplied
   through each card's --scene-color property by the editor script. */
.studio-output-rail .studio-scene-panel {
    min-height: 132px;
    max-height: clamp(132px, 14dvh, 168px);
    padding: 11px;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(152, 162, 179, 0.16);
    border-radius: 13px;
    background: #090d17;
}

.legacy-scene-panel[hidden] {
    display: none !important;
}

.studio-output-rail .studio-scene-panel > div:first-child {
    flex: 0 0 auto;
    margin-bottom: 5px !important;
}

.studio-output-rail .studio-scene-panel h4 {
    color: #e6eaf2 !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.035em !important;
}

.studio-output-rail .studio-scene-panel > .control-hint {
    display: none;
}

#editor-modal #editor-scenes-list {
    min-height: 0;
    max-height: none !important;
    gap: 5px !important;
    padding: 1px 4px 2px 0 !important;
    overflow-y: auto !important;
    scrollbar-color: var(--v2-blue, #1014ef) transparent;
}

#editor-modal #editor-scenes-list .scene-item {
    position: relative;
    gap: 2px;
    padding: 7px 8px 7px 11px;
    overflow: hidden;
    border: 1px solid rgba(152, 162, 179, 0.16);
    border-left: 3px solid var(--scene-color, #22d3ee);
    border-radius: 8px !important;
    background: rgba(18, 22, 32, 0.92);
    box-shadow: none;
}

#editor-modal #editor-scenes-list .scene-item:hover {
    border-color: rgba(230, 234, 242, 0.32);
    border-left-color: var(--scene-color, #22d3ee);
    background: rgba(25, 30, 43, 0.96);
}

#editor-modal #editor-scenes-list .scene-item.selected {
    border-color: var(--scene-color, #22d3ee);
    background: color-mix(in srgb, var(--scene-color, #22d3ee) 11%, #111622);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--scene-color, #22d3ee) 40%, transparent);
}

#editor-modal #editor-scenes-list .scene-item.multi-selected {
    box-shadow: inset 0 0 0 1px var(--v2-blue-light, #3b82f6);
}

#editor-modal #editor-scenes-list .scene-row1 {
    gap: 6px;
    color: #e6eaf2;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

#editor-modal #editor-scenes-list .scene-row1 > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#editor-modal #editor-scenes-list .scene-row2 {
    overflow: hidden;
    color: #78849a;
    font-size: 0.61rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#editor-modal #editor-scenes-list .layout-badge {
    padding: 1px 5px;
    font-size: 0.54rem;
}

#editor-modal #editor-scenes-list .scene-delete-btn {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    border-radius: 5px;
    font-size: 0.76rem;
}

#editor-modal #editor-scenes-list .static-crop-row {
    margin-top: 2px;
}

#editor-modal #editor-scenes-list .static-crop-title {
    font-size: 0.54rem;
}

#editor-modal #editor-scenes-list .static-crop-hint {
    display: none;
}

#editor-modal #editor-scenes-list .static-crop-toggle {
    width: 30px;
    height: 18px;
}

#editor-modal #editor-scenes-list .static-crop-toggle::before {
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
}

#editor-modal #editor-scenes-list .static-crop-toggle.active::before {
    transform: translateX(12px);
}

/* Source reframe column --------------------------------------------------- */
#editor-modal .studio-preview-panel {
    min-width: 0;
    padding: 13px !important;
    border-color: rgba(152, 162, 179, 0.16) !important;
    border-radius: 14px !important;
    background: #080b12 !important;
}

.studio-preview-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    text-align: left;
}

.studio-preview-heading > div > span {
    display: block;
    margin-bottom: 3px;
    color: var(--v2-blue-light, #3b82f6);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

#editor-modal #editor-preview-hint {
    margin: 0 !important;
    color: #c7cfdd !important;
    font-size: 0.78rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.preview-truth-badge {
    padding: 5px 8px;
    border: 1px solid rgba(0, 217, 232, 0.28);
    border-radius: 999px;
    background: rgba(0, 217, 232, 0.07);
    color: #65e8f0;
    font-size: 0.65rem;
    font-weight: 700;
    white-space: nowrap;
}

.preview-truth-badge.draft {
    border-color: rgba(242, 184, 75, 0.34);
    background: rgba(242, 184, 75, 0.08);
    color: #f2c76c;
}

.reframe-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    align-items: start;
}

.source-monitor,
.output-monitor,
.preview-control-dock {
    min-width: 0;
}

.source-monitor {
    text-align: left;
}

.scene-layout-toolbar {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    padding: 7px;
    border: 1px solid rgba(152, 162, 179, 0.14);
    border-radius: 10px;
    background: rgba(15, 19, 29, 0.9);
    text-align: left;
}

.scene-layout-toolbar-copy {
    min-width: 125px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.scene-layout-toolbar-copy > span {
    color: #e6eaf2;
    font-size: 0.67rem;
    font-weight: 750;
}

.scene-layout-toolbar-copy > small {
    color: #6f7a8e;
    font-size: 0.57rem;
}

.scene-layout-pills {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border: 1px solid rgba(152, 162, 179, 0.13);
    border-radius: 9px;
    background: #080b12;
}

.scene-layout-pill {
    min-height: 29px;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #8f99ab;
    font: inherit;
    font-size: 0.62rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.scene-layout-pill:hover:not(:disabled) {
    color: #e6eaf2;
    background: rgba(255, 255, 255, 0.05);
}

.scene-layout-pill.active,
.scene-layout-pill[aria-checked="true"] {
    border-color: rgba(34, 211, 238, 0.45);
    color: #dffcff;
    background: rgba(34, 211, 238, 0.15);
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.08);
}

.scene-layout-pill:disabled {
    opacity: 0.44;
    cursor: not-allowed;
}

.scene-layout-toolbar .secondary-scene-action {
    min-height: 31px;
    margin-left: auto;
    padding: 4px 8px;
    border-color: rgba(152, 162, 179, 0.19);
    background: rgba(255, 255, 255, 0.03);
    color: #aeb7c7;
    font-size: 0.61rem;
    white-space: nowrap;
}

.scene-layout-toolbar .secondary-scene-action + .secondary-scene-action {
    margin-left: 0;
}

.scene-layout-toolbar .secondary-scene-action.active,
.scene-layout-toolbar .secondary-scene-action[aria-checked="true"] {
    border-color: rgba(16, 20, 239, 0.5);
    color: var(--v2-blue-light, #3b82f6);
    background: rgba(16, 20, 239, 0.13);
}

.monitor-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    color: #e6eaf2;
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-align: left;
}

.monitor-label small {
    color: #6f7a8e;
    font-size: 0.59rem;
    font-weight: 500;
}

#editor-modal #preview-container {
    width: 100% !important;
    max-width: none !important;
    border-color: rgba(152, 162, 179, 0.2) !important;
    border-radius: 10px !important;
    background: #03060b !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.015);
}

#editor-modal #editor-thumbnail {
    width: 100% !important;
    max-width: none !important;
}

/* The source monitor is picture geometry only. Hidden caption/hook staging
   remains in the DOM because it drives the true Final 9:16 overlay program. */
#editor-caption-preview,
#editor-hook-preview {
    visibility: hidden !important;
}

/* User-created Text graphics are the one interactive exception to the
   source-monitor geometry-only rule. The overlay sits above the crop guides,
   but its drag math is always bounded by the active crop rectangle. */
#editor-modal #editor-text-overlay-layer {
    position: absolute;
    z-index: 7;
    inset: 0;
    pointer-events: none;
}

#editor-modal .editor-text-overlay {
    position: absolute;
    z-index: 8;
    display: block;
    width: max-content;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    padding: 0.28em 0.5em;
    overflow: hidden;
    border: 0;
    border-radius: 6px;
    outline: none;
    background: rgba(3, 10, 20, 0.78);
    color: #f8fafc;
    font-size: clamp(0.8rem, 2.5vw, 1.45rem);
    font-weight: 800;
    line-height: 1.08;
    text-align: center;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    user-select: text;
}

#editor-modal .editor-text-overlay:hover,
#editor-modal .editor-text-overlay:focus,
#editor-modal .editor-text-overlay.dragging {
    box-shadow: none;
}

#editor-modal .editor-text-overlay:focus-visible {
    outline: 2px solid var(--studio-focus, #1014ef);
    outline-offset: 4px;
}

#editor-modal .editor-text-render-line {
    position: absolute;
    left: 50%;
    display: block;
    width: max-content;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    letter-spacing: inherit;
    white-space: pre;
    transform: translate(-50%, -50%);
}

#editor-modal .editor-source-controls,
#editor-modal .editor-source-tools { display: contents; }

#editor-modal .editor-text-overlay.dragging {
    cursor: grabbing;
}

.preview-control-dock {
    grid-column: 1;
    padding: 8px;
    overflow: hidden;
    border: 1px solid rgba(152, 162, 179, 0.14);
    border-radius: 10px;
    background: #0b0f18;
}

.preview-control-dock > .monitor-label {
    margin-bottom: 5px;
}

.editor-quick-controls {
    display: grid;
    grid-template-columns: minmax(190px, 1.7fr) minmax(150px, 0.9fr) minmax(110px, 0.55fr);
    gap: 8px;
    max-width: none;
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(152, 162, 179, 0.12);
    border-radius: 9px;
    background: rgba(18, 22, 32, 0.84);
    text-align: left;
}

.editor-quick-controls > div {
    min-width: 0;
    padding: 0;
}

.editor-quick-controls label {
    margin-bottom: 4px !important;
    font-size: 0.65rem !important;
}

.editor-quick-controls select,
.editor-quick-controls input[type="range"] {
    width: 100%;
}

.editor-quick-controls #control-scene-effects > div {
    gap: 4px !important;
}

.editor-quick-controls #control-scene-effects .fx-btn {
    min-height: 30px;
    padding: 4px 7px;
    font-size: 0.63rem;
}

.editor-quick-controls #scene-speaker-name {
    display: block;
    overflow: hidden;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editor-quick-controls #control-scene-zoom .control-hint,
.editor-quick-controls #control-smart-trim .control-hint {
    display: none;
}

/* Integrated waveform transport ------------------------------------------ */
.editor-seek-info {
    min-height: 16px;
    margin: 5px 0 1px;
    color: #6f7a8e;
    font-size: 0.61rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.editor-transport {
    display: grid;
    grid-template-columns: 34px 34px 34px 34px auto minmax(180px, 1fr) auto auto;
    gap: 5px;
    align-items: center;
    width: 100%;
    margin-top: 2px;
    text-align: left;
}

#editor-modal .editor-transport > button:not(.editor-loop-badge) {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(152, 162, 179, 0.17) !important;
    border-radius: 8px;
    background: #111621 !important;
    color: #aeb7c7 !important;
    font: inherit;
    font-size: 0.74rem !important;
}

#editor-modal .editor-transport > button:hover {
    border-color: rgba(34, 211, 238, 0.45) !important;
    color: #67e8f9 !important;
}

#editor-modal #editor-play-btn {
    color: #67e8f9 !important;
}

.clip-scrubber-wrap {
    min-width: 160px;
    height: 58px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(152, 162, 179, 0.18);
    border-radius: 8px;
    background: #05070d;
}

#editor-waveform-canvas {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.96;
    pointer-events: none;
}

.editor-aspect-control {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #7f8a9e;
    font-size: 0.58rem;
    font-weight: 750;
    white-space: nowrap;
}

.editor-aspect-control select {
    min-height: 29px;
    padding: 4px 24px 4px 8px;
    border: 1px solid rgba(16, 20, 239, 0.34);
    border-radius: 7px;
    background: #080b12;
    color: var(--v2-blue-light, #3b82f6);
    font: inherit;
    font-size: 0.64rem;
}

.transcript-editor-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#clip-cut-markers {
    position: absolute;
    z-index: 2;
    inset: 0 6px;
    pointer-events: none;
}

#editor-modal .timeline-cut-band {
    top: 4px;
    height: calc(100% - 8px);
    background: rgba(248, 113, 113, 0.42);
    box-shadow: inset 0 0 0 1px rgba(254, 202, 202, 0.38);
}

#editor-modal .timeline-boundary-marker {
    top: 0;
    bottom: 0;
}

#editor-modal #clip-scrubber {
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: ew-resize;
    background: transparent;
}

#editor-modal #clip-scrubber::-webkit-slider-runnable-track {
    height: 100%;
    background: transparent;
}

#editor-modal #clip-scrubber::-webkit-slider-thumb {
    width: 3px;
    height: 58px;
    margin-top: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: #22d3ee;
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.85);
}

#editor-modal #clip-scrubber::-moz-range-track {
    height: 100%;
    background: transparent;
}

#editor-modal #clip-scrubber::-moz-range-thumb {
    width: 3px;
    height: 58px;
    border: 0;
    border-radius: 0;
    background: #22d3ee;
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.85);
}

.editor-loop-badge {
    min-height: 31px;
    padding: 4px 8px;
    border: 1px solid rgba(39, 197, 139, 0.28);
    border-radius: 999px;
    color: #7ee2ba;
    background: rgba(39, 197, 139, 0.08);
    font: inherit;
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.editor-loop-badge.active {
    border-color: rgba(16, 20, 239, 0.5);
    color: var(--v2-blue-light, #3b82f6);
    background: rgba(16, 20, 239, 0.13);
}

.timeline-commandbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 7px;
}

.timeline-command-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

.timeline-commandbar .fx-btn {
    min-height: 29px;
    padding: 4px 8px;
    border-color: rgba(152, 162, 179, 0.17);
    background: #111621;
    color: #aeb7c7;
    font-size: 0.61rem;
}

.timeline-commandbar .danger-soft {
    border-color: rgba(248, 113, 113, 0.28);
    color: #fca5a5;
    background: rgba(127, 29, 29, 0.12);
}

.framing-timeline-shell {
    margin-top: 7px;
    padding: 8px;
    border: 1px solid rgba(152, 162, 179, 0.15);
    border-radius: 10px;
    background: #0b0f18;
    text-align: left;
}

.framing-timeline-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

.framing-timeline-heading > span {
    color: #dce2ec;
    font-size: 0.67rem;
    font-weight: 750;
}

.framing-timeline-heading > small {
    overflow: hidden;
    color: #6f7a8e;
    font-size: 0.56rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editor-scene-track {
    position: relative;
    height: 52px;
    overflow: visible;
    border: 1px solid rgba(152, 162, 179, 0.17);
    border-radius: 8px;
    background: #05070d;
}

.framing-scene-segment {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 6px;
    overflow: hidden;
    border: 0;
    border-top: 3px solid var(--scene-color, #22d3ee);
    border-right: 1px solid rgba(5, 7, 13, 0.68);
    background: color-mix(in srgb, var(--scene-color, #22d3ee) 20%, #0a0f18);
    color: #dce2ec;
    cursor: pointer;
    user-select: none;
}

.framing-scene-segment:first-child {
    border-radius: 7px 0 0 7px;
}

.framing-scene-segment strong {
    font-size: 0.65rem;
    font-variant-numeric: tabular-nums;
}

.framing-scene-segment span {
    overflow: hidden;
    color: #b6c0d0;
    font-size: 0.55rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.framing-scene-segment:hover {
    filter: brightness(1.18);
}

/* Overwrite/ripple edge handles - only meaningful (and only rendered) on
   edges that border another scene; the clip's outer start/end aren't
   draggable this way. Hidden while Split is armed so the two tool
   affordances never compete for the same hover area. */
.scene-edge-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 7px;
    z-index: 4;
    cursor: ew-resize;
    touch-action: none;
}

.scene-edge-handle.left { left: -3px; }
.scene-edge-handle.right { right: -3px; }

.scene-edge-handle:hover,
.scene-edge-handle.dragging {
    background: rgba(255, 255, 255, 0.35);
}

.editor-scene-track.tool-split-active .scene-edge-handle {
    pointer-events: none;
}

/* Shown only while an edge-drag has magnet-snapped to a candidate. */
.scene-edge-snap-indicator {
    position: absolute;
    top: -3px;
    bottom: -3px;
    z-index: 10;
    width: 2px;
    display: none;
    background: #67e8f9;
    box-shadow: 0 0 6px rgba(103, 232, 249, 0.9);
    pointer-events: none;
    transform: translateX(-1px);
}

.framing-scene-segment.selected {
    z-index: 2;
    box-shadow: inset 0 0 0 2px var(--scene-color, #22d3ee), 0 0 0 1px #05070d;
}

.framing-scene-segment.multi-selected {
    box-shadow: inset 0 0 0 2px var(--v2-blue-light, #3b82f6);
}

.editor-scene-playhead {
    position: absolute;
    z-index: 8;
    top: -7px;
    bottom: -7px;
    width: 2px;
    border-radius: 999px;
    background: #f8fafc;
    box-shadow: 0 0 0 1px rgba(5, 7, 13, 0.72), 0 0 10px rgba(103, 232, 249, 0.72);
    pointer-events: none;
    transform: translateX(-1px);
}

.editor-scene-playhead::before {
    position: absolute;
    top: -1px;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 2px 2px 50% 50%;
    background: #f8fafc;
    content: "";
    transform: translate(-50%, -45%) rotate(45deg);
}

/* Compact trim controls remain directly beneath playback and scene timing. */
#editor-modal .clip-trim-controls {
    max-width: none;
    margin: 8px 0 0;
    padding: 8px 9px;
    border-color: rgba(152, 162, 179, 0.15);
    border-radius: 10px;
    background: #0b0f18;
}

#editor-modal .clip-trim-controls .dual-range-shell {
    height: 26px;
    margin: 4px 0 3px;
}

#editor-modal .clip-trim-controls :is(.dual-range-rail, .dual-range-selection) {
    top: 11px;
    height: 4px;
}

#editor-modal .clip-trim-controls .dual-range-input {
    height: 26px;
}

#editor-modal .clip-trim-controls .dual-range-input::-webkit-slider-thumb {
    width: 15px;
    height: 15px;
    margin-top: -5px;
}

#editor-modal .clip-trim-controls .range-boundary-grid {
    gap: 6px;
}

#editor-modal .clip-trim-controls .range-boundary-card {
    padding: 6px 7px;
    border-color: rgba(152, 162, 179, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.018);
}

#editor-modal .clip-trim-controls .range-boundary-title {
    margin-bottom: 4px;
    font-size: 0.64rem;
}

#editor-modal .clip-trim-controls .range-nudge-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

#editor-modal .clip-trim-controls .range-nudge-row .fx-btn {
    min-height: 28px;
    padding: 3px 5px;
    overflow: hidden;
    border-color: rgba(152, 162, 179, 0.16);
    background: #111621;
    color: #aeb7c7;
    font-size: 0.59rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#editor-modal #clip-trim-summary {
    margin-top: 4px !important;
    font-size: 0.57rem;
    text-align: center;
}

/* Sticky Final 9:16 rail -------------------------------------------------- */
.output-monitor {
    min-height: 0;
    padding: 11px;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    border: 1px solid rgba(152, 162, 179, 0.16);
    border-radius: 13px;
    background: #090d17;
}

.output-frame-wrap {
    position: relative;
    /* --preview-frame-w defaults huge so it's never the binding candidate
       until #preview-row-resizer sets it - then it can shrink the preview
       below what the other candidates would give, freeing height for
       Crop Positions to grow into via its own flex: 1 (2026-08-06,
       Carter: drag the Preview/Crop Positions boundary up so the position
       list doesn't need its scrollbar). Height follows via aspect-ratio. */
    width: min(100%, 420px, max(180px, calc((100dvh - 410px) * var(--editor-output-ratio, 0.5625))), var(--preview-frame-w, 9999px));
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    aspect-ratio: var(--editor-output-aspect, 9 / 16);
    border: 1px solid rgba(16, 20, 239, 0.48);
    border-radius: 12px;
    background: #03050a;
    box-shadow: 0 0 0 4px rgba(16, 20, 239, 0.06), 0 18px 45px rgba(0, 0, 0, 0.28);
}

#editor-output-canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: #03050a;
}

.editor-caption-snap-guides {
    position: absolute;
    z-index: 15;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.editor-caption-snap-guide {
    position: absolute;
    display: block;
    opacity: 0;
    background: rgba(103, 232, 249, 0.92);
    box-shadow: 0 0 0 1px rgba(8, 12, 22, 0.7), 0 0 8px rgba(103, 232, 249, 0.72);
    transition: opacity 80ms ease;
}

.editor-caption-snap-guide.is-visible {
    opacity: 1;
}

.editor-caption-snap-guide-x {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
}

.editor-caption-snap-guide-y {
    right: 0;
    left: 0;
    height: 1px;
}

.editor-text-snap-guides {
    position: absolute;
    z-index: 18;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.editor-text-snap-guide {
    position: absolute;
    display: block;
    opacity: 0;
    background: rgba(250, 204, 21, 0.98);
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.82), 0 0 9px rgba(250, 204, 21, 0.8);
    transition: opacity 70ms ease;
}

.editor-text-snap-guide.is-visible {
    opacity: 1;
}

.editor-text-snap-guide-x {
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-1px);
}

.editor-text-snap-guide-y {
    right: 0;
    left: 0;
    height: 2px;
    transform: translateY(-1px);
}

#editor-modal .output-frame-wrap.caption-dragging #editor-output-caption-preview {
    cursor: grabbing !important;
}

/* Platform UI preview ----------------------------------------------------
   This is a preview-only inspection layer. It never participates in the
   blueprint or renderer; it simply shows where the Reels, TikTok, and Shorts
   UI sits over a 9:16 export while the user is hovering the output monitor. */
#editor-modal .output-frame-wrap.platform-ui-preview-host {
    isolation: isolate;
}

:is(#editor-modal, #phone-screen-container) .platform-ui-preview {
    position: absolute;
    z-index: 12;
    inset: 0;
    overflow: hidden;
    display: block;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    /* The guide is visual. Frame clicks cycle platforms, while caption/text
       overlays remain reachable for direct manipulation. */
    pointer-events: none;
}

:is(#editor-modal, #phone-screen-container) .platform-ui-preview[hidden] {
    display: none !important;
}

/* One 1080x1920 drawing per app (Guideify reference measurements). The SVG
   viewBox is the export frame, so type and buttons scale with the monitor
   instead of the browser window. */
:is(#editor-modal, #phone-screen-container) .platform-ui-preview-svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

:is(#editor-modal, #phone-screen-container) .platform-ui-layer {
    display: none;
}

:is(#editor-modal, #phone-screen-container) .platform-ui-preview[data-platform="instagram"] .platform-ui-layer-instagram,
:is(#editor-modal, #phone-screen-container) .platform-ui-preview[data-platform="tiktok"] .platform-ui-layer-tiktok,
:is(#editor-modal, #phone-screen-container) .platform-ui-preview[data-platform="youtube"] .platform-ui-layer-youtube {
    display: inline;
}

:is(#editor-modal, #phone-screen-container) .platform-ui-preview-svg text {
    fill: #fff;
    font-family: Arimo, Arial, 'Helvetica Neue', sans-serif;
    font-weight: 400;
}

:is(#editor-modal, #phone-screen-container) .platform-ui-preview-svg .pui-bold {
    font-weight: 700;
}

:is(#editor-modal, #phone-screen-container) .platform-ui-preview-svg .pui-count {
    text-anchor: middle;
}

:is(#editor-modal, #phone-screen-container) .platform-ui-preview-svg .pui-outline {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:is(#editor-modal, #phone-screen-container) .platform-ui-preview-svg .pui-stroke {
    fill: none;
    stroke: #fff;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:is(#editor-modal, #phone-screen-container) .platform-ui-preview-svg .pui-solid {
    fill: rgba(255, 255, 255, 0.94);
}

:is(#editor-modal, #phone-screen-container) .platform-ui-preview-svg .pui-thumb-frame {
    fill: #fff;
    stroke: #fff;
    stroke-width: 4;
}

/* Phone crop: modern phones are taller than 9:16, so the apps fill the
   height and hide these edges of the export. */
:is(#editor-modal, #phone-screen-container) .platform-ui-preview-svg .platform-ui-crop {
    fill: rgba(0, 0, 0, 0.55);
}

#editor-modal .platform-ui-preview:focus-visible {
    outline: 2px solid #67e8f9;
    outline-offset: -3px;
}

#phone-screen-container[role="button"] { cursor: pointer; }
#phone-screen-container[aria-disabled="true"] { cursor: default; }
#phone-screen-container:has(.platform-ui-preview:not([hidden])) .dashboard-framing-preview-phase {
    visibility: hidden;
}
#phone-mockup-bg:has(#phone-screen-container:focus-visible) {
    outline: 2px solid #67e8f9;
    outline-offset: 3px;
}

.output-scene-readout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: min(100%, 420px);
    margin: 8px auto 0;
    color: #8f99ab;
    font-size: 0.61rem;
    font-variant-numeric: tabular-nums;
}

/* Mini playback scrubber under the 9:16 preview - bidirectionally synced
   with the main timeline scrubber via seekEditorTo() (2026-08-06,
   Carter). Deliberately simpler than #clip-scrubber (no waveform/cut-band
   overlay to align with a much narrower track). */
.output-mini-scrubber {
    display: flex;
    align-items: center;
    gap: 7px;
    width: min(100%, 420px);
    margin: 6px auto 0;
}

.output-mini-btn {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(152, 162, 179, 0.17);
    border-radius: 6px;
    background: #111621;
    color: #67e8f9;
    font-size: 0.68rem;
    cursor: pointer;
}

.output-mini-btn:hover {
    border-color: rgba(34, 211, 238, 0.45);
    color: #9df3fa;
}

.output-mini-btn.output-loop-btn {
    width: auto;
    min-width: 64px;
    padding: 0 7px;
    border-radius: 999px;
    color: #7ee2ba;
    background: rgba(20, 57, 48, 0.7);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.output-mini-btn.output-loop-btn.active {
    border-color: rgba(16, 20, 239, 0.55);
    color: var(--v2-blue-light, #3b82f6);
    background: rgba(16, 20, 239, 0.26);
}

.output-mini-btn.output-loop-btn.scene-loop {
    border-color: rgba(251, 191, 36, 0.55);
    color: #fde68a;
    background: rgba(120, 76, 8, 0.55);
}

.output-mini-btn.output-autokey-btn {
    width: auto;
    min-width: 68px;
    padding: 0 9px;
    border-radius: 999px;
    color: #98a2b3;
    background: rgba(17, 22, 33, 0.92);
    font-size: 0.58rem;
    font-weight: 800;
    white-space: nowrap;
}

.output-mini-btn.output-autokey-btn.active {
    border-color: rgba(34, 211, 238, 0.55);
    color: #67e8f9;
    background: rgba(34, 211, 238, 0.16);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.08);
}

.output-mini-range {
    flex: 1 1 auto;
    min-width: 0;
    height: 14px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
}

.output-mini-range::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: 2px;
    background: rgba(152, 162, 179, 0.25);
}

.output-mini-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 11px;
    height: 11px;
    margin-top: -4px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 0 2px rgba(5, 7, 13, 0.85);
}

.output-mini-range::-moz-range-track {
    height: 3px;
    border-radius: 2px;
    background: rgba(152, 162, 179, 0.25);
}

.output-mini-range::-moz-range-thumb {
    width: 11px;
    height: 11px;
    border: 0;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 0 2px rgba(5, 7, 13, 0.85);
}

.output-mini-time {
    flex: 0 0 auto;
    min-width: 44px;
    text-align: right;
    color: #8f99ab;
    font-size: 0.61rem;
    font-variant-numeric: tabular-nums;
}

#editor-selected-scene-label {
    color: var(--v2-blue-light, #3b82f6);
    font-weight: 700;
}

.output-text-preview {
    position: absolute;
    z-index: 3;
    left: 50%;
    width: max-content;
    max-width: 94%;
    pointer-events: none;
    text-align: center;
    transform-origin: center center;
}

/* Caption programs carry the renderer-selected font on their root. The page's
   global Outfit rule must never override descendants in either monitor. */
#editor-caption-preview *,
#editor-output-caption-preview *,
#editor-hook-preview *,
#editor-output-hook-preview * {
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
}

.caption-render-program {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    white-space: nowrap;
}

#editor-output-hook-preview {
    z-index: 4;
}

.output-empty {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    color: #667085;
    font-size: 0.72rem;
    text-align: center;
}

#editor-modal #editor-output-empty[hidden] {
    display: none !important;
}

#editor-modal .editor-output-text-layer {
    position: absolute;
    inset: 0;
    width: auto;
    max-width: none;
    z-index: 5;
    overflow: hidden;
    pointer-events: none;
    transform: none;
}

#editor-modal .editor-output-text-graphic {
    position: absolute;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    text-align: center;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    pointer-events: none;
}

/* Remaining editor tools ------------------------------------------------- */
#editor-modal .editor-tabs {
    position: sticky;
    z-index: 8;
    top: -16px;
    padding: 7px;
    border: 1px solid rgba(152, 162, 179, 0.16);
    border-radius: 11px;
    background: rgba(10, 15, 28, 0.94);
    backdrop-filter: blur(14px);
}

#editor-modal .editor-tab {
    min-height: 36px;
}

#editor-modal .editor-tab.active {
    color: #e6eaf2;
    border-color: rgba(16, 20, 239, 0.55);
    background: rgba(16, 20, 239, 0.22);
}

#editor-modal #editor-tab-framing,
#editor-modal #editor-tab-hook,
#editor-modal #editor-tab-music,
#editor-modal #editor-tab-transcript,
#editor-modal #editor-tab-text {
    position: relative;
    border: 1px solid rgba(152, 162, 179, 0.15);
    border-radius: 14px !important;
    background: #121620 !important;
}

#editor-modal .editor-drawer-close {
    position: absolute;
    top: 9px;
    right: 10px;
    z-index: 2;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(152, 162, 179, 0.22);
    border-radius: 7px;
    background: rgba(17, 22, 33, 0.92);
    color: #9aa4b5;
    font: inherit;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

#editor-modal .editor-drawer-close:hover,
#editor-modal .editor-drawer-close:focus-visible {
    border-color: rgba(34, 211, 238, 0.55);
    background: rgba(34, 211, 238, 0.12);
    color: #e6faff;
}

#editor-modal .editor-drawer-panel > div:first-child {
    padding-right: 42px;
}

#editor-modal .editor-music-heading,
#editor-modal .editor-text-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

#editor-modal .editor-music-drawer,
#editor-modal .editor-text-drawer {
    flex-direction: column;
    gap: 8px;
}

#editor-modal .editor-music-heading > div:first-child,
#editor-modal .editor-text-heading > div:first-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
}

#editor-modal .editor-music-heading label,
#editor-modal .editor-text-heading label {
    color: #dce4f2;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

#editor-modal .editor-music-heading .control-hint,
#editor-modal .editor-text-heading .control-hint {
    margin: 0;
}

#editor-modal .editor-music-toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #9aa4b5;
    font-size: 0.72rem;
}

#editor-modal #editor-music-summary {
    min-width: 0;
    max-width: min(34vw, 360px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#editor-modal .editor-music-content {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(210px, 0.75fr);
    gap: 10px;
    align-items: start;
}

#editor-modal .editor-music-library,
#editor-modal .editor-music-mix {
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(152, 162, 179, 0.18);
    border-radius: 8px;
    background: rgba(8, 12, 20, 0.62);
}

#editor-modal .editor-music-library {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

#editor-modal #music-search {
    width: 100%;
    min-height: 34px;
    box-sizing: border-box;
    padding: 6px 9px;
    border: 1px solid #2d313f;
    border-radius: 6px;
    outline: none;
    background: #0d0e12;
    color: #fff;
    font: inherit;
    font-size: 0.78rem;
}

#editor-modal #music-search:focus {
    border-color: rgba(103, 232, 249, 0.72);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.12);
}

#editor-modal #music-track-list {
    min-height: 0;
    overflow-y: auto;
    padding-right: 3px;
}

#editor-modal .editor-music-mix {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#editor-modal .editor-music-control {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

#editor-modal .editor-music-control > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #a0aec0;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

#editor-modal .editor-music-control output {
    color: #f8fafc;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

#editor-modal .editor-music-control input[type="range"] {
    width: 100%;
    margin: 0;
    accent-color: var(--accent-cyan);
    cursor: pointer;
}

#editor-modal .editor-music-message {
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    font-size: 0.75rem;
}

#editor-modal .editor-music-message-error {
    border: 1px solid #7f1d1d;
    background: #1a1c23;
    color: #f87171;
}

#editor-modal .editor-music-message-warning {
    color: #fbbf24;
}

#editor-modal .editor-music-preview-hint {
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px solid rgba(152, 162, 179, 0.14);
}

#editor-modal .editor-text-compose {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

#editor-modal .editor-text-compose-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

#editor-modal .editor-text-compose-heading > label {
    color: #a0aec0;
    font-size: 0.78rem;
    font-weight: 700;
}

#editor-modal .editor-text-compose-heading .control-hint {
    margin: 0;
    text-align: right;
}

#editor-modal .editor-text-compose-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}

#editor-modal .editor-text-compose-row #editor-text-add {
    align-self: start;
    min-width: 0;
    min-height: 40px;
    white-space: nowrap;
}

#editor-modal #editor-text-input {
    width: 100%;
    min-height: 62px;
    resize: vertical;
    border: 1px solid #3f4459;
    border-radius: 7px;
    background: #1a1c23;
    color: #f8fafc;
    font: inherit;
    font-size: 0.82rem;
    line-height: 1.35;
    padding: 0.65rem 0.75rem;
}

#editor-modal #editor-text-input:focus {
    border-color: rgba(103, 232, 249, 0.75);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.12);
    outline: none;
}

#editor-modal .editor-text-compose-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

#editor-modal .editor-text-compose-footer .control-hint {
    margin: 0;
}

#editor-modal .editor-text-style-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.8rem;
    border: 1px solid rgba(152, 162, 179, 0.18);
    border-radius: 9px;
    background: rgba(10, 15, 28, 0.46);
}

#editor-modal .editor-text-style-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

#editor-modal .editor-text-style-heading > div {
    display: flex;
    flex-direction: column;
    gap: 0.14rem;
}

#editor-modal .editor-text-style-heading strong {
    color: #e2e8f0;
    font-size: 0.78rem;
}

#editor-modal .editor-text-style-heading .control-hint {
    margin: 0;
}

#editor-modal .editor-text-style-note {
    flex: 0 0 auto;
    color: #67e8f9;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#editor-modal .editor-text-style-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

#editor-modal .editor-text-style-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

#editor-modal .editor-text-style-field-wide {
    grid-column: span 2;
}

#editor-modal .editor-text-style-field > label,
#editor-modal .editor-text-color-field > span {
    color: #a0aec0;
    font-size: 0.68rem;
    font-weight: 700;
}

#editor-modal .editor-text-style-field select {
    width: 100%;
    min-height: 34px;
    border: 1px solid #3f4459;
    border-radius: 6px;
    background: #1a1c23;
    color: #f8fafc;
    font: inherit;
    font-size: 0.74rem;
    padding: 0.35rem 0.45rem;
}

#editor-modal .editor-text-style-field select:focus,
#editor-modal .editor-text-preset-actions input:focus,
#editor-modal .editor-text-color-field input:focus-visible,
#editor-modal .editor-text-toggle-field input:focus-visible {
    border-color: rgba(103, 232, 249, 0.75);
    outline: none;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.12);
}

#editor-modal .editor-text-color-field,
#editor-modal .editor-text-toggle-field {
    min-width: 0;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.45rem;
    border: 1px solid rgba(152, 162, 179, 0.16);
    border-radius: 6px;
    background: rgba(17, 22, 33, 0.7);
}

#editor-modal .editor-text-color-field input[type="color"] {
    width: 38px;
    height: 26px;
    padding: 2px;
    border: 1px solid rgba(226, 232, 240, 0.28);
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
}

#editor-modal .editor-text-color-field input[type="color"]:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

#editor-modal .editor-text-toggle-field {
    justify-content: flex-start;
    color: #d7deea;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
}

#editor-modal .editor-text-toggle-field input[type="checkbox"] {
    flex: 0 0 auto;
    accent-color: #22d3ee;
}

#editor-modal .editor-text-layer-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-height: 280px;
    overflow-y: auto;
}

#editor-modal .editor-text-layer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(152, 162, 179, 0.18);
    border-radius: 7px;
    background: rgba(10, 15, 28, 0.55);
    cursor: pointer;
}

#editor-modal .editor-text-layer-row:hover,
#editor-modal .editor-text-layer-row:focus-within {
    border-color: rgba(103, 232, 249, 0.5);
}

#editor-modal .editor-text-layer-row-copy {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

#editor-modal .editor-text-layer-row-copy strong {
    overflow: hidden;
    color: #e2e8f0;
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#editor-modal .editor-text-layer-row-copy span {
    color: #7f8aa0;
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    #editor-modal .editor-text-style-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #editor-modal .editor-text-style-field-wide {
        grid-column: span 1;
    }
}

/* Layout pills are the primary per-scene layout control. Keep the legacy
   select mounted for JS compatibility, but remove the duplicate UI. */
#editor-modal #control-layout-mode {
    display: none !important;
}

#editor-modal #editor-tab-framing > div:first-child {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, max-content));
    gap: 12px !important;
    align-items: end !important;
}

#editor-modal #editor-tab-framing select {
    width: auto;
    max-width: 250px;
}

.transcript-findbar {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(152, 162, 179, 0.16);
    border-radius: 10px;
    background: #0b0f18;
}

.transcript-find-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto auto minmax(58px, auto);
    gap: 7px;
    align-items: center;
}

.transcript-find-row input {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid rgba(152, 162, 179, 0.22);
    border-radius: 7px;
    background: #080b12;
    color: #e6eaf2;
}

.transcript-match-count {
    color: #98a2b3;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#transcript-editor {
    tab-size: 4;
}

/* Dense caption-line list replacing the old full-width textarea, where a
   short two-word caption still claimed an entire 100%-wide line and left
   ~80% of it as dead space. Each row is a compact [time badge | text]
   grid rather than a stretched block, so a short caption's row is just
   short - not blank (2026-08-06, Carter). The row's own textarea/backbone
   sync happens in JS (renderTranscriptCards / syncTranscriptCardsToTextarea). */
.transcript-cards {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-color: var(--v2-blue, #1014ef) transparent;
}

.transcript-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 8px;
    padding: 3px;
    border-radius: 6px;
}

.transcript-card:focus-within {
    background: rgba(34, 211, 238, 0.08);
}

.transcript-card.active {
    background: rgba(34, 211, 238, 0.08);
}

.transcript-card-menu {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(152, 162, 179, 0.2);
    border-radius: 6px;
    background: #0b0f18;
    color: #98a2b3;
    font: inherit;
    cursor: pointer;
}

.transcript-word-controls {
    grid-column: 2 / 4;
    display: none;
    flex-wrap: wrap;
    gap: 5px;
    padding: 2px 0 5px;
}

.transcript-card.words-open .transcript-word-controls {
    display: flex;
}

.transcript-word-chip {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(103, 232, 249, 0.22);
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.07);
}

.transcript-word-chip button {
    min-height: 24px;
    padding: 2px 7px;
    border: 0;
    background: transparent;
    color: #cdeff3;
    font: inherit;
    font-size: 0.68rem;
    cursor: pointer;
}

.transcript-word-chip .transcript-word-remove {
    padding-inline: 6px;
    border-left: 1px solid rgba(103, 232, 249, 0.18);
    color: #fca5a5;
    font-size: 0.82rem;
}

.transcript-word-chip .transcript-word-remove:disabled {
    color: #596273;
    cursor: not-allowed;
}

.transcript-card-badge {
    min-width: 0;
    padding: 5px 6px;
    border: 1px solid rgba(152, 162, 179, 0.22);
    border-radius: 6px;
    background: #0b0f18;
    color: #8bd7e0;
    font: inherit;
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
    cursor: pointer;
}

.transcript-card-badge:hover {
    border-color: rgba(34, 211, 238, 0.5);
    color: #67e8f9;
}

.transcript-card-text {
    width: 100%;
    min-width: 0;
    padding: 6px 9px;
    border: 1px solid rgba(152, 162, 179, 0.16);
    border-radius: 6px;
    background: #0d0e12;
    color: #fff;
    font: inherit;
    font-size: 0.84rem;
    outline: none;
}

.transcript-card-text:focus {
    border-color: rgba(34, 211, 238, 0.5);
}

.transcript-cards-empty {
    padding: 10px;
    color: #6f7a8e;
    font-size: 0.78rem;
}

#editor-modal .studio-footer {
    position: relative;
    z-index: 10;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 10px 18px !important;
    border-top-color: rgba(152, 162, 179, 0.18) !important;
    background: #0d121f;
}

#editor-modal #btn-save-re-render {
    min-height: 42px;
    padding-inline: 20px !important;
    border: 1px solid var(--v2-blue, #1014ef) !important;
    border-radius: 9px !important;
    background: var(--v2-blue, #1014ef) !important;
    color: #ffffff !important;
}

#editor-modal #btn-save-re-render:hover {
    background: var(--v2-blue-hover, #2429ff) !important;
}

#editor-modal :is(button, select, input, textarea):focus-visible {
    outline: 2px solid var(--v2-blue-light, #3b82f6);
    outline-offset: 2px;
}

/* Responsive studio ------------------------------------------------------ */
@media (max-width: 1260px) {
    #editor-modal #editor-workspace[style*="display: flex"] {
        grid-template-columns: minmax(0, 1.8fr) minmax(290px, 0.92fr);
    }

    /* Below the desktop studio width the grid drops back to its fixed
       responsive ratios above (no resizer track), so the drag handle has
       nothing meaningful to sit between - hide it rather than let it float
       over the right panel. Same reasoning for the Preview/Crop Positions
       splitter: below this width Crop Positions goes side-by-side with the
       scene panel instead of stacking under Preview, so there's no shared
       vertical boundary to drag either. */
    .studio-col-resizer,
    .preview-row-resizer {
        display: none;
    }

    .scene-layout-toolbar {
        flex-wrap: wrap;
    }

    .scene-layout-toolbar .secondary-scene-action:first-of-type {
        margin-left: 0;
    }

    .editor-quick-controls {
        grid-template-columns: minmax(180px, 1.5fr) minmax(145px, 1fr) minmax(100px, 0.65fr);
    }

    .editor-transport {
        grid-template-columns: 32px 32px 32px 32px auto minmax(140px, 1fr) auto;
    }

    .editor-transport .editor-loop-badge {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

@media (max-width: 980px) {
    #editor-modal #editor-workspace[style*="display: flex"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .studio-edit-column {
        grid-column: 1;
        grid-row: 1;
    }

    .studio-output-rail {
        max-height: none;
        grid-column: 1;
        grid-row: 2;
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(230px, 0.62fr);
        align-items: start;
        overflow: visible;
    }

    .studio-output-rail .studio-scene-panel {
        max-height: 310px;
    }

    .output-frame-wrap {
        width: min(100%, 300px);
    }

    .editor-quick-controls {
        grid-template-columns: minmax(180px, 1.5fr) minmax(150px, 1fr) minmax(110px, 0.65fr);
    }
}

@media (max-width: 720px) {
    #editor-modal {
        padding: 0 !important;
        overflow-y: auto !important;
    }

    #editor-modal .reframe-studio {
        min-height: 100dvh;
        height: auto;
        border: 0 !important;
        border-radius: 0 !important;
    }

    #editor-modal .studio-toolbar {
        position: sticky;
        z-index: 20;
        top: 0;
        min-height: 58px;
        padding: 8px 10px !important;
    }

    .studio-eyebrow,
    .editor-mode-state,
    .editor-save-state {
        display: none;
    }

    #editor-modal .editor-grid {
        display: block;
        overflow: visible;
    }

    #editor-modal #editor-workspace {
        overflow: visible;
        padding: 10px;
    }

    .studio-output-rail {
        display: flex;
    }

    .studio-output-rail .studio-scene-panel {
        min-height: 0;
        max-height: none;
    }

    #editor-modal #editor-scenes-list {
        display: grid !important;
        grid-auto-columns: minmax(190px, 70vw);
        grid-auto-flow: column;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-bottom: 5px !important;
    }

    .scene-layout-toolbar-copy {
        width: 100%;
    }

    .scene-layout-pills {
        max-width: 100%;
        overflow-x: auto;
    }

    .scene-layout-toolbar .secondary-scene-action {
        margin-left: 0;
    }

    .editor-quick-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .editor-transport {
        grid-template-columns: repeat(4, 32px) minmax(0, 1fr);
    }

    .editor-transport #scrub-time-current {
        justify-self: end;
    }

    .editor-transport .clip-scrubber-wrap {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .editor-transport #scrub-time-total {
        grid-column: 1 / 3;
        grid-row: 3;
    }

    .editor-transport .editor-loop-badge {
        grid-column: 3 / -1;
        grid-row: 3;
    }

    .timeline-commandbar,
    .framing-timeline-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .timeline-command-group {
        width: 100%;
        flex-wrap: wrap;
    }

    .framing-timeline-heading > small {
        white-space: normal;
    }

    #editor-modal .clip-trim-controls .range-boundary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .output-frame-wrap {
        width: min(72vw, 300px);
    }

    .transcript-find-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .transcript-match-count {
        grid-column: 1 / -1;
    }

    #editor-modal .studio-footer {
        position: sticky;
        bottom: 0;
    }
}

@media (max-width: 460px) {
    .studio-title-block {
        gap: 8px;
    }

    #editor-modal #editor-title {
        max-width: 58vw;
        font-size: 0.88rem !important;
    }

    .studio-close {
        width: 38px;
        height: 38px;
    }

    .preview-truth-badge,
    .monitor-label small {
        display: none;
    }

    .scene-layout-pill {
        padding-inline: 7px;
        font-size: 0.58rem;
    }

    .timeline-commandbar .fx-btn {
        flex: 1 1 120px;
    }

    #editor-modal .clip-trim-controls .range-nudge-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    #editor-modal *,
    #editor-modal *::before,
    #editor-modal *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Compact single-timeline studio ----------------------------------------
   The default viewport is deliberately limited to crop, output, and media
   timing. Renderer diagnostics and secondary tools remain available without
   competing with the edit itself. */
.visually-hidden {
    width: 1px !important;
    height: 1px !important;
    position: absolute !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

#editor-modal {
    padding: 6px !important;
}

#editor-modal .reframe-studio {
    height: calc(100dvh - 12px);
    border-radius: 12px !important;
}

#editor-modal .studio-toolbar {
    min-height: 46px;
    padding: 5px 9px !important;
}

#editor-modal #editor-title {
    max-width: 22vw;
    font-size: 0.9rem !important;
}

.studio-toolbar-actions {
    gap: 7px;
}

.editor-mode-state {
    min-height: 25px;
    padding: 3px 8px;
    font-size: 0.61rem;
}

.editor-save-state {
    font-size: 0.64rem;
}

.studio-save-button {
    min-height: 40px !important;
    padding: 5px 11px !important;
    border: 1px solid var(--v2-blue, #1014ef) !important;
    border-radius: 7px !important;
    background: var(--v2-blue, #1014ef) !important;
    color: #fff !important;
    font-size: 0.82rem !important;
    font-weight: 750 !important;
}

.studio-project-save-button {
    min-height: 40px;
    padding: 7px 12px;
    font-size: 0.82rem;
    font-weight: 650;
    white-space: nowrap;
}

.studio-toolbar-actions { flex-wrap: wrap; }

.studio-close {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    font-size: 1.05rem !important;
}

#editor-modal #editor-workspace {
    gap: 9px !important;
    padding: 9px 12px 12px;
}

#editor-modal #editor-workspace[style*="display: flex"] {
    grid-template-columns: minmax(320px, var(--studio-col-w, 2.125fr)) 8px minmax(300px, 1fr);
    align-items: start;
}

.studio-edit-column {
    gap: 7px;
}

.studio-output-rail {
    max-height: calc(100dvh - 76px);
    gap: 0;
}

/* Scene navigation is the thin color band on the timeline. Keeping the old
   list mounted preserves selection plumbing without duplicating the UI. */
.studio-output-rail .studio-scene-panel {
    display: none !important;
}

#editor-modal .studio-preview-panel {
    padding: 8px !important;
    border-radius: 10px !important;
}

.reframe-preview-grid {
    gap: 0;
}

.scene-layout-toolbar {
    min-height: 34px;
    margin: 0 0 6px;
    padding: 3px 4px;
    gap: 4px;
    position: relative;
    border: 0;
    border-radius: 7px;
    background: transparent;
}

.crop-toolbar-title {
    margin: 0 6px 0 2px;
    color: #e6eaf2;
    font-size: 0.72rem;
    white-space: nowrap;
}

.scene-layout-pills {
    gap: 2px;
    padding: 2px;
    border-radius: 7px;
}

.scene-layout-pill {
    min-height: 26px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.59rem;
}

.scene-layout-toolbar .secondary-scene-action,
.scene-settings-popover > summary {
    min-height: 28px;
    padding: 3px 7px;
    font-size: 0.58rem;
}

.scene-settings-popover {
    position: relative;
}

.scene-settings-popover > summary {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
}

.scene-settings-popover > summary::-webkit-details-marker {
    display: none;
}

.scene-settings-popover-panel {
    width: min(540px, 64vw);
    position: absolute;
    z-index: 30;
    top: calc(100% + 7px);
    right: 0;
    padding: 8px;
    border: 1px solid rgba(152, 162, 179, 0.24);
    border-radius: 10px;
    background: #0b101b;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}

.editor-quick-controls {
    grid-template-columns: minmax(180px, 1.6fr) minmax(150px, 1fr);
    padding: 6px;
}

.editor-quick-controls #scene-speaker-box {
    display: none;
}

/* --timeline-h drives both the timeline panel (scene track + waveform,
   split 35/65) and the canvas cap below, so dragging #timeline-resizer grows
   one while shrinking the other - the studio never needs to scroll.
   366px was tuned for the old fixed 88px timeline; 292px is that same tuning
   with the timeline's contribution factored out (88px) plus the resizer
   bar's own ~14px, leaving --timeline-h as the only moving part. */
#editor-modal .studio-preview-panel {
    --timeline-h: 103px;
    --timeline-ruler-h: 38px;
    --editor-text-track-h: 0px;
}

#editor-modal .editor-text-style-field input[type="number"] {
    width: 100%;
    min-height: 34px;
    box-sizing: border-box;
    border: 1px solid #3f4459;
    border-radius: 6px;
    background: #1a1c23;
    color: #f8fafc;
    font: inherit;
    font-size: 0.74rem;
    padding: 0.35rem 0.45rem;
}

#editor-modal .editor-text-style-field input[type="number"]:focus {
    border-color: rgba(103, 232, 249, 0.75);
    outline: none;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.12);
}

#editor-modal .editor-text-style-preview {
    min-height: 54px;
    display: grid;
    place-items: center;
    padding: 0.65rem;
    border: 1px dashed rgba(103, 232, 249, 0.35);
    border-radius: 7px;
    background: #0b1020;
    color: #fff;
    text-align: center;
    white-space: pre-wrap;
}

#editor-modal .studio-preview-panel.has-editor-text-track {
    /* One lane is the compact baseline; JS expands this to the exact height
       of the visible lanes and their independent resize values. */
    --editor-text-track-h: 44px;
}

#editor-modal #preview-container {
    width: fit-content !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 292px - var(--timeline-h) - var(--timeline-ruler-h) - var(--editor-text-track-h));
    border-radius: 8px !important;
}

#editor-modal #editor-thumbnail {
    width: auto !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 292px - var(--timeline-h) - var(--timeline-ruler-h) - var(--editor-text-track-h));
    margin: 0 auto;
}

.editor-timeline-shell {
    margin-top: 7px;
    padding: 6px;
    border: 1px solid rgba(152, 162, 179, 0.16);
    border-radius: 9px;
    background: #080c14;
}

.timeline-resizer {
    height: 10px;
    margin: 0 0 4px;
    border-radius: 4px;
    background: rgba(152, 162, 179, 0.10);
    cursor: ns-resize;
    position: relative;
    touch-action: none;
}

.timeline-resizer::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 3px;
    border-radius: 2px;
    background: rgba(152, 162, 179, 0.45);
    transform: translate(-50%, -50%);
}

.timeline-resizer:hover,
.timeline-resizer:focus-visible {
    background: rgba(34, 211, 238, 0.16);
    outline: none;
}

.timeline-resizer:hover::before,
.timeline-resizer:focus-visible::before {
    background: rgba(34, 211, 238, 0.65);
}

/* Frame ruler sits inside the same source timeline as the scene and media
   lanes. Its x positions use the shared frame grid, so zoom only changes the
   scrollable content width; it never changes the clock. */
.timeline-ruler-scroll {
    height: var(--timeline-ruler-h, 38px);
    min-width: 160px;
    position: relative;
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid rgba(152, 162, 179, 0.18);
    border-radius: 7px;
    background: #080c14;
    scrollbar-width: thin;
    scrollbar-color: var(--v2-blue, #1014ef) transparent;
    cursor: ew-resize;
    touch-action: none;
}

.timeline-ruler-scroll::-webkit-scrollbar { height: 6px; }
.timeline-ruler-scroll::-webkit-scrollbar-thumb {
    background: var(--v2-blue, #1014ef);
    border-radius: 3px;
}
.timeline-ruler-scroll::-webkit-scrollbar-track { background: transparent; }

.timeline-ruler-content {
    min-width: 100%;
    height: 100%;
}

.editor-timeline-ruler {
    position: absolute;
    inset: 0;
    border-bottom: 1px solid rgba(152, 162, 179, 0.28);
    background: linear-gradient(180deg, rgba(16, 24, 39, 0.96), rgba(8, 12, 20, 0.98));
    pointer-events: none;
}

.editor-ruler-tick {
    position: absolute;
    bottom: 0;
    width: 1px;
    height: 7px;
    background: rgba(152, 162, 179, 0.42);
    pointer-events: none;
    transform: translateX(-0.5px);
}

.editor-ruler-tick.major {
    height: 14px;
    background: rgba(214, 222, 235, 0.68);
}

.editor-ruler-label {
    position: absolute;
    bottom: 17px;
    color: #98a2b3;
    font-size: 0.55rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    pointer-events: none;
    transform: translateX(-50%);
    white-space: nowrap;
}

.editor-ruler-label.edge-start {
    transform: none;
}

.editor-ruler-label.edge-end {
    transform: translateX(-100%);
}

#editor-modal .editor-text-preset-actions {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
    padding: 7px;
    border: 1px solid rgba(103, 232, 249, 0.2);
    border-radius: 7px;
    background: rgba(8, 24, 33, 0.58);
}

#editor-modal .editor-text-preset-actions[hidden] {
    display: none !important;
}

#editor-modal .editor-text-preset-actions > label {
    color: #cbd5e1;
    font-size: 0.68rem;
    font-weight: 750;
}

#editor-modal .editor-text-preset-save-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) max-content max-content;
    align-items: center;
    gap: 6px;
}

#editor-modal .editor-text-preset-save-row input {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    box-sizing: border-box;
    border: 1px solid #3f4459;
    border-radius: 6px;
    background: #1a1c23;
    color: #f8fafc;
    font: inherit;
    font-size: 0.72rem;
    padding: 5px 7px;
}

#editor-modal .editor-text-preset-save-row .fx-btn {
    min-height: 32px;
    padding: 5px 9px;
    white-space: nowrap;
}

.editor-ruler-label.playhead-overlap {
    visibility: hidden;
}

.editor-ruler-playhead {
    position: absolute;
    z-index: 8;
    top: 0;
    bottom: -1px;
    width: 2px;
    border-radius: 999px;
    background: #f8fafc;
    box-shadow: 0 0 0 1px rgba(5, 7, 13, 0.72), 0 0 10px rgba(103, 232, 249, 0.72);
    pointer-events: none;
    transform: translateX(-1px);
}

.editor-ruler-playhead::before {
    position: absolute;
    top: -1px;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 2px 2px 50% 50%;
    background: #f8fafc;
    content: "";
    transform: translate(-50%, -45%) rotate(45deg);
}

.editor-ruler-timecode {
    position: absolute;
    top: 2px;
    left: 50%;
    min-width: 9.5ch;
    padding: 3px 5px;
    border: 1px solid rgba(246, 200, 76, 0.58);
    border-radius: 4px;
    background: #1a1c23;
    color: #f6c84c;
    font-size: 0.58rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
    transform: translate(-50%, 0);
    white-space: nowrap;
}

.editor-ruler-playhead.edge-start .editor-ruler-timecode {
    left: 5px;
    transform: none;
}

.editor-ruler-playhead.edge-end .editor-ruler-timecode {
    left: -5px;
    transform: translate(-100%, 0);
}

.editor-transport {
    min-height: 35px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 6px;
}

.editor-timecode-readout {
    min-width: 9.5ch;
    padding: 5px 7px;
    border: 1px solid rgba(103, 232, 249, 0.34);
    border-radius: 6px;
    background: rgba(34, 211, 238, 0.10);
    color: #e6faff;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.editor-frame-rate-label {
    color: #6f7a8e;
    font-size: 0.58rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.editor-playback-rate {
    min-width: 3.5ch;
    padding: 4px 6px;
    border: 1px solid rgba(246, 200, 76, 0.34);
    border-radius: 5px;
    background: rgba(246, 200, 76, 0.08);
    color: #f6c84c;
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.editor-playback-rate[data-direction="reverse"] {
    border-color: rgba(248, 113, 113, 0.42);
    background: rgba(248, 113, 113, 0.10);
    color: #fca5a5;
}

#editor-modal .editor-transport > button:not(.editor-loop-badge) {
    width: auto;
    min-width: 35px;
    height: 33px;
    padding: 0 8px;
    border-radius: 7px;
    font-size: 0.72rem !important;
}

#editor-modal .editor-transport > :is(#editor-play-btn, #editor-vol-btn, #editor-prev-frame-btn, #editor-next-frame-btn) {
    width: 35px;
    padding: 0;
}

#scrub-time-current,
#scrub-time-total,
.timeline-time-separator {
    color: #98a2b3;
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
}

#editor-modal .editor-text-lane-select {
    flex: 0 0 auto;
    width: 64px !important;
    max-width: 64px;
    height: 30px !important;
    min-height: 28px;
    padding: 3px 22px 3px 8px;
    border: 1px solid rgba(152, 162, 179, 0.24);
    border-radius: 5px;
    background: #1a1c23;
    color: #d7deea;
    font-size: 0.65rem;
}

#editor-modal .editor-text-layer-row > .fx-btn {
    flex: 0 0 auto;
}

#scrub-time-total {
    white-space: nowrap;
}

.editor-source-edge-drag-readout {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid rgba(34, 211, 238, 0.48);
    border-radius: 999px;
    color: #cffafe;
    background: rgba(8, 47, 73, 0.82);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.editor-source-edge-drag-readout[hidden] {
    display: none;
}

.editor-source-edge-drag-readout[data-direction="shorten"] {
    border-color: rgba(251, 191, 36, 0.58);
    color: #fef3c7;
    background: rgba(120, 53, 15, 0.82);
}

/* Trim affordances explain the reversible action before a pointer moves. The
   live readout beside the transport supplies the exact frame/time delta. */
.timeline-video-edge-handle::before,
.timeline-media-trim-handle::after {
    content: 'Drag to shorten / extend';
    position: absolute;
    z-index: 20;
    bottom: calc(100% + 7px);
    left: 50%;
    width: max-content;
    max-width: 170px;
    padding: 4px 6px;
    border: 1px solid rgba(103, 232, 249, 0.45);
    border-radius: 5px;
    background: rgba(8, 12, 20, 0.96);
    color: #e0f2fe;
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1.1;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 3px);
    transition: opacity 120ms ease, transform 120ms ease;
    white-space: nowrap;
}

.timeline-video-edge-handle:hover::before,
.timeline-video-edge-handle:focus-visible::before,
.timeline-media-trim-handle:hover::after,
.timeline-media-trim-handle:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.editor-audio-transition-marker {
    position: absolute;
    z-index: 12;
    top: 2px;
    width: 30px;
    height: 22px;
    padding: 0;
    border: 1px solid rgba(96, 165, 250, 0.68);
    border-radius: 6px;
    background: rgba(15, 38, 70, 0.94);
    cursor: pointer;
    pointer-events: auto;
    transform: translateX(-50%);
    box-shadow: 0 0 0 1px rgba(5, 16, 35, 0.82), 0 2px 7px rgba(0, 0, 0, 0.36);
}

.editor-audio-transition-marker-waveform {
    position: absolute;
    inset: 4px 3px;
}

.editor-audio-transition-marker-waveform svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: #bfdbfe;
    stroke-width: 1.8;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.editor-audio-transition-marker.custom {
    border-color: #60a5fa;
    background: #1d4ed8;
}

.editor-audio-transition-marker:hover,
.editor-audio-transition-marker:focus-visible,
.editor-audio-transition-marker[aria-expanded="true"] {
    border-color: #bfdbfe;
    background: #1d4ed8;
    outline: none;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3), 0 2px 9px rgba(0, 0, 0, 0.42);
}

.editor-audio-transition-popover {
    position: fixed;
    z-index: 1000;
    width: min(340px, calc(100vw - 16px));
    padding: 12px;
    border: 1px solid rgba(96, 165, 250, 0.48);
    border-radius: 10px;
    background: #0e1728;
    color: #e5e7eb;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.52);
}

.editor-audio-transition-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.editor-audio-transition-popover strong {
    display: block;
    color: #eff6ff;
    font-size: 0.78rem;
}

.editor-audio-transition-state {
    padding: 2px 6px;
    border: 1px solid rgba(96, 165, 250, 0.42);
    border-radius: 999px;
    color: #bfdbfe;
    background: rgba(30, 64, 175, 0.3);
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.editor-audio-transition-popover[data-state="default"] .editor-audio-transition-state {
    border-color: rgba(148, 163, 184, 0.34);
    color: #cbd5e1;
    background: rgba(51, 65, 85, 0.46);
}

.editor-audio-transition-popover p {
    margin: 5px 0 9px;
    color: #aeb7c8;
    font-size: 0.64rem;
    line-height: 1.35;
}

.editor-audio-transition-popover label {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #bfdbfe;
    font-size: 0.64rem;
    font-weight: 700;
}

.editor-audio-transition-popover input[type="range"] {
    width: 100%;
    margin: 7px 0 10px;
    accent-color: #60a5fa;
}

.editor-audio-transition-curve {
    --transition-span: 10%;
    position: relative;
    height: 82px;
    margin: 8px 0 10px;
    overflow: hidden;
    border: 1px solid rgba(96, 165, 250, 0.26);
    border-radius: 7px;
    background:
        linear-gradient(90deg, rgba(30, 64, 175, 0.12) 0 49.8%, rgba(96, 165, 250, 0.3) 49.8% 50.2%, rgba(30, 64, 175, 0.12) 50.2% 100%),
        repeating-linear-gradient(0deg, transparent 0 11px, rgba(148, 163, 184, 0.08) 11px 12px);
    cursor: ew-resize;
    touch-action: none;
}

.editor-audio-transition-waveform,
.editor-audio-transition-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.editor-audio-transition-waveform {
    opacity: 0.9;
}

.editor-audio-transition-waveform.unavailable {
    opacity: 0;
}

.editor-audio-transition-lines {
    z-index: 1;
    overflow: visible;
}

.editor-audio-transition-curve:focus-visible,
.editor-audio-transition-curve.dragging {
    border-color: #60a5fa;
    outline: 2px solid rgba(96, 165, 250, 0.28);
    outline-offset: 1px;
}

.editor-audio-transition-side-label {
    position: absolute;
    z-index: 2;
    top: 6px;
    color: #94a3b8;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.editor-audio-transition-side-label.outgoing {
    left: 8px;
}

.editor-audio-transition-side-label.incoming {
    right: 8px;
}

.editor-audio-transition-line {
    fill: none;
    stroke: #60a5fa;
    stroke-width: 2.5;
    stroke-linecap: round;
    pointer-events: none;
    vector-effect: non-scaling-stroke;
}

.editor-audio-transition-curve-handle {
    position: absolute;
    z-index: 2;
    top: 39px;
    width: 10px;
    height: 10px;
    border: 2px solid #dbeafe;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.28);
    pointer-events: none;
    transform: translateX(-50%);
}

.editor-audio-transition-curve-handle.outgoing {
    left: calc(50% - var(--transition-span));
}

.editor-audio-transition-curve-handle.incoming {
    left: calc(50% + var(--transition-span));
}

.editor-audio-transition-seam {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(219, 234, 254, 0.86);
    box-shadow: 0 0 5px rgba(96, 165, 250, 0.48);
    pointer-events: none;
}

.editor-audio-transition-value {
    color: #f8fafc;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.editor-audio-transition-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.editor-audio-transition-actions .timeline-action {
    min-height: 25px;
    padding: 3px 8px;
    font-size: 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
    .timeline-video-edge-handle::before,
    .timeline-media-trim-handle::after,
    .timeline-media-trim-frame-chip {
        transition: none;
    }
}

.timeline-action.danger-soft {
    border-color: rgba(248, 113, 113, 0.34) !important;
    color: #fca5a5 !important;
}

#editor-modal .editor-transport > button.timeline-action.active {
    border-color: rgba(246, 200, 76, 0.55) !important;
    color: #f6c84c !important;
    background: rgba(246, 200, 76, 0.14) !important;
}

.editor-loop-badge {
    min-height: 32px;
    margin-left: auto;
    padding: 4px 9px;
    font-size: 0.62rem;
}

.editor-zoom-group {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border-radius: 9px;
    background: #0b0f18;
    border: 1px solid rgba(152, 162, 179, 0.17);
}

.timeline-zoom-btn {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #98a2b3;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.timeline-zoom-btn:hover:not(:disabled) {
    background: rgba(152, 162, 179, 0.14);
    color: #dce2ec;
}

.timeline-zoom-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.timeline-zoom-label {
    min-width: 34px;
    color: #98a2b3;
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.clip-scrubber-wrap {
    height: var(--timeline-h, 103px);
    display: block;
    border-radius: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--v2-blue, #1014ef) transparent;
}

.clip-scrubber-wrap::-webkit-scrollbar { height: 6px; }
.clip-scrubber-wrap::-webkit-scrollbar-thumb { background: var(--v2-blue, #1014ef); border-radius: 3px; }
.clip-scrubber-wrap::-webkit-scrollbar-track { background: transparent; }

#editor-modal .editor-waveform-status {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    max-width: calc(100% - 32px);
    padding: 3px 8px;
    border-radius: 999px;
    color: #94a3b8;
    background: rgba(5, 12, 22, 0.78);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    pointer-events: none;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

#editor-modal .editor-waveform-status[data-state="unavailable"] {
    color: #cbd5e1;
}

/* Text graphics use their own compact layer lane so their blocks stay above
   the framing/waveform timeline without changing the media clock's one
   source of truth. The lane shares the timeline zoom and scroll position. */
#editor-modal .editor-text-track-scroll {
    min-width: 160px;
    height: auto;
    min-height: 38px;
    position: relative;
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid rgba(152, 162, 179, 0.18);
    border-radius: 7px;
    background: #080c14;
    scrollbar-width: thin;
    scrollbar-color: var(--v2-blue, #1014ef) transparent;
}

#editor-modal .editor-text-track-scroll.is-hidden {
    display: none !important;
}

#editor-modal .editor-text-track-scroll::-webkit-scrollbar { height: 6px; }
#editor-modal .editor-text-track-scroll::-webkit-scrollbar-thumb {
    background: var(--v2-blue, #1014ef);
    border-radius: 3px;
}
#editor-modal .editor-text-track-scroll::-webkit-scrollbar-track { background: transparent; }

#editor-modal .editor-text-track-content {
    min-width: 100%;
    min-height: 38px;
}

#editor-modal .editor-text-track {
    position: relative;
    min-width: 100%;
    min-height: 38px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(16, 24, 39, 0.92), rgba(8, 12, 20, 0.98));
}

#editor-modal .editor-text-lane {
    position: relative;
    min-height: 38px;
    border-bottom: 1px solid rgba(152, 162, 179, 0.13);
    background: rgba(8, 12, 20, 0.35);
}

#editor-modal .editor-text-lane:last-child {
    border-bottom: 0;
}

#editor-modal .editor-text-lane.collapsed {
    min-height: 24px;
    height: 24px !important;
}

#editor-modal .editor-text-lane-header {
    position: absolute;
    z-index: 6;
    top: 4px;
    right: 4px;
    width: auto;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 1px solid rgba(152, 162, 179, 0.24);
    border-radius: 5px;
    background: rgba(14, 20, 34, 0.92);
    color: #7f8aa0;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

#editor-modal .editor-text-lane-body {
    position: absolute;
    inset: 0;
}

#editor-modal .editor-text-lane-resizer {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: -3px;
    left: 0;
    height: 6px;
    cursor: ns-resize;
}

#editor-modal .editor-text-layer-block {
    position: absolute;
    top: 4px;
    bottom: 4px;
    /* Width is the text's real duration. No inflated minimum and no side
       padding, so a short text never looks longer than it plays. */
    min-width: 3px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding: 3px 0;
    overflow: hidden;
    border: 1px solid rgba(103, 232, 249, 0.62);
    border-radius: 5px;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.28), rgba(59, 130, 246, 0.22));
    color: #e6faff;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
    touch-action: none;
}

#editor-modal .editor-text-layer-handle {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: 7px;
    padding: 0;
    border: 0;
    background: rgba(230, 250, 255, 0.78);
    cursor: ew-resize;
    opacity: 0.72;
}

#editor-modal .editor-text-layer-handle:hover,
#editor-modal .editor-text-layer-handle:focus-visible {
    opacity: 1;
    outline: 2px solid #a5f3fc;
    outline-offset: -1px;
}

#editor-modal .editor-text-layer-handle.start { left: 0; border-radius: 4px 0 0 4px; }
#editor-modal .editor-text-layer-handle.end { right: 0; border-radius: 0 4px 4px 0; }

#editor-modal .editor-text-track-scroll.tool-split-active .editor-text-layer-handle {
    pointer-events: none;
}

#editor-modal .editor-text-layer-block:hover,
#editor-modal .editor-text-layer-block:focus-visible,
#editor-modal .editor-text-layer-block.active {
    border-color: #a5f3fc;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.42), rgba(59, 130, 246, 0.34));
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.16);
    outline: none;
}

#editor-modal .editor-text-layer-block.razor-hover-split {
    z-index: 5;
    border-color: #f6c84c;
    box-shadow: inset 0 0 0 2px #f6c84c, 0 0 8px rgba(246, 200, 76, 0.55);
}

#editor-modal .editor-text-layer-kicker {
    overflow: hidden;
    padding: 0 8px;
    white-space: nowrap;
    color: #67e8f9;
    font-size: 0.47rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

#editor-modal .editor-text-layer-copy {
    overflow: hidden;
    padding: 0 8px;
    color: #f8fafc;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#editor-modal .editor-text-layer-row.active {
    border-color: rgba(103, 232, 249, 0.78);
    background: rgba(14, 50, 64, 0.68);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.12);
}

#editor-modal .editor-text-playhead {
    position: absolute;
    z-index: 4;
    top: -1px;
    bottom: -1px;
    width: 2px;
    background: #f6c84c;
    box-shadow: 0 0 6px rgba(246, 200, 76, 0.85);
    pointer-events: none;
    transform: translateX(-1px);
}

/* Both tracks (scene lane + waveform) live inside this ONE shared,
   horizontally-widened container so Timeline Zoom scales them together via
   plain CSS - each child already positions itself as a % of its own parent's
   width, and that math is untouched; only what it resolves against grows.
   Scrolling this single element keeps both tracks trivially 1:1 aligned,
   with no separate-scroll-sync code needed. */
.timeline-zoom-content {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 100%;
}

/* 35/65 split between the scene track and the waveform below it, scaling
   together as --timeline-h changes so both "expand" per the resizer, not
   just one region. */
#editor-waveform-canvas {
    top: calc(var(--timeline-h, 103px) * 0.35);
    height: calc(var(--timeline-h, 103px) * 0.65);
}

#editor-modal #clip-cut-markers {
    /* The segment buttons sit above the native range input. Empty areas still
       pass through to the scrubber because the layer itself is transparent
       to pointer events. */
    z-index: 6;
    top: calc(var(--timeline-h, 103px) * 0.35);
    right: 5px;
    bottom: 0;
    left: 5px;
}

/* Audio smoothing belongs to the media join, but it must not share the media
   segment layer. A dedicated overlay keeps the button above segment fills,
   the native scrubber, and scene/text-track growth without changing its
   horizontal timeline position. */
#editor-modal #editor-audio-transition-markers {
    position: absolute;
    z-index: 14;
    top: calc(var(--timeline-h, 103px) * 0.35);
    right: 5px;
    bottom: 0;
    left: 5px;
    overflow: visible;
    pointer-events: none;
}

.timeline-video-segment {
    position: absolute;
    top: 6px;
    height: calc(var(--timeline-h, 103px) * 0.65 - 12px);
    min-width: 4px;
    border: 1px solid color-mix(in srgb, var(--media-color, #22d3ee) 68%, transparent);
    border-radius: 4px;
    /* The canvas underneath carries the color fill and waveform. Keep this
       interactive block translucent so the waveform remains visible through
       every scene-colored media segment. */
    background: color-mix(in srgb, var(--media-color, #22d3ee) 20%, transparent);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.35);
    cursor: pointer;
    pointer-events: auto;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.timeline-video-segment:hover,
.timeline-video-segment:focus-visible {
    border-color: var(--media-color, #67e8f9);
    background: color-mix(in srgb, var(--media-color, #22d3ee) 28%, transparent);
    outline: none;
}

.timeline-video-segment.selected {
    border-color: var(--media-color, #67e8f9);
    background: color-mix(in srgb, var(--media-color, #22d3ee) 34%, transparent);
    box-shadow: inset 0 0 0 1px rgba(224, 242, 254, 0.32),
        0 0 8px color-mix(in srgb, var(--media-color, #22d3ee) 36%, transparent);
}

.timeline-video-segment:focus-visible {
    box-shadow: inset 0 0 0 1px rgba(224, 242, 254, 0.58),
        0 0 0 2px rgba(34, 211, 238, 0.28);
}

.timeline-video-segment-label {
    position: absolute;
    z-index: 1;
    top: 3px;
    left: 6px;
    right: 6px;
    overflow: hidden;
    color: rgba(224, 242, 254, 0.94);
    font-size: 0.58rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: left;
    text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(2, 6, 23, 0.92);
    white-space: nowrap;
    pointer-events: none;
}

/* The outer video edges are source-window handles, not scene boundaries. The
   wide hit area keeps frame-accurate editing usable when a long podcast is
   zoomed far out; ew-resize gives the familiar horizontal double-arrow cue. */
.timeline-video-edge-handle {
    position: absolute;
    z-index: 4;
    top: -5px;
    bottom: -5px;
    width: 14px;
    cursor: ew-resize;
    pointer-events: auto;
    touch-action: none;
}

.timeline-video-edge-handle.left {
    left: -7px;
}

.timeline-video-edge-handle.right {
    right: -7px;
}

.timeline-video-edge-handle::after {
    content: '↔';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 18px;
    color: #e0f2fe;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    text-shadow: 0 1px 5px rgba(2, 6, 23, 0.9);
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 120ms ease;
    pointer-events: none;
}

.timeline-video-segment:hover .timeline-video-edge-handle::after,
.timeline-video-edge-handle:focus-visible::after,
.editor-source-edge-dragging .timeline-video-edge-handle::after {
    opacity: 0.95;
}

.editor-source-edge-dragging,
.editor-source-edge-dragging * {
    cursor: ew-resize !important;
    user-select: none !important;
}

/* A selected media block gets Premiere-style endpoint handles. These edit the
   block, while the visually distinct outer handles above edit the source
   window. Keeping the hit area wide makes frame trims usable when zoomed out. */
.timeline-media-trim-handle {
    position: absolute;
    z-index: 7;
    top: -5px;
    bottom: -5px;
    width: 16px;
    cursor: ew-resize;
    pointer-events: auto;
    touch-action: none;
}

.timeline-media-trim-handle.left {
    left: -8px;
}

.timeline-media-trim-handle.right {
    right: -8px;
}

.timeline-media-trim-handle::before {
    content: '';
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 50%;
    width: 7px;
    border: 1px solid #dbeafe;
    border-radius: 5px;
    background: #2563eb;
    box-shadow: 0 0 0 1px rgba(5, 16, 35, 0.9), 0 0 10px rgba(59, 130, 246, 0.72);
    transform: translateX(-50%);
}

#editor-modal .editor-text-add-lane {
    position: relative;
    height: 38px;
    min-height: 38px;
    border-bottom: 1px solid rgba(152, 162, 179, 0.16);
    background: linear-gradient(180deg, rgba(29, 41, 64, 0.78), rgba(11, 17, 29, 0.92));
}

#editor-modal .editor-text-add-lane-label {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 38px;
    color: #7f8aa0;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: translateY(-50%);
    pointer-events: none;
}

#editor-modal .editor-text-add-at-playhead {
    position: absolute;
    z-index: 4;
    top: 50%;
    width: 26px;
    height: 26px;
    padding: 0 0 2px;
    border: 1px solid rgba(96, 165, 250, 0.82);
    border-radius: 50%;
    background: #1d4ed8;
    color: #eff6ff;
    font: 700 18px/1 Inter, Arial, sans-serif;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.34);
    transform: translate(-50%, -50%);
    left: 50%;
}

#editor-modal .editor-text-add-at-playhead:hover,
#editor-modal .editor-text-add-at-playhead:focus-visible {
    border-color: #dbeafe;
    background: #2563eb;
    outline: 2px solid rgba(147, 197, 253, 0.42);
    outline-offset: 2px;
}

#editor-modal .editor-text-add-at-playhead:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

#editor-modal .editor-text-add-at-playhead.edge-start {
    transform: translate(0, -50%);
}

#editor-modal .editor-text-add-at-playhead.edge-end {
    transform: translate(-100%, -50%);
}

.timeline-media-trim-handle:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

.timeline-media-trim-frame-chip {
    position: absolute;
    z-index: 21;
    top: calc(100% + 6px);
    left: 50%;
    min-width: 30px;
    padding: 2px 5px;
    border: 1px solid rgba(96, 165, 250, 0.65);
    border-radius: 999px;
    color: #dbeafe;
    background: rgba(15, 38, 70, 0.96);
    font-size: 0.52rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    opacity: 0;
    pointer-events: none;
    text-align: center;
    transform: translate(-50%, -3px);
    transition: opacity 120ms ease, transform 120ms ease;
    white-space: nowrap;
}

.timeline-media-trim-handle:hover .timeline-media-trim-frame-chip,
.timeline-media-trim-handle:focus-visible .timeline-media-trim-frame-chip,
.editor-media-trim-dragging .timeline-media-trim-frame-chip {
    opacity: 1;
    transform: translate(-50%, 0);
}

.editor-media-trim-dragging,
.editor-media-trim-dragging * {
    cursor: ew-resize !important;
    user-select: none !important;
}

#editor-modal .timeline-cut-band {
    z-index: 2;
}

#editor-range-selection {
    display: none;
    position: absolute;
    z-index: 2;
    top: calc(var(--timeline-h, 103px) * 0.35);
    bottom: 0;
    border-inline: 2px solid #f6c84c;
    background: rgba(246, 200, 76, 0.18);
    pointer-events: none;
}

#editor-modal #clip-scrubber {
    z-index: 5;
    top: calc(var(--timeline-h, 103px) * 0.35);
    bottom: auto;
    height: calc(var(--timeline-h, 103px) * 0.65);
}

#editor-modal #clip-scrubber::-webkit-slider-thumb {
    height: calc(var(--timeline-h, 103px) * 0.65);
}

.editor-scene-track {
    height: calc(var(--timeline-h, 103px) * 0.35);
    position: absolute;
    z-index: 7;
    top: 0;
    right: 0;
    left: 0;
    overflow: hidden;
    border: 0;
    border-radius: 6px 6px 0 0;
    background: #0b1019;
}

.framing-scene-segment {
    gap: 2px;
    padding: 1px 4px;
    border-top-width: 2px;
    cursor: pointer;
}

.framing-scene-segment strong {
    font-size: 0.54rem;
}

.framing-scene-segment span {
    font-size: 0.49rem;
}

.editor-scene-playhead {
    top: 0;
    bottom: 0;
}

.editor-scene-playhead::before {
    width: 6px;
    height: 6px;
}

/* Select/Split tool group. */
.editor-tool-group {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 9px;
    background: #0b0f18;
    border: 1px solid rgba(152, 162, 179, 0.17);
}

.tool-switch-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 27px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #98a2b3;
    font: inherit;
    font-size: 0.72rem;
    cursor: pointer;
}

.tool-switch-btn:hover:not(:disabled) { color: #dce2ec; }
.tool-switch-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.tool-switch-btn.active-tool {
    background: rgba(34, 211, 238, 0.16);
    color: #67e8f9;
}

#editor-tool-split.active-tool {
    background: rgba(239, 68, 68, 0.16);
    color: #f87171;
}

/* Carter's own reference artwork (Razorblade PNG.png, cropped to content
   and saved as a static asset - 2026-08-06), not a redrawn approximation.
   Rendered as a CSS mask rather than a plain <img> so it still recolors
   with currentColor exactly like the old SVG did (neutral -> red on
   #editor-tool-split.active-tool, matching the Select tool's own
   active-state feedback). */
.razor-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-image: url("/static/razor-blade-icon.png");
    mask-image: url("/static/razor-blade-icon.png");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Split tool: hover affordances only fire while it's the active tool. */
.editor-scene-track.tool-split-active .framing-scene-segment {
    cursor: crosshair;
}

.framing-scene-segment.razor-hover-split {
    z-index: 3;
    box-shadow: inset 0 0 0 2px #f6c84c, 0 0 8px rgba(246, 200, 76, 0.55);
}

.timeline-video-segment.razor-hover-split {
    z-index: 5;
    border-color: #f6c84c;
    box-shadow: inset 0 0 0 2px #f6c84c, 0 0 8px rgba(246, 200, 76, 0.55);
}

.framing-scene-segment.manual-boundary::before {
    content: '';
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    left: -2px;
    width: 3px;
    border-radius: 2px;
    background: #f6c84c;
    box-shadow: 0 0 6px rgba(246, 200, 76, 0.72);
    pointer-events: none;
}

/* Custom razor cursor over the timeline container while Split is armed -
   Carter's own reference artwork (Razorblade PNG.png), pre-shrunk to
   36x36 and saved as a static asset, not a redrawn approximation
   (2026-08-06). Cursor images render at native pixel size with no
   CSS-driven resizing, which the source 250x250 file can't do directly -
   the crop-to-content + 36x36 export makes it usable as a cursor at all.
   !important beats #editor-modal #clip-scrubber's own cursor rule, which
   otherwise wins on specificity (two IDs) over a single-id/class
   selector. */
#timeline-container.tool-split-active,
#timeline-container.tool-split-active * {
    cursor: url("/static/razor-blade-cursor.png") 18 18, crosshair !important;
}

#editor-text-track-scroll.tool-split-active .editor-text-lane-body,
#editor-text-track-scroll.tool-split-active .editor-text-lane-body * {
    cursor: url("/static/razor-blade-cursor.png") 18 18, crosshair !important;
}

.razor-hover-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4;
    width: 2px;
    display: none;
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.85);
    pointer-events: none;
    transform: translateX(-1px);
}

/* One preview line spans both the framing and media lanes.  The label exposes
   the exact frame and why the Razor moved there, while pointer-events none
   guarantees that feedback can never swallow the click it is previewing. */
.editor-razor-guide {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 12;
    width: 2px;
    display: none;
    background: #f6c84c;
    box-shadow: 0 0 8px rgba(246, 200, 76, 0.9);
    pointer-events: none;
    transform: translateX(-1px);
}

.editor-razor-guide[data-lane="media"] {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.88);
}

.editor-razor-guide.committed {
    animation: none;
}

.editor-razor-guide.invalid {
    background: #fb7185;
    box-shadow: 0 0 9px rgba(251, 113, 133, 0.95);
}

.editor-razor-guide-label {
    position: absolute;
    top: 4px;
    left: 7px;
    width: max-content;
    max-width: 190px;
    padding: 2px 6px;
    border: 1px solid rgba(246, 200, 76, 0.55);
    border-radius: 4px;
    background: rgba(5, 7, 13, 0.94);
    color: #f8fafc;
    font-size: 0.58rem;
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: 0.015em;
    white-space: nowrap;
    transform: none;
}

.editor-razor-guide.guide-label-left .editor-razor-guide-label {
    left: auto;
    right: 7px;
}

/* The anchored Click-1 point: a static red line plus a small flag so it
   reads as "planted" rather than the live hover preview. */
.razor-in-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 5;
    width: 2px;
    display: none;
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.85);
    pointer-events: none;
    transform: translateX(-1px);
}

.razor-in-marker::before {
    position: absolute;
    top: -3px;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 1px 1px 50% 50%;
    background: #ef4444;
    content: "";
    transform: translate(-50%, -45%) rotate(45deg);
}

/* The live band between the anchored In point and the current hover
   position - the "Red Removal Overlay" preview before the second click. */
.razor-preview-band {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    display: none;
    background: rgba(239, 68, 68, 0.28);
    border-left: 2px solid #ef4444;
    border-right: 2px solid #ef4444;
    pointer-events: none;
}

#editor-modal .clip-trim-controls {
    min-height: 28px;
    margin: 5px 0 0;
    padding: 2px 3px;
    display: grid;
    grid-template-columns: auto auto minmax(120px, 1fr) auto auto;
    gap: 6px;
    align-items: center;
    border: 0;
    background: transparent;
}

.timeline-trim-label,
#editor-modal .clip-trim-controls .range-time-value {
    color: #8f99ab;
    font-size: 0.57rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.timeline-trim-label {
    color: #c7cfdd;
    font-weight: 700;
}

#editor-modal .clip-trim-controls .dual-range-shell {
    height: 22px;
    margin: 0;
}

#editor-modal .clip-trim-controls :is(.dual-range-rail, .dual-range-selection) {
    top: 9px;
}

#editor-modal #btn-undo-clip-trim {
    min-height: 24px;
    padding: 2px 6px;
    font-size: 0.54rem;
}

.output-monitor {
    padding: 9px;
    border-radius: 10px;
}

.output-frame-wrap {
    width: min(100%, 430px, calc((100dvh - 135px) * var(--editor-output-ratio, 0.5625)), var(--preview-frame-w, 9999px));
    border-radius: 10px;
}

.output-scene-readout {
    display: none;
}

/* Crop Positions: one row per framing keyframe (= one blueprint scene).
   Colors match the scene blocks on the timeline's top lane, so a row and
   its band on the timeline read as the same object. */
.crop-positions-panel {
    min-height: 0;
    /* Fills whatever height .output-monitor (flex: 0 0 auto) doesn't claim
       in the .studio-output-rail column, instead of stopping at a fixed
       height and leaving dead space below it (2026-08-06, Carter). */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 9px;
    border: 1px solid rgba(152, 162, 179, 0.16);
    border-radius: 10px;
    background: #0b0f18;
}

.crop-positions-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    color: #dce2ec;
    font-size: 0.68rem;
    font-weight: 750;
}

.crop-positions-title,
.crop-positions-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.crop-positions-actions {
    margin-left: auto;
}

.crop-positions-count {
    min-width: 17px;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(152, 162, 179, 0.16);
    color: #98a2b3;
    font-size: 0.57rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.crop-positions-action {
    min-height: 23px;
    padding: 2px 8px;
    border: 1px solid rgba(152, 162, 179, 0.2);
    border-radius: 999px;
    background: transparent;
    color: #98a2b3;
    font: inherit;
    font-size: 0.55rem;
    font-weight: 700;
    cursor: pointer;
}

.crop-positions-action:hover,
.crop-positions-action.active {
    border-color: rgba(34, 211, 238, 0.45);
    background: rgba(34, 211, 238, 0.14);
    color: #67e8f9;
}

.timeline-autokey-toggle {
    flex: 0 0 auto;
    min-width: 62px;
    padding-inline: 8px !important;
    white-space: nowrap;
}

.timeline-autokey-toggle.active {
    border-color: rgba(34, 211, 238, 0.48) !important;
    background: rgba(34, 211, 238, 0.14) !important;
    color: #67e8f9 !important;
}

.crop-positions-list {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    scrollbar-color: var(--v2-blue, #1014ef) transparent;
}

.crop-position-row {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 6px;
    padding: 4px 5px;
    border-radius: 6px;
    cursor: pointer;
}

.crop-position-row:hover { background: rgba(152, 162, 179, 0.09); }

.crop-position-row.selected {
    background: rgba(34, 211, 238, 0.11);
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.3);
}

.crop-position-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--scene-color, #22d3ee);
}

.crop-position-main { min-width: 0; }

.crop-position-line {
    display: flex;
    align-items: baseline;
    gap: 5px;
    overflow: hidden;
    white-space: nowrap;
}

.crop-position-time {
    color: #dce2ec;
    font-size: 0.62rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.crop-position-span,
.crop-position-mode {
    overflow: hidden;
    color: var(--v2-muted, #9DA6AF);
    font-size: 0.54rem;
    text-overflow: ellipsis;
}

/* Mini-map of where this keyframe's crop window sits horizontally in the
   source frame - the same read as Clipzi's per-row bar. */
.crop-position-track {
    height: 3px;
    margin-top: 3px;
    border-radius: 2px;
    background: rgba(152, 162, 179, 0.14);
    position: relative;
}

.crop-position-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 2px;
    background: var(--scene-color, #22d3ee);
}

.crop-position-delete {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

.crop-position-delete:hover {
    background: rgba(127, 29, 29, 0.28);
    color: #fca5a5;
}

.crop-positions-empty {
    padding: 8px 5px;
    color: #6f7a8e;
    font-size: 0.56rem;
}

#editor-modal .editor-tabs {
    width: max-content;
    position: static;
    padding: 3px;
    border-radius: 8px;
}

#editor-modal .editor-tab {
    min-height: 29px;
    padding: 4px 9px;
    font-size: 0.62rem;
}

#editor-modal #editor-tabs:has(.editor-tab.active) {
    position: fixed;
    z-index: 1203;
    top: auto !important;
    bottom: 12px;
    left: 18px;
}

#editor-modal #editor-tab-framing,
#editor-modal #editor-tab-hook,
#editor-modal #editor-tab-music,
#editor-modal #editor-tab-transcript,
#editor-modal #editor-tab-text {
    max-height: calc(100dvh - 130px);
    position: fixed;
    z-index: 1202;
    right: calc(32% + 20px);
    bottom: 54px;
    left: 18px;
    overflow: auto;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.72);
}

#editor-modal .studio-footer {
    display: none !important;
}

#editor-modal .studio-footer:has(#editor-progress-container[style*="display: block"]) {
    display: block !important;
    position: absolute;
    z-index: 40;
    top: 46px;
    right: 0;
    left: 0;
    padding: 5px 12px !important;
    border: 0 !important;
}

#editor-modal .editor-render-progress[data-render-state="unavailable"] .job-status {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
}

@media (max-width: 980px) {
    #editor-modal #editor-workspace[style*="display: flex"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .studio-output-rail {
        max-height: none;
        grid-row: 2;
        display: flex;
    }

    .output-frame-wrap {
        width: min(70vw, 360px);
    }

    #editor-modal #editor-tab-framing,
    #editor-modal #editor-tab-hook,
    #editor-modal #editor-tab-music,
    #editor-modal #editor-tab-transcript {
        right: 14px;
        left: 14px;
    }
}

@media (max-width: 720px) {
    #editor-modal .studio-toolbar {
        position: relative;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 8px !important;
    }

    #editor-modal .studio-title-block { padding-right: 40px; }
    #editor-modal #editor-title { max-width: none; }
    #editor-modal .studio-toolbar-actions {
        flex-wrap: nowrap;
        width: 100%;
    }
    #editor-modal .studio-project-save-button,
    #editor-modal .studio-save-button { flex: 1; min-height: 44px !important; }
    #editor-modal .studio-close {
        position: absolute;
        top: 5px;
        right: 8px;
        width: 36px;
        height: 36px;
    }

    .editor-mode-state,
    .editor-save-state {
        display: none;
    }

    .studio-save-button {
        padding-inline: 8px !important;
    }

    .scene-layout-toolbar {
        flex-wrap: wrap;
    }

    .crop-toolbar-title {
        width: 100%;
    }

    .scene-settings-popover-panel {
        width: min(88vw, 440px);
    }

    .editor-transport {
        flex-wrap: wrap;
    }

    .editor-loop-badge {
        margin-left: 0;
    }

    #editor-modal .clip-trim-controls {
        grid-template-columns: auto auto minmax(90px, 1fr) auto;
    }

    #editor-modal #btn-undo-clip-trim {
        display: none;
    }
}

/* Editor refinement: make the per-scene framing modes read like primary
   controls, while keeping the output monitor visible beside the drawer. */
#editor-modal .scene-layout-toolbar {
    flex-wrap: wrap;
    min-height: 48px;
    gap: 7px;
    padding: 6px 7px;
    border: 1px solid rgba(152, 162, 179, 0.18);
    border-radius: 10px;
    background: rgba(10, 15, 28, 0.9);
}

#editor-modal .crop-toolbar-title {
    margin-right: 8px;
    color: #f4f7fb;
    font-size: 0.84rem;
    font-weight: 850;
    letter-spacing: 0.01em;
}

#editor-modal .scene-layout-pills {
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(152, 162, 179, 0.2);
    border-radius: 10px;
    background: #070b13;
}

#editor-modal .scene-layout-pill {
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid rgba(152, 162, 179, 0.23);
    border-radius: 8px;
    color: #d1d9e8;
    font-size: 0.79rem;
    font-weight: 850;
    letter-spacing: 0.01em;
}

#editor-modal .scene-layout-pill:hover:not(:disabled),
#editor-modal .scene-layout-pill:focus-visible {
    border-color: rgba(103, 232, 249, 0.65);
    color: #f4fdff;
    background: rgba(34, 211, 238, 0.14);
}

#editor-modal .scene-layout-pill.active,
#editor-modal .scene-layout-pill[aria-checked="true"] {
    border-color: #67e8f9;
    color: #03151b;
    background: linear-gradient(135deg, #a5f3fc 0%, #22d3ee 100%);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.18), 0 5px 18px rgba(34, 211, 238, 0.2);
}

/* Captions gets a real visual preset drawer. The native select is mounted only
   as an invisible renderer/save state bridge; the cards are the visible picker. */
#editor-modal .editor-caption-drawer {
    gap: 14px !important;
}

#editor-modal .editor-caption-preset-picker {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid rgba(152, 162, 179, 0.18);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(19, 27, 42, 0.98), rgba(10, 15, 25, 0.98));
}

#editor-modal .editor-caption-preset-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

#editor-modal .editor-caption-preset-picker-head > div {
    display: grid;
    gap: 3px;
}

#editor-modal .editor-caption-preset-picker-head strong {
    color: #f4f7fb;
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

#editor-modal .editor-caption-preset-picker-head span {
    color: #8e9aaf;
    font-size: 0.68rem;
}

#editor-modal .editor-caption-preset-picker-head .editor-caption-preset-active-label {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid rgba(34, 211, 238, 0.35);
    border-radius: 999px;
    color: #bdf7ff;
    background: rgba(34, 211, 238, 0.1);
    font-size: 0.66rem;
    font-weight: 750;
    white-space: nowrap;
}

#editor-modal .editor-caption-preset-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 10px;
    min-height: 112px;
    max-height: clamp(220px, 32dvh, 370px);
    overflow-y: auto;
    padding: 2px;
    scrollbar-color: rgba(103, 232, 249, 0.38) transparent;
}

#editor-modal .editor-caption-preset-card {
    min-width: 0;
    min-height: 112px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: stretch;
    padding: 7px;
    border: 1px solid rgba(152, 162, 179, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    color: #dbe4f2;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

#editor-modal .editor-caption-preset-card:hover:not(:disabled),
#editor-modal .editor-caption-preset-card:focus-visible {
    border-color: rgba(103, 232, 249, 0.66);
    background: rgba(34, 211, 238, 0.09);
    transform: translateY(-1px);
}

#editor-modal .editor-caption-preset-card.active {
    border-color: #22d3ee;
    background: rgba(34, 211, 238, 0.13);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.18), 0 7px 20px rgba(0, 0, 0, 0.22);
}

#editor-modal .editor-caption-preset-card:disabled {
    opacity: 0.52;
    cursor: not-allowed;
}

#editor-modal .editor-caption-preset-visual {
    min-height: 78px;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    background: radial-gradient(circle at 50% 20%, #26344b 0%, #111827 52%, #080b12 100%);
}

#editor-modal .editor-caption-preset-face {
    max-width: 100%;
    display: inline-block;
    overflow-wrap: anywhere;
    color: #fff;
    font-size: clamp(0.78rem, 1.25vw, 1.02rem);
    line-height: 1.08;
    text-align: center;
}

#editor-modal .editor-caption-preset-face[data-long-preset-label="true"] {
    font-size: clamp(0.68rem, 1vw, 0.88rem);
    overflow-wrap: normal;
    white-space: nowrap;
}

#editor-modal .editor-caption-preset-card-label {
    overflow: hidden;
    color: #dce4f1;
    font-size: 0.7rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 720px) {
    #editor-modal .scene-layout-pill {
        min-height: 36px;
        padding-inline: 10px;
        font-size: 0.72rem;
    }

    #editor-modal .editor-caption-preset-picker-head {
        align-items: flex-start;
        flex-direction: column;
    }

    #editor-modal .editor-caption-preset-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 300px;
    }
}

/* Caption picker focus mode -------------------------------------------------
   Keep the output monitor and upper workbench visible. Caption styling is a
   compact bottom tray, not a second full-height workspace. */
#editor-modal.editor-caption-focus #editor-tab-framing {
    top: auto;
    right: calc(32% + 20px);
    bottom: 68px;
    max-height: min(52dvh, 460px);
    display: flex !important;
    overflow-y: auto;
    padding: 10px !important;
    gap: 8px !important;
}

#editor-modal.editor-caption-focus #editor-tab-framing > div:first-child,
#editor-modal.editor-caption-focus .scene-layout-toolbar,
#editor-modal.editor-caption-focus #control-scene-zoom,
#editor-modal.editor-caption-focus #control-single-vertical,
#editor-modal.editor-caption-focus #control-split-vertical,
#editor-modal.editor-caption-focus #control-horizontal-blur,
#editor-modal.editor-caption-focus #control-center-crop {
    display: none !important;
}

#editor-modal.editor-caption-focus .editor-caption-preset-picker {
    min-height: 0;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

#editor-modal.editor-caption-focus .editor-caption-preset-cards {
    min-height: 74px;
    max-height: 84px;
    flex: 0 0 auto;
    grid-template-columns: none;
    grid-template-rows: minmax(66px, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: minmax(116px, 1fr);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
}

#editor-modal.editor-caption-focus .editor-caption-controls {
    width: 100%;
    flex: 0 0 auto;
    grid-template-columns:
        minmax(175px, 1.05fr)
        minmax(235px, 1.65fr)
        minmax(170px, 1fr)
        minmax(150px, 0.9fr) !important;
    align-items: start !important;
    justify-content: stretch;
    margin: 0;
    column-gap: 10px !important;
}

#editor-modal.editor-caption-focus .editor-caption-controls > div {
    min-width: 0;
}

#editor-modal.editor-caption-focus #editor-tab-framing .editor-caption-controls select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

#editor-modal.editor-caption-focus .editor-caption-controls .range-control-panel {
    gap: 5px;
    padding: 6px 8px;
    border-radius: 8px;
}

#editor-modal.editor-caption-focus .editor-caption-controls .range-scale,
#editor-modal.editor-caption-focus .editor-caption-controls .control-hint {
    display: none;
}

#editor-modal.editor-caption-focus #editor-caption-pos-custom {
    margin-top: 4px !important;
    gap: 2px;
    padding: 4px 6px;
}

#editor-modal.editor-caption-focus #editor-caption-pos-custom .range-control-title {
    display: none;
}

#editor-modal.editor-caption-focus #editor-caption-pos-custom .range-control-head {
    min-height: 20px;
    justify-content: flex-end;
}

#editor-modal.editor-caption-focus #editor-caption-pos-custom .range-value {
    padding: 2px 7px;
    font-size: 0.64rem;
}

#editor-modal.editor-caption-focus #editor-caption-pos-custom .polished-range {
    min-height: 16px;
    height: 16px;
}

#editor-modal.editor-caption-focus .editor-caption-preset-card {
    min-height: 64px;
    display: grid;
    place-items: center;
    padding: 8px 7px;
}

#editor-modal.editor-caption-focus .editor-caption-preset-visual {
    width: 100%;
    min-height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

#editor-modal.editor-caption-focus .editor-caption-preset-face {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.15;
    white-space: nowrap;
    pointer-events: none;
}

#editor-modal.editor-caption-focus .editor-caption-preset-face[data-long-preset-label="true"] {
    font-size: 12px;
}

#editor-modal .editor-caption-profanity-control {
    min-width: 0;
}

#editor-modal .editor-caption-profanity-heading {
    display: block;
    margin-bottom: 3px;
    color: #a0aec0;
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#editor-modal .editor-caption-profanity {
    width: 100%;
    min-height: 31px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 4px 7px;
    border: 1px solid rgba(103, 232, 249, 0.16);
    border-radius: 8px;
    background: rgba(34, 211, 238, 0.035);
    color: #f4f7fb;
    font-family: 'Manrope', system-ui, sans-serif;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

#editor-modal .editor-caption-profanity-copy {
    min-width: 0;
    color: #8e9aaf;
    font-size: 0.66rem;
    font-weight: 650;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#editor-modal .editor-caption-profanity .t-toggle {
    flex: 0 0 auto;
}

#editor-modal.editor-caption-focus .editor-caption-hint {
    display: none;
}

/* The cards are the visible style selector; the select is only a hidden
   renderer/save state bridge and must never reserve layout space. */
#editor-modal #editor-caption-preset.visually-hidden {
    display: none !important;
}

/* The bottom tool tabs are primary controls, not micro-buttons. */
#editor-modal .editor-tabs {
    gap: 5px;
    padding: 5px;
}

#editor-modal .editor-tab {
    min-height: 44px;
    padding: 9px 17px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 800;
}

#editor-modal .editor-caption-preset-card {
    min-height: 126px;
}

#editor-modal .editor-caption-preset-visual {
    min-height: 88px;
}

@media (max-width: 980px) {
    #editor-modal.editor-caption-focus #editor-tab-framing {
        right: 14px;
        left: 14px;
    }

    #editor-modal.editor-caption-focus .editor-caption-controls {
        grid-template-columns:
            minmax(165px, 1fr)
            minmax(220px, 1.6fr)
            minmax(80px, 0.6fr)
            minmax(80px, 0.6fr)
            minmax(145px, 0.9fr) !important;
    }
}

@media (max-width: 720px) {
    #editor-modal.editor-caption-focus #editor-tab-framing {
        top: 52px;
        right: 8px;
        bottom: 62px;
        left: 8px;
        max-height: none;
    }

    #editor-modal.editor-caption-focus .editor-caption-preset-cards {
        min-height: 112px;
        max-height: 300px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-flow: row;
        grid-auto-columns: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    #editor-modal.editor-caption-focus .editor-caption-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #editor-modal .editor-tab {
        min-height: 42px;
        flex: 1 1 0;
        padding-inline: 8px;
        font-size: 0.75rem;
    }
}

/* On-demand source transcription ----------------------------------------- */
#camera-detection-dialog {
    width: min(420px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 24px;
    border: 1px solid var(--v2-border-strong);
    border-radius: 12px;
    background: var(--v2-slate);
    color: var(--v2-white);
    font: inherit;
}

/* A preserved ordinary-delete gap occupies real timeline time but contains no
   source media. Keep it visible and keyboard/context-menu reachable without
   making it an active media block. */
.timeline-gap-segment {
    position: absolute;
    top: 6px;
    height: calc(var(--timeline-h, 103px) * 0.65 - 12px);
    min-width: 4px;
    border: 1px dashed rgba(148, 163, 184, 0.62);
    border-radius: 4px;
    background: repeating-linear-gradient(135deg,
        rgba(100, 116, 139, 0.08) 0 5px,
        rgba(100, 116, 139, 0.22) 5px 7px);
    color: rgba(203, 213, 225, 0.78);
    cursor: context-menu;
    pointer-events: auto;
    overflow: hidden;
    transition: border-color 120ms ease, background 120ms ease;
}

.timeline-gap-segment:hover,
.timeline-gap-segment:focus-visible {
    border-color: rgba(226, 232, 240, 0.92);
    background: repeating-linear-gradient(135deg,
        rgba(100, 116, 139, 0.14) 0 5px,
        rgba(148, 163, 184, 0.3) 5px 7px);
    outline: none;
}

.timeline-gap-segment-label {
    display: block;
    overflow: hidden;
    padding: 3px 6px;
    font-size: 0.56rem;
    font-weight: 600;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}
#camera-detection-dialog::backdrop { background: rgb(0 0 0 / 65%); }
#camera-detection-dialog h3 { margin: 0 0 12px; font-size: 1.1rem; }
#camera-detection-dialog p { font-size: 0.85rem; line-height: 1.5; color: var(--v2-muted); }
#camera-detection-dialog progress { width: 100%; accent-color: #315bff; }
#camera-detection-dialog button { float: right; }
#ctx-detect-scenes[hidden] { display: none; }
#ctx-detect-scenes { display: block; width: 100%; text-align: left; border: 0; background: transparent; }
#ctx-detect-scenes:hover, #ctx-detect-scenes:focus-visible { background: #2d313f; }
#ctx-detect-scenes:disabled { opacity: 0.45; cursor: not-allowed; }
#editor-modal #btn-detect-scenes {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 36px;
    padding: 0.45rem 0.65rem;
    font-size: 0.75rem;
    margin: 0;
}

#editor-modal .editor-transcribe-button {
    min-height: 40px;
    flex: 0 0 auto;
    padding: 8px 13px;
    border: 1px solid rgba(103, 232, 249, 0.58);
    border-radius: 8px;
    color: #03151b;
    background: linear-gradient(135deg, #a5f3fc 0%, #22d3ee 100%);
    font-size: 0.75rem;
    font-weight: 850;
    white-space: nowrap;
}

#editor-modal #btn-detect-scenes[hidden],
#editor-modal .editor-transcribe-button[hidden],
#editor-modal .editor-transcription-status[hidden] {
    display: none !important;
}

#editor-modal .editor-transcribe-button:hover:not(:disabled),
#editor-modal .editor-transcribe-button:focus-visible {
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.2), 0 7px 18px rgba(34, 211, 238, 0.18);
}

#editor-modal .editor-transcribe-button:disabled {
    opacity: 0.58;
    cursor: wait;
}

#editor-modal .editor-transcription-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #67e8f9;
    font-size: 0.68rem;
    font-weight: 750;
    white-space: nowrap;
}

#editor-modal .editor-transcription-status:not([hidden])::before {
    width: 7px;
    height: 7px;
    border: 2px solid rgba(103, 232, 249, 0.28);
    border-top-color: #67e8f9;
    border-radius: 50%;
    content: "";
    animation: editor-transcription-spin 0.8s linear infinite;
}

#editor-modal .editor-transcription-status.error {
    color: #fca5a5;
}

#editor-modal .editor-transcription-status.complete {
    color: #86efac;
}

#editor-modal .editor-transcription-status.error::before,
#editor-modal .editor-transcription-status.complete::before {
    display: none;
}

@keyframes editor-transcription-spin {
    to { transform: rotate(360deg); }
}

#editor-modal #editor-output-empty {
    max-width: 88%;
    line-height: 1.45;
}

#transcribe-confirm-modal {
    z-index: 1300;
}

/* Keep the preview, timeline, and tab bar in one desktop viewport. The
   source canvas is the flexible region; the timeline and tabs retain their
   intrinsic controls and never push the tab bar below the modal fold. */
@media (min-width: 981px) {
    #editor-modal .editor-grid {
        height: 100%;
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
    }

    #editor-modal #editor-workspace[style*="display: flex"] {
        height: 100%;
        min-height: 0;
        align-self: stretch;
        align-items: stretch;
        grid-template-rows: minmax(0, 1fr);
        overflow: hidden;
    }

    #editor-modal .studio-edit-column {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    #editor-modal .studio-preview-panel {
        min-height: 0;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        overflow: hidden;
    }

    #editor-modal .reframe-preview-grid,
    #editor-modal .source-monitor {
        min-height: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }

    #editor-modal .source-monitor {
        display: flex;
        flex-direction: column;
    }

    /* Standalone 9:16 imports use the side space for controls so picture
       can fill the whole monitor row rather than a narrow upright strip. */
    #editor-modal .source-monitor.source-portrait {
        display: grid;
        grid-template-columns: minmax(230px, 1fr) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        column-gap: 12px;
    }

    #editor-modal .source-portrait .scene-layout-toolbar {
        grid-column: 1;
        grid-row: 1;
        align-self: stretch;
        align-content: start;
        flex-wrap: wrap;
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        margin-bottom: 0;
    }

    #editor-modal .source-portrait .editor-source-controls {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        align-self: stretch;
        gap: 12px;
        min-height: 0;
        overflow: hidden;
        padding-right: 4px;
    }

    #editor-modal .source-portrait .editor-source-tools {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }

    #editor-modal .source-portrait .editor-transport {
        flex: 0 0 auto;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin: 0;
        padding: 0;
    }

    #editor-modal .source-portrait .editor-transport-group {
        flex: 0 0 auto;
        box-sizing: border-box;
        gap: 8px;
        padding: 8px;
        border: 1px solid var(--studio-border-soft);
        border-radius: 8px;
        background: var(--studio-raised);
    }

    #editor-modal .source-portrait .editor-options-group {
        margin-top: auto;
    }

    #editor-modal .source-portrait .scene-layout-pills {
        flex-wrap: wrap;
        width: 100%;
    }

    #editor-modal .source-portrait .scene-settings-popover[open] {
        flex-basis: 100%;
    }

    #editor-modal .source-portrait .scene-settings-popover-panel {
        position: static;
        width: 100%;
        max-width: 100%;
        margin-top: 6px;
    }

    #editor-modal .source-portrait #preview-container {
        grid-column: 2;
        grid-row: 1;
        height: 100% !important;
        flex: none !important;
    }

    #editor-modal #preview-container {
        min-height: 0;
        flex: 1 1 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    #editor-modal #editor-thumbnail {
        max-height: 100%;
        object-fit: contain;
    }

    #editor-modal .editor-timeline-shell,
    #editor-modal .editor-tabs {
        flex: 0 0 auto;
    }

    #editor-modal .editor-tabs,
    #editor-modal #editor-tabs:has(.editor-tab.active) {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
    }
}

@media (max-width: 720px) {
    #editor-modal .editor-transcribe-button {
        margin-left: 0;
        min-height: 36px;
        padding-inline: 10px;
        font-size: 0.7rem;
    }
}

/* The crop guide must sit on the decoded source pixels. The source monitor
   therefore follows the video's intrinsic aspect ratio instead of forcing a
   16:9 shell (which creates object-fit letterboxing and shifts the guide away
   from the pixels the output renderer actually crops). */
#editor-modal .editor-source-frame {
    position: relative;
    aspect-ratio: auto;
    overflow: hidden;
    background: #000;
}

/* The desktop studio gives the source monitor the flexible row between the
   layout toolbar and the timeline.  Keep that row stretched, but keep the
   actual source frame centered at its native horizontal aspect ratio so crop
   guides are drawn on the pixels the editor is showing rather than on a
   collapsed flex item. */
#editor-modal .reframe-preview-grid {
    align-items: stretch;
}

#editor-modal .source-monitor {
    min-height: 0;
    height: 100%;
    align-items: stretch;
}

#editor-modal #preview-container {
    flex: 1 1 0 !important;
    align-self: center;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    display: block !important;
}

#editor-modal .editor-source-frame #editor-thumbnail {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
    background: #000;
}

#editor-modal .editor-source-frame #crop-box-container {
    z-index: 4;
}

/* Final compact-drawer correction -----------------------------------------
   Keep the fixed tool drawers above the tab bar, but let their own content
   scroll instead of allowing large controls/cards to consume the workbench. */
#editor-modal #editor-tabs:has(.editor-tab.active) {
    bottom: 10px;
}

#editor-modal .editor-tab {
    min-height: 34px;
    padding: 6px 11px;
    font-size: 0.7rem;
}

#editor-modal #editor-tab-framing,
#editor-modal #editor-tab-hook,
#editor-modal #editor-tab-music,
#editor-modal #editor-tab-transcript,
#editor-modal #editor-tab-text {
    bottom: 52px;
    max-height: calc(100dvh - 124px);
    box-sizing: border-box;
    padding: 10px !important;
    gap: 8px !important;
    overflow-y: auto;
}

#editor-modal .editor-caption-drawer {
    gap: 8px !important;
}

#editor-modal .editor-caption-preset-picker {
    padding: 8px;
}

#editor-modal .editor-caption-preset-picker-head {
    gap: 8px;
    margin-bottom: 6px;
}

#editor-modal .editor-caption-preset-cards {
    min-height: 88px;
    gap: 7px;
}

#editor-modal .editor-caption-preset-card {
    min-height: 96px;
    gap: 5px;
    padding: 6px;
}

#editor-modal .editor-caption-preset-visual {
    min-height: 58px;
    padding: 6px;
}

#editor-modal .editor-caption-controls {
    gap: 6px !important;
}

#editor-modal .editor-caption-controls label {
    margin-bottom: 3px !important;
    font-size: 0.68rem !important;
}

#editor-modal .editor-caption-controls select {
    min-height: 30px;
    padding: 4px 6px !important;
}

#editor-modal #editor-hook-controls,
#editor-modal #music-picker-body {
    gap: 6px !important;
}

#editor-modal #editor-hook-controls > div {
    gap: 6px !important;
}

#editor-modal #editor-hook-text,
#editor-modal #music-search,
#editor-modal #transcript-search,
#editor-modal #transcript-replace {
    min-height: 30px;
    padding: 6px 8px !important;
    font-size: 0.74rem !important;
}

#editor-modal #music-track-list {
    max-height: 180px;
}

#editor-modal .transcript-findbar {
    gap: 6px;
    padding: 7px;
}

#editor-modal .transcript-find-row {
    gap: 5px;
}

#editor-modal .transcript-find-row > button,
#editor-modal .transcript-editor-actions > button,
#editor-modal #btn-undo-content-cut,
#editor-modal #editor-smart-trim-toggle {
    width: max-content;
    min-width: 0;
    flex: 0 0 auto;
    white-space: nowrap;
}

#editor-modal .transcript-cards {
    max-height: none;
}

#editor-modal #editor-text-input {
    min-height: 60px;
    padding: 6px 8px;
}

#editor-modal .editor-text-style-panel {
    gap: 8px;
    padding: 10px;
}

#editor-modal .editor-text-style-grid {
    gap: 6px;
}

#editor-modal .editor-text-style-field select,
#editor-modal .editor-text-style-field input[type="number"] {
    min-height: 30px;
    padding: 4px 6px;
}

#editor-modal .editor-text-layer-list {
    max-height: 180px;
}

/* Recorded editor review, 2026-08-30: the five primary tools are a major
   editing surface, not tiny utility chips. Keep their drawers clear of the
   larger bar and use the drawer width for compact multi-column controls. */
#editor-modal .editor-tab {
    min-height: 44px;
    padding: 9px 17px;
    font-size: 0.82rem;
}

#editor-modal #editor-tab-framing,
#editor-modal #editor-tab-hook,
#editor-modal #editor-tab-music,
#editor-modal #editor-tab-transcript,
#editor-modal #editor-tab-text {
    bottom: 68px;
    max-height: calc(100dvh - 140px);
}

#editor-modal .editor-text-style-grid {
    grid-template-columns: repeat(4, minmax(110px, 1fr));
}

#editor-modal .editor-text-style-field-wide {
    grid-column: span 2;
}

#editor-modal .editor-text-toggle-field {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    display: flex !important;
}

#editor-modal .editor-text-font-picker {
    position: relative;
    min-width: 0;
}

#editor-modal .editor-text-font-trigger {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 9px;
    border: 1px solid #3f4459;
    border-radius: 6px;
    background: #1a1c23;
    color: #f8fafc;
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
}

#editor-modal .editor-text-font-trigger:focus-visible {
    border-color: rgba(103, 232, 249, 0.75);
    outline: none;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.12);
}

#editor-modal .editor-text-font-options {
    position: absolute;
    z-index: 30;
    top: calc(100% + 5px);
    right: 0;
    left: 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid rgba(103, 232, 249, 0.35);
    border-radius: 8px;
    background: #0b0f18;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}

#editor-modal .editor-text-font-options[hidden] {
    display: none;
}

#editor-modal .editor-text-font-option {
    width: 100%;
    min-height: 36px;
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #f8fafc;
    font-size: 0.92rem;
    text-align: left;
    cursor: pointer;
}

#editor-modal .editor-text-font-option:hover,
#editor-modal .editor-text-font-option[aria-selected="true"] {
    border-color: rgba(103, 232, 249, 0.3);
    background: rgba(34, 211, 238, 0.1);
}

#editor-modal #editor-tab-transcript {
    right: auto;
    width: min(900px, calc(68vw - 40px));
    height: auto;
    max-height: calc(100dvh - 140px);
    overflow: hidden;
}

#editor-modal #editor-tab-transcript.is-expanded { height:min(720px, calc(100dvh - 140px)); }
#editor-modal .transcript-expand { margin-left:auto; flex:none; min-height:32px; }
#editor-modal .transcript-line-count { margin-left:8px; color:#98a2b3; font-size:12px; font-weight:400; }
#editor-modal .transcript-column-headings { display:grid; grid-template-columns:64px minmax(0,1fr) 82px; gap:8px; padding:0 10px; color:#aeb7c7; font-size:11px; flex:none; }
#editor-modal .transcript-edit-footer { display:flex; flex-wrap:wrap; gap:6px 16px; padding-top:10px; border-top:1px solid rgba(152,162,179,.16); flex:none; color:#98a2b3; font-size:11px; line-height:1.5; }
#editor-modal .transcript-edit-footer strong { color:#e6eaf2; font-weight:500; }
#editor-modal .transcript-edit-footer { align-items:center; justify-content:space-between; }
#editor-modal .transcript-edit-footer > div { display:flex; flex-wrap:wrap; gap:4px 12px; flex:1; }
#editor-modal #transcript-undo-edit { flex:none; min-height:32px; }

#editor-modal .transcript-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
}

#editor-modal .transcript-heading h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #e6eaf2;
}

#editor-modal .transcript-heading p {
    margin: 3px 0 0;
    font-size: 0.7rem;
    line-height: 1.4;
    color: #98a2b3;
}

#editor-modal .transcript-findbar {
    padding: 0 0 8px;
    border: 0;
    border-bottom: 1px solid rgba(152, 162, 179, 0.16);
    border-radius: 0;
    background: transparent;
    flex: 0 0 auto;
}

#editor-modal .transcript-find-row {
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
}

#editor-modal .transcript-findbar.is-idle .transcript-find-row:first-child { grid-template-columns:minmax(0,1fr) auto; }
#editor-modal .transcript-findbar.is-idle :is(#transcript-search-count, #transcript-search-prev, #transcript-search-next) { display:none; }

#editor-modal #transcript-search-count {
    grid-column: auto;
}

#editor-modal .transcript-replace-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

#editor-modal .transcript-replace-row[hidden] {
    display: none;
}

#editor-modal .transcript-find-row > button {
    min-height: 32px;
    padding: 4px 8px;
    font-size: 0.74rem;
}

#editor-modal .transcript-tools {
    position: relative;
    flex: 0 0 auto;
    font-size: 0.74rem;
}

#editor-modal .transcript-tools summary {
    min-height: 32px;
    padding: 7px 8px;
    border: 1px solid rgba(152, 162, 179, 0.22);
    border-radius: 6px;
    cursor: pointer;
}

#editor-modal .transcript-tools summary:focus-visible {
    outline: 2px solid #93acff;
    outline-offset: 2px;
}

#editor-modal .transcript-tools-popover {
    position: absolute;
    z-index: 5;
    right: 0;
    top: calc(100% + 4px);
    width: 230px;
    max-width: calc(100vw - 48px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: #191e2b;
    border: 1px solid rgba(152, 162, 179, 0.3);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

#editor-modal .transcript-tools-popover .transcript-match-count {
    white-space: normal;
}

#editor-modal .transcript-cards {
    min-height: 0;
    flex: 1 1 auto;
    gap: 4px;
    max-height: min(360px, 42dvh);
    scrollbar-gutter: stable;
}

#editor-modal #editor-tab-transcript.is-expanded .transcript-cards { max-height:none; }
#editor-modal .transcript-keyboard-help { margin:4px 0; color:#aeb7c7; font-size:12px; line-height:1.6; }
#editor-modal .transcript-cards-empty { display:grid; justify-items:start; gap:8px; padding:16px 10px; color:#aeb7c7; font-size:13px; line-height:1.5; }
#editor-modal .transcript-cards-empty strong { color:#e6eaf2; font-size:15px; }
#editor-modal .transcript-cards-empty p { margin:0; overflow-wrap:anywhere; }
#editor-modal .transcript-cards-empty button, #editor-modal .transcript-cards-empty summary { min-height:44px; }
#editor-modal .transcript-cards-empty summary { cursor:pointer; line-height:44px; }

#editor-modal .transcript-card {
    width: 100%;
    max-width: 100%;
    grid-template-columns: 64px minmax(0, 1fr) 82px;
    align-items: start;
    gap: 8px;
    padding: 8px 10px;
    border:1px solid transparent;
    border-bottom-color:rgba(152,162,179,.12);
    border-radius: 8px;
}

#editor-modal .transcript-card:is(.active, :focus-within) { background:rgba(59,130,246,.08); border-color:rgba(59,130,246,.22); }

#editor-modal .transcript-card-badge {
    margin-top: 2px;
    padding: 6px 2px;
    border-color: transparent;
    background: transparent;
    color: #aeb7c7;
}

#editor-modal .transcript-card-text {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 32px;
    padding: 4px 6px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #e6eaf2;
    resize: none;
    overflow: hidden;
    overflow-wrap: anywhere;
    transition: border-color 0.15s;
}

#editor-modal .transcript-card-text:focus {
    border-color: rgba(147, 172, 255, 0.5);
    background: rgba(147, 172, 255, 0.04);
}

#editor-modal .transcript-row-actions {
    display: flex;
    gap: 4px;
    visibility: visible;
    opacity:1;
}

#editor-modal .transcript-card:is(.active, :hover, :focus-within) .transcript-row-actions {
    visibility: visible;
    opacity:1;
}

#editor-modal .transcript-words-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 4px 6px;
    border: 1px solid rgba(152, 162, 179, 0.22);
    border-radius: 6px;
    background: transparent;
    color: #c7cfdd;
    font: inherit;
    font-size: 0.7rem;
    cursor: pointer;
}

#editor-modal .transcript-words-toggle[aria-expanded="true"] {
    color: #cdeff3;
    border-color: rgba(103, 232, 249, 0.45);
    background: rgba(0, 217, 232, 0.08);
}

#editor-modal .transcript-words-toggle::after { content:""; width:5px; height:5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); flex:none; }
#editor-modal .transcript-words-toggle[aria-expanded="true"]::after { transform:rotate(225deg); }

#editor-modal .transcript-card-delete {
    width: auto;
    height: 30px;
    min-height:30px;
    display: inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding: 0 8px;
    border: 1px solid rgba(248, 113, 113, 0.22);
    border-radius: 6px;
    background: #0b0f18;
    color: #fca5a5;
    font:inherit;
    font-size:11px;
    cursor: pointer;
}

#editor-modal .transcript-card-delete .sp-action-icon { width:14px; height:14px; }

#editor-modal .transcript-word-controls { grid-column:1 / -1; padding:12px; border:1px solid rgba(152,162,179,.18); border-radius:8px; background:#080b12; gap:8px; }
#editor-modal .transcript-video-edit-heading { width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; color:#aeb7c7; font-size:12px; line-height:1.5; }
#editor-modal .transcript-word-chip { border-color:rgba(152,162,179,.25); border-radius:6px; }
#editor-modal .transcript-word-chip .transcript-word-remove { color:#fca5a5; }
#editor-modal .transcript-card-badge:focus-visible,
#editor-modal .transcript-words-toggle:focus-visible,
#editor-modal .transcript-word-chip button:focus-visible { outline:2px solid #93acff; outline-offset:2px; }

#editor-modal .transcript-card-delete:hover,
#editor-modal .transcript-card-delete:focus-visible {
    border-color: rgba(248, 113, 113, 0.65);
    background: rgba(127, 29, 29, 0.24);
    outline: none;
    transform:none;
}

#editor-modal .transcript-card.search-hit {
    background: rgba(245, 158, 11, 0.11);
    box-shadow: inset 3px 0 0 rgba(245, 158, 11, 0.7);
}

#editor-modal .transcript-card.current-search-hit {
    background: rgba(34, 211, 238, 0.13);
    box-shadow: inset 3px 0 0 #22d3ee;
}

#editor-modal .transcript-card.search-hit .transcript-card-text {
    border-color: rgba(245, 158, 11, 0.48);
}

#editor-modal .editor-caption-preset-face * {
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
}

/* The Smart Trim value is still owned by the hidden state bridge and the
   timeline quick-access button; its summary must not reserve drawer space. */
#editor-modal #editor-smart-trim-state,
#editor-modal #editor-smart-trim-summary {
    display: none !important;
}

#editor-modal .editor-text-color-field input[type="color"] {
    width: 48px;
    min-width: 48px;
    height: 32px;
    padding: 3px;
    border-radius: 6px;
}

/* The Text tool is a focused vertical inspector: keep the output monitor
   visible while grouping related controls into scannable sections. */
#editor-modal .editor-text-style-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px;
    align-items: start;
}

#editor-modal .editor-text-control-group {
    min-width: 0;
    margin: 0;
    padding: 9px;
    border: 1px solid rgba(152, 162, 179, 0.2);
    border-radius: 8px;
    background: rgba(8, 12, 20, 0.62);
}

#editor-modal .editor-text-control-group > legend {
    padding: 0 5px;
    color: #dbeafe;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#editor-modal .editor-text-control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

#editor-modal .editor-text-number-field {
    width: 112px;
    max-width: 100%;
    justify-self: start;
}

#editor-modal #editor-text-stroke-width {
    width: 84px;
    min-width: 84px;
    padding-right: 3px;
}

#editor-modal .editor-text-range-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px 8px;
    border: 1px solid rgba(152, 162, 179, 0.16);
    border-radius: 6px;
    background: rgba(17, 22, 33, 0.7);
    color: #a0aec0;
    font-size: 0.68rem;
    font-weight: 700;
}

#editor-modal .editor-text-range-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 8px;
}

#editor-modal .editor-text-range-control input[type="range"] {
    width: 100%;
    accent-color: #22d3ee;
}

#editor-modal .editor-text-range-control output {
    color: #f8fafc;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

#editor-modal .editor-text-range-control input:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

@media (min-width: 981px) {
    #editor-modal #editor-tab-text {
        top: 146px;
        right: auto;
        bottom: 52px;
        left: 18px;
        width: min(620px, calc(68vw - 38px));
        max-height: none;
    }

    #editor-modal #editor-text-input {
        min-height: 62px;
    }
}

@media (max-width: 980px) {
    #editor-modal #editor-tab-text {
        top: 64px;
        right: 14px;
        bottom: 52px;
        left: 14px;
        width: auto;
        max-height: none;
    }
}

@media (max-width: 560px) {
    #editor-modal .editor-text-compose-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    #editor-modal .editor-text-compose-heading .control-hint {
        text-align: left;
    }

    #editor-modal .editor-text-compose-row {
        grid-template-columns: minmax(0, 1fr);
    }

    #editor-modal .editor-text-compose-row #editor-text-add {
        width: 100%;
        min-width: 0;
    }

    #editor-modal .editor-text-preset-save-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    #editor-modal .editor-text-preset-save-row input {
        grid-column: 1 / -1;
    }

    #editor-modal .editor-text-control-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #editor-modal .editor-text-style-field-wide {
        grid-column: span 1;
    }
}

/* Output sizing follows the selected geometry. Portrait previews remain
   height-safe; square/landscape previews use the rail's available width. */
#editor-modal .output-frame-wrap {
    width: min(
        100%,
        max(
            180px,
            var(
                --preview-frame-w,
                var(--preview-frame-auto-w, 220px)
            )
        )
    );
    max-width: 100%;
}

/* A prior portrait drag can leave a stale width on the shared rail. The
   wide/square geometry should never inherit that cap. The column resizer
   remains independent and usable. */
#editor-modal .output-frame-wrap:has(#editor-output-canvas[width="1920"][height="1080"]),
#editor-modal .output-frame-wrap:has(#editor-output-canvas[width="1080"][height="1080"]) {
    width: min(
        100%,
        var(--preview-frame-w, var(--preview-frame-auto-w, 260px))
    );
}

#editor-modal .studio-output-rail {
    min-height: 0;
}

#editor-modal .crop-positions-panel {
    min-height: 0;
    height: var(--crop-positions-h, auto);
    max-height: var(--crop-positions-h, none);
    flex: 0 0 auto;
    overflow: hidden;
}

#editor-modal .crop-positions-list {
    min-height: 0;
    flex: 0 1 auto;
    overflow-y: hidden;
}

#editor-modal .crop-positions-panel.is-scrollable .crop-positions-list {
    overflow-y: auto;
}

@media (max-width: 980px) {
    #editor-modal #editor-tab-framing,
    #editor-modal #editor-tab-hook,
    #editor-modal #editor-tab-music,
    #editor-modal #editor-tab-transcript,
    #editor-modal #editor-tab-text {
        right: 14px;
        left: 14px;
    }

    #editor-modal .editor-text-style-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #editor-modal #editor-tab-transcript {
        width: min(900px, calc(100vw - 28px));
        right: auto;
    }
}

@media (max-width: 720px) {
    #editor-modal #editor-tabs:has(.editor-tab.active) {
        bottom: 8px;
    }

    #editor-modal #editor-tab-framing,
    #editor-modal #editor-tab-hook,
    #editor-modal #editor-tab-music,
    #editor-modal #editor-tab-transcript,
    #editor-modal #editor-tab-text {
        right: 8px;
        left: 8px;
        bottom: 60px;
        max-height: calc(100dvh - 124px);
    }

    #editor-modal .editor-music-content,
    #editor-modal .editor-text-style-groups {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #editor-modal #editor-tab-transcript {
        width: calc(100vw - 16px);
        height:auto;
        max-height: calc(100dvh - 124px);
    }
    #editor-modal #editor-tab-transcript.is-expanded { height:calc(100dvh - 124px); }
    #editor-modal .transcript-expand { min-height:44px; }
    #editor-modal .transcript-column-headings { grid-template-columns:52px minmax(0,1fr) 76px; gap:4px; }
    #editor-modal .transcript-column-headings > :last-child { display:none; }

    #editor-modal .transcript-card {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 4px;
        padding:8px 4px;
    }

    #editor-modal .transcript-row-actions {
        grid-column: 2;
        display: flex;
        justify-content:flex-end;
    }

    #editor-modal .transcript-card:is(.active, :focus-within) .transcript-row-actions {
        display: flex;
    }

    #editor-modal .transcript-word-controls {
        grid-column: 1 / -1;
    }

    #editor-modal .transcript-heading p {
        max-width: none;
    }

    #editor-modal .transcript-heading { flex-wrap:wrap; gap:8px; }
    #editor-modal .transcript-heading > div { flex:1 0 100%; }
    #editor-modal .transcript-expand { margin-left:0; }
    #editor-modal #editor-tab-transcript .editor-drawer-close { width:44px; height:44px; }
    #editor-modal .transcript-card-delete { min-height:44px; height:44px; }
    #editor-modal .transcript-card-text { font-size:16px; }
    #editor-modal :is(#transcript-search, #transcript-replace) { min-height:44px; font-size:16px !important; }
    #editor-modal .transcript-edit-footer { gap:4px; font-size:12px; }
    #editor-modal #transcript-undo-edit { min-height:44px; }
    #editor-modal .transcript-cards { max-height:32dvh; }

    #editor-modal .transcript-find-row {
        grid-template-columns: minmax(0, 1fr) auto auto auto;
    }

    #editor-modal #transcript-search {
        grid-column: 1 / -1;
    }
    #editor-modal .transcript-findbar.is-idle #transcript-search { grid-column:auto; }

    #editor-modal .transcript-replace-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    #editor-modal #transcript-replace {
        grid-column: 1 / -1;
    }

    #editor-modal .transcript-find-row > button,
    #editor-modal .transcript-tools summary,
    #editor-modal .transcript-row-actions > button,
    #editor-modal .transcript-card-badge,
    #editor-modal .transcript-word-chip button {
        min-height: 44px;
        min-width: 44px;
    }

    #editor-modal .editor-music-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
    }

    #editor-modal .editor-music-toggle {
        width: 100%;
        justify-content: space-between;
    }

    #editor-modal #editor-music-summary {
        max-width: calc(100% - 64px);
    }

    #editor-modal .editor-tab {
        min-height: 40px;
        padding-inline: 10px;
        font-size: 0.72rem;
    }
}

@media (max-width:720px) and (max-height:700px) {
    #editor-modal .transcript-heading p { display:none; }
}

/* Premiere-style media marquee ------------------------------------------ */
#editor-modal #editor-media-marquee {
    position: absolute;
    z-index: 14;
    display: none;
    pointer-events: none;
    border: 1px solid rgba(103, 232, 249, 0.95);
    border-radius: 3px;
    background: rgba(34, 211, 238, 0.14);
    box-shadow: 0 0 0 1px rgba(8, 145, 178, 0.28) inset;
}

#editor-modal #editor-output-caption-preview,
#editor-modal .editor-output-text-graphic {
    cursor: move;
    touch-action: none;
    user-select: none;
}

/* Text drafts are rendered directly in the authoritative Output Preview. */
#editor-modal #editor-text-style-preview {
    display: none !important;
}

/* Carter review 2026-09-27: Hook, Music, and Transcript use the Text Graphics
   drawer's compact left column instead of a strip across the whole
   workbench. Captions and Transcript keep their width (style rail, search bar). */
#editor-modal .editor-hook-drawer,
#editor-modal #editor-tab-hook .editor-hook-controls {
    flex-direction: column;
    gap: 10px;
}

#editor-modal .editor-hook-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

#editor-modal .editor-hook-heading > div:first-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
}

#editor-modal .editor-hook-heading label {
    color: #dce4f2;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

#editor-modal .editor-hook-heading .control-hint {
    margin: 0;
}

#editor-modal .editor-hook-toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #9aa4b5;
    font-size: 0.72rem;
}

#editor-modal .editor-hook-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

#editor-modal .editor-hook-field select {
    width: 100%;
}

#editor-modal #editor-hook-text {
    width: 100%;
    min-height: 78px;
    box-sizing: border-box;
    resize: vertical;
    border: 1px solid #3f4459;
    border-radius: 7px;
    background: #1a1c23;
    color: #f8fafc;
    font: inherit;
    font-size: 0.86rem;
    line-height: 1.4;
    padding: 0.65rem 0.75rem;
}

#editor-modal #editor-hook-text:focus {
    border-color: rgba(103, 232, 249, 0.75);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.12);
    outline: none;
}

@media (min-width: 981px) {
    #editor-modal #editor-tab-hook,
    #editor-modal #editor-tab-music {
        top: auto;
        right: auto;
        left: 18px;
        width: min(440px, calc(68vw - 38px));
    }


    #editor-modal #editor-tab-music .editor-music-content {
        grid-template-columns: minmax(0, 1fr);
    }

}

/* Carter review 2026-09-28: transcribe gate at the top of the Captions drawer. */
#editor-modal .editor-caption-transcribe-gate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(103, 232, 249, 0.45);
    border-radius: 8px;
    background: rgba(14, 50, 64, 0.55);
}

#editor-modal .editor-caption-transcribe-gate[hidden] {
    display: none;
}

#editor-modal .editor-caption-transcribe-copy {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

#editor-modal .editor-caption-transcribe-copy strong {
    color: #e6faff;
    font-size: 0.95rem;
}

#editor-modal .editor-caption-transcribe-copy span {
    color: #a0aec0;
    font-size: 0.78rem;
    line-height: 1.35;
}

#editor-modal .editor-caption-transcribe-button {
    flex: 0 0 auto;
    padding: 0.7rem 1.3rem;
    font-size: 0.95rem;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 640px) {
    #editor-modal .editor-caption-transcribe-gate {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Keep the existing drawers readable without expanding the workbench. */
#editor-modal .editor-caption-preset-picker-head strong {
    color: var(--v2-white);
    font-size: .9rem;
    letter-spacing: 0;
    text-transform: none;
}
#editor-modal .editor-caption-preset-picker-head span,
#editor-modal .editor-caption-controls label {
    color: var(--v2-muted);
    font-size: .75rem !important;
    letter-spacing: 0;
}
#editor-modal .editor-caption-controls select { min-height: 36px; }
#editor-modal .editor-caption-preset-card:focus-visible {
    outline: 2px solid var(--v2-blue-light);
    outline-offset: -3px;
}
#editor-modal .editor-text-heading h3 { margin: 0 0 4px; color: #eef2f7; font-size: 1.1rem; letter-spacing: -.02em; }
#editor-modal .editor-text-control-group > summary { cursor: pointer; min-height: 36px; color: #dbeafe; font-size: .82rem; font-weight: 700; }
#editor-modal .editor-text-control-group[open] > summary { margin-bottom: 8px; }
#editor-modal .editor-text-control-group > summary:focus-visible { outline: 2px solid var(--v2-blue-light); outline-offset: 3px; }

/* Anchor the More inspector to the source toolbar, so wrapping the trigger
   cannot place the zoom and effect controls outside the viewport. */
#editor-modal .scene-layout-toolbar { position: relative; }
#editor-modal .scene-settings-popover { position: static; }
#editor-modal .scene-settings-popover-panel { left: 0; right: auto; width: min(540px, 100%); max-height: min(380px, 60dvh); overflow: auto; box-sizing: border-box; }
.scene-settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 10px; text-align: left; }
.scene-settings-heading strong { font-size: .85rem; color: var(--v2-white); }
#editor-modal .scene-settings-heading button { min-height: 36px; color: var(--v2-white); }
#editor-modal .editor-quick-controls { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
#paste-effects-modal .paste-effects-card { width: min(480px, calc(100% - 32px)); box-sizing: border-box; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 20px; gap: 14px; border-radius: 16px; }
#paste-effects-title { margin: 0; font-size: 1.15rem; letter-spacing: -.02em; color: var(--v2-white); }
#paste-effects-description { margin: -6px 0 0; color: var(--v2-muted); font-size: .85rem; line-height: 1.5; }
.paste-effects-targets { margin: 0; padding: 10px 12px; border: 1px solid var(--v2-border); border-radius: 8px; color: var(--v2-white); font-size: .85rem; }
.paste-effects-choices { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
#paste-effects-modal .paste-fx-row { align-items: flex-start; gap: 10px; min-height: 44px; margin: 0; padding: 10px; border: 1px solid var(--v2-border); border-radius: 8px; color: var(--v2-white); text-transform: none; letter-spacing: 0; }
.paste-fx-row input { flex: none; margin-top: 3px; }
.paste-fx-row strong { display: block; font-size: .85rem; font-weight: 600; }
.paste-fx-row small { display: block; margin-top: 4px; color: var(--v2-muted); font-size: .78rem; font-weight: 400; line-height: 1.4; }
#paste-effects-modal .fx-btn { min-height: 40px; }
#paste-effects-modal :focus-visible { outline: 2px solid var(--v2-blue-light); outline-offset: 3px; }
#paste-effects-modal .control-hint { color: var(--v2-muted); }
#paste-effects-modal #btn-paste-fx-apply { color: #fff !important; background: var(--v2-blue); border-color: var(--v2-blue); }
.confirm-modal h3 { color: var(--v2-white); }
.confirm-modal .btn-danger-small { color: var(--v2-red); background: var(--v2-slate); }
.confirm-modal .btn-danger-small:not(:disabled):hover { color: var(--v2-slate); background: var(--v2-red); }
#editor-modal .control-hint,
#editor-modal #editor-text-style-scope,
#editor-modal .monitor-label small { color: var(--v2-muted); }

/* Context actions follow the page theme alongside editor-neutral-theme.css. */
:is(#scene-context-menu, #media-segment-context-menu, #text-layer-context-menu, #transcript-context-menu) {
    width: min(270px, calc(100vw - 16px)); min-width: 0;
    max-height: calc(100dvh - 16px); overflow-y: auto;
    padding: 6px; background: var(--v2-slate); color: var(--v2-white);
    border-color: var(--v2-border-strong); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.24);
}
.editor-context-menu .context-menu-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; min-height: 36px; padding: 8px 10px;
    border: 0; border-radius: 6px; background: transparent;
    color: var(--v2-white); font: inherit; font-size: 13px; text-align: left;
}
.editor-context-menu [hidden] { display: none !important; }
.editor-context-menu .context-menu-item:hover,
.editor-context-menu .context-menu-item[aria-pressed="true"] { background: var(--v2-fill); }
.editor-context-menu .context-menu-item[aria-pressed="true"] { box-shadow: inset 3px 0 var(--v2-blue-light); }
.editor-context-menu .context-menu-item:focus-visible { outline: 2px solid var(--v2-blue-light); outline-offset: -2px; }
.editor-context-menu .context-menu-item:disabled { color: var(--v2-muted); opacity: .55; cursor: not-allowed; }
.editor-context-menu .context-menu-item.danger { color: var(--v2-red); }
.editor-context-menu .context-menu-item.danger:hover { background: var(--v2-fill); }
.editor-context-menu .context-menu-item kbd { font: inherit; font-size: 11px; color: var(--v2-muted); white-space: nowrap; }
.editor-context-menu .context-menu-heading { margin: 0 4px 4px; padding: 6px; color: var(--v2-white); font-size: 13px; font-weight: 650; }
.editor-context-menu .context-menu-label,
.editor-context-menu .context-menu-note { padding: 5px 10px; color: var(--v2-muted); font-size: 12px; line-height: 1.4; text-transform: none; letter-spacing: 0; }
.editor-context-menu .context-menu-separator { background: var(--v2-border); }
.editor-audio-transition-popover { width: min(360px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow-y: auto; padding: 14px; background: var(--v2-slate); color: var(--v2-white); border-color: var(--v2-border-strong); border-radius: 12px; }
.editor-audio-transition-popover strong { color: var(--v2-white); font-size: 14px; }
.editor-audio-transition-popover p { color: var(--v2-muted); font-size: 12px; line-height: 1.5; }
.editor-audio-transition-popover label { color: var(--v2-white); font-size: 12px; }
.editor-audio-transition-popover .editor-audio-transition-value { color: var(--v2-white); font-size: 12px; }
.editor-audio-transition-popover .editor-audio-transition-state,
.editor-audio-transition-popover[data-state="default"] .editor-audio-transition-state { padding: 0; color: var(--v2-muted); background: transparent; border: 0; font-size: 11px; text-transform: none; letter-spacing: 0; }
.editor-audio-transition-popover .editor-audio-transition-curve { background: #0e1728; }
.editor-audio-transition-actions .timeline-action { min-height: 36px; padding: 8px 12px; color: var(--v2-white); background: var(--v2-fill); border: 1px solid var(--v2-border-strong); border-radius: 6px; }
.editor-audio-transition-popover :focus-visible { outline: 2px solid var(--v2-blue-light); outline-offset: 2px; }
@media (max-width:760px), (pointer:coarse) {
    .editor-context-menu .context-menu-item, .editor-audio-transition-actions .timeline-action { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .editor-context-menu, .editor-context-menu *, .editor-audio-transition-popover, .editor-audio-transition-popover * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (max-width:720px) {
    #editor-modal .editor-quick-controls { grid-template-columns: minmax(0, 1fr); }
    .scene-settings-heading button, #paste-effects-modal .fx-btn { min-height: 44px; }
}

/* One named action target replaces the tiny delete icon in the framing rail. */
.crop-position-row { grid-template-columns: 9px minmax(0, 1fr) 32px; }
.crop-position-actions { display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--v2-muted); font-family:inherit; font-size:20px; font-weight:700; line-height:1; cursor:pointer; }
.crop-position-actions:hover { color:var(--v2-white); background:rgba(152,162,179,.12); }
.crop-position-actions:focus-visible { outline:2px solid var(--v2-blue-light); outline-offset:2px; }
@media (pointer:coarse), (max-width:640px) { .crop-position-row { grid-template-columns:9px minmax(0,1fr) 44px; } .crop-position-actions { width:44px; height:44px; } }

/* Transport hierarchy: playback first, precise clock second, editing tools next. */
#editor-modal .editor-control-icon {
    display: block;
    width: 19px;
    height: 19px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

#editor-modal .editor-transport {
    flex-wrap: wrap;
    gap: 6px;
    padding: 7px 0;
    margin-bottom: 4px;
}

#editor-modal .editor-transport > button:not(.editor-loop-badge),
#editor-modal .tool-switch-btn {
    height: 38px;
    min-height: 38px;
    font: 600 12px/1 'Manrope', system-ui, sans-serif !important;
    color: #d5dbe5 !important;
    border-color: #303640 !important;
    background: #171b23 !important;
    border-radius: 6px;
    letter-spacing: 0;
    transition: background-color 120ms, border-color 120ms, color 120ms;
}

#editor-modal .editor-transport > :is(#editor-play-btn, #editor-vol-btn, #editor-prev-frame-btn, #editor-next-frame-btn, #btn-undo-content-cut) {
    width: 38px;
    min-width: 38px;
    padding: 0;
}

#editor-modal .editor-transport > #editor-play-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    color: #11151c !important;
    background: #eef2f7 !important;
    border-color: #eef2f7 !important;
}

#editor-modal #editor-play-btn .editor-control-icon {
    width: 21px;
    height: 21px;
    fill: currentColor;
    stroke-width: 1.2;
}

#editor-modal .editor-transport > button:hover:not(:disabled),
#editor-modal .tool-switch-btn:hover:not(:disabled) {
    color: #fff !important;
    background: #29303b !important;
    border-color: #78869b !important;
    transform: none;
}

#editor-modal .editor-transport > #editor-play-btn:hover {
    color: #11151c !important;
    background: #fff !important;
}

#editor-modal .editor-transport button:focus-visible,
#editor-modal .output-mini-btn:focus-visible {
    outline: 2px solid #a9c5ff;
    outline-offset: 2px;
}

#editor-modal .editor-transport button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

#editor-modal .editor-timecode-readout,
#editor-modal #scrub-time-current,
#editor-modal #scrub-time-total {
    font-family: 'Manrope', system-ui, sans-serif !important;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.3;
    color: #edf1f7;
    letter-spacing: 0;
    white-space: nowrap;
}

#editor-modal .editor-timecode-readout {
    padding: 7px 9px;
    background: #171b23;
    border-color: #353e4b;
}

#editor-modal .editor-frame-rate-label {
    color: #b3bdcb;
    font: 500 12px/1.3 'Manrope', system-ui, sans-serif !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

#editor-modal .tool-switch-btn.active-tool {
    color: #eef5ff !important;
    background: #273d59 !important;
    border-color: #7699c6 !important;
}

#editor-modal .editor-loop-toggle {
    min-height: 34px;
    padding: 6px 10px;
    color: #c4cfdf !important;
    background: #171b23 !important;
    border: 1px solid #3d4859 !important;
    border-radius: 6px;
    font: 650 12px/1.2 'Manrope', system-ui, sans-serif;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

#editor-modal .editor-loop-toggle.active {
    color: #17263a !important;
    background: #d1e3ff !important;
    border-color: #d1e3ff !important;
}

#editor-modal .output-mini-btn {
    display: grid;
    place-items: center;
    min-width: 34px;
    min-height: 34px;
    border-radius: 6px;
    color: #e1e7f1;
}

#editor-modal .crop-toolbar-title,
#editor-modal .scene-layout-pill {
    font-family: 'Manrope', system-ui, sans-serif !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0;
}

#editor-modal .scene-layout-pill.active,
#editor-modal .scene-layout-pill[aria-checked="true"] {
    color: #142631 !important;
    background: #a9e7ef !important;
    border-color: #a9e7ef !important;
    box-shadow: none !important;
}

#editor-modal .scene-layout-toolbar .secondary-scene-action {
    font: 600 12px/1.3 'Manrope', system-ui, sans-serif;
    color: #b9c3d1;
    letter-spacing: 0;
}

#editor-modal .scene-layout-toolbar .secondary-scene-action.active {
    color: #e4efff;
    background: #273d59;
    border-color: #7699c6;
}

/* Independent disclosure columns let Shadow follow Background without a blank row. */
#editor-modal .editor-text-style-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

#editor-modal .editor-text-control-group > summary {
    min-height: 30px;
    line-height: 1.5;
    font-size: 14px;
    color: #e0e7f1;
    letter-spacing: 0;
}

#editor-modal .editor-text-style-field > label,
#editor-modal .editor-text-range-field,
#editor-modal .editor-text-color-field,
#editor-modal .editor-text-toggle-field {
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

#editor-modal .editor-music-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

#editor-modal .editor-music-heading h3,
#editor-modal .editor-text-heading h3 {
    margin: 0;
    color: #eef2f7;
    font: 750 20px/1.3 'Manrope', system-ui, sans-serif;
    letter-spacing: 0;
    text-transform: none;
}

#editor-modal .editor-music-heading .editor-music-toggle {
    width: auto;
    justify-content: end;
}

#editor-modal #editor-music-summary {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 20px;
    color: #bbc7d8;
    font-size: 13px;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
}

#editor-modal .editor-music-control > label,
#editor-modal .editor-text-compose-heading > label {
    color: #c4cfdf;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

#editor-modal .editor-music-control .control-hint {
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 720px), (pointer: coarse) {
    #editor-modal .editor-transport > button:not(.editor-loop-badge),
    #editor-modal .tool-switch-btn,
    #editor-modal .editor-loop-toggle,
    #editor-modal .output-mini-btn {
        min-width: 44px;
        min-height: 44px;
        height: 44px;
    }
    #editor-modal .editor-text-style-groups { grid-template-columns: minmax(0, 1fr) !important; }
    #editor-modal .editor-text-control-group > summary { min-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    #editor-modal .editor-transport button,
    #editor-modal .tool-switch-btn { transition: none; }
}

/* Apple-inspired inspector hierarchy. The theme layer owns chrome colors;
   caption/media colors remain content. */
#editor-modal .editor-drawer-panel {
    background: #181d21 !important;
    border-color: #45505b;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .42);
    padding: 16px !important;
    gap: 12px !important;
    font-optical-sizing: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 16px;
}
#editor-modal .editor-drawer-close {
    width: 36px;
    height: 36px;
    top: 12px;
    right: 12px;
    color: #d6dde5;
    background: #242b32;
    border-color: #45505b;
}
#editor-modal .editor-tab {
    min-height: 38px;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0;
}
#editor-modal .editor-tab.active {
    background: #253650;
    border-color: #93acff;
    color: #edf3ff;
    box-shadow: inset 0 -2px #93acff;
}
#editor-modal .editor-hook-heading h3,
#editor-modal .transcript-heading h3 {
    margin: 0;
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 750;
    letter-spacing: -.015em;
    color: #f1f4f7;
}
#editor-modal .editor-hook-toggle,
#editor-modal .editor-drawer-panel .control-hint,
#editor-modal .transcript-heading p,
#editor-modal .transcript-keyboard-help {
    color: #bec7d2;
    font-size: 13px;
    line-height: 1.5;
}
#editor-modal .editor-caption-preset-picker,
#editor-modal .editor-text-style-panel,
#editor-modal .editor-music-control,
#editor-modal .editor-hook-field {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}
#editor-modal .editor-text-style-panel {
    padding-top: 12px;
    border-top: 1px solid #39434d;
}
#editor-modal .editor-hook-field label,
#editor-modal .editor-caption-controls label,
#editor-modal .editor-caption-profanity-heading,
#editor-modal .editor-text-style-field > label,
#editor-modal .editor-text-range-field,
#editor-modal .editor-text-color-field,
#editor-modal .editor-text-toggle-field {
    font-size: 13px !important;
    font-weight: 650;
    color: #d6dde5;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
}
#editor-modal .editor-inspector-section-title {
    margin: 0 0 12px;
    color: #edf1f7;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
}
#editor-modal .editor-caption-layout-section {
    padding: 12px 0 0;
    background: none;
    border: 0;
    border-top: 1px solid #39434d;
    border-radius: 0;
}
/* The field label already says Size; the panel only needs its value. */
#editor-modal #control-caption-size .range-control-title {
    display: none;
}
#editor-modal #control-caption-size .range-control-head {
    justify-content: flex-end;
}
#editor-modal #editor-music-summary:empty {
    display: none;
}
/* The selected layout pill already names the crop mode. */
#editor-modal .scene-layout-toolbar .crop-toolbar-title {
    display: none;
}
#editor-modal .editor-aspect-control > span {
    color: #bec7d2;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
#editor-modal:not(.editor-caption-focus) .editor-caption-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}
#editor-modal.editor-caption-focus .editor-caption-layout-section .editor-caption-controls {
    gap: 12px !important;
}
#editor-modal.editor-caption-focus .editor-caption-layout-section :is(#control-caption-position, #control-caption-size),
#editor-modal.editor-caption-focus .editor-caption-layout-section :is(select, .range-control-panel, .range-row) {
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
}
#editor-modal .editor-caption-controls select,
#editor-modal .editor-hook-field select,
#editor-modal .editor-text-style-field select,
#editor-modal .editor-text-style-field input[type='text'] {
    min-height: 38px;
    font-size: 14px;
    border-color: #485461;
    background: #151a1f;
    color: #edf1f7;
}
#editor-modal:not(.editor-caption-focus) .editor-caption-limits {
    grid-column: 1 / -1;
    order: 5;
    border-top: 1px solid #45505b;
    padding-top: 6px;
}
#editor-modal.editor-caption-focus .editor-caption-limits {
    min-width: 0;
    padding-top: 25px;
}
#editor-modal .editor-caption-limits > summary {
    min-height: 38px;
    padding-block: 6px;
    cursor: pointer;
    color: #edf1f7;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.5;
}
#editor-modal .editor-caption-limits > summary span {
    display: block;
    margin-left: 16px;
    font-size: 12px;
    font-weight: 400;
    color: #bec7d2;
}
#editor-modal .editor-caption-detail-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 10px;
}
#editor-modal:not(.editor-caption-focus) #control-caption-profanity {
    grid-column: 1 / -1;
}
#editor-modal #control-caption-profanity .editor-caption-profanity {
    max-width: none;
    min-height: 38px;
    justify-content: flex-start;
    padding: 0;
    border: 0;
    background: none;
}
#editor-modal #editor-hook-text,
#editor-modal #editor-text-input,
#editor-modal #music-search {
    min-height: 40px;
    font-size: 15px !important;
    line-height: 1.5;
    background: #151a1f;
    border-color: #485461;
    color: #edf1f7;
}
#editor-modal #editor-hook-text { min-height: 92px; }
#editor-modal #music-track-list { max-height: min(260px, 34dvh); }

/* Search stays outside the transcript scroll region. Text correction and
   timed video cuts remain visibly separate, and each word has its own target. */
#editor-modal .transcript-heading { align-items: flex-start; gap: 16px; }
#editor-modal .transcript-heading > div:first-child { min-width: 0; }
#editor-modal .transcript-heading p { margin-top: 6px; }
#editor-modal .transcript-heading-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}
#editor-modal .transcript-line-count {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 7px;
    background: #303941;
    border-radius: 6px;
    color: #d1d9e3;
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
}
#editor-modal .transcript-findbar {
    padding: 10px;
    background: #20262b;
    border: 1px solid #39434d;
    border-radius: 10px;
}
#editor-modal :is(#transcript-search, #transcript-replace) {
    min-height: 40px;
    font-size: 15px !important;
    color: #edf1f7;
    border-color: #485461;
    background: #151a1f;
}
#editor-modal :is(.transcript-find-row > button, .transcript-expand, .transcript-tools summary, #transcript-undo-edit) {
    min-height: 36px;
    font-size: 13px;
    font-weight: 600;
    color: #d6dde5;
    border-color: #45505b;
    background: #242b32;
}
#editor-modal .transcript-match-count,
#editor-modal .transcript-column-headings { color: #bec7d2; font-size: 12px; }
#editor-modal .transcript-cards { gap: 3px; max-height: min(420px, 48dvh); }
#editor-modal .transcript-card,
#editor-modal .transcript-column-headings {
    grid-template-columns: 64px minmax(0, 1fr) 102px;
    gap: 10px;
}
#editor-modal .transcript-card { padding: 9px 8px; }
#editor-modal .transcript-card-text { font-size: 16px; line-height: 1.5; }
#editor-modal .transcript-card-badge { color: #b9c7d8; font-variant-numeric: tabular-nums; }
#editor-modal .transcript-words-toggle {
    min-height: 36px;
    padding: 6px 9px;
    font-size: 13px;
    color: #d6dde5;
    background: #242b32;
    border-color: #45505b;
}
#editor-modal .transcript-card:is(.active, :focus-within) {
    background: #243143;
    border-color: #627fac;
}
#editor-modal .transcript-card.current-search-hit {
    background: #253650;
    box-shadow: inset 3px 0 #93acff;
}
#editor-modal .transcript-word-controls {
    padding: 12px;
    background: #151a1f;
    border-color: #45505b;
    gap: 8px;
}
#editor-modal .transcript-video-edit-heading { color: #bec7d2; font-size: 13px; }
#editor-modal .transcript-word-chip {
    border-color: #485461;
    background: #242b32;
    border-radius: 8px;
}
#editor-modal .transcript-word-chip button {
    min-height: 36px;
    padding: 6px 9px;
    font-size: 14px;
    color: #edf1f7;
}
#editor-modal .transcript-word-chip .transcript-word-remove {
    min-width: 36px;
    border-left: 1px solid #485461;
    color: #fca5a5;
}
#editor-modal .transcript-edit-footer { font-size: 12px; color: #bec7d2; }
#editor-modal .transcript-edit-footer > div { flex-direction: column; gap: 3px; }
#editor-modal .transcript-tools-popover {
    width: 260px;
    padding: 12px;
    background: #242b32;
    border-color: #45505b;
    border-radius: 10px;
    transform-origin: top right;
}
#editor-modal .scene-settings-popover-panel { background: #20262b; border-color: #45505b; }
#editor-modal .scene-settings-popover-panel :is(label, .control-hint, .range-control-title),
#editor-modal .crop-position-time,
#editor-modal .crop-position-layout { font-size: 13px; line-height: 1.5; }
#editor-modal .editor-drawer-panel :is(button, summary):active:not(:disabled) {
    background-color: #344051;
    transition: none;
}
#editor-modal .editor-drawer-panel :focus-visible {
    outline: 2px solid #a9c5ff;
    outline-offset: 2px;
}
@media (max-width: 720px), (pointer: coarse) {
    #editor-modal .editor-tab,
    #editor-modal .editor-drawer-close,
    #editor-modal .editor-drawer-panel :is(button, select, summary) {
        min-height: 44px;
    }
    #editor-modal .editor-drawer-close { width: 44px; height: 44px; }
    #editor-modal .editor-drawer-panel { padding: 12px !important; }
    #editor-modal .transcript-heading { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
    #editor-modal .transcript-heading > div { flex: none; }
    #editor-modal .transcript-heading-actions { justify-content: flex-start; }
    #editor-modal .transcript-heading p { display: block; }
    #editor-modal .transcript-card,
    #editor-modal .transcript-column-headings { grid-template-columns: 52px minmax(0, 1fr); gap: 6px; }
    #editor-modal :is(#transcript-search, #transcript-replace, #editor-hook-text, #editor-text-input, #music-search) { font-size: 16px !important; }
    #editor-modal .transcript-word-chip .transcript-word-remove { min-width: 44px; }
    #editor-modal .editor-caption-controls,
    #editor-modal.editor-caption-focus .editor-caption-layout-section .editor-caption-controls { grid-template-columns: minmax(0, 1fr) !important; }
    #editor-modal .transcript-cards { max-height: 35dvh; }
}
@media (prefers-reduced-motion: reduce) {
    #editor-modal .editor-drawer-panel,
    #editor-modal .editor-drawer-panel * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    #editor-modal { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--v2-ink, #101418) !important; }
    #editor-modal .editor-drawer-panel { box-shadow: none; border-color: var(--v2-blue-light, #718193); }
}

/* Context menus and confirmations are reading surfaces, not timecodes. */
.editor-context-menu .context-menu-item { font-size: 14px; line-height: 1.45; }
.editor-context-menu .context-menu-label,
.editor-context-menu .context-menu-note { font-size: 13px; line-height: 1.5; }
.editor-audio-transition-popover :is(p, label, .editor-audio-transition-value) { font-size: 13px; line-height: 1.5; }
#paste-effects-title { font-size: 20px; line-height: 1.3; }
#paste-effects-description,
.paste-fx-row small { font-size: 13px; line-height: 1.5; }
.paste-fx-row strong { font-size: 14px; }

/* Phone workbench: the late desktop split grid must not create an implicit
   third column on a narrow screen. Keep the source/timeline editing group
   together, then the correctly proportioned output and crop list below it. */
@media (max-width: 700px) {
    #editor-modal {
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain;
    }
    #editor-modal .reframe-studio {
        width: 100%;
        min-width: 0;
        min-height: 100dvh;
        height: auto;
        max-height: none;
        overflow: visible;
    }
    #editor-modal .editor-grid {
        display: block;
        height: auto;
        min-height: 0;
        overflow: visible;
    }
    #editor-modal #editor-workspace[style*='display: flex'] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto;
        height: auto;
        min-height: 0;
        overflow: visible;
        gap: 16px !important;
        padding: 8px 8px 88px;
    }
    #editor-modal .studio-edit-column {
        grid-column: 1;
        grid-row: 1;
        height: auto;
        min-height: 0;
        overflow: visible;
    }
    #editor-modal .studio-preview-panel,
    #editor-modal .reframe-preview-grid,
    #editor-modal .source-monitor {
        display: block;
        height: auto;
        min-height: 0;
        overflow: visible;
        flex: none;
    }
    #editor-modal #preview-container {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        flex: none !important;
        /* Intrinsic video dimensions keep crop guides on decoded pixels. */
        aspect-ratio: auto;
    }
    #editor-modal .editor-source-frame #editor-thumbnail {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain;
    }
    #editor-modal .studio-output-rail {
        grid-column: 1;
        grid-row: 2;
        position: static;
        top: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        display: flex;
        flex-direction: column;
        gap: 12px;
        overflow: visible;
    }
    #editor-modal .output-monitor { width: 100%; box-sizing: border-box; }
    #editor-modal #editor-workspace .studio-output-rail .output-frame-wrap {
        width: min(100%, 300px) !important;
        max-width: 100%;
        height: auto;
        aspect-ratio: var(--editor-output-aspect, 9 / 16);
    }
    #editor-modal .crop-positions-panel {
        width: 100%;
        box-sizing: border-box;
        height: auto !important;
        max-height: none !important;
        overflow: visible;
    }
    #editor-modal .crop-positions-list {
        max-height: min(320px, 42dvh);
        overflow-y: auto;
    }
    #editor-modal :is(.studio-col-resizer, .preview-row-resizer, .timeline-resizer) {
        display: none !important;
    }
    #editor-modal .editor-timeline-shell {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    #editor-modal #editor-tabs,
    #editor-modal #editor-tabs:has(.editor-tab.active) {
        position: fixed !important;
        top: auto !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        left: 8px !important;
        right: 8px !important;
        width: auto;
        max-width: calc(100vw - 16px);
        min-height: 52px;
        box-sizing: border-box;
        padding: 4px;
        gap: 4px;
        z-index: 1204;
        background: var(--v2-slate);
        border: 1px solid var(--v2-border-strong);
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    #editor-modal .editor-tab { flex: 1 0 auto; padding-inline: 10px; }
    #editor-modal .scene-layout-toolbar { gap: 6px; }
    #editor-modal .scene-layout-toolbar :is(button, summary, select) { min-height: 44px; }
}

/* The floating tools and drawers share one safe-area boundary on phones. */
@media (max-width: 700px) {
    #editor-modal { --studio-tools-inset: max(8px, env(safe-area-inset-bottom)); }
    #editor-modal #editor-tabs,
    #editor-modal #editor-tabs:has(.editor-tab.active) { bottom: var(--studio-tools-inset) !important; }
    #editor-modal :is(#editor-tab-framing, #editor-tab-hook, #editor-tab-music, #editor-tab-transcript, #editor-tab-text) {
        bottom: calc(60px + var(--studio-tools-inset)) !important;
        max-height: calc(100dvh - 132px - var(--studio-tools-inset));
    }
    #editor-modal #editor-tab-transcript.is-expanded {
        height: calc(100dvh - 132px - var(--studio-tools-inset));
    }
    /* Text sits on the tool bar like the other drawers, with no gap underneath. */
    #editor-modal #editor-tab-text { top: auto; }
    #editor-modal #editor-workspace[style*='display: flex'] {
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }
}

/* Short screens cannot contain a floating Tools popover plus the transcript.
   Open it in the heading's normal flow and let the drawer scroll instead. */
@media (max-height: 650px) {
    #editor-modal #editor-tab-transcript:has(.transcript-tools[open]) { overflow-y: auto; }
    #editor-modal .transcript-heading:has(.transcript-tools[open]) {
        display: flex;
        flex-wrap: wrap;
    }
    #editor-modal .transcript-heading:has(.transcript-tools[open]) .transcript-heading-actions {
        min-width: 0;
        width: 100%;
        flex: 1 0 100%;
        flex-wrap: wrap;
    }
    #editor-modal .transcript-tools[open] { flex: 1 0 100%; }
    #editor-modal .transcript-tools[open] .transcript-tools-popover {
        position: static;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        margin-top: 8px;
        box-shadow: none;
    }
}

/* Preset selection status must not sit under the drawer's close target. */
#editor-modal .editor-caption-preset-picker-head {
    padding-right: 48px;
    box-sizing: border-box;
}
#editor-modal .editor-caption-preset-picker-head > div { min-width: 0; }

/* Clear transport groups retain the existing timeline clock and handlers. */
#editor-modal .editor-transport { gap: 8px 12px; align-items: center; }
#editor-modal .editor-transport-group {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0;
}
#editor-modal .editor-playback-group { flex: 1 1 340px; }
#editor-modal .editor-edit-group { flex: 0 1 auto; }
#editor-modal .editor-options-group {
    flex: 1 1 100%; padding-top: 8px; border-top: 1px solid var(--studio-border-soft);
}
#editor-modal .editor-options-group #editor-loop-mode { margin-left: 0; }
#editor-modal .editor-transport-group > button {
    min-height: 38px; padding: 0 10px; border: 1px solid var(--studio-border);
    border-radius: 6px; font: 600 13px/1.3 'Manrope', sans-serif;
    color: var(--studio-text); background: var(--studio-control);
}
#editor-modal .editor-transport-group > :is(#editor-play-btn,#editor-vol-btn,#editor-prev-frame-btn,#editor-next-frame-btn,#btn-undo-content-cut) {
    display: grid; place-items: center;
    width: 38px; min-width: 38px; padding: 0;
}
#editor-modal .editor-transport-group > #editor-play-btn { width: 44px; min-width: 44px; min-height: 44px; }
#editor-modal .editor-frame-rate-label, #editor-modal .output-mini-time { font-size: 12px; }
#editor-modal .editor-ruler-label, #editor-modal .editor-ruler-timecode,
#editor-modal .timeline-video-segment-label { font-size: 12px; line-height: 1.3; }
#editor-modal .editor-timeline-ruler { height: 36px; }
#editor-modal .timeline-ruler-scroll { height: 48px; }
#editor-modal .editor-drawer-panel :is(.editor-hook-heading,.editor-music-heading,.editor-text-heading,.transcript-heading) {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    padding-right: 48px; min-height: 44px;
}
#editor-modal .editor-drawer-panel :is(.editor-hook-heading,.editor-music-heading,.editor-text-heading,.transcript-heading) > div:first-child {
    min-width: 0; width: auto; flex: 1 1 160px; align-items: flex-start; text-align: left;
}
#editor-modal .editor-drawer-panel :is(.editor-hook-toggle,.editor-music-toggle) { margin-left: auto; }
#editor-modal .editor-drawer-panel :is(.editor-hook-heading,.editor-music-heading,.editor-text-heading,.transcript-heading) :is(h3,p) { margin: 0; }
#editor-modal .editor-drawer-panel .control-hint { font-size: 13px; line-height: 1.5; }
/* Drawer headings keep their height when the drawer scrolls, and stay one row on phones. */
#editor-modal .editor-drawer-panel :is(.editor-hook-heading,.editor-music-heading,.editor-text-heading,.transcript-heading) { flex-shrink: 0; }
#editor-modal .editor-drawer-panel .editor-music-heading { flex-direction: row; align-items: center; }
@media (max-width: 720px), (pointer: coarse) {
    #editor-modal .editor-shortcut-hint { display: none; }
}
@media (max-width: 720px), (pointer: coarse) {
    #editor-modal .editor-transport-group > button { min-height: 44px; }
    #editor-modal .editor-transport-group > :is(#editor-play-btn,#editor-vol-btn,#editor-prev-frame-btn,#editor-next-frame-btn,#btn-undo-content-cut) { width: 44px; min-width: 44px; }
    #editor-modal .editor-playback-group, #editor-modal .editor-edit-group { flex-basis: 100%; }
}