/* ExplainerStudio editor — real-editor layout: top header, LEFT panel
   with the transport + project overview, CENTRE fixed-size stage,
   RIGHT contextual form panel, ONE timeline along the bottom.
   Dark chrome; the stage keeps the video's own cream frame. */
:root{
  --chrome:#141519; --panel:#1c1e24; --panel2:#23252d; --edge:#33363f;
  --txt:#e8e9ec; --txt2:#9aa0ad; --accent:#f06941; --accent2:#ffb020;
  --danger:#e5534b; --sel:#ff8c42;
  --c-text:#4a76c4; --c-card:#d95f38; --c-pill:#cf9033; --c-bar:#28a48d;
  --c-character:#8563cf; --c-icon:#d45f9c; --c-dots:#77808f; --c-shape:#4da35e;
  --c-image:#3390b3; --c-shot:#6d7686; --c-scene:#3d4a61;
}
*{box-sizing:border-box}
body.editor-body{background:var(--chrome);color:var(--txt);display:flex;flex-direction:column;
  height:100vh;height:100dvh;min-height:688px;min-width:1024px;margin:0;font-family:'Liberation Sans',Arial,Helvetica,sans-serif}

/* ---------- top bar ---------- */
.ed-top{display:flex;align-items:center;gap:10px;padding:6px 12px;background:var(--panel);
  border-bottom:1px solid var(--edge);flex-wrap:nowrap;flex:none;min-width:0}
.ed-top .logo{font-size:15px;font-weight:800;color:var(--txt);text-decoration:none;white-space:nowrap}
.ed-top .logo em{font-style:normal;color:var(--accent);font-weight:700}
.proj-picker{font-weight:700;font-size:12px;color:var(--txt2);display:flex;align-items:center;gap:6px;min-width:0}
.proj-picker select{font:inherit;font-weight:700;color:var(--txt);padding:5px 8px;border-radius:8px;
  border:1px solid var(--edge);background:var(--panel2);min-width:0;max-width:230px;text-overflow:ellipsis}
.dirty{color:var(--accent2);font-weight:800;font-size:11.5px;white-space:nowrap}
.transport-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-bottom:6px;
  border-bottom:1px solid var(--edge);margin-bottom:6px}
.play-btn{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:var(--accent);color:#fff;
  font-size:14px;cursor:pointer;box-shadow:0 6px 16px rgba(240,105,65,.35)}
