/* 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: #93acff; /* The editor stays dark in both page themes. */
    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, #93acff);
    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-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, #93acff);
}

.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, #93acff);
}

#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, #93acff);
    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, #93acff);
    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: none;
    width: max-content;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    padding: 0.28em 0.5em;
    overflow: hidden;
    border: 1px dashed rgba(103, 232, 249, 0.95);
    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 {
    border-color: #67e8f9;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.18), 0 6px 20px rgba(0, 0, 0, 0.32);
}

#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, #93acff);
    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, #93acff);
    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, #93acff);
}

.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-modal .output-frame-wrap.caption-dragging #editor-output-caption-preview {
    cursor: grabbing !important;
}

/* Platform UI preview ----------------------------------------------------
   This is an editor-only inspection layer. It never participates in the
   blueprint or renderer; it simply shows where the major Reels/TikTok UI
   elements sit over a 9:16 export while the user is hovering the output
   monitor. Percent-based placement keeps the guide tied to the actual output
   frame instead of the surrounding panel. */
#editor-modal .output-frame-wrap.platform-ui-preview-host {
    isolation: isolate;
}

#editor-modal .platform-ui-preview {
    position: absolute;
    z-index: 12;
    inset: 0;
    overflow: hidden;
    display: block;
    color: rgba(255, 255, 255, 0.96);
    font-family: Outfit, Arial, sans-serif;
    font-size: clamp(8px, 0.9vw, 12px);
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    background:
        linear-gradient(to bottom, rgba(4, 6, 12, 0.26) 0%, transparent 19%, transparent 70%, rgba(4, 6, 12, 0.58) 100%),
        linear-gradient(to left, rgba(5, 8, 16, 0.16), transparent 31%);
    transition: background 160ms ease, opacity 160ms ease;
    /* The guide is visual. Frame clicks cycle platforms, while caption/text
       overlays remain reachable for direct manipulation. */
    pointer-events: none;
}

#editor-modal .platform-ui-preview[hidden] {
    display: none !important;
}

#editor-modal .platform-ui-preview [hidden] {
    display: none !important;
}

#editor-modal .platform-ui-preview::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    content: '';
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.18), transparent 24%);
}

#editor-modal .platform-ui-preview::after {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24%;
    content: '';
    pointer-events: none;
    background: linear-gradient(to left, rgba(5, 7, 13, 0.11), transparent);
}

#editor-modal .platform-ui-preview-topbar,
#editor-modal .platform-ui-preview-right-rail,
#editor-modal .platform-ui-preview-bottom {
    position: absolute;
    z-index: 1;
}

#editor-modal .platform-ui-preview-topbar {
    top: var(--platform-ui-top-top, 2.8%);
    right: var(--platform-ui-top-right, 5%);
    left: var(--platform-ui-top-left, 5%);
    display: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

#editor-modal .platform-ui-preview-feed-tabs {
    display: block;
    color: #fff;
    font-size: 1.15em;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
}

#editor-modal .platform-ui-preview-feed-tabs strong {
    color: #fff;
    font-weight: 800;
}

#editor-modal .platform-ui-preview[data-platform="tiktok"] .platform-ui-preview-topbar {
    display: block;
    right: 0;
    left: 0;
    text-align: center;
}

#editor-modal .platform-ui-preview-right-rail {
    right: var(--platform-ui-rail-right, 4.5%);
    top: 0;
    bottom: 0;
    display: block;
    width: var(--platform-ui-rail-width, 14%);
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.82);
}

#editor-modal .platform-ui-preview-avatar {
    position: absolute;
    top: var(--platform-ui-avatar-top, 42%);
    right: 0;
    left: 0;
    margin: 0 auto;
    display: grid;
    width: clamp(22px, 2.35vw, 36px);
    height: clamp(22px, 2.35vw, 36px);
    place-items: center;
    border: 2px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    background: rgba(10, 12, 18, 0.76);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.38);
    color: #fff;
    font-size: 1.25em;
    font-weight: 700;
}

#editor-modal .platform-ui-preview[data-platform="instagram"] .platform-ui-preview-rail-avatar {
    display: none;
}

#editor-modal .platform-ui-preview-action {
    position: absolute;
    right: 0;
    left: 0;
    display: grid;
    min-width: 28px;
    justify-items: center;
    gap: 2px;
}

#editor-modal .platform-ui-preview-action-heart {
    top: var(--platform-ui-heart-top, 45%);
}

#editor-modal .platform-ui-preview-action-comment {
    top: var(--platform-ui-comment-top, 54%);
}

#editor-modal .platform-ui-preview-action-share {
    top: var(--platform-ui-share-top, 62%);
}

#editor-modal .platform-ui-preview-action-save {
    top: var(--platform-ui-save-top, 72%);
}

