/* ══════════════════════════════════════════════════════════════════════
   VIDEO ADS — tools/video-ad/video.css
   Builder shell, same language as Multiframe: dark slim app-bar, working
   panels, three-column editor, timeline underneath.
   ⚠ Every selector is scoped to [data-tool="video-ad"] or a .va- class.
   ⚠ Shell gotcha: core/shell.css zeroes vertical padding on nested
     <section> elements, so the editor body uses <div>s.
   ══════════════════════════════════════════════════════════════════════ */

/* ── APP-BAR (family standard: NAME → Sample → trust → Help → Upgrade) ── */
.va-appbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:0 0 16px;padding:11px 16px;border-radius:14px;background:linear-gradient(120deg,#131a2b,#1d2740)}
.va-appbar-brand{display:flex;align-items:center;gap:11px;min-width:0}
.va-appbar-ico{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;flex:none;
  background:#e11d48;color:#fff;font-size:14px}
.va-appbar-name{font-size:16px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;color:#fff}
.va-appbar-name b{font-weight:800}
.va-appbar-tag{font-size:11px;font-weight:600;color:#9db4d4;padding:3px 9px;border-radius:999px;
  background:rgba(255,255,255,.08);white-space:nowrap}
.va-appbar-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.va-appbar-trust{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#9db4d4}
.va-appbar .dl-demo{margin-top:0}
.va-appbar .dl-demo-txt{color:#cfe0f5}
.va-appbar .dl-help-btn{color:#cfe0f5}
.va-appbar .dl-help-btn b{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:#fff}
.va-appbar .dl-help-btn:hover,.va-appbar .dl-help-btn:hover b{color:#fff;border-color:#fff}
@media (max-width:640px){.va-appbar-trust,.va-appbar-tag{display:none}}

/* ── buttons ── */
.va-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 15px;
  border-radius:9px;border:1px solid #d7dde8;background:#fff;color:#22314a;font:inherit;font-size:13px;
  font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.va-btn:hover{background:#f3f6fb;border-color:#c3cddd}
.va-btn i{font-size:12px}
.va-btn-sm{height:30px;padding:0 11px;font-size:12px;margin-top:6px}
.va-btn-pri{background:#e11d48;border-color:#e11d48;color:#fff}
.va-btn-pri:hover{background:#be123c;border-color:#be123c}
.va-btn-ico{padding:0;width:36px;gap:0}
.va-btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}
/* ⚠ .va-btn sets display, and an AUTHOR rule beats the UA [hidden]{display:none},
   so a hidden button keeps showing. Every display-setting class here needs this. */
.va-btn[hidden],.va-linkbtn[hidden]{display:none}
.va-wide{width:100%}
.va-ico{display:grid;place-items:center;width:24px;height:24px;border:1px solid #dfe4ec;border-radius:7px;
  background:#fff;color:#5b6675;font-size:10px;cursor:pointer}
.va-ico:hover{border-color:#e11d48;color:#e11d48}
.va-ico[disabled]{opacity:.35;pointer-events:none}
.va-ico-x:hover{border-color:#e11d48;color:#e11d48}
.va-sep{width:1px;height:22px;background:#dde3ec;flex:none;margin:0 3px}

/* ── toolbars ── */
.va-toolbar{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;padding:14px 0 0}
.va-toolbar+.va-toolbar{padding-top:12px;margin-top:12px;border-top:1px dashed #e4e9f2}
.va-field-x{display:flex;flex-direction:column;gap:5px;min-width:0}
.va-field-x>span{font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:#7b8598}
.va-field-x select,.va-field-x input[type=text]{height:36px;padding:0 10px;border:1px solid #d7dde8;
  border-radius:9px;background:#fff;color:#22314a;font:inherit;font-size:13px;min-width:200px}
.va-tb-spacer{flex:1 1 12px}

/* format chips */
.va-fmts{display:flex;gap:7px;flex-wrap:wrap}
.va-fmt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:6px 12px 6px 10px;border:1px solid #d7dde8;border-radius:10px;background:#fff;cursor:pointer;
  font:inherit;color:#22314a;transition:.15s}
.va-fmt b{font-size:12.5px;font-weight:800}
.va-fmt span{font-size:10px;color:#7b8598}
.va-fmt.on{border-color:#e11d48;background:#fff1f4;box-shadow:0 0 0 1px #e11d48 inset}
.va-fmt.rec::after{content:'';position:absolute;top:-4px;right:-4px;width:8px;height:8px;border-radius:50%;
  background:#16a34a;border:2px solid #fff}
.va-fmt i{position:absolute;right:8px;top:6px;font-style:normal;font-size:8px;font-weight:900;letter-spacing:.05em}
.va-fmt .va-free{color:#16a34a}
.va-fmt .va-pro{color:#b45309}
.va-place-note{display:block;width:100%;padding:8px 11px;border-radius:9px;background:#f4f7fc;
  color:#55617a;font-size:11.5px;line-height:1.5}
.va-place-note i.fa-solid{color:#e11d48;margin-right:5px}

/* ── EDITOR: clips | stage | inspector ── */
.va-editor{display:grid;grid-template-columns:216px minmax(0,1fr) 268px;gap:16px;align-items:start}
.va-col{min-width:0}
.va-col-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 9px}
.va-col-h h4{margin:0;font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6b7688}

/* clip list */
.va-clips{display:flex;flex-direction:column;gap:6px;max-height:360px;overflow:auto}
.va-clip{display:flex;align-items:center;gap:9px;padding:8px 9px;border:1px solid #e4e9f2;border-radius:10px;
  background:#fff;cursor:pointer}
.va-clip:hover{border-color:#c3cddd}
.va-clip.sel{border-color:#e11d48;background:#fff5f7}
.va-clip-n{display:grid;place-items:center;width:20px;height:20px;flex:none;border-radius:6px;
  background:#eef2f8;color:#5b6675;font-size:10px;font-weight:900}
.va-clip-b{min-width:0;flex:1}
.va-clip-b strong{display:block;font-size:12px;font-weight:700;color:#22314a;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.va-clip-b small{font-size:10px;color:#8b96a8}
.va-clip-a{display:flex;gap:3px;flex:none}
/* ── LAYERS: nested under their clip, because that IS the timing model ──
   The indent and the connecting rule are load-bearing UI, not decoration:
   they say "this rides on that" without a word of explanation. */
.va-col-note{margin:0 0 9px;font-size:11px;line-height:1.5;color:#7b8598}
.va-clip-grp{display:flex;flex-direction:column;gap:4px;padding:4px;border:1px solid transparent;border-radius:12px}
.va-clip-grp.sel{border-color:#f0d5dc;background:#fffafb}
.va-lay{position:relative;display:flex;align-items:center;gap:7px;margin-left:16px;padding:5px 7px;
  border:1px solid #e9edf4;border-radius:8px;background:#fff;cursor:pointer;font-size:11.5px;color:#42506a}
.va-lay::before{content:'';position:absolute;left:-9px;top:-4px;bottom:50%;width:9px;
  border-left:1px solid #d7dde8;border-bottom:1px solid #d7dde8;border-bottom-left-radius:6px}
.va-lay:hover{border-color:#c3cddd}
.va-lay.sel{border-color:#e11d48;background:#fff5f7;color:#9f1239;font-weight:700}
.va-lay>i{width:12px;flex:none;font-size:10px;color:#8b96a8}
.va-lay.sel>i{color:#e11d48}
.va-lay-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.va-lay em{flex:none;font-style:normal;font-size:8.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;
  padding:1px 5px;border-radius:999px;background:#fef3c7;color:#92400e}
.va-lay .va-ico{width:20px;height:20px;font-size:9px;opacity:0;transition:opacity .12s}
.va-lay:hover .va-ico,.va-lay.sel .va-ico{opacity:1}
.va-lay-add{display:flex;gap:3px;margin-left:16px;flex-wrap:wrap}
.va-lay-add button{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border:1px dashed #d7dde8;
  border-radius:7px;background:transparent;color:#7b8598;font:inherit;font-size:10px;font-weight:700;cursor:pointer}
.va-lay-add button:hover{border-color:#e11d48;border-style:solid;color:#e11d48;background:#fff5f7}
.va-lay-add button i{font-size:9px}
.va-lay-head{display:flex;align-items:center;gap:8px;padding:7px 10px;margin-bottom:2px;border-radius:9px;
  background:#f4f7fc;font-size:12px}
.va-lay-head i{color:#e11d48;font-size:11px}
.va-lay-head b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#22314a}
.va-lay-head span{margin-left:auto;flex:none;font-size:10px;font-weight:700;color:#7b8598}
.va-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:30px 16px;border:1px dashed #d7dde8;border-radius:12px;text-align:center;color:#8b96a8}
.va-empty i{font-size:22px;color:#c3cddd}
.va-empty p{margin:4px 0 0;font-size:12.5px;font-weight:700;color:#5b6675}
.va-empty span{font-size:11px}

/* stage */
.va-stage{display:flex;flex-direction:column;align-items:center;gap:10px}
.va-preview-fmt{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.va-preview-fmt button{height:26px;padding:0 10px;border:1px solid #dfe4ec;border-radius:7px;background:#fff;
  color:#5b6675;font:inherit;font-size:11px;font-weight:800;cursor:pointer}
.va-preview-fmt button.on{border-color:#e11d48;background:#e11d48;color:#fff}
.va-canvas-wrap{display:grid;place-items:center;width:100%;min-height:300px;padding:12px;border-radius:14px;
  background:repeating-conic-gradient(#eef1f6 0 25%,#f7f9fc 0 50%) 0 0/18px 18px;transition:box-shadow .15s}
.va-canvas-wrap.drop{box-shadow:0 0 0 2px #e11d48 inset}
.va-canvas-wrap canvas{display:block;border-radius:6px;box-shadow:0 6px 22px rgba(16,26,46,.16);background:#000}
.va-transport{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.va-time{font-size:11.5px;font-weight:800;color:#5b6675;font-variant-numeric:tabular-nums}

/* inspector */
/* five tabs in a 268px column do not fit on one line — let them wrap rather
   than truncate, so no tab label is ever half a word */
.va-tabs{display:flex;flex-wrap:wrap;gap:3px;padding:3px;border:1px solid #e4e9f2;border-radius:10px;background:#f4f7fc;margin-bottom:10px}
.va-tab{flex:1 1 auto;min-width:44px;height:28px;padding:0 6px;border:0;border-radius:7px;background:transparent;
  color:#5b6675;font:inherit;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap}
.va-tab.on{background:#fff;color:#e11d48;box-shadow:0 2px 6px rgba(16,26,46,.08)}
.va-insp{display:flex;flex-direction:column;gap:12px}
.va-field{display:flex;flex-direction:column;gap:6px}
.va-field>label{font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#7b8598}
.va-field>label b{color:#e11d48}
.va-perfmt{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:999px;background:#fff1f4;
  color:#e11d48;font-size:8.5px;font-weight:900;letter-spacing:.04em;text-transform:none}
.va-perfmt-box{padding:10px;border:1px dashed #f3c9d2;border-radius:10px;background:#fffafb}
.va-insp input[type=text],.va-insp input[type=number],.va-insp select,.va-insp textarea{
  width:100%;padding:7px 9px;border:1px solid #d7dde8;border-radius:8px;background:#fff;color:#22314a;
  font:inherit;font-size:12px}
.va-insp textarea{resize:vertical;line-height:1.4;height:auto;flex:none;
  /* track the words, never balloon: content-sized where supported, hard caps everywhere */
  field-sizing:content;min-height:38px;max-height:104px}
.va-insp input[type=color]{width:100%;height:30px;padding:2px;border:1px solid #d7dde8;border-radius:8px;background:#fff}
.va-insp input[type=range]{width:100%;accent-color:#e11d48}
.va-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.va-sub{display:flex;flex-direction:column;gap:3px;font-size:10px;font-weight:800;color:#7b8598}
.va-check{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:#3e4a5f;cursor:pointer}
.va-check input{accent-color:#e11d48}
.va-hint{font-size:10.5px;line-height:1.45;color:#8b96a8}
.va-seg{display:flex;gap:3px;padding:3px;border:1px solid #e4e9f2;border-radius:9px;background:#f4f7fc}
.va-seg button{flex:1;height:26px;border:0;border-radius:6px;background:transparent;color:#5b6675;font:inherit;
  font-size:11px;font-weight:800;cursor:pointer;text-transform:capitalize}
.va-seg button.on{background:#fff;color:#e11d48;box-shadow:0 2px 6px rgba(16,26,46,.08)}

/* ── TIMELINE ──────────────────────────────────────────────────────────
   Clips read as CARDS, in the same language as the Clips list — numbered
   chip, name, duration, neutral surface. Only the SELECTED clip takes the
   accent, so colour means "this is what the inspector is editing" instead of
   decoration. (Every block used to carry the accent gradient, which turned
   six clips into one unreadable pink bar.) */
.va-tl-wrap{margin-top:16px}
.va-tl-ruler{position:relative;height:15px;margin:0 3px 3px}
.va-tl-tick{position:absolute;top:0;transform:translateX(-50%);padding-left:0;
  font-size:9px;font-weight:800;color:#9aa4b2;font-variant-numeric:tabular-nums;white-space:nowrap}
.va-tl-tick::after{content:'';position:absolute;left:50%;top:12px;width:1px;height:4px;background:#d7dde8}
.va-tl-tick-end{right:0;left:auto;transform:none;color:#5b6675}
.va-tl-tick-end::after{display:none}
.va-tl-track{position:relative;height:52px;padding:3px;border:1px solid #e4e9f2;
  border-radius:11px;background:#f4f7fc;cursor:pointer;overflow:hidden}
/* ⚠ the ROW is the flex container. #vaTl used to be a .va-tl-b itself, which
   made every clip a child of a single flex ITEM — they collapsed to 18px. */
.va-tl-row{display:flex;gap:3px;width:100%;height:100%}
.va-tl-b{position:relative;box-sizing:border-box;flex:0 0 auto;display:flex;flex-direction:column;
  justify-content:center;gap:2px;min-width:0;padding:0 7px;border:1px solid #dfe4ec;border-radius:8px;
  background:#fff;color:#22314a;overflow:hidden;transition:border-color .12s,background .12s}
.va-tl-b:hover{border-color:#c3cddd;background:#fbfcfe}
.va-tl-nm{display:flex;align-items:center;gap:5px;min-width:0;font-size:10.5px;font-weight:800;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.va-tl-nm b{display:grid;place-items:center;width:15px;height:15px;flex:none;border-radius:4px;
  background:#eef2f8;color:#5b6675;font-size:8.5px;font-weight:900}
.va-tl-b i{font-style:normal;font-size:9px;font-weight:700;color:#8b96a8;font-variant-numeric:tabular-nums}
/* one dot per element on the clip — <u>/<s> because .va-tl-b's children are
   already spoken for by the name and duration */
.va-tl-lay{position:absolute;right:6px;top:5px;display:flex;gap:2px;text-decoration:none}
.va-tl-lay s{width:4px;height:4px;border-radius:50%;background:#f59e0b;text-decoration:none}
.va-tl-b.sel{border-color:#e11d48;background:#fff5f7}
.va-tl-b.sel .va-tl-nm{color:#9f1239}
.va-tl-b.sel .va-tl-nm b{background:#e11d48;color:#fff}
.va-tl-cta{background:#f1f4f9;border-style:dashed}
.va-tl-empty{display:grid;place-items:center;width:100%;height:100%;border:0;background:transparent;
  color:#9aa4b2;font-size:11.5px;font-weight:700}
.va-playhead{position:absolute;top:0;bottom:0;width:2px;background:#0b1226;pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.7)}
/* Overlay mode adds no runtime, so the brand shows as a band riding the tail
   of the last clip — never as a block, which would imply time that isn't there. */
/* Amber, not the selection accent — this marks a property of the clip, not a
   selection, and amber stays legible on both the light and the dark ground. */
.va-tl-brand{position:absolute;right:4px;top:4px;bottom:4px;display:flex;align-items:flex-end;
  justify-content:flex-end;gap:4px;padding:0 6px 3px;border-radius:0 7px 7px 0;
  background:linear-gradient(90deg,rgba(217,119,6,0) 0,rgba(217,119,6,.14) 38%,rgba(217,119,6,.26) 100%);
  border-left:1px dashed rgba(217,119,6,.8);
  pointer-events:none}
/* the label is a solid chip, so it stays readable on the light block and the
   dark one — plain amber text disappears against one or the other */
.va-tl-brand b{display:flex;align-items:center;gap:3px;padding:1px 5px;border-radius:999px;
  background:#f59e0b;color:#3d2600;font-size:8px;font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.5}
.va-tl-brand i{font-size:7.5px}

/* ── QA + EXPORT ── */
.va-out{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start;margin-top:6px}
.va-qa{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.va-qa li{display:flex;align-items:flex-start;gap:9px;padding:8px 10px;border:1px solid #e4e9f2;
  border-radius:10px;background:#fff}
.va-qa li i{margin-top:1px;font-size:12px}
.va-qa li strong{display:block;font-size:12px;font-weight:800;color:#22314a}
.va-qa li span{font-size:11px;color:#7b8598;line-height:1.4}
.va-qa-pass i{color:#16a34a}
.va-qa-warn i{color:#d97706}
.va-qa-warn{background:#fffbf3;border-color:#f5e2c0}
.va-qa-fail i{color:#e11d48}
.va-qa-fail{background:#fff5f6;border-color:#f3c9d2}
.va-qa-sum b.good{color:#16a34a}
.va-qa-sum b.warn{color:#d97706}
.va-qa-sum b.bad{color:#e11d48}
.va-qa-sum{font-size:11.5px;font-weight:800;color:#7b8598}
.va-prog{height:7px;border-radius:6px;background:#eef2f8;overflow:hidden;margin-bottom:6px}
.va-prog i{display:block;height:100%;background:#e11d48;transition:width .18s}
.va-export-state small{font-size:11px;color:#7b8598;line-height:1.45}
.va-note{margin:10px 0 0;padding:9px 11px;border-radius:9px;background:#f4f7fc;color:#6b7688;
  font-size:10.5px;line-height:1.5}

.va-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:9999;padding:10px 16px;
  border-radius:10px;background:#0b1226;color:#fff;font-size:12.5px;font-weight:700;
  box-shadow:0 10px 30px rgba(11,18,38,.3)}
.va-toast.warn{background:#9f1239}

/* ── responsive ── */
@media (max-width:1180px){
  .va-editor{grid-template-columns:200px minmax(0,1fr) 236px}
}
@media (max-width:980px){
  .va-editor{grid-template-columns:1fr}
  .va-out{grid-template-columns:1fr}
  .va-clips{max-height:220px}
}

/* ── dark ── */
html.dark [data-tool="video-ad"] .va-btn{background:#141b28;border-color:#2a3446;color:#dbe2ee}
html.dark [data-tool="video-ad"] .va-btn:hover{background:#1a2333}
html.dark [data-tool="video-ad"] .va-btn-pri{background:#e11d48;border-color:#e11d48;color:#fff}
html.dark [data-tool="video-ad"] .va-ico{background:#141b28;border-color:#2a3446;color:#9aa4b2}
html.dark [data-tool="video-ad"] .va-sep,html.dark [data-tool="video-ad"] .va-toolbar+.va-toolbar{border-color:#2a3446}
html.dark [data-tool="video-ad"] .va-field-x select,
html.dark [data-tool="video-ad"] .va-field-x input[type=text],
html.dark [data-tool="video-ad"] .va-insp input,
html.dark [data-tool="video-ad"] .va-insp select,
html.dark [data-tool="video-ad"] .va-insp textarea{background:#141b28;border-color:#2a3446;color:#dbe2ee}
html.dark [data-tool="video-ad"] .va-fmt{background:#141b28;border-color:#2a3446;color:#dbe2ee}
html.dark [data-tool="video-ad"] .va-fmt.on{background:#2a1220;border-color:#e11d48}
html.dark [data-tool="video-ad"] .va-clip{background:#141b28;border-color:#2a3446}
html.dark [data-tool="video-ad"] .va-clip.sel{background:#2a1220;border-color:#e11d48}
html.dark [data-tool="video-ad"] .va-clip-b strong{color:#dbe2ee}
html.dark [data-tool="video-ad"] .va-clip-n{background:#1a2333;color:#9aa4b2}
html.dark [data-tool="video-ad"] .va-canvas-wrap{background:repeating-conic-gradient(#141b28 0 25%,#101623 0 50%) 0 0/18px 18px}
html.dark [data-tool="video-ad"] .va-tabs,html.dark [data-tool="video-ad"] .va-seg{background:#0f141c;border-color:#2a3446}
html.dark [data-tool="video-ad"] .va-tab.on,html.dark [data-tool="video-ad"] .va-seg button.on{background:#1a2333;color:#fb7185}
html.dark [data-tool="video-ad"] .va-tl-track{background:#0f141c;border-color:#2a3446}
html.dark [data-tool="video-ad"] .va-tl-b{background:#141b28;border-color:#2a3446;color:#dbe2ee}
html.dark [data-tool="video-ad"] .va-tl-b:hover{background:#1a2333;border-color:#3a4658}
html.dark [data-tool="video-ad"] .va-tl-nm b{background:#1a2333;color:#9aa4b2}
html.dark [data-tool="video-ad"] .va-tl-b.sel{background:#2a1220;border-color:#e11d48}
html.dark [data-tool="video-ad"] .va-tl-b.sel .va-tl-nm{color:#fb7185}
html.dark [data-tool="video-ad"] .va-tl-cta{background:#121824}
html.dark [data-tool="video-ad"] .va-tl-tick::after{background:#2a3446}
html.dark [data-tool="video-ad"] .va-tl-tick-end{color:#9aa4b2}
html.dark [data-tool="video-ad"] .va-playhead{background:#fff}
html.dark [data-tool="video-ad"] .va-qa li{background:#141b28;border-color:#2a3446}
html.dark [data-tool="video-ad"] .va-qa li strong{color:#dbe2ee}
html.dark [data-tool="video-ad"] .va-qa-warn{background:#241c0e;border-color:#4a3a1a}
html.dark [data-tool="video-ad"] .va-qa-fail{background:#2a1220;border-color:#4a1d2c}
html.dark [data-tool="video-ad"] .va-place-note,html.dark [data-tool="video-ad"] .va-note{background:#141b28;color:#9aa4b2}
html.dark [data-tool="video-ad"] .va-perfmt-box{background:#1a1016;border-color:#4a1d2c}
html.dark [data-tool="video-ad"] .va-empty{border-color:#2a3446}
html.dark [data-tool="video-ad"] .va-prog{background:#1a2333}

/* ── ALL-FORMATS VIEW ──────────────────────────────────────────────────
   Every selected format side by side, playing in sync. Equal HEIGHT, not
   equal width — scaling a 16:9 and a 9:16 to the same width makes the
   vertical look tiny and tells you nothing about whether the cut works. */
.va-all{display:flex;align-items:flex-end;justify-content:center;gap:12px;flex-wrap:wrap}
.va-all figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer}
.va-all canvas{display:block;border-radius:5px;background:#000;box-shadow:0 5px 18px rgba(16,26,46,.16);
  transition:box-shadow .15s,outline-color .15s;outline:2px solid transparent;outline-offset:2px}
.va-all figure:hover canvas{outline-color:#e11d48}
.va-all figcaption{display:flex;align-items:baseline;gap:6px;font-size:10.5px;font-weight:900;color:#5b6675}
.va-all figcaption span{font-size:9px;font-weight:700;color:#9aa4b2}
.va-pf-all{display:inline-flex;align-items:center;gap:5px}
.va-pf-all i{font-size:9px}
html.dark [data-tool="video-ad"] .va-all figcaption{color:#9aa4b2}
/* While comparing, the stage takes the whole editor width and the two side
   panels drop underneath it — explicit placement, because source order puts
   the clip list before the stage. */
.va-editor.all{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.va-editor.all>.va-stage{grid-column:1 / -1;grid-row:1}
.va-editor.all>.va-col:first-child{grid-column:1;grid-row:2}
.va-editor.all>.va-col:last-child{grid-column:2;grid-row:2}
@media (max-width:980px){
  .va-editor.all{grid-template-columns:1fr}
  .va-editor.all>.va-col:first-child,.va-editor.all>.va-col:last-child{grid-column:1}
  .va-editor.all>.va-col:last-child{grid-row:3}
}
/* the one the inspector is editing while you compare */
.va-all figure.act canvas{outline-color:#e11d48}
.va-all figure.act figcaption{color:#e11d48}
.va-all figure.act figcaption::after{content:'editing';margin-left:2px;padding:1px 5px;border-radius:999px;
  background:#fff1f4;color:#e11d48;font-size:8px;font-weight:900;letter-spacing:.04em}
html.dark [data-tool="video-ad"] .va-all figure.act figcaption::after{background:#2a1220}

/* "Play all in full" — a quiet link in the column header, shown only when
   something actually IS trimmed (a control that does nothing is worse than
   no control at all) */
.va-linkbtn{border:0;background:transparent;padding:0;font:inherit;font-size:11px;font-weight:800;
  color:#e11d48;cursor:pointer;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.va-linkbtn:hover{color:#9f1239}

/* ── custom size input ── */
.va-custom-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.va-custom-row input[type=number]{width:96px;height:34px;padding:0 9px;border:1px solid #d7dde8;border-radius:9px;
  background:#fff;color:#22314a;font:inherit;font-size:13px}
.va-custom-row em{font-style:normal;font-weight:800;color:#8b96a8}
.va-custom-px{font-size:11px;font-weight:700;color:#8b96a8;margin-right:4px}
.va-custom-row .va-btn-sm{margin-top:0}
.va-custom-row small{flex:1 1 100%;font-size:11px;color:#7b8598;line-height:1.5}
.va-pro-tag{margin-left:5px;padding:1px 5px;border-radius:999px;background:#fef3c7;color:#92400e;
  font-size:8px;font-weight:900;letter-spacing:.05em}
/* a custom chip carries its own remove control */
.va-fmt-cust{padding-right:22px}
.va-fmt-x{position:absolute;right:5px;bottom:5px;display:grid;place-items:center;width:14px;height:14px;
  border-radius:50%;background:#eef2f8;color:#5b6675;font-size:11px;line-height:1;font-weight:700}
.va-fmt-x:hover{background:#e11d48;color:#fff}

/* ── save / open / share ── */
.va-share-out{margin-top:12px;padding:12px 14px;border:1px solid #cfe6d5;border-radius:11px;background:#f2fbf5}
.va-share-out>b{display:block;font-size:12.5px;color:#166534;margin-bottom:8px}
.va-share-out>b i{margin-right:6px}
.va-share-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.va-share-row input{flex:1 1 260px;min-width:0;height:32px;padding:0 10px;border:1px solid #cfe6d5;border-radius:8px;
  background:#fff;color:#22314a;font:inherit;font-size:12px}
.va-share-row .va-btn-sm{margin-top:0;text-decoration:none}
.va-saved{margin-top:12px;padding:12px 14px;border:1px solid #e4e9f2;border-radius:11px;background:#f8fafd}
.va-saved-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.va-saved-h b{font-size:12.5px;color:#22314a}
.va-saved-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid #e4e9f2;border-radius:9px;
  background:#fff;margin-bottom:6px}
.va-saved-b{flex:1;min-width:0}
.va-saved-b strong{display:block;font-size:12.5px;font-weight:700;color:#22314a;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.va-saved-b small{font-size:10.5px;color:#8b96a8}
.va-saved-row .va-btn-sm{margin-top:0;flex:none}
.va-saved [hidden],.va-share-out[hidden],.va-saved[hidden]{display:none}
/* PRO-locked actions keep a crown, the same signal the other tools use */
.va-pro-locked{position:relative}
.va-pro-locked::after{content:'\f521';font-family:'Font Awesome 6 Free';font-weight:900;font-size:8px;
  position:absolute;top:-5px;right:-5px;width:15px;height:15px;border-radius:50%;background:#f59e0b;color:#3d2600;
  display:grid;place-items:center}

/* ══════════════════════════════════════════════════════════════════════
   LAYOUT v2 — one connected editor, not stacked form sections.
     project bar (2 rows)  →  clips | canvas + docked timeline | properties
     →  pre-flight status bar
   The first build spread the SETUP across seven full-width rows and then
   squeezed the actual WORK into three narrow columns, with the canvas hard
   capped at 420px. This inverts that: setup is two rows, the stage takes the
   room, and the timeline is docked to the canvas instead of floating off as
   its own page section.
   ⚠ Appended deliberately — these override the v1 rules above at equal
   specificity by source order. The dark block is (0,3,0) so it still wins.
   ══════════════════════════════════════════════════════════════════════ */

/* ── PROJECT BAR ── */
.va-setup{display:flex;flex-direction:column;gap:10px}
.va-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.va-bar-sp{flex:1 1 6px}
.va-bar-lbl{font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:#7b8598;flex:none}
.va-bar-out{padding-top:10px;border-top:1px solid #edf1f7}
.va-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.va-f>span{font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:#7b8598}
.va-f select,.va-f input[type=text]{height:34px;padding:0 10px;border:1px solid #dfe4ec;border-radius:8px;
  background:#fff;color:#22314a;font:inherit;font-size:13px;min-width:190px}
.va-f-grow{flex:1 1 240px}
.va-f-grow input{width:100%;min-width:0}
/* a switch, not another bordered checkbox — fewer rectangles on screen */
.va-sw{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#42506a;cursor:pointer;
  white-space:nowrap;margin-top:14px}
.va-sw input{position:absolute;opacity:0;pointer-events:none}
.va-sw-t{position:relative;width:32px;height:18px;border-radius:999px;background:#cfd7e4;transition:background .15s;flex:none}
.va-sw-t::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(16,26,46,.3)}
.va-sw input:checked + .va-sw-t{background:#e11d48}
.va-sw input:checked + .va-sw-t::after{transform:translateX(14px)}
.va-sw input:focus-visible + .va-sw-t{outline:2px solid #e11d48;outline-offset:2px}
.va-save{font-size:11.5px;color:#16a34a;white-space:nowrap;margin-top:14px;min-height:1em}
.va-save i{margin-right:5px}
.va-save-dim{color:#8b96a8}

/* tertiary level: icon-only, no border */
.va-ib{display:grid;place-items:center;width:32px;height:32px;flex:none;border:0;border-radius:8px;
  background:transparent;color:#5b6675;font:inherit;font-size:12px;cursor:pointer;transition:background .12s,color .12s}
.va-ib:hover{background:#eef2f8;color:#22314a}
.va-ib[disabled]{opacity:.32;pointer-events:none}
.va-ib-play{background:#e11d48;color:#fff;width:34px;height:34px}
.va-ib-play:hover{background:#be123c;color:#fff}
.va-ib-txt{width:auto;padding:0 10px;font-size:11.5px;font-weight:800}

/* ── the ⋯ menu and the custom-size popover ── */
.va-more-wrap{position:relative;flex:none;margin-top:14px}
.va-bar-out .va-more-wrap{margin-top:0}
.va-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:234px;padding:6px;
  border:1px solid #e0e6f0;border-radius:12px;background:#fff;box-shadow:0 14px 40px rgba(16,26,46,.18)}
.va-menu[hidden]{display:none}
.va-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;border-radius:8px;
  background:transparent;color:#22314a;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-align:left}
.va-menu button:hover{background:#f4f7fc}
.va-menu button i{width:14px;font-size:11px;color:#7b8598}
.va-menu button em{margin-left:auto;font-style:normal;font-size:8px;font-weight:900;letter-spacing:.05em;
  padding:1px 5px;border-radius:999px;background:#fef3c7;color:#92400e}
.va-menu-danger{color:#be123c}
.va-menu-danger i{color:#e11d48}
.va-menu hr{border:0;border-top:1px solid #edf1f7;margin:5px 2px}
.va-menu-pad{padding:11px;min-width:292px}
.va-menu-pad small{display:block;margin-top:8px;font-size:11px;line-height:1.5;color:#7b8598}
.va-cust-row{display:flex;align-items:center;gap:6px}
.va-cust-row input{width:84px;height:32px;padding:0 8px;border:1px solid #dfe4ec;border-radius:8px;
  background:#fff;color:#22314a;font:inherit;font-size:12.5px}
.va-cust-row em{font-style:normal;font-weight:800;color:#8b96a8}
.va-cust-px{font-size:11px;font-weight:700;color:#8b96a8}
.va-cust-row .va-btn-sm{margin-top:0}
.va-chip-add{display:inline-flex;align-items:center;gap:6px;height:46px;padding:0 13px;border:1px dashed #d7dde8;
  border-radius:10px;background:transparent;color:#5b6675;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.va-chip-add:hover{border-color:#e11d48;border-style:solid;color:#e11d48;background:#fff5f7}

/* ── WORKSPACE ── */
.va-editor{display:grid;grid-template-columns:236px minmax(0,1fr) 304px;gap:14px;align-items:stretch}
.va-col{min-width:0;display:flex;flex-direction:column}
/* subtle panel surfaces instead of a border around every child */
.va-col-clips,.va-col-insp{background:#f7f9fc;border-radius:12px;padding:11px}
.va-ph{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.va-ph h4{margin:0;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6b7688}
.va-ph .va-btn-sm{margin-top:0}
.va-clips{display:flex;flex-direction:column;gap:6px;overflow:auto;flex:1;min-height:0;max-height:none}

/* ── STAGE ── */
/* ⚠ align-items MUST be reset. The v1 rule centred the stage's children, which
   is fine for a canvas that is narrower than its column and disastrous for the
   docked timeline: it sized to its content and overflowed HALF outside each
   edge of a 367px column, spilling across the inspector. */
.va-stage{gap:9px;align-items:stretch}
/* format tabs LABEL the stage — left aligned above it, not floating centred */
.va-preview-fmt{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-start}
.va-preview-fmt button{height:26px;padding:0 11px;border:1px solid #dfe4ec;border-radius:7px;background:#fff;
  color:#5b6675;font:inherit;font-size:11.5px;font-weight:800;cursor:pointer}
.va-preview-fmt button.on{border-color:#e11d48;background:#e11d48;color:#fff}
.va-canvas-wrap{display:grid;place-items:center;width:100%;flex:1;min-height:min(56vh,540px);padding:14px;
  border-radius:12px 12px 0 0;
  background:repeating-conic-gradient(#eef1f6 0 25%,#f7f9fc 0 50%) 0 0/18px 18px;transition:box-shadow .15s}
.va-canvas-wrap.drop{box-shadow:0 0 0 2px #e11d48 inset}
.va-canvas-wrap canvas{display:block;border-radius:6px;box-shadow:0 6px 22px rgba(16,26,46,.16);background:#000}

/* ── DOCKED TIMELINE — same column, no gap, its own dark tint ── */
.va-tl-wrap{margin-top:14px;border-radius:12px;background:#111a2e;padding:8px 10px 11px}
.va-tl-head{display:flex;align-items:center;gap:5px;margin-bottom:7px}
.va-tl-head .va-ib{color:#9db4d4}
.va-tl-head .va-ib:hover{background:rgba(255,255,255,.1);color:#fff}
.va-tl-head .va-ib-play{background:#e11d48;color:#fff}
.va-tl-head .va-ib-play:hover{background:#be123c}
.va-tl-div{width:1px;height:18px;background:rgba(255,255,255,.16);margin:0 4px;flex:none}
.va-tl-head .va-time{color:#cfe0f5;font-size:11.5px;font-weight:700;margin-left:6px;font-variant-numeric:tabular-nums}
.va-tl-head input[type=range]{width:88px;accent-color:#e11d48}
/* ── SIDEWAYS SCROLL once the clips no longer fit at a legible width ──
   The blocks stay proportional to time; the TRACK grows instead (see
   fitTimelineWidth).
   ⚠ THE NATIVE SCROLLBAR IS NOT USABLE HERE, measured twice over:
     · Chrome (148, and since 121) IGNORES every ::-webkit-scrollbar rule as
       soon as `scrollbar-width` or `scrollbar-color` is set — so styling it
       both ways silently gets you neither;
     · macOS overlay scrollbars take no layout space and stay invisible until
       you are ALREADY scrolling, which is exactly too late to tell you there
       is more timeline off to the right.
   So the native one is switched off and .va-tl-sb below is drawn by us. */
.va-tl-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.va-tl-scroll::-webkit-scrollbar{display:none}
.va-tl-inner{min-width:100%}

/* our own scrollbar — always visible while there is anything to scroll */
.va-tl-sb{position:relative;height:10px;margin:7px 0 1px;border-radius:99px;
  background:rgba(255,255,255,.10);cursor:pointer;touch-action:none}
.va-tl-sb[hidden]{display:none}
.va-tl-sb-th{position:absolute;top:0;bottom:0;left:0;min-width:34px;border-radius:99px;
  background:rgba(255,255,255,.42);transition:background .12s}
.va-tl-sb:hover .va-tl-sb-th{background:rgba(255,255,255,.6)}
.va-tl-sb.is-drag .va-tl-sb-th{background:#fff;transition:none}

/* ── FULL SCREEN ────────────────────────────────────────────────────────
   ⚠ The tool's own DOM is PROMOTED in place, never cloned into an overlay:
   the canvas, timeline and inspector are already wired, and a copy would be
   a second set of ids for every handler to disagree about. Everything else
   on the page is hidden while it is up. */
html.va-full, html.va-full body{overflow:hidden !important}
/* hide the whole page, then bring back ONLY the editor. visibility is
   inherited but a descendant can override it, which is what makes this work
   without touching (or knowing) the markup between body and the tool.
   ⚠ do NOT add `main{visibility:visible}` — that reveals every sibling again. */
html.va-full body > *{visibility:hidden}
html.va-full .tool[data-tool="video-ad"]{
  position:fixed;inset:0;z-index:2147483000;margin:0;padding:12px 16px 16px;
  overflow:auto;visibility:visible;background:var(--bg,#f5f7fb)}
html.va-full .tool[data-tool="video-ad"] *{visibility:visible}
/* ⚠ no overscroll-behavior:contain here — when a panel has nothing left to
   scroll, contain swallows the wheel entirely and the page feels frozen. */
html.dark.va-full .tool[data-tool="video-ad"]{background:#0b1020}
/* the editor's own marketing furniture is not wanted in a full-screen editor */
html.va-full .tool[data-tool="video-ad"] .dl-cmp,
html.va-full .tool[data-tool="video-ad"] .trust-bar{display:none}
/* …and where the window is TALL enough, spend the extra room on the picture:
   drawPreview sizes the canvas from this element's clientHeight, so without
   this it would come out the same size it was. 610px is the editor's own
   chrome around it — app bar, formats row, stage bar, timeline, pre-flight —
   measured, not guessed.
   ⚠ max() with the ORIGINAL floor, never a bare calc: on a 900px-tall screen
   the chrome already uses more than the window, so a plain calc computes
   ~290px and would SHRINK the preview on entering full screen. Here full
   screen simply gains width at that height, which is the honest outcome. */
html.va-full .tool[data-tool="video-ad"] .va-canvas-wrap{
  min-height:max(min(56vh,540px), calc(100vh - 610px))}

/* "12 clips — scroll the timeline", beside the zoom controls */
.va-tl-note{display:inline-flex;align-items:center;gap:5px;margin-right:8px;
  padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.09);
  color:#cfe0f5;font-size:10.5px;font-weight:700;white-space:nowrap}
.va-tl-note[hidden]{display:none}
.va-tl-note i{font-size:9.5px;opacity:.8}
@media (max-width:900px){ .va-tl-note{display:none} }
.va-tl-ruler{position:relative;height:15px;margin-bottom:3px}
.va-tl-tick{position:absolute;top:0;font-size:9px;font-weight:700;color:#7f92b5;transform:translateX(-50%);white-space:nowrap}
.va-tl-tick::after{content:'';position:absolute;left:50%;top:11px;width:1px;height:4px;background:#33415f}
.va-tl-tick-end{right:0;left:auto;transform:none;color:#9db4d4}
.va-tl-tick-end::after{display:none}
/* taller blocks — the timeline is where the shape of the cut gets read */
.va-tl-track{position:relative;height:64px;padding:3px;border:0;border-radius:9px;background:#0b1226;
  cursor:pointer;overflow:hidden}
.va-tl-row{display:flex;gap:3px;width:100%;height:100%}
.va-tl-b{position:relative;box-sizing:border-box;flex:0 0 auto;display:flex;flex-direction:column;
  justify-content:center;gap:3px;min-width:0;padding:0 9px;border:1px solid #2b3550;border-radius:8px;
  background:#1c2740;color:#dce7fa;overflow:hidden;transition:border-color .12s,background .12s}
.va-tl-b:hover{background:#243250}
.va-tl-nm{display:flex;align-items:center;gap:6px;min-width:0;font-size:11.5px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.va-tl-nm b{display:grid;place-items:center;width:16px;height:16px;flex:none;border-radius:4px;
  background:rgba(255,255,255,.12);color:#cfe0f5;font-size:9px;font-weight:900}
.va-tl-b i{font-style:normal;font-size:10px;font-weight:700;color:#8fa3c6;font-variant-numeric:tabular-nums}
/* ⚠ A BACKGROUND COLOUR CANNOT SELECT A BLOCK HERE. applyFilmstrips sets
   `style.backgroundImage` INLINE once the thumbnails build, and an inline
   background image paints over any stylesheet background colour — so this
   rule's `background:#3a1526` was invisible on every clip that had a strip,
   i.e. all of them, leaving a 1px border as the only cue.
   INSET box-shadows paint ABOVE the background image and BELOW the content,
   which is exactly the layer we need: a solid ring plus a wash over the
   footage, with the name and duration still legible on top. */
.va-tl-b.sel{border-color:#e11d48;background:#3a1526;
  box-shadow:inset 0 0 0 2px #e11d48, inset 0 0 0 999px rgba(225,29,72,.30)}
.va-tl-b.sel .va-tl-nm{color:#fff}
.va-tl-b.sel .va-tl-nm b{background:#e11d48;color:#fff}
.va-tl-b.sel i{color:#ffd7de}
.va-tl-cta{background:#1a2338;border-style:dashed}
.va-tl-lay{position:absolute;right:7px;top:6px;display:flex;gap:2px;text-decoration:none}
.va-tl-lay s{width:4px;height:4px;border-radius:50%;background:#f59e0b;text-decoration:none}
.va-tl-empty{display:grid;place-items:center;width:100%;height:100%;border:0;background:transparent;
  color:#5f7099;font-size:11.5px;font-weight:700}
/* a playhead you can actually find on a dark track */
.va-playhead{position:absolute;top:0;bottom:0;width:2px;background:#fff;pointer-events:none;
  box-shadow:0 0 0 1px rgba(225,29,72,.9),0 0 10px rgba(255,255,255,.45)}
.va-playhead::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #fff}

/* ── INSPECTOR ── */
.va-insp-head{display:flex;flex-direction:column;gap:1px;padding:0 2px 9px}
.va-insp-head b{font-size:13.5px;font-weight:800;color:#22314a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.va-insp-head span{font-size:11px;color:#8b96a8}
.va-tabs{display:flex;flex-wrap:wrap;gap:2px;padding:3px;border:0;border-radius:9px;background:#eaeff7;margin-bottom:10px}
.va-tab{flex:1 1 auto;min-width:42px;height:26px;padding:0 7px;border:0;border-radius:6px;background:transparent;
  color:#5b6675;font:inherit;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap}
.va-tab.on{background:#fff;color:#e11d48;box-shadow:0 1px 3px rgba(16,26,46,.1)}
.va-insp{display:flex;flex-direction:column;gap:8px;overflow:auto;flex:1;min-height:0;padding-right:2px}
/* collapsible groups instead of one flat wall of controls */
.va-grp{border-radius:10px;background:#fff}
.va-grp>summary{list-style:none;display:flex;align-items:center;gap:7px;padding:8px 10px;cursor:pointer;
  font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:#6b7688;border-radius:10px}
.va-grp>summary::-webkit-details-marker{display:none}
.va-grp>summary::after{content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;font-size:8px;
  margin-left:auto;color:#a7b2c4;transition:transform .15s}
.va-grp[open]>summary::after{transform:rotate(180deg)}
.va-grp>summary:hover{background:#f4f7fc}
.va-grp-b{display:flex;flex-direction:column;gap:10px;padding:2px 10px 11px}

/* ── PRE-FLIGHT DRAWER ── */
.va-pf-bar{display:flex;align-items:center;gap:10px;width:100%;padding:12px 2px;border:0;background:transparent;
  font:inherit;cursor:pointer;text-align:left}
.va-pf-sum{display:flex;align-items:center;gap:16px;font-size:12.5px;font-weight:700;color:#42506a;flex-wrap:wrap}
.va-pf-sum i{margin-right:5px}
.va-pf-ok{color:#16a34a}
.va-pf-warn{color:#b45309}
.va-pf-fail{color:#be123c}
.va-pf-more{font-size:11.5px;font-weight:800;color:#e11d48;white-space:nowrap}
.va-pf-more i{margin-left:5px;font-size:9px;transition:transform .15s}
.va-pf-bar[aria-expanded=true] .va-pf-more i{transform:rotate(180deg)}
.va-pf-body{padding:0 2px 14px}
.va-pf-body[hidden]{display:none}
.va-pf-grp{margin-top:10px}
.va-pf-grp>summary{list-style:none;cursor:pointer;font-size:11.5px;font-weight:800;color:#7b8598;padding:6px 0}
.va-pf-grp>summary::-webkit-details-marker{display:none}
.va-pf-grp>summary::after{content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;font-size:8px;margin-left:7px}
.va-pf-grp[open]>summary::after{content:'\f077'}

/* ── CLIP CARDS ── */
.va-clip{display:flex;align-items:center;gap:9px;padding:7px;border:1px solid #e6ebf3;border-radius:10px;
  background:#fff;cursor:pointer}
.va-clip:hover{border-color:#c9d4e4}
.va-clip.sel{border-color:#e11d48;background:#fff5f7}
.va-clip-th{position:relative;width:56px;height:40px;flex:none;border-radius:7px;overflow:hidden;background:#0b1226}
.va-clip-th canvas,.va-clip-th img{width:100%;height:100%;object-fit:cover;display:block}
.va-clip-th b{position:absolute;left:3px;top:3px;display:grid;place-items:center;min-width:15px;height:15px;
  padding:0 3px;border-radius:4px;background:rgba(11,18,38,.82);color:#fff;font-size:9px;font-weight:900}
.va-clip-b{min-width:0;flex:1}
.va-clip-b strong{display:block;font-size:12.5px;font-weight:700;color:#22314a;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.va-clip-b small{font-size:10.5px;color:#8b96a8}
.va-clip-b em{font-style:normal;color:#b45309;font-weight:700}
.va-clip-a{display:flex;align-items:center;gap:1px;flex:none}
.va-clip-a .va-ib{width:26px;height:26px;font-size:11px}
.va-clip-exp{transition:transform .15s}
.va-clip-grp.open .va-clip-exp{transform:rotate(90deg)}
.va-clip-grp{display:flex;flex-direction:column;gap:4px;padding:0;border:0;border-radius:0;background:transparent}
.va-clip-grp.sel{border:0;background:transparent}
/* children are revealed by expanding the clip, not always on show */
.va-clip-kids{display:none;flex-direction:column;gap:4px}
.va-clip-grp.open .va-clip-kids{display:flex}

@media(max-width:1180px){ .va-editor{grid-template-columns:212px minmax(0,1fr) 272px} }
@media(max-width:980px){
  .va-editor{grid-template-columns:minmax(0,1fr)}
  .va-col-clips,.va-col-insp{background:transparent;padding:0}
  .va-clips{max-height:340px}
  .va-tl-wrap{margin-top:0;border-radius:12px}
  .va-canvas-wrap{border-radius:12px}
}

/* per-clip ⋯ menu, anchored to its card */
.va-clip-a{position:relative}
.va-clipmenu{min-width:200px;top:calc(100% + 4px)}
.va-clipmenu button[disabled]{opacity:.4;pointer-events:none}
/* pre-flight rows inside the drawer */
.va-qa li{display:flex;align-items:flex-start;gap:9px;padding:8px 10px;border:0;border-radius:9px;background:#f7f9fc}
.va-qa li + li{margin-top:5px}
.va-qa-warn{background:#fffbf3}
.va-qa-fail{background:#fff5f6}

/* Save / Share / ⋯ group — keeps them together and off the Render button */
.va-bar-acts{display:flex;align-items:center;gap:7px;flex:none;margin-top:14px}
.va-bar-acts .va-more-wrap{margin-top:0}

/* ── vertical rhythm ──────────────────────────────────────────────────
   ⚠ These panels are FLAT (no card), so the marketing `section{padding:30px 0}`
   they inherit is not framing anything — it is just a hole. Measured 92px of
   dead space between the last setup row and the editor: 30 bottom + 25 app gap
   + 18 separator margin + 18 separator padding. The hairline rule already does
   the separating, so the padding can go.
   ⚠ Specificity: the shell's flat-tools separator is (0,4,0), so these have to
   match it AND rely on video.css loading after shell.css. */
.tool[data-tool="video-ad"] .panel{padding-top:0;padding-bottom:0}
.tool[data-tool="video-ad"] .panel + .panel{margin-top:0;padding-top:14px}
.tool[data-tool="video-ad"] .va-pf{padding-bottom:0}
/* main.app's own 25px stack gap is sized for CARDS; with flat panels and a
   hairline rule between them it just widens the same hole. */
.tool[data-tool="video-ad"] .va-app{gap:14px}

/* the placement note always takes its own line, so it can never squeeze the
   Render button off the output row */
.va-bar-out .va-place-note{flex:1 1 100%;margin:0}

/* client / campaign / name context — mirrors Multiframe's */
/* ⚠ Its OWN row, spread full width. Sharing row 1 with Placement, the safe-area
   switch and the action buttons meant it never got the room to lay out and just
   wrapped — the same mistake I made on Multiframe. */
.va-bar-ctx{padding-top:10px;border-top:1px solid #edf1f7}
.va-ctx{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0;width:100%;margin:0}
@media(max-width:900px){.va-ctx{flex-wrap:wrap}}
.va-ctx-lbl{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:900;letter-spacing:.05em;
  text-transform:uppercase;color:#7b8598;white-space:nowrap}
.va-ctx-lbl i{font-size:10px}
.va-ctx-sel{height:32px;padding:0 8px;border:1px solid #dfe4ec;border-radius:8px;background:#fff;
  color:#22314a;font:inherit;font-size:12.5px;min-width:130px;flex:1 1 160px}
.va-ctx-sel:disabled{opacity:.55}
.va-ctx-btn{display:grid;place-items:center;width:26px;height:26px;flex:none;border:1px solid #dfe4ec;
  border-radius:7px;background:#fff;color:#5b6675;font:inherit;font-size:11px;cursor:pointer}
.va-ctx-btn:hover{border-color:#e11d48;color:#e11d48}
.va-ctx-name{flex:1 1 auto;min-width:150px;height:32px;padding:0 9px;border:1px solid #dfe4ec;
  border-radius:8px;background:#fff;color:#22314a;font:inherit;font-size:12.5px}

/* stage header — placement + safe areas + the format tabs, over the canvas */
.va-stage-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:100%}
.va-stage-f{display:flex;align-items:center;gap:7px;min-width:0}
.va-stage-f>span{font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#7b8598;white-space:nowrap}
.va-stage-f select{height:30px;padding:0 8px;border:1px solid #dfe4ec;border-radius:8px;background:#fff;
  color:#22314a;font:inherit;font-size:12.5px;max-width:210px}
.va-stage-bar .va-sw{margin-top:0}
.va-stage-bar .va-preview-fmt{flex:none}

/* ── stage insert bar + direct manipulation ── */
.va-insert-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 2px 9px}
.va-insert-bar[hidden]{display:none}
.va-insert-lbl{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#64748b)}
.va-insert-bar button{font:inherit;font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;cursor:pointer;border:1px solid var(--line,#e2e6ee);
  background:var(--panel,#fff);color:inherit}
.va-insert-bar button:hover{border-color:#e11d48;color:#e11d48}
.va-insert-bar button i{font-size:11px}
.va-insert-hint{margin-left:auto;font-size:11px;color:var(--muted,#94a3b8)}
@media (max-width:760px){.va-insert-hint{display:none}}
/* dragging an element must never scroll the page out from under the gesture */
#vaCanvas{touch-action:none}
/* the film itself is the crop handle — drag it to pan, wheel to zoom */
body.va-cropping #vaCanvas{cursor:grabbing !important}
.va-crop-hint{display:flex;align-items:center;gap:6px}
.va-crop-hint i{color:#e11d48}
html.dark .va-insert-bar button{background:#151b25;border-color:#2a3342}
html.dark .va-insert-bar button:hover{border-color:#e11d48;color:#f4708f}

/* ── the On-screen list (Multiframe's Layers list, per current moment) ── */
.va-ph-on{margin-top:0}
.va-on-t{font-size:10.5px;color:var(--muted,#94a3b8);font-weight:600}
.va-onscreen{display:flex;flex-direction:column;gap:4px}
.va-onscreen[hidden]{display:none}
.va-on-row{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;cursor:pointer;
  border:1px solid transparent;font-size:12px}
.va-on-row:hover{background:rgba(0,0,0,.04)}
.va-on-row.sel{border-color:#e11d48;background:rgba(225,29,72,.06)}
.va-on-row.off .va-on-name,.va-on-row.off>i{opacity:.4;text-decoration:line-through}
.va-on-row>i{width:14px;text-align:center;font-size:11px;color:var(--muted,#64748b);flex:none}
.va-on-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.va-on-clip{font-size:10px;color:var(--muted,#94a3b8);white-space:nowrap}
.va-on-eye{border:0;background:none;cursor:pointer;color:var(--muted,#94a3b8);padding:2px 4px;font-size:11px;flex:none}
.va-on-eye:hover{color:#e11d48}
.va-on-empty{font-size:11.5px;color:var(--muted,#94a3b8);padding:8px 2px;line-height:1.5}
html.dark .va-on-row:hover{background:rgba(255,255,255,.05)}
html.dark .va-on-row.sel{background:rgba(225,29,72,.14)}

/* ── full-width timeline layout: columns scroll internally, never into it ──
   ⚠ `height:0;min-height:100%` is load-bearing, not decoration. A stretched
   grid item still SIZES its row, so a tall panel grew the row and shoved the
   timeline down the page; height:0 drops each side column's contribution to
   row sizing to nothing (the row is then sized by the STAGE alone) and
   min-height:100% stretches it back into that row.
   It replaces `max-height:calc(min(56vh,540px) + 150px)` — a viewport GUESS at
   the stage height, which at a 820px-tall window computed 609px against a
   716px stage: the panels were cut 107px short of the canvas they sit beside,
   and the cut-off content had no reachable scroller. The scroll now lives on
   the LISTS, so the header/tabs stay pinned and only the content moves.

   ⚠⚠ NO `overscroll-behavior:contain` HERE — IT IS WHAT MADE THESE PANELS FEEL
   DEAD. `contain` blocks scroll CHAINING, so a wheel over a panel that has
   nothing left to scroll is SWALLOWED: the panel cannot move and the page is
   forbidden from moving either. Most of the time these panels fit their
   content exactly (measured: 0px spare on both), so every wheel over the left
   or right column did nothing at all, while the middle scrolled the page
   normally — exactly "the left and right side does not scroll".
   Default chaining is what these want: scroll the panel while it has somewhere
   to go, then hand the rest to the page. `contain` is for a trap you WANT,
   like the EDM canvas you are panning — not for a side panel on a long page. */
@media (min-width:901px){
  .va-col-onscreen,.va-col-insp{height:0;min-height:100%;max-height:none;overflow:hidden}
  .va-onscreen,.va-insp{flex:1;min-height:0;overflow-y:auto;
    padding-right:4px;scrollbar-width:thin}
}
.va-tl-empty{display:flex;align-items:center;gap:8px;color:#8fa0bd;font-size:12px;padding:14px 12px}
.va-tl-empty b{color:#c7d3ea}
/* clip blocks host their own ⋮ menu */
.va-tl-b{position:relative}
.va-tl-mb{position:absolute;top:4px;right:4px;border:0;border-radius:6px;width:20px;height:20px;line-height:1;
  display:none;align-items:center;justify-content:center;cursor:pointer;font-size:10px;
  background:rgba(255,255,255,.14);color:#dbe4f5}
.va-tl-b:hover .va-tl-mb,.va-tl-b.sel .va-tl-mb{display:inline-flex}
.va-tl-mb:hover{background:rgba(255,255,255,.28)}
/* the element dots share the block's top-right corner with the ⋮ — slide them
   clear the moment it appears, or they sit under the button you are aiming at */
.va-tl-b:hover .va-tl-lay,.va-tl-b.sel .va-tl-lay{right:29px}
/* ⚠ THE CLIP MENU IS A FIXED LAYER, NOT A CHILD OF THE BLOCK.
   It opens BELOW the block, and .va-tl-b, .va-tl-track AND .va-tl-scroll all
   clip (overflow:hidden / overflow-y:hidden) — so appending it to the block
   drew a menu that was 100% invisible and made the ⋮ look dead. Positioned in
   JS from the button's rect; flips above when the viewport bottom is close. */
/* ⚠ right:auto is required, not tidiness — the base .va-menu pins right:0, and
   a fixed box anchored on BOTH edges stretches to the viewport (measured: 1418px
   wide instead of 234). JS sets top/left, so the other two must be released. */
.va-menu-float{position:fixed;right:auto;bottom:auto;z-index:1200}

/* ── the track is the SCRUB surface ──
   Press anywhere and drag: the playhead follows. Nothing inside it may swallow
   that gesture, which is why reordering lives in the ← → row BELOW instead. */
.va-tl-track{cursor:ew-resize}
.va-tl-b[data-clip]{user-select:none}
body.va-scrubbing,body.va-scrubbing .va-tl-track,body.va-scrubbing .va-tl-b{cursor:ew-resize}
body.va-scrubbing{user-select:none}
/* the playhead thickens while you hold it, so the thing you are dragging is
   unmistakably the thing that is moving */
body.va-scrubbing .va-playhead{width:3px}

/* ── order controls: one ← → pair under each clip ── */
/* ⚠ the 3px padding MIRRORS .va-tl-track's — the blocks compute their widths
   inside that padding, so without it every pair drifts left of the clip it
   belongs to (measured: 3px at the first clip, tapering across the row). */
.va-tl-ctrls{display:flex;gap:3px;width:100%;margin-top:5px;padding:0 3px;box-sizing:border-box}
.va-tl-ctrls[hidden]{display:none}
/* container-type is what makes the @container rule below fire — without it the
   query never matches and the number never hides. overflow:hidden is the
   backstop: a very short clip clips its own controls rather than spilling them
   over its neighbour's. Zoom the timeline to work on cuts that tight. */
.va-tl-ord{box-sizing:border-box;flex:0 0 auto;min-width:0;display:flex;align-items:center;
  justify-content:center;gap:2px;container-type:inline-size;overflow:hidden}
.va-tl-ord-gap{visibility:hidden}
.va-ord-b{display:grid;place-items:center;width:22px;height:20px;flex:none;padding:0;
  border:1px solid #2b3550;border-radius:6px;background:#1c2740;color:#9db4d4;font-size:9px;
  cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.va-ord-b:hover:not(:disabled){background:#e11d48;border-color:#e11d48;color:#fff}
.va-ord-b:disabled{opacity:.3;cursor:default}
.va-ord-n{min-width:14px;text-align:center;font-size:9px;font-weight:900;color:#5f7099;
  font-variant-numeric:tabular-nums}
/* below ~74px a clip cannot hold two buttons and a number — drop the number
   first, then let the pair centre on its own */
@container (max-width:74px){ .va-ord-n{display:none} }
html.dark .va-ord-b{background:#141b28;border-color:#2a3446}
.va-btn-danger{color:#c22036;border-color:#f0c6cd}
.va-btn-danger:hover{background:#fdeef0}
html.dark .va-btn-danger{color:#f08b8b;border-color:#4d2529}
html.dark .va-btn-danger:hover{background:#2b1618}
.va-tl-head .va-linkbtn{color:#9db4d4;text-decoration-color:#3b4c6e}
.va-tl-head .va-linkbtn:hover{color:#dbe4f5}

/* ── depth drag in the On-screen list ── */
.va-on-row[draggable="true"]{cursor:grab}
.va-on-grip{color:#c3ccda;font-size:9px;flex:none;width:10px;text-align:center}
.va-on-row:hover .va-on-grip{color:#8b96a8}
.va-on-row.dragging{opacity:.45}
.va-on-row.drop-above{box-shadow:0 -2px 0 0 #e11d48}
.va-on-row.drop-below{box-shadow:0 2px 0 0 #e11d48}
html.dark .va-on-grip{color:#3a4557}

/* ── filmstrip blocks ── */
.va-tl-b.has-strip{background-size:100% 100%,auto 100%;background-repeat:no-repeat,repeat-x;
  background-position:left center;border-color:#33415e;color:#eef2fa}
.va-tl-b.has-strip .va-tl-nm{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.va-tl-b.has-strip .va-tl-nm b{background:rgba(255,255,255,.2);color:#fff}
.va-tl-b.has-strip i{color:#cfd9ec;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.va-tl-b.has-strip:hover{border-color:#4d5f85}
/* ⚠ THE SELECTED BLOCK, and it has to be fought for. This rule (0,3,0) beats
   the .va-tl-b.sel one above, so whatever is set there is irrelevant here —
   and a 1px outset ring was all this used to be, which is why the selection
   read as "not highlighted" against a photo. Inset shadows paint ABOVE the
   filmstrip and BELOW the text: a 2px ring plus a wash over the footage. */
.va-tl-b.has-strip.sel{border-color:#e11d48;
  box-shadow:inset 0 0 0 2px #e11d48, inset 0 0 0 999px rgba(225,29,72,.34)}
.va-tl-b.has-strip.sel .va-tl-nm b{background:#e11d48;color:#fff}
.va-tl-b.has-strip.sel i{color:#ffe0e6}

/* ── transport: sound · split · delete · solo (2026-08-01) ──────────────
   .is-on marks an active toggle (sound on, solo on) — same accent the
   play button uses, so an engaged toggle reads at a glance. */
.va-ib.is-on{background:var(--blue,#1159da);border-color:var(--blue,#1159da);color:#fff}
.va-ib.is-on:hover{filter:brightness(1.06)}
.va-ib:disabled{opacity:.42;cursor:not-allowed}
.va-ib-txt{width:auto;padding:0 10px;font-size:11.5px;font-weight:700}

/* solo view: the single block fills the row, so it reads as a focused view
   rather than one clip that happens to be very wide */
.va-tl-solo{position:relative}
/* ⚠️ INSIDE the track, not above it: #vaTlTrack is overflow:hidden, so a
   label at top:-17px is clipped away and never paints. And light blue, not
   --blue — this rides the navy timeline in BOTH themes, where #1159da
   reads at 2.9:1, too faint for a 9.5px cap. */
.va-tl-solo::after{content:"SOLO — one clip shown";position:absolute;right:6px;top:5px;z-index:4;
  padding:2px 7px;border-radius:999px;background:rgba(9,15,30,.78);
  font-size:9.5px;font-weight:800;letter-spacing:.04em;color:#7fa8ff;pointer-events:none}
html.dark .va-ib.is-on{background:#2f6bff;border-color:#2f6bff}

/* ── CUT TOOL — marked range on the timeline (2026-08-01) ───────────────
   The band sits ABOVE the clip blocks but must not eat the pointer: the
   track is the gesture surface, and a band that swallowed the press would
   make the range impossible to adjust once drawn. */
.va-cutband{position:absolute;top:0;bottom:0;background:rgba(225,72,58,.28);
  border-left:2px solid #e1483a;border-right:2px solid #e1483a;pointer-events:none;z-index:3}
.va-cutband::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(225,72,58,.16) 0 6px,transparent 6px 12px)}
/* crosshair while the tool is armed, so the mode is obvious before you press */
.va-tl-track.va-cutting{cursor:crosshair}
.va-tl-track.va-cutting .va-tl-b{cursor:crosshair}

/* ⚠️ the bar lives INSIDE .va-tl-wrap, which is dark navy in BOTH themes —
   so its text is light unconditionally. An --ink default here reads as
   near-black on navy and the sentence vanishes (measured 1.1:1). */
.va-cutbar{display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px 12px;
  border:1px solid #e1483a;border-radius:10px;background:rgba(225,72,58,.13)}
.va-cutbar-txt{font-size:12px;color:#eef2f8}
.va-cutbar-txt b{font-variant-numeric:tabular-nums;color:#fff}
.va-cutbar-go{background:#e1483a;border-color:#e1483a;color:#fff}
.va-cutbar-go:hover{filter:brightness(1.06)}
.va-cutbar .va-linkbtn{color:#ffb3ab}
/* where footage was cut OUT of a clip. The block simply gets shorter, so
   without a mark the edit leaves no trace on the timeline at all. */
.va-tl-cut{position:absolute;top:0;bottom:0;width:0;z-index:4;pointer-events:auto;
  border-left:2px dashed #ff8f85;transform:translateX(-1px)}
.va-tl-cut::before{content:"";position:absolute;left:-3px;top:50%;width:6px;height:6px;
  margin-top:-3px;border-radius:50%;background:#ff8f85}

/* armed state: the start is marked but the end isn't — a line, not a band */
.va-cutband.is-armed{width:0;border-right:0;border-left:2px dashed #e1483a;background:transparent}
.va-cutband.is-armed::after{content:"";background:none}