/* cutout.css - the "Cut out a region…" modal (cutout.js, CUTOUT-PLAN.md).
   The frame large with a rectangle drawn on it; presets, the result and the numbers beside. */
/* scoped to the modal: Composition settings' Output section has a .co-body of its own (app.css),
   and unscoped this gave it a 720px minimum width, which cut its right half off */
#cutoutmodal .co-body { display:flex; gap:14px; min-width:720px; }
.co-stage { position:relative; flex:1 1 auto; min-width:520px; height:420px; background:var(--well);
            border-radius:var(--radius-lg,9px); overflow:hidden; touch-action:none; user-select:none; }
.co-stage video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
/* the rectangle: a drawn selection, so its edge is part of its shape; the shade is the rest of the frame */
.co-rect { position:absolute; box-sizing:border-box; border:2px solid var(--frame-blue);
           box-shadow:0 0 0 9999px rgba(0,0,0,.5); cursor:move; }
.co-h { position:absolute; width:11px; height:11px; background:var(--frame-blue); border:2px solid #fff;
        border-radius:var(--radius-sm,3px); box-sizing:border-box; }
.co-h[data-h=nw] { left:-6px; top:-6px; cursor:nwse-resize; }   .co-h[data-h=ne] { right:-6px; top:-6px; cursor:nesw-resize; }
.co-h[data-h=sw] { left:-6px; bottom:-6px; cursor:nesw-resize; } .co-h[data-h=se] { right:-6px; bottom:-6px; cursor:nwse-resize; }
.co-h[data-h=n] { left:calc(50% - 5px); top:-6px; cursor:ns-resize; }  .co-h[data-h=s] { left:calc(50% - 5px); bottom:-6px; cursor:ns-resize; }
.co-h[data-h=w] { top:calc(50% - 5px); left:-6px; cursor:ew-resize; }  .co-h[data-h=e] { top:calc(50% - 5px); right:-6px; cursor:ew-resize; }
.co-side { flex:0 0 232px; display:flex; flex-direction:column; gap:10px; }
.co-cap { font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.co-presets, .co-remembered { display:flex; flex-wrap:wrap; gap:6px; }
.co-preview { background:var(--well); border-radius:var(--radius,5px); padding:6px; display:flex; align-items:center; justify-content:center; min-height:80px; }
.co-preview canvas { display:block; max-width:100%; border-radius:var(--radius-sm,3px); }
.co-readout { font-family:var(--f-mono); font-size:var(--fs-data); color:var(--text2); }
.co-scrub { display:flex; align-items:center; gap:10px; margin-top:10px; }
.co-scrub input[type=range] { flex:1; min-width:0; }
.co-hint { font-size:var(--fs-control); color:var(--muted); line-height:1.45; }