#editor-modal .platform-ui-preview-action-more {
    top: var(--platform-ui-more-top, 80%);
}

#editor-modal .platform-ui-preview-action-music {
    top: var(--platform-ui-music-top, 85%);
}

#editor-modal .platform-ui-preview[data-platform="tiktok"] .platform-ui-preview-action-more,
#editor-modal .platform-ui-preview[data-platform="instagram"] .platform-ui-preview-action-music {
    display: none;
}

#editor-modal .platform-ui-preview-icon {
    display: grid;
    width: clamp(20px, 2.55vw, 32px);
    height: clamp(20px, 2.55vw, 32px);
    place-items: center;
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.48));
}

#editor-modal .platform-ui-preview-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#editor-modal .platform-ui-preview-icon .platform-ui-preview-icon-tiktok {
    display: none;
}

#editor-modal .platform-ui-preview[data-platform="tiktok"] .platform-ui-preview-icon .platform-ui-preview-icon-instagram {
    display: none;
}

#editor-modal .platform-ui-preview[data-platform="tiktok"] .platform-ui-preview-icon .platform-ui-preview-icon-tiktok {
    display: block;
}

#editor-modal .platform-ui-preview-action-more .platform-ui-preview-icon svg {
    fill: none;
    stroke: currentColor;
}

#editor-modal .platform-ui-preview-action small {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.72em;
    font-weight: 700;
    white-space: nowrap;
}

#editor-modal .platform-ui-preview-action small:empty {
    display: none;
}

#editor-modal .platform-ui-preview-music-disc {
    display: grid;
    width: clamp(24px, 2.6vw, 38px);
    height: clamp(24px, 2.6vw, 38px);
    place-items: center;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: rgba(12, 16, 24, 0.78);
    color: #fff;
}

#editor-modal .platform-ui-preview-music-disc svg {
    display: block;
    width: 68%;
    height: 68%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#editor-modal .platform-ui-preview-bottom {
    right: var(--platform-ui-bottom-right, 21%);
    bottom: var(--platform-ui-bottom-bottom, 4.2%);
    left: var(--platform-ui-bottom-left, 5%);
    display: grid;
    gap: 0.3em;
    min-width: 0;
    text-align: left;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.86);
}

#editor-modal .platform-ui-preview-profile-row {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.34em;
}

#editor-modal .platform-ui-preview-profile-avatar {
    display: grid;
    flex: 0 0 auto;
    width: clamp(22px, 2.7vw, 40px);
    height: clamp(22px, 2.7vw, 40px);
    place-items: center;
    box-sizing: border-box;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background: rgba(8, 10, 17, 0.86);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.38);
}

#editor-modal .platform-ui-preview-avatar img,
#editor-modal .platform-ui-preview-profile-avatar img {
    display: block;
    width: 78%;
    height: 78%;
    object-fit: contain;
}

#editor-modal .platform-ui-preview-profile-row strong {
    overflow: hidden;
    font-size: 0.82em;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#editor-modal .platform-ui-preview-follow {
    flex: 0 0 auto;
    padding: 0.22em 0.62em;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 0.55em;
    color: #fff;
    font-size: 0.75em;
    font-weight: 700;
}

#editor-modal .platform-ui-preview-bottom > span:not(.platform-ui-preview-subtitle) {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.76em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#editor-modal .platform-ui-preview-subtitle {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.76em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#editor-modal .platform-ui-preview[data-platform="instagram"] .platform-ui-preview-subtitle,
#editor-modal .platform-ui-preview[data-platform="tiktok"] .platform-ui-preview-profile-avatar,
#editor-modal .platform-ui-preview[data-platform="tiktok"] .platform-ui-preview-follow {
    display: none;
}

#editor-modal .platform-ui-preview[data-platform="tiktok"] .platform-ui-preview-profile-row {
    gap: 0;
}

#editor-modal .platform-ui-preview[data-platform="tiktok"] .platform-ui-preview-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3em;
    font-size: 1.08em;
}

#editor-modal .platform-ui-preview[data-platform="tiktok"] #editor-platform-ui-caption {
    position: relative;
    order: 2;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 2.82em;
    padding: 0.18em 3.7em 0.18em 0.35em;
    border-radius: 0.25em;
    background: rgba(14, 16, 21, 0.58);
    color: rgba(255, 255, 255, 0.96);
    font-size: 0.9em;
    line-height: 1.28;
    overflow: hidden;
    text-overflow: clip;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#editor-modal .platform-ui-preview[data-platform="tiktok"] #editor-platform-ui-caption::after {
    position: absolute;
    right: 0.35em;
    bottom: 0.18em;
    padding-left: 0.2em;
    content: '… more';
    background: rgba(14, 16, 21, 0.9);
    color: rgba(255, 255, 255, 0.95);
    font-weight: 700;
}

