/* Dedicated fixed framing, inheriting the existing Proof tokens and player. */
#framing-view[hidden]{display:none}
#editor.proof-editor.is-framing{display:block}
#editor.is-framing>.project-heading,#editor.is-framing>.workspace,#editor.is-framing>#result-banner,#editor.is-framing>#job-panel,#editor.is-framing>#export-drawer{display:none!important}
#framing-view{padding:24px 32px 32px;background:var(--proof-background);color:var(--proof-text);font:16px/1.5 var(--proof-font-family);--proof-video-ratio:.5625}
.framing-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:28px}
.framing-heading h1{font-size:var(--proof-font-heading);line-height:1.2;letter-spacing:-.02em;margin:14px 0 6px}
.framing-heading p{margin:0;color:var(--proof-text-muted);font-size:14px}
.framing-heading #framing-back{display:flex;align-items:center;gap:8px;border:0;padding:0;min-height:32px;background:transparent;color:var(--proof-primary-text)}
.framing-heading-controls{display:flex;flex-direction:column;gap:12px;width:300px;flex:none}
.framing-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.framing-source-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}
.framing-media .framing-source-heading h2{margin:0}
#framing-center{flex:none}
#framing-view .button{font:500 14px/1.4 var(--proof-font-family);min-height:44px;white-space:normal}
#framing-view .button.quiet{color:var(--proof-text);background:transparent;border-color:var(--proof-control-border)}
body:has(#editor.is-framing) .proof-import-brand{color:var(--proof-text)}
body:has(#editor.is-framing) .proof-import-header nav button{color:var(--proof-text-muted)}
body:has(#editor.is-framing) .proof-import-header nav [aria-current]{color:var(--proof-text)}
.framing-media{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
.framing-media h2{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.5}
.framing-media h2 small{font-weight:400;color:var(--proof-text-muted);font-size:14px;margin-left:8px;overflow-wrap:anywhere}
.framing-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;margin-bottom:12px}
.framing-media .framing-preview-heading h2{margin:0;white-space:nowrap}
#framing-source-stage{position:relative;background:var(--proof-player-background);overflow:hidden;border-radius:var(--proof-radius-small);width:min(100%,calc(60vh * var(--framing-source-ratio,1.77778)))}
#framing-canvas{display:block;width:100%;height:100%;object-fit:contain}
#framing-crop{position:absolute;box-sizing:border-box;border:3px solid var(--proof-primary);box-shadow:0 0 0 3000px #0005;cursor:grab;touch-action:none;color:white;display:grid;place-items:center}
#framing-crop:active{cursor:grabbing}#framing-crop:focus-visible{outline:3px solid var(--proof-focus);outline-offset:-8px}
#framing-crop[aria-disabled=true]{cursor:default}
#framing-crop>svg{filter:drop-shadow(0 1px 2px #000);pointer-events:none}
#framing-crop i{position:absolute;background:#ffffff70;pointer-events:none}
#framing-crop i:nth-of-type(1),#framing-crop i:nth-of-type(2){width:1px;top:0;bottom:0;left:33.333%}#framing-crop i:nth-of-type(2){left:66.666%}
#framing-crop i:nth-of-type(3),#framing-crop i:nth-of-type(4){height:1px;left:0;right:0;top:33.333%}#framing-crop i:nth-of-type(4){top:66.666%}
#framing-help,#framing-feedback{font-size:14px;line-height:1.5;color:var(--proof-text-muted);margin:12px 0}
#editor.is-framing #preview-panel{padding:0;border:0;background:none;display:flex;align-items:center;justify-content:flex-start;flex-direction:column;min-height:0;height:auto;gap:8px}
#editor.is-framing #player-shell{width:100%;height:auto;aspect-ratio:auto;max-height:none;container-type:inline-size;flex:none}
#editor.is-framing #video-slot{flex:none;min-height:0;width:100%;height:auto;aspect-ratio:9/16}
#editor.is-framing .video-stage{width:100%;height:100%;min-height:0;aspect-ratio:auto}
#editor.is-framing #player-shell #deepcut-transport{position:relative;z-index:3;flex-wrap:wrap;min-height:62px;padding:26px 10px 8px;background:var(--proof-player-background)}
#editor.is-framing #deepcut-clock{position:static;margin:0;font-size:14px}
#editor.is-framing #simulation-status{position:static;max-width:none;text-align:left;width:100%;font-size:var(--proof-font-xs);min-height:0}
#editor.is-framing #preview-panel>.preview-heading,#editor.is-framing #proof-editor-compare,#editor.is-framing #preview-panel>.preview-actions{display:none}
#editor.is-framing .framing-preview #player{max-width:none}
#framing-view ::selection{background:var(--proof-selection);color:var(--proof-selection-text)}
#framing-view :is(button,input):focus-visible{outline:2px solid var(--proof-focus);outline-offset:3px}
@media(max-width:1100px){#framing-view{padding:20px}.framing-media{grid-template-columns:minmax(0,1fr) 250px;gap:24px}.framing-heading{align-items:flex-start}}
@media(max-width:760px){.framing-media{grid-template-columns:minmax(0,1fr)}.framing-preview{width:min(100%,300px);justify-self:center}.framing-heading{flex-direction:column;gap:16px}.framing-heading-controls{width:100%}.framing-actions{width:100%}.framing-actions .primary{flex:1}#framing-source-stage{max-height:none}}
@media(max-width:420px){body:has(#editor.is-framing) .proof-import-header{padding-inline:20px;gap:24px}body:has(#editor.is-framing) .proof-import-header nav{gap:24px}}
@media(prefers-reduced-motion:reduce){#framing-view *{scroll-behavior:auto}}

/* Stacked framing remains part of the same editing workspace. */
.framing-modes{display:flex;gap:4px;padding:3px;border:1px solid var(--proof-border);border-radius:var(--proof-radius-control);background:var(--proof-surface)}
.framing-modes .proof-button{flex:1;border:0;background:transparent;color:var(--proof-text);border-radius:var(--proof-radius-small);font-size:var(--proof-font-sm)}
.framing-modes .proof-button:hover{background:var(--proof-surface-hover)}
.framing-modes .proof-button[aria-pressed=true]{color:var(--proof-text-on-action);background:var(--proof-primary)}
.framing-modes .proof-button[aria-pressed=true]:hover{background:var(--proof-primary-hover)}
.framing-modes .proof-button:disabled{color:var(--proof-disabled-text);background:var(--proof-disabled-surface)}
.framing-note{font-size:14px;line-height:1.5;color:var(--proof-text-muted);margin:12px 0}
.framing-window-label{display:none;position:absolute;left:0;top:0;padding:2px 6px;background:var(--proof-primary);color:white;font-size:12px;line-height:1.5;pointer-events:auto;z-index:4;cursor:grab}
.framing-resize{display:none;position:absolute;width:28px;height:28px;min-height:0;padding:0;background:transparent;border:0;touch-action:none;z-index:5}
.framing-resize::after{content:'';position:absolute;inset:8px;background:white;border:2px solid var(--proof-primary)}
.framing-resize.nw{left:-14px;top:-14px;cursor:nwse-resize}.framing-resize.ne{right:-14px;top:-14px;cursor:nesw-resize}
.framing-resize.sw{left:-14px;bottom:-14px;cursor:nesw-resize}.framing-resize.se{right:-14px;bottom:-14px;cursor:nwse-resize}
#framing-detail{position:absolute;box-sizing:border-box;border:3px solid #e88a22;cursor:grab;touch-action:none;color:white}
#framing-detail[hidden]{display:none}#framing-detail:active{cursor:grabbing}
#framing-detail:focus-visible{outline:3px solid var(--proof-focus);outline-offset:-8px}
#framing-detail .framing-window-label{background:#8a4500}#framing-detail .framing-resize::after{border-color:#8a4500}
.is-stacked #framing-crop{box-shadow:none}
.is-stacked .framing-window{z-index:auto}.is-stacked .is-selected .framing-window-label{z-index:3}
.is-stacked .framing-window-label{display:block}.is-stacked .is-selected>.framing-resize{display:block}
.is-stacked #framing-crop>svg,.is-stacked #framing-crop>i{display:none}
#framing-composition[hidden],#framing-eligibility[hidden]{display:none}
#framing-composition{flex:none}
#framing-swap{font-size:var(--proof-font-sm);padding-inline:var(--proof-space-2)}
#framing-divider{position:absolute;left:50%;transform:translate(-50%,-50%);z-index:4;min-height:32px;border:1px solid var(--proof-control-border);border-radius:var(--proof-radius-small);padding:4px 10px;background:var(--proof-background);color:var(--proof-text);font:500 12px/1.5 var(--proof-font-family);touch-action:none;cursor:ns-resize;white-space:nowrap}
#framing-divider[hidden]{display:none}#framing-divider:focus-visible{outline:2px solid var(--proof-focus);outline-offset:3px}
#stacked-live-canvas{position:absolute;pointer-events:none;z-index:1}#stacked-live-canvas[hidden]{display:none}
#simulation-overlay{z-index:2}
@media(pointer:coarse){.framing-resize{width:44px;height:44px}.framing-resize::after{inset:16px}.framing-resize.nw{left:-22px;top:-22px}.framing-resize.ne{right:-22px;top:-22px}.framing-resize.sw{left:-22px;bottom:-22px}.framing-resize.se{right:-22px;bottom:-22px}}
@media(max-width:760px){#framing-view{padding-bottom:112px}.is-framing .framing-actions{position:fixed;bottom:0;left:0;right:0;z-index:80;width:auto;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));background:var(--proof-background);border-top:1px solid var(--proof-border)}}