.play-btn:hover{background:#ff7a52}
.time-label{font-variant-numeric:tabular-nums;font-weight:700;font-size:13px;white-space:nowrap;color:var(--txt)}
.preview-tag{background:rgba(240,105,65,.16);color:var(--accent);font-weight:800;font-size:10px;
  letter-spacing:1px;text-transform:uppercase;border-radius:999px;padding:3px 8px;white-space:nowrap}
.ed-actions{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:nowrap;flex:none}
.follow-wrap{font-size:12px;font-weight:700;color:var(--txt2);display:flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap}
.follow-wrap input{accent-color:var(--accent)}
.tbtn{background:var(--panel2);border:1px solid var(--edge);border-radius:8px;padding:5px 9px;font:inherit;
  font-size:12px;font-weight:700;cursor:pointer;color:var(--txt);text-decoration:none;display:inline-block;white-space:nowrap}
.tbtn:hover{border-color:var(--accent);color:var(--accent)}
.tbtn.small{padding:4px 10px;font-size:14px;line-height:1.2}
.mini-btn{background:var(--panel2);border:1px solid var(--edge);border-radius:999px;padding:5px 12px;font:inherit;
  font-size:12.5px;font-weight:700;cursor:pointer;color:var(--txt)}
.mini-btn:hover{border-color:var(--accent);color:var(--accent)}
.mini-btn.danger:hover{border-color:var(--danger);color:var(--danger)}

/* ---------- main row: left panel + centre video + right panel ---------- */
/* Fixed regions (owner, 2026-11-05): both side panels are a fixed 300px,
   the preview keeps a fixed 234x416 area (transport lives at the top of
   the LEFT panel), the timeline a fixed 208px. Total fixed height =
   header ~44 + 436 main row + 208 timeline = ~688, sized for the owner's
   REAL browser viewport (~1536x700 CSS px: 1920x1080 at 125% Windows
   scaling minus browser chrome and the Windows taskbar) with NO page
   scroll; smaller windows scroll instead of anything shrinking. (The
   earlier 864px budget was wrong: it tested a bare 1536x864 viewport,
   not the browser viewport inside a 1080p screen at 125% scaling.) */
.ed-main{flex:1;display:flex;min-height:436px}
.ed-centre{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:0;padding:10px 12px;background:var(--chrome)}
.stage-shell{flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.stage-box{position:relative;flex:none;width:234px;height:416px}
#stage{position:absolute;left:0;top:0;width:720px;height:1280px;transform-origin:top left;overflow:hidden;
  border-radius:6px;border:1px solid rgba(0,0,0,.55);box-shadow:0 24px 60px rgba(0,0,0,.55),0 4px 18px rgba(0,0,0,.4);font-family:'Liberation Sans',Arial,Helvetica,sans-serif;
  user-select:none;-webkit-user-select:none;touch-action:none}
#stageInner{position:absolute;inset:0}
#stage .bg-glow{position:absolute;inset:0;background:radial-gradient(ellipse 640px 520px at 50% 40%, rgba(250,186,148,0.50), rgba(250,186,148,0) 70%)}
#stage .bg-dots{position:absolute;inset:0;opacity:0.5;background-image:radial-gradient(rgba(120,100,80,0.13) 1.4px, transparent 1.5px);background-size:26px 26px}
#stage .leoBox svg{width:100%!important;height:100%!important}
#stageOverlay{position:absolute;inset:0;pointer-events:none;z-index:40}
.hit-box{position:absolute;pointer-events:auto;cursor:grab;border:1.5px solid transparent;border-radius:4px}
.hit-box:hover{border-color:rgba(255,140,66,.55)}
.hit-box.sel{border-color:var(--sel);box-shadow:0 0 0 1px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.25);cursor:grabbing}
.hit-box.no-drag{cursor:pointer}
.sel-handle{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;pointer-events:auto;z-index:2}
.sel-handle::after{content:"";position:absolute;left:7px;top:7px;width:12px;height:12px;border-radius:3px;
  background:#fff;border:2px solid var(--sel);box-shadow:0 1px 5px rgba(0,0,0,.4)}
.sel-handle[data-corner="nw"]{cursor:nwse-resize}.sel-handle[data-corner="se"]{cursor:nwse-resize}
.sel-handle[data-corner="ne"]{cursor:nesw-resize}.sel-handle[data-corner="sw"]{cursor:nesw-resize}
.ed-panel{width:300px;flex:none;background:var(--panel);padding:12px;overflow-y:auto;min-height:0}
.ed-left{border-right:1px solid var(--edge)}
.ed-right{border-left:1px solid var(--edge)}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin:2px 0 10px;gap:8px}
.panel-head h3{font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--txt2);margin:0}
.hint{font-size:12.5px;color:var(--txt2);margin-top:10px;line-height:1.5}
.hint b{color:var(--txt)}
.ov-title{font-size:14.5px;font-weight:800;color:var(--txt);margin:2px 0 4px}
.ov-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0}
.ov-stats div{background:var(--panel2);border:1px solid var(--edge);border-radius:10px;padding:8px 10px}
.ov-stats b{display:block;font-size:16px;color:var(--txt);font-variant-numeric:tabular-nums}
.ov-stats span{font-size:11.5px;color:var(--txt2);text-transform:uppercase;letter-spacing:.5px}
.add-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;font-weight:700;color:var(--txt2);
  border-top:1px solid var(--edge);padding-top:12px;margin-top:14px}
.prop-form{display:flex;flex-direction:column;gap:9px}
.prop-form label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:700;color:var(--txt2)}
.prop-form input[type=text],.prop-form input[type=number],.prop-form select,.prop-form textarea{
  font:inherit;font-size:14px;color:var(--txt);padding:7px 9px;border:1px solid var(--edge);border-radius:9px;background:var(--panel2);width:100%}
.prop-form textarea{resize:vertical;min-height:52px}
.prop-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.prop-form label.check{flex-direction:row;align-items:center;gap:8px;font-size:13.5px;color:var(--txt)}
.prop-form .seg-row{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center}
.prop-form .seg-row label.check{white-space:nowrap}
.prop-form h4{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--txt2);margin:10px 0 0}
.prop-form .wide-btn{width:100%;margin-top:6px}