#editor-modal .platform-ui-preview[data-platform="tiktok"] .platform-ui-preview-profile-row {
    order: 1;
}

#editor-modal .platform-ui-preview[data-platform="tiktok"] #editor-platform-ui-audio {
    order: 3;
}

#editor-modal .platform-ui-preview[data-platform="tiktok"] .platform-ui-preview-subtitle {
    display: none;
}

#editor-modal .platform-ui-preview-bottom small {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.7em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

@media (prefers-reduced-motion: reduce) {
    #editor-modal .platform-ui-preview {
        transition: none;
    }
}

.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, #93acff);
    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-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, #93acff);
    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 {
    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-text-compose {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

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

#editor-modal #editor-text-input {
    width: 100%;
    min-height: 78px;
    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-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.active .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, #93acff);
    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: 32px !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.68rem !important;
    font-weight: 750 !important;
}

.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-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);
}

.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; }

/* 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: 3;
    top: 0;
    left: 0;
    width: 58px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(152, 162, 179, 0.18);
    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 0 0 58px;
}

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

#editor-modal .editor-text-layer-block {
    position: absolute;
    top: 4px;
    bottom: 4px;
    min-width: 58px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding: 3px 8px;
    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-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-kicker {
    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;
    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;
}

.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: 5px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 3px;
    background: #f6c84c;
    box-shadow: 0 0 0 1px rgba(5, 7, 13, 0.9), 0 0 9px rgba(246, 200, 76, 0.58);
    transform: translateX(-50%);
}

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

.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: calc(-1 * var(--timeline-h, 103px) * 0.65);
}

.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;
}

.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: editor-razor-commit 360ms ease-out;
}

.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;
}

@keyframes editor-razor-commit {
    0% { opacity: 1; transform: translateX(-1px) scaleX(1); }
    100% { opacity: 0; transform: translateX(-1px) scaleX(4); }
}

/* 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;
    gap: 6px;
    margin-bottom: 6px;
    color: #dce2ec;
    font-size: 0.68rem;
    font-weight: 750;
}

.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-autokey {
    margin-left: auto;
    padding: 2px 7px;
    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-autokey.active {
    border-color: rgba(34, 211, 238, 0.45);
    background: rgba(34, 211, 238, 0.14);
    color: #67e8f9;
}

.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: #6f7a8e;
    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;
}

@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 {
        min-height: 48px;
    }

    .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 -------------------------------------------------
   The output monitor remains visible on the right while the caption drawer
   owns the rest of the editor. This keeps the style cards and caption controls
   in one viewport instead of making the user scroll past crop-only controls. */
#editor-modal.editor-caption-focus #editor-tab-framing {
    top: 58px;
    right: calc(32% + 20px);
    bottom: 52px;
    max-height: none;
    display: flex !important;
    overflow: hidden;
    padding: 14px !important;
    gap: 12px !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: 1 1 auto;
    display: flex;
    flex-direction: column;
}

#editor-modal.editor-caption-focus .editor-caption-preset-cards {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    overflow-y: auto;
}

#editor-modal.editor-caption-focus .editor-caption-controls {
    flex: 0 0 auto;
}

#editor-modal.editor-caption-focus .editor-caption-hint {
    flex: 0 0 auto;
    margin: 0;
}

/* 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;
    }
}

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

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

/* On-demand source transcription ----------------------------------------- */
#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 .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;
    }

    #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 .transcript-card {
    width: max-content;
    max-width: 100%;
    grid-template-columns: 52px minmax(13ch, auto) 32px;
}

#editor-modal .transcript-card-text {
    width: auto;
    min-width: 13ch;
    max-width: min(62ch, calc(100vw - 190px));
}

#editor-modal .transcript-card-delete {
    width: 32px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(248, 113, 113, 0.22);
    border-radius: 6px;
    background: #0b0f18;
    color: #fca5a5;
    cursor: pointer;
}

#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;
}

#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;
}

/* 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%,
        calc((100dvh - 135px) * var(--editor-output-ratio, 0.5625)),
        max(180px, var(--preview-frame-w, 9999px))
    );
    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%,
        calc((100dvh - 135px) * var(--editor-output-ratio, 1))
    );
}

#editor-modal .studio-output-rail {
    min-height: 0;
}

#editor-modal .crop-positions-panel {
    min-height: 0;
    overflow: hidden;
}

#editor-modal .crop-positions-list {
    min-height: 0;
    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));
    }
}

@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-tab {
        min-height: 40px;
        padding-inline: 10px;
        font-size: 0.72rem;
    }
}

/* 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;
}