/* ---------- timeline ---------- */
.ed-timeline{flex:none;height:208px;background:var(--panel);border-top:1px solid var(--edge);display:flex;flex-direction:column;padding:0 /* overrides site.css section{padding:64px 0} */}
.tl-toolbar{display:flex;align-items:center;gap:12px;padding:5px 12px;border-bottom:1px solid var(--edge);flex:none}
.tl-title{font-size:11.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--txt)}
.tl-zoom{display:flex;align-items:center;gap:6px;margin-left:auto}
.tl-zoom input[type=range]{width:130px;accent-color:var(--accent)}
.tl-scroll{overflow:auto;flex:1;min-height:0;position:relative;background:#17181d}
.tl-content{position:relative;min-width:100%}
.tl-row{display:flex;align-items:stretch}
.tl-gutter{flex:none;width:168px;position:sticky;left:0;z-index:8;background:#1e2026;color:var(--txt2);
  font-size:11px;font-weight:700;display:flex;align-items:center;gap:6px;padding:0 9px;
  border-right:1px solid var(--edge);border-bottom:1px solid rgba(255,255,255,.05);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-gutter .g-type{text-transform:uppercase;letter-spacing:.5px;font-size:9.5px;padding:1px 5px;border-radius:5px;color:#101116;flex:none}
.tl-gutter .g-label{overflow:hidden;text-overflow:ellipsis}
.tl-ruler-row{position:sticky;top:0;z-index:9}
.tl-ruler-gutter{background:#232530;font-variant-numeric:tabular-nums;color:var(--txt);justify-content:center;font-size:12px}
.tl-ruler{position:relative;height:22px;background:#232530;border-bottom:1px solid var(--edge);cursor:ew-resize;flex:none}
.tl-tick{position:absolute;top:0;bottom:0;border-left:1px solid rgba(255,255,255,.14);pointer-events:none}
.tl-tick span{position:absolute;top:2px;left:4px;font-size:9.5px;color:var(--txt2);font-variant-numeric:tabular-nums;white-space:nowrap}
.tl-track{position:relative;flex:none;border-bottom:1px solid rgba(255,255,255,.05)}
.tl-scene-track{height:22px;background:rgba(255,255,255,.02)}
.tl-lane{height:26px}
.tl-band{position:absolute;top:0;bottom:0;pointer-events:none;border-left:1px solid rgba(255,255,255,.07)}
.tl-band.alt{background:rgba(255,255,255,.028)}
.tl-band.now{background:rgba(240,105,65,.05)}
.clip{position:absolute;top:3px;bottom:3px;border-radius:6px;cursor:grab;overflow:hidden;
  border:1px solid rgba(0,0,0,.35);color:#fff;touch-action:none}
.clip:active{cursor:grabbing}
.clip .clip-label{position:absolute;inset:0;display:flex;align-items:center;gap:6px;padding:0 7px;
  font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.35)}
.clip .clip-badge{flex:none;background:rgba(0,0,0,.35);border-radius:5px;padding:1px 5px;font-size:10px;font-weight:800}
.clip.sel{outline:2px solid #fff;outline-offset:-1px;box-shadow:0 0 0 3px rgba(255,140,66,.55);z-index:3}
.clip.now-playing{box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.clip[data-type="text"]{background:var(--c-text)} .clip[data-type="card"]{background:var(--c-card)}
.clip[data-type="pill"]{background:var(--c-pill)} .clip[data-type="bar"]{background:var(--c-bar)}
.clip[data-type="character"]{background:var(--c-character)} .clip[data-type="icon"]{background:var(--c-icon)}
.clip[data-type="dots"]{background:var(--c-dots)} .clip[data-type="shape"]{background:var(--c-shape)}
.clip[data-type="image"]{background:var(--c-image)} .clip[data-type="shot"]{background:var(--c-shot)}
.clip.scene-clip{background:var(--c-scene);top:3px;bottom:3px}
.clip.scene-clip.sel{outline:2px solid #fff;box-shadow:0 0 0 3px rgba(255,140,66,.55)}
.clip.scene-clip.now-playing{box-shadow:inset 0 0 0 2px rgba(255,176,32,.8)}
.clip-edge{position:absolute;top:0;bottom:0;width:9px;cursor:ew-resize;z-index:2;touch-action:none}
.clip-edge.l{left:0}.clip-edge.r{right:0}
.clip-edge::after{content:"";position:absolute;top:20%;bottom:20%;width:3px;border-radius:2px;background:rgba(255,255,255,.0)}
.clip-edge:hover::after{background:rgba(255,255,255,.65)}
.clip-edge.l::after{left:2px}.clip-edge.r::after{right:2px}
.tl-playhead{position:absolute;top:0;bottom:0;width:0;border-left:2px solid #ff4747;z-index:6;pointer-events:none}
.tl-ph-handle{position:absolute;top:0;left:-8px;width:16px;height:22px;pointer-events:auto;cursor:ew-resize}
.tl-ph-handle::after{content:"";position:absolute;left:3px;top:0;border:5px solid transparent;border-top:9px solid #ff4747}
.tl-snapline{position:absolute;top:0;bottom:0;width:0;border-left:1.5px dashed var(--accent2);z-index:5;pointer-events:none}
.tl-tip[hidden],.tl-popover[hidden]{display:none!important}
.tl-tip{position:fixed;z-index:50;background:#0c0d10;color:#fff;border:1px solid var(--edge);border-radius:8px;
  padding:5px 9px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;pointer-events:none;
  box-shadow:0 8px 20px rgba(0,0,0,.5);white-space:nowrap}
.tl-popover{position:fixed;z-index:60;background:var(--panel2);border:1px solid var(--edge);border-radius:12px;
  padding:12px;width:320px;box-shadow:0 18px 44px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:8px}
.tl-popover h4{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--txt2)}
.tl-popover label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:700;color:var(--txt2)}
.tl-popover input[type=text],.tl-popover textarea{font:inherit;font-size:14px;color:var(--txt);padding:7px 9px;
  border:1px solid var(--edge);border-radius:9px;background:var(--panel);width:100%}
.tl-popover .seg-row{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center}
.tl-popover label.check{flex-direction:row;align-items:center;gap:8px;font-size:13px;color:var(--txt)}
.tl-popover .pop-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}