export const PORTAL_CSS = `
:root{color-scheme:dark;--bg:#0a0a0d;--panel:#14141a;--panel2:#1a1a22;--line:#232330;--ink:#e8e6e1;--ink2:#b6b6c0;--ink3:#7a7a86;--accent:#ffb454;--good:#5fc792;--danger:#d8556a;--glow:rgba(255,180,84,.06);--font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;--font-display:var(--font-body);--font-wordmark:var(--font-display)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:radial-gradient(ellipse 1200px 600px at 50% -50px,var(--glow),transparent 60%),var(--bg);color:var(--ink);font:14px/1.55 var(--font-body);padding:56px 32px 96px;max-width:1480px;margin:0 auto}
a{color:var(--accent);text-decoration:none}
nav.toc{position:sticky;top:0;z-index:20;backdrop-filter:blur(12px);background:rgba(10,10,13,.78);border-bottom:1px solid var(--line);padding:11px 16px;margin:-56px -32px 30px;display:flex;gap:4px;flex-wrap:wrap;align-items:center;justify-content:center}
nav.toc:empty{display:none}
nav.toc a{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);padding:6px 12px;border-radius:6px}
nav.toc a:hover{color:var(--ink);background:var(--panel)}
header.hero{margin-bottom:28px}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3)}
h1{font-size:50px;font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:10px 0 12px}
.sub{color:var(--ink2);font-size:16px;max-width:820px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:28px 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}
.stat .v{font-size:26px;font-weight:700}.stat .l{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-top:4px}
section{margin-bottom:60px;scroll-margin-top:68px}.section-head{padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:26px}
h2{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);margin-bottom:7px}.section-title{font-size:26px;font-weight:700}.section-sub{color:var(--ink2);font-size:14px;margin-top:7px;max-width:820px}
.hero-video,.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.hero-video{padding:22px;margin:26px 0}.hero-video video{width:100%;aspect-ratio:16/9;display:block;background:#000;border-radius:12px}
.final-meta{display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center;margin-top:16px;padding:0 6px;color:var(--ink3);font-size:12px;font-family:ui-monospace,"SF Mono",monospace}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card video,.card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#000}.card img{cursor:zoom-in}.card audio{width:100%;margin-top:8px}
.meta{padding:12px 15px}.num{color:var(--accent);font-family:ui-monospace,monospace;font-size:10px;font-weight:700;letter-spacing:.12em}.title{font-size:14px;font-weight:600;margin-top:4px}.who{color:var(--ink3);font-size:11px;margin-top:5px;overflow-wrap:anywhere}
.review-controls,.client-controls{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.review-btn,.client-btn{background:#0c0c11;border:1px solid var(--line);color:var(--ink);padding:6px 12px;border-radius:7px;font-size:11px;font-weight:600;cursor:pointer}
.review-btn.approve[aria-pressed=true],.client-btn.approve[aria-pressed=true]{background:rgba(95,199,146,.16);color:var(--good)}
.review-btn.regenerate[aria-pressed=true],.client-btn.decline[aria-pressed=true]{background:rgba(216,85,106,.16);color:var(--danger)}
.review-note,.client-note{flex:1;background:#0c0c11;border:1px solid var(--line);color:var(--ink);padding:6px 12px;border-radius:7px;font-size:11px;min-width:180px}
.hud{position:sticky;bottom:16px;margin-top:30px;background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:12px 18px;display:flex;gap:16px;align-items:center;box-shadow:0 12px 32px rgba(0,0,0,.55);font-size:13px}
.hud button{background:var(--accent);border:1px solid var(--accent);color:#0a0a0d;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:700;margin-left:auto}
.dl-btn{display:inline-block;margin-top:10px;padding:6px 12px;border:1px solid rgba(255,180,84,.3);border-radius:6px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.color-state{display:inline-flex;gap:6px;align-items:center;margin-top:6px;padding:3px 9px;border:1px solid var(--line);border-radius:999px;font-size:10px}
.cs-swatch{width:11px;height:11px;border-radius:50%;border:1px solid rgba(255,255,255,.25);flex:0 0 auto}
.cs-label{font-weight:700;letter-spacing:.04em;color:var(--ink)}
.cs-id{font-family:ui-monospace,"SF Mono",monospace;font-size:9px;color:var(--ink3)}
.scene-contract{border-top:1px solid var(--line);padding:12px 15px;display:flex;flex-direction:column;gap:12px}
.contract-block{display:flex;flex-direction:column;gap:6px}
.contract-label{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.contract-row{display:flex;gap:8px;align-items:baseline;font-family:ui-monospace,"SF Mono",monospace;font-size:11px;line-height:1.5}
.contract-k{flex:0 0 46px;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:9px;padding-top:1px}
.contract-v{flex:1;color:var(--ink2);overflow-wrap:anywhere;white-space:pre-wrap}
.ref-slots{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.ref-slot{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-family:ui-monospace,"SF Mono",monospace;font-size:10px}
.ref-role{color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:9px}
.ref-slot-label{color:var(--ink2)}
.ref-status{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:1px 7px;border-radius:999px;border:1px solid var(--line)}
.ref-status.ref-ready{color:var(--good);background:rgba(95,199,146,.14);border-color:rgba(95,199,146,.4)}
.ref-status.ref-pending{color:var(--accent);background:rgba(255,180,84,.12);border-color:rgba(255,180,84,.4)}
.ref-bind{color:var(--ink3);overflow-wrap:anywhere}
.ref-bind.ref-unbound{color:var(--danger)}
.scene-refs{display:flex;gap:8px;flex-wrap:wrap}
.scene-refs .scene-ref{width:64px;height:64px;aspect-ratio:1/1;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:zoom-in;background:#000}
/* Voice design: one cloned-voice row per cast character — a videoAssetId pill, a
   label, and a playable <audio> so the operator can hear the voice before spend. */
.voice-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.voice-label{color:var(--ink2);font-family:ui-monospace,"SF Mono",monospace;font-size:10px;flex:0 1 auto}
.voice-row audio{flex:1;min-width:200px;height:32px}
.va-pill{padding:1px 8px;border-radius:999px;background:rgba(168,118,255,.16);border:1px solid rgba(168,118,255,.45);color:#b48cff}
/* Exact submit JSON: collapsed by default; a monospace block when opened. */
.json-wrap{border:1px solid var(--line);border-radius:8px;background:#0c0c11;overflow:hidden}
.json-wrap summary{cursor:pointer;padding:8px 12px;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);list-style:none}
.json-wrap summary::-webkit-details-marker{display:none}
.json-wrap summary::before{content:"▸ ";color:var(--accent)}
.json-wrap[open] summary::before{content:"▾ "}
.json-wrap pre{margin:0;padding:0 12px 12px;font-family:ui-monospace,"SF Mono",monospace;font-size:10px;line-height:1.5;color:var(--ink2);white-space:pre-wrap;overflow-wrap:anywhere}
.soundtrack-player{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:22px;padding:14px 18px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.soundtrack-player .soundtrack-label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.soundtrack-player audio{flex:1;min-width:240px;height:34px}
.lb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:9999;display:flex;align-items:center;justify-content:center;cursor:zoom-out}.lb-stage{max-width:92vw;max-height:92vh;text-align:center}.lb-stage img{max-width:92vw;max-height:84vh;display:block;margin:auto;border-radius:8px}.lb-cap{color:var(--ink2);font-size:13px;margin-top:12px}
footer{margin-top:72px;padding-top:26px;border-top:1px solid var(--line);color:var(--ink3);font-size:12px;text-align:center}
@media(max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){body{padding:42px 18px 80px}.grid{grid-template-columns:1fr}h1{font-size:36px}}
/* Aspect-aware media sizing: portrait projects render tall cards + a centered portrait hero, not a letterboxed landscape box. */
body[data-aspect="9:16"] .card video,body[data-aspect="9:16"] .card img{aspect-ratio:9/16}
body[data-aspect="9:16"] .hero-video video{aspect-ratio:9/16;width:auto;max-width:100%;max-height:80vh;margin:0 auto}
body[data-aspect="1:1"] .card video,body[data-aspect="1:1"] .card img{aspect-ratio:1/1}
body[data-aspect="1:1"] .hero-video video{aspect-ratio:1/1;width:auto;max-width:100%;max-height:80vh;margin:0 auto}
/* PER-ASSET orientation (probed at discovery) beats the project-level default above:
   a 9:16 deliverable in a 16:9 project still renders portrait. Exact ratios arrive
   as inline aspect-ratio styles; these classes pin the bucket + hero constraints. */
.card video.orient-portrait,.card img.orient-portrait{aspect-ratio:9/16;width:auto;max-width:100%;max-height:520px;margin:0 auto;object-fit:contain}
.card video.orient-square,.card img.orient-square{aspect-ratio:1/1}
.card video.orient-landscape,.card img.orient-landscape{aspect-ratio:16/9}
.hero-video video.orient-portrait{aspect-ratio:9/16;width:auto;max-width:100%;max-height:80vh;margin:0 auto}
.hero-video video.orient-square{aspect-ratio:1/1;width:auto;max-width:100%;max-height:70vh;margin:0 auto}
/* Unified Review surface: Decide|Compare tabs + an editor↔client mode toggle. Both
   control sets render per card; CSS shows only the active mode's set + HUD. */
.review-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 26px}
.review-tab{background:#0c0c11;border:1px solid var(--line);color:var(--ink2);padding:7px 16px;border-radius:8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.review-tab[aria-selected=true]{background:var(--panel2);color:var(--ink);border-color:var(--accent)}
.review-mode{margin-left:auto;display:flex;gap:6px;align-items:center;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.review-mode button{background:#0c0c11;border:1px solid var(--line);color:var(--ink2);padding:6px 12px;border-radius:7px;font-size:11px;font-weight:600;cursor:pointer}
.review-mode button[aria-pressed=true]{background:rgba(255,180,84,.14);color:var(--accent);border-color:var(--accent)}
.tab-panel[hidden]{display:none}
body[data-review-mode=editor] .client-controls,body[data-review-mode=editor] #client-hud{display:none}
body[data-review-mode=client] .review-controls,body[data-review-mode=client] #review-hud{display:none}
/* Per-card created/downloaded date. */
.card-date{color:var(--accent);font-weight:600;opacity:.9;font-family:ui-monospace,"SF Mono",monospace;font-size:10px;margin-top:5px}
/* ── Media-review viewer: unified lightbox, keyboard nav, filters, frame-grab ── */
.card{position:relative}
.lb-expand{position:absolute;top:10px;right:10px;z-index:5;background:rgba(10,10,13,.72);border:1px solid var(--line);color:var(--ink);width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:14px;line-height:1}
.lb-expand:hover{border-color:var(--accent);color:var(--accent)}
.hero-video .lb-expand{top:32px;right:32px}
.card.kb-selected{outline:2px solid var(--accent);outline-offset:2px}
.media-filter{display:flex;gap:8px;margin:0 0 26px;flex-wrap:wrap}
.media-filter button{background:#0c0c11;border:1px solid var(--line);color:var(--ink2);padding:7px 16px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.media-filter button[aria-pressed=true]{background:rgba(255,180,84,.14);color:var(--accent);border-color:var(--accent)}
.lb-overlay{flex-direction:column;cursor:default;background:rgba(4,4,6,.97)}
.lb-overlay[hidden]{display:none}
.lb-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;width:100%;position:relative;overflow:hidden}
.lb-stage img,.lb-stage video{max-width:92vw;max-height:72vh;border-radius:8px;background:#000;display:block}
.lb-stage img.lb-zoomed{cursor:grab;max-width:none;max-height:none}
.lb-btn{position:absolute;background:rgba(20,20,26,.82);border:1px solid var(--line);color:var(--ink);border-radius:10px;cursor:pointer;font-size:22px;width:44px;height:44px;z-index:3}
.lb-btn:hover{border-color:var(--accent);color:var(--accent)}
.lb-close{top:18px;right:18px}.lb-prev{left:14px;top:50%;transform:translateY(-50%)}.lb-next{right:14px;top:50%;transform:translateY(-50%)}
.lb-bar{display:flex;gap:14px;align-items:center;padding:10px 16px 4px;color:var(--ink2);font-size:12px;width:100%;max-width:92vw;justify-content:center;flex-wrap:wrap;margin:0 auto}
.lb-count{font-family:ui-monospace,"SF Mono",monospace;color:var(--accent);font-weight:700;flex:0 0 auto}
.lb-actions{display:flex;gap:8px;align-items:center}
.lb-btn2{background:#0c0c11;border:1px solid var(--line);color:var(--ink);padding:5px 12px;border-radius:7px;font-size:11px;font-weight:600;cursor:pointer;text-transform:none}
.lb-btn2[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}
.lb-btn2:disabled{opacity:.4;cursor:not-allowed}
a.lb-btn2{color:var(--accent)}
.lb-strip{display:flex;gap:6px;padding:8px 16px 16px;overflow-x:auto;max-width:92vw;margin:0 auto}
.lb-strip img,.lb-strip .lb-thumb-video{width:64px;height:40px;object-fit:cover;border-radius:6px;border:2px solid transparent;cursor:pointer;flex:0 0 auto;background:#000}
.lb-strip .lb-thumb-video{display:flex;align-items:center;justify-content:center;color:var(--ink3);border-color:var(--line);font-size:11px;font-family:ui-monospace,monospace}
.lb-strip .on{border-color:var(--accent)}
.lb-toast{position:fixed;left:50%;top:13%;transform:translateX(-50%);background:rgba(20,20,26,.94);border:1px solid var(--accent);color:var(--ink);padding:8px 18px;border-radius:999px;font-size:13px;z-index:10000}
.lb-toast[hidden]{display:none}
#kb-help{position:fixed;inset:0;background:rgba(0,0,0,.86);z-index:10001;display:flex;align-items:center;justify-content:center}
#kb-help[hidden]{display:none}
.kb-card{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:26px 30px;max-width:580px;width:92vw;max-height:84vh;overflow:auto}
.kb-card h3{font-size:15px;margin-bottom:14px}
.kb-grid{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;font-size:12.5px;color:var(--ink2)}
.kb-grid kbd{background:#0c0c11;border:1px solid var(--line);border-radius:5px;padding:1px 7px;font-family:ui-monospace,monospace;font-size:11px;color:var(--ink);white-space:nowrap}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
/* ── Award pass: editorial type, motion, texture, brand chrome ── */
::selection{background:var(--accent);color:#0a0a0d}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#26262f;border-radius:5px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#34343f}
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:10002;pointer-events:none}
.grain{position:fixed;inset:0;pointer-events:none;z-index:9990;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E")}
body[data-mode=preview] h1{font-size:clamp(48px,6.6vw,92px);letter-spacing:-.03em;font-family:var(--font-display)}
body[data-mode=preview]{counter-reset:sec}
body[data-mode=preview] section[data-toc]{counter-increment:sec}
body[data-mode=preview] section[data-toc] .section-head h2::before{content:counter(sec,decimal-leading-zero) " · ";color:var(--accent);letter-spacing:.1em}
body[data-mode=preview] .section-title{font-size:30px;font-family:var(--font-display)}
body[data-mode=preview] .card{transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .45s,box-shadow .45s}
body[data-mode=preview] .card:hover{transform:translateY(-4px);border-color:#34343f;box-shadow:0 18px 44px rgba(0,0,0,.5)}
body[data-mode=preview] .card img,body[data-mode=preview] .card video{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
body[data-mode=preview] .card:hover img,body[data-mode=preview] .card:hover video{transform:scale(1.025)}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.brand-bar{display:flex;align-items:center;gap:16px;margin:0 0 38px}
.brand-bar img{height:36px;width:auto;display:block}
.brand-wordmark{font-family:var(--font-wordmark);font-size:19px;font-weight:700;letter-spacing:.34em;text-transform:uppercase}
.brand-bar .brand-for{margin-left:auto;color:var(--ink3);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-family:ui-monospace,"SF Mono",monospace}
.hero .tagline{margin-top:16px;font-size:20px;line-height:1.45;color:var(--ink2);font-family:var(--font-display);font-style:italic;max-width:720px}
.status-chip{display:inline-flex;align-items:center;gap:7px;margin-left:14px;padding:3px 12px;border:1px solid var(--line);border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);vertical-align:2px}
.status-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.status-chip.st-approved{color:var(--good);border-color:rgba(95,199,146,.4)}
.status-chip.st-approved::before{background:var(--good)}
#brand-book .swatch-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:30px}
.swatch{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.swatch .sw{height:88px}
.swatch .sw-meta{padding:10px 12px}
.swatch .sw-role{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.swatch .sw-name{font-size:12px;font-weight:600;margin-top:3px}
.swatch .sw-hex{font-family:ui-monospace,"SF Mono",monospace;font-size:10px;color:var(--ink3);margin-top:2px;text-transform:uppercase}
.type-specimens{display:flex;flex-direction:column;gap:10px;margin-bottom:30px}
.type-specimen{display:flex;align-items:baseline;gap:18px;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:16px 20px}
.type-specimen .ts-level{flex:0 0 110px;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-family:ui-monospace,monospace}
.type-specimen .ts-sample{font-size:24px;line-height:1.2}
.type-specimen .ts-font{margin-left:auto;color:var(--ink3);font-size:10px;font-family:ui-monospace,monospace;flex:0 0 auto}
.tagline-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tagline-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.tagline-card .tg-kind{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.tagline-card .tg-line{font-size:15px;margin-top:7px;font-family:var(--font-display)}
@media(max-width:1100px){#brand-book .swatch-grid{grid-template-columns:repeat(3,1fr)}.tagline-list{grid-template-columns:1fr}}
/* Cast cards: matched still or a monogram fallback. */
.cast-mono{width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--panel2),var(--panel));color:var(--accent);font-family:var(--font-display);font-size:52px;font-weight:700}
/* Document cards (story sheets / contact sheets): an Open affordance, not a raw path. */
a.doc-thumb{width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#101016,#101016 12px,#14141a 12px,#14141a 24px);border-bottom:1px solid var(--line);color:var(--accent);font-size:13px;font-weight:700;letter-spacing:.04em;text-align:center;padding:0 16px}
a.doc-thumb:hover{color:var(--ink);background:var(--panel2)}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}body[data-mode=preview] .card,body[data-mode=preview] .card img,body[data-mode=preview] .card video{transition:none}body[data-mode=preview] .card:hover{transform:none}body[data-mode=preview] .card:hover img,body[data-mode=preview] .card:hover video{transform:none}}
/* Per-scene Image/Video toggle: the card's data-mode picks which media shows.
   Default (no data-mode / image): keyframe visible, clip hidden. data-mode=video
   flips them. The toggle bar sits over the media. */
.scene-media{position:relative}
.scene-media .clip{display:none;width:100%}
.card[data-mode=video] .scene-media>img{display:none}
.card[data-mode=video] .scene-media .clip{display:block}
.scene-toggle{position:absolute;top:8px;right:8px;display:inline-flex;gap:0;border-radius:8px;overflow:hidden;background:rgba(10,10,14,.72);border:1px solid var(--line);z-index:2}
.scene-toggle-btn{appearance:none;border:0;background:transparent;color:var(--muted,#9aa);font:600 12px/1 system-ui,sans-serif;padding:6px 10px;cursor:pointer}
.scene-toggle-btn+.scene-toggle-btn{border-left:1px solid var(--line)}
.scene-toggle-btn[aria-pressed=true]{background:var(--accent,#5af);color:#0a0a0e}
.scene-toggle-btn:hover{color:var(--ink,#fff)}
/* ── Live run dashboard (data-mode=run) ── */
.run-live{display:inline-flex;align-items:center;gap:6px;margin-left:12px;font-size:11px;color:var(--ink3);letter-spacing:.04em;text-transform:none}
.run-dot{width:6px;height:6px;border-radius:50%;background:var(--good);display:inline-block;animation:run-pulse 2s ease-in-out infinite}
@keyframes run-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.run-summary{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.run-chip{font-size:11px;font-weight:700;letter-spacing:.04em;padding:4px 11px;border-radius:999px;border:1px solid var(--line);color:var(--ink2);background:var(--panel)}
.run-chip-done{color:var(--good);border-color:rgba(95,199,146,.4);background:rgba(95,199,146,.1)}
.run-chip-rendering{color:var(--accent);border-color:rgba(255,180,84,.4);background:rgba(255,180,84,.1)}
.run-chip-failed{color:var(--danger);border-color:rgba(216,85,106,.4);background:rgba(216,85,106,.1)}
.run-chip-pending{color:var(--ink3)}
.run-links{margin-top:12px;font-size:12px;color:var(--ink3)}
.run-card{border-top:3px solid var(--line)}
.run-card-done{border-top-color:var(--good)}
.run-card-rendering{border-top-color:var(--accent)}
.run-card-failed{border-top-color:var(--danger)}
.run-card-alarm{border:1.5px solid var(--danger);box-shadow:0 0 0 1px rgba(216,85,106,.3)}
.run-card-head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line)}
.run-gen{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.run-badge{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 9px;border-radius:999px;border:1px solid var(--line);color:var(--ink2)}
.run-badge-done{color:var(--good);background:rgba(95,199,146,.14);border-color:rgba(95,199,146,.4)}
.run-badge-rendering{color:var(--accent);background:rgba(255,180,84,.12);border-color:rgba(255,180,84,.4);animation:run-pulse 2.4s ease-in-out infinite}
.run-badge-failed{color:var(--danger);background:rgba(216,85,106,.12);border-color:rgba(216,85,106,.4)}
.run-badge-pending,.run-badge-unknown{color:var(--ink3)}
.run-job{margin-left:auto;font:10px/1 ui-monospace,Menlo,monospace;color:var(--ink3);background:var(--panel2);padding:2px 6px;border-radius:4px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.run-clip video,.run-frame img{width:100%;display:block;max-height:220px;object-fit:cover;background:#000}
.run-error{margin:0 14px 10px;padding:8px 11px;font:11px/1.5 ui-monospace,Menlo,monospace;color:var(--danger);background:rgba(216,85,106,.08);border:1px solid rgba(216,85,106,.3);border-radius:7px;word-break:break-word}
.contract-alarm{margin:10px 14px 0;padding:9px 12px;background:rgba(216,85,106,.1);border:1px solid var(--danger);border-radius:8px;display:flex;flex-direction:column;gap:3px}
.contract-alarm-head{color:var(--danger);font-weight:800;font-size:11.5px;letter-spacing:.02em}
.contract-alarm-fields{color:var(--danger);font-size:10.5px;font-family:ui-monospace,Menlo,monospace;opacity:.9}
.run-actions{display:flex;gap:8px;padding:0 14px 12px}
.run-copy{background:var(--panel2);border:1px solid var(--line);color:var(--ink2);font-size:11px;font-weight:700;padding:5px 11px;border-radius:7px;cursor:pointer}
.run-copy:hover{border-color:var(--accent);color:var(--accent)}
table.run-log{width:100%;border-collapse:collapse}
table.run-log td{padding:6px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink2)}
table.run-log tr:last-child td{border-bottom:none}
.run-log-ts{font:11px/1 ui-monospace,Menlo,monospace;color:var(--ink3);white-space:nowrap;width:78px}
.run-log-type{color:var(--ink);font-weight:600}
.run-log-detail{color:var(--ink3);font-size:11px}
`;

export const PORTAL_JS = `
(function(){
'use strict';
var REDUCE=window.matchMedia&&matchMedia('(prefers-reduced-motion: reduce)').matches;
var SPEEDS=[0.25,0.5,1,1.5,2,4];
var items=[];var sel=-1;var lb=null;var lbIdx=-1;var lastFocus=null;var toastTimer=null;
var zoomed=false;var panX=0,panY=0,dragging=false,dragSX=0,dragSY=0;

function buildToc(){const toc=document.getElementById('toc');if(!toc)return;document.querySelectorAll('section[data-toc]').forEach(sec=>{if(!sec.id)return;const a=document.createElement('a');a.href='#'+sec.id;a.textContent=sec.dataset.toc||sec.id;toc.appendChild(a);});}
function initDownloads(){document.querySelectorAll('[data-downloadable][src]').forEach(el=>{const src=el.getAttribute('src');if(!src)return;const cap=el.closest('.card,.hero-video')?.querySelector('.meta,.final-meta')||el.parentElement;const a=document.createElement('a');a.href=src;a.download='';a.className='dl-btn';a.textContent='Download';cap?.appendChild(a);});}

function store(k,v){var key='vclawPortal:'+location.pathname+':'+k;try{if(arguments.length>1){localStorage.setItem(key,v);return v;}return localStorage.getItem(key);}catch(e){return null;}}
function isTyping(e){var t=e.target;return !!(t&&(t.tagName==='INPUT'||t.tagName==='TEXTAREA'||t.tagName==='SELECT'||t.isContentEditable));}
function escAttr(s){return String(s).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;');}

/* ── per-scene Image/Video toggle ──
   setPortalMode(btn,mode) flips the toggle button's card to data-mode=<mode>:
   'image' shows the keyframe and PAUSES the clip; 'video' shows + plays the clip.
   Wired by initSceneToggles (no per-card inline scripts). */
function setPortalMode(btn,mode){
  var card=btn.closest('.card');if(!card)return;
  card.setAttribute('data-mode',mode);
  card.querySelectorAll('.scene-toggle-btn').forEach(function(b){b.setAttribute('aria-pressed',b.getAttribute('data-portal-mode')===mode?'true':'false');});
  var vid=card.querySelector('.scene-media .clip');
  if(!vid)return;
  if(mode==='video'){try{vid.play().catch(function(){});}catch(e){vid.load();}}
  else{try{vid.pause();}catch(e){}}
}
function initSceneToggles(){document.querySelectorAll('.scene-toggle-btn[data-portal-mode]').forEach(function(btn){btn.addEventListener('click',function(){setPortalMode(btn,btn.getAttribute('data-portal-mode'));});});}

/* ── playlist: every lightboxable image + every card/hero video, in DOM order ── */
function collectItems(){
  items=[];
  document.querySelectorAll('.hero-video video[data-downloadable],.card video[data-downloadable],img[data-lightbox-group]').forEach(function(el){
    var host=el.closest('.card,.hero-video');
    var title=host&&host.querySelector('.title');
    var cap=el.dataset.lbCaption||el.getAttribute('alt')||(title?title.textContent:'')||el.getAttribute('src')||'';
    var idx=items.length;
    items.push({el:el,host:host,type:el.tagName==='VIDEO'?'video':'image',src:el.getAttribute('src'),caption:cap,id:(host&&host.dataset.cardId)||('media-'+idx)});
    if(el.tagName==='IMG'){el.addEventListener('click',function(){openLb(idx);});}
  });
}
function addExpandButtons(){
  items.forEach(function(it,i){
    if(it.type!=='video'||!it.host)return;
    var btn=document.createElement('button');btn.type='button';btn.className='lb-expand';btn.title='Open in viewer';btn.setAttribute('aria-label','Open in viewer');btn.textContent='\\u2922';
    btn.addEventListener('click',function(ev){ev.stopPropagation();openLb(i);});
    it.host.appendChild(btn);
  });
}

/* ── lightbox ── */
function ensureLb(){
  if(lb)return lb;
  lb=document.createElement('div');lb.className='lb-overlay';lb.hidden=true;lb.setAttribute('role','dialog');lb.setAttribute('aria-modal','true');lb.tabIndex=-1;
  lb.innerHTML='<button type="button" class="lb-btn lb-close" title="Close (Esc)" aria-label="Close">\\u00d7</button>'
    +'<button type="button" class="lb-btn lb-prev" title="Previous (\\u2190)" aria-label="Previous">\\u2039</button>'
    +'<button type="button" class="lb-btn lb-next" title="Next (\\u2192)" aria-label="Next">\\u203a</button>'
    +'<div class="lb-stage"></div>'
    +'<div class="lb-bar"><span class="lb-count"></span><span class="lb-cap"></span><span class="lb-actions">'
    +'<button type="button" class="lb-btn2 lb-grab" title="Grab current frame as PNG (G)">Frame</button>'
    +'<button type="button" class="lb-btn2 lb-speed" title="Playback speed (J / L)">1\\u00d7</button>'
    +'<button type="button" class="lb-btn2 lb-loop" title="Loop playback" aria-pressed="false">Loop</button>'
    +'<a class="lb-btn2 lb-dl" download title="Download (D)">Download</a>'
    +'</span></div>'
    +'<div class="lb-strip"></div><div class="lb-toast" hidden></div>';
  lb.querySelector('.lb-close').addEventListener('click',closeLb);
  lb.querySelector('.lb-prev').addEventListener('click',function(){step(-1);});
  lb.querySelector('.lb-next').addEventListener('click',function(){step(1);});
  lb.querySelector('.lb-grab').addEventListener('click',grabFrame);
  lb.querySelector('.lb-speed').addEventListener('click',function(){cycleSpeed(1);});
  lb.querySelector('.lb-loop').addEventListener('click',function(){var v=stageVideo();if(!v)return;v.loop=!v.loop;this.setAttribute('aria-pressed',v.loop?'true':'false');});
  lb.addEventListener('click',function(e){if(e.target===lb||e.target.classList.contains('lb-stage'))closeLb();});
  var strip=lb.querySelector('.lb-strip');
  strip.innerHTML=items.map(function(it,i){
    return it.type==='image'
      ?'<img data-i="'+i+'" src="'+escAttr(it.src)+'" alt="">'
      :'<div class="lb-thumb-video" data-i="'+i+'">\\u25b6 '+(i+1)+'</div>';
  }).join('');
  strip.addEventListener('click',function(e){var t=e.target.closest('[data-i]');if(t)showItem(parseInt(t.getAttribute('data-i'),10));});
  document.body.appendChild(lb);
  return lb;
}
function stageVideo(){return lb?lb.querySelector('.lb-stage video'):null;}
function lbOpen(){return !!(lb&&!lb.hidden);}
function openLb(i){ensureLb();lastFocus=document.activeElement;lb.hidden=false;showItem(i);lb.focus();}
function closeLb(){if(!lb)return;var v=stageVideo();if(v)v.pause();lb.hidden=true;lb.querySelector('.lb-stage').innerHTML='';try{history.replaceState(null,'',location.pathname+location.search);}catch(e){}if(lastFocus&&lastFocus.focus)lastFocus.focus();}
function showItem(i){
  if(!items.length)return;
  lbIdx=(i+items.length)%items.length;
  var it=items[lbIdx];var stage=lb.querySelector('.lb-stage');
  zoomed=false;panX=0;panY=0;
  var old=stageVideo();if(old)old.pause();
  if(it.type==='video'){
    stage.innerHTML='<video controls autoplay playsinline preload="metadata" src="'+escAttr(it.src)+'"></video>';
  }else{
    stage.innerHTML='<img src="'+escAttr(it.src)+'" alt="'+escAttr(it.caption)+'">';
    var img=stage.querySelector('img');
    img.addEventListener('click',function(e){e.stopPropagation();toggleZoom();});
    img.addEventListener('pointerdown',function(e){if(!zoomed)return;dragging=true;dragSX=e.clientX-panX;dragSY=e.clientY-panY;img.setPointerCapture(e.pointerId);});
    img.addEventListener('pointermove',function(e){if(!dragging)return;panX=e.clientX-dragSX;panY=e.clientY-dragSY;applyZoom();});
    img.addEventListener('pointerup',function(){dragging=false;});
  }
  lb.querySelector('.lb-count').textContent=(lbIdx+1)+' / '+items.length;
  lb.querySelector('.lb-cap').textContent=it.caption;
  var dl=lb.querySelector('.lb-dl');dl.href=it.src;dl.setAttribute('download','');
  var isVid=it.type==='video';
  lb.querySelector('.lb-grab').style.display=isVid?'':'none';
  lb.querySelector('.lb-speed').style.display=isVid?'':'none';
  lb.querySelector('.lb-loop').style.display=isVid?'':'none';
  lb.querySelector('.lb-speed').textContent='1\\u00d7';
  lb.querySelector('.lb-loop').setAttribute('aria-pressed','false');
  lb.querySelectorAll('.lb-strip [data-i]').forEach(function(t){t.classList.toggle('on',parseInt(t.getAttribute('data-i'),10)===lbIdx);});
  var on=lb.querySelector('.lb-strip .on');if(on&&on.scrollIntoView)on.scrollIntoView({inline:'center',block:'nearest',behavior:REDUCE?'auto':'smooth'});
  try{history.replaceState(null,'','#asset-'+encodeURIComponent(it.id));}catch(e){}
  store('last',it.id);
}
function step(d){showItem(lbIdx+d);}
function toggleZoom(){var img=lb.querySelector('.lb-stage img');if(!img)return;zoomed=!zoomed;if(!zoomed){panX=0;panY=0;}applyZoom();}
function applyZoom(){var img=lb.querySelector('.lb-stage img');if(!img)return;img.classList.toggle('lb-zoomed',zoomed);img.style.transform=zoomed?'translate('+panX+'px,'+panY+'px) scale(2)':'';}
function toast(msg){if(!lb)return;var t=lb.querySelector('.lb-toast');t.textContent=msg;t.hidden=false;clearTimeout(toastTimer);toastTimer=setTimeout(function(){t.hidden=true;},1400);}
function cycleSpeed(dir){
  var v=stageVideo();if(!v)return;
  var i=SPEEDS.indexOf(v.playbackRate);if(i<0)i=SPEEDS.indexOf(1);
  i=Math.min(SPEEDS.length-1,Math.max(0,i+dir));
  v.playbackRate=SPEEDS[i];
  var label=SPEEDS[i]+'\\u00d7';
  lb.querySelector('.lb-speed').textContent=label;
  toast(label);
}
function frameStep(frames){var v=stageVideo();if(!v)return;v.pause();v.currentTime=Math.max(0,v.currentTime+frames/24);}
function grabFrame(){
  var v=stageVideo();if(!v)return;
  try{
    var c=document.createElement('canvas');c.width=v.videoWidth;c.height=v.videoHeight;
    if(!c.width||!c.height)throw new Error('no frame');
    c.getContext('2d').drawImage(v,0,0);
    c.toBlob(function(b){
      if(!b){grabFail();return;}
      var a=document.createElement('a');a.href=URL.createObjectURL(b);
      a.download=(items[lbIdx].id||'frame')+'-'+Math.round(v.currentTime*1000)+'ms.png';
      a.click();setTimeout(function(){URL.revokeObjectURL(a.href);},2000);
      toast('Frame saved');
    },'image/png');
  }catch(err){grabFail();}
}
function grabFail(){toast('Frame grab unavailable for this source');var b=lb.querySelector('.lb-grab');if(b){b.disabled=true;b.title='Frame grab unavailable (codec/origin)';}}

/* ── page-level selection ring + filters + help ── */
function visibleItems(){return items.filter(function(it){return !(it.host&&it.host.hidden);});}
function moveSel(d){
  var vis=visibleItems();if(!vis.length)return;
  var cur=sel>=0?items[sel]:null;
  var vi=cur?vis.indexOf(cur):-1;
  vi=(vi+d+vis.length)%vis.length;
  setSel(items.indexOf(vis[vi]));
}
function setSel(i){
  if(sel>=0&&items[sel]&&items[sel].host)items[sel].host.classList.remove('kb-selected');
  sel=i;
  var it=items[sel];if(!it)return;
  if(it.host){it.host.classList.add('kb-selected');it.host.scrollIntoView({block:'center',behavior:REDUCE?'auto':'smooth'});}
}
function initFilters(){
  var chips=document.querySelectorAll('[data-filter-chip]');if(!chips.length)return;
  function apply(f){
    chips.forEach(function(c){c.setAttribute('aria-pressed',c.dataset.filterChip===f?'true':'false');});
    document.querySelectorAll('.card[data-media-kind]').forEach(function(card){card.hidden=!(f==='all'||card.dataset.mediaKind===f);});
    document.querySelectorAll('section').forEach(function(sec){
      var cards=sec.querySelectorAll('.card');if(!cards.length)return;
      var vis=0;cards.forEach(function(c){if(!c.hidden)vis++;});
      sec.hidden=vis===0;
    });
    store('filter',f);
  }
  chips.forEach(function(c){c.addEventListener('click',function(){apply(c.dataset.filterChip);});});
  var saved=store('filter');
  apply(saved==='video'||saved==='image'?saved:'all');
}
function toggleHelp(){var h=document.getElementById('kb-help');if(h)h.hidden=!h.hidden;}

function onKey(e){
  if(isTyping(e))return;
  var help=document.getElementById('kb-help');
  if(e.key==='?'){toggleHelp();e.preventDefault();return;}
  if(help&&!help.hidden){if(e.key==='Escape'){help.hidden=true;e.preventDefault();}return;}
  if(lbOpen()){
    var v=stageVideo();
    switch(e.key){
      case 'Escape':closeLb();break;
      case 'ArrowRight':case ']':step(1);break;
      case 'ArrowLeft':case '[':step(-1);break;
      case ' ':case 'k':case 'K':if(v){v.paused?v.play():v.pause();}break;
      case 'j':case 'J':cycleSpeed(-1);break;
      case 'l':case 'L':cycleSpeed(1);break;
      case ',':frameStep(e.shiftKey?-10:-1);break;
      case '.':frameStep(e.shiftKey?10:1);break;
      case 'f':case 'F':if(v&&v.requestFullscreen)v.requestFullscreen();break;
      case 'm':case 'M':if(v)v.muted=!v.muted;break;
      case 'ArrowUp':if(v)v.volume=Math.min(1,v.volume+0.1);break;
      case 'ArrowDown':if(v)v.volume=Math.max(0,v.volume-0.1);break;
      case 'g':case 'G':grabFrame();break;
      case 'd':case 'D':lb.querySelector('.lb-dl').click();break;
      case 'z':case 'Z':toggleZoom();break;
      case 'Tab':{
        var f2=lb.querySelectorAll('button:not([disabled]),a[href],video');
        if(!f2.length)break;
        var first=f2[0],last=f2[f2.length-1];
        if(e.shiftKey&&document.activeElement===first){last.focus();e.preventDefault();}
        else if(!e.shiftKey&&document.activeElement===last){first.focus();e.preventDefault();}
        break;
      }
      default:return;
    }
    e.preventDefault();
    return;
  }
  if(e.key==='ArrowRight'||e.key===']'){moveSel(1);e.preventDefault();}
  else if(e.key==='ArrowLeft'||e.key==='['){moveSel(-1);e.preventDefault();}
  else if(e.key==='Enter'&&sel>=0&&!(items[sel].host&&items[sel].host.hidden)){openLb(sel);e.preventDefault();}
}

function initDeepLink(){
  var m=/^#asset-(.+)$/.exec(location.hash||'');
  var id=m?decodeURIComponent(m[1]):store('last');
  if(!id)return;
  for(var i=0;i<items.length;i++){
    if(items[i].id===id){if(m)openLb(i);else setSel(i);return;}
  }
}

/* ── award pass: scroll-reveal + reading progress (preview showcase only) ──
   Progressive enhancement: .reveal is added HERE (never in markup) so content
   stays visible when JS is unavailable. Disabled under prefers-reduced-motion. */
function initReveals(){
  if(document.body.dataset.mode!=='preview')return;
  if(REDUCE||!('IntersectionObserver' in window))return;
  var els=document.querySelectorAll('section[data-toc],.hero-video,.card');
  var obs=new IntersectionObserver(function(entries){
    entries.forEach(function(en){if(en.isIntersecting){en.target.classList.add('in');obs.unobserve(en.target);}});
  },{threshold:0.08,rootMargin:'0px 0px -4% 0px'});
  els.forEach(function(el){el.classList.add('reveal');obs.observe(el);});
}
function initScrollProgress(){
  if(document.body.dataset.mode!=='preview')return;
  var bar=document.createElement('div');bar.className='scroll-progress';document.body.appendChild(bar);
  var ticking=false;
  function update(){var h=document.documentElement;var max=h.scrollHeight-h.clientHeight;bar.style.width=(max>0?(h.scrollTop/max)*100:0)+'%';ticking=false;}
  addEventListener('scroll',function(){if(!ticking){ticking=true;requestAnimationFrame(update);}},{passive:true});
  update();
}

function init(){
  buildToc();initDownloads();collectItems();addExpandButtons();initFilters();initReveals();initScrollProgress();initSceneToggles();
  document.addEventListener('keydown',onKey);
  initDeepLink();
}
if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',init);else init();
})();
`;

export const PORTAL_EDITOR_JS = `
(function(){
function setExclusive(btn,selector){const pressed=btn.getAttribute('aria-pressed')==='true';const card=btn.closest('[data-card-kind]');if(card)card.querySelectorAll(selector).forEach(b=>b.setAttribute('aria-pressed','false'));btn.setAttribute('aria-pressed',pressed?'false':'true');}
function refreshEditorHud(){const a=document.getElementById('rs-approved');const r=document.getElementById('rs-regen');if(a)a.textContent=document.querySelectorAll('.review-btn.approve[aria-pressed=true]').length+' approved';if(r)r.textContent=document.querySelectorAll('.review-btn.regenerate[aria-pressed=true]').length+' to regenerate';}
function initEditor(){document.querySelectorAll('.review-btn').forEach(btn=>btn.addEventListener('click',()=>{setExclusive(btn,'.review-btn');refreshEditorHud();}));const copy=document.getElementById('copy-decisions-btn');if(copy)copy.addEventListener('click',async()=>{const lines=[];document.querySelectorAll('[data-card-kind]').forEach(card=>{const action=card.querySelector('.review-btn[aria-pressed=true]');if(!action)return;const note=card.querySelector('.review-note');lines.push('- '+card.dataset.cardKind+'#'+card.dataset.cardId+': '+action.dataset.reviewAction+(note&&note.value?' — '+note.value:''));});const block='VIDEOCLAW_REVIEW_DECISIONS\\n'+(lines.join('\\n')||'(no decisions selected)')+'\\n';try{await navigator.clipboard.writeText(block);copy.textContent='Copied';setTimeout(()=>copy.textContent='Copy Review Decisions',1800);}catch{console.log(block);copy.textContent='See console';}});refreshEditorHud();}
if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',initEditor);else initEditor();
})();
`;

export const PORTAL_CLIENT_JS = `
(function(){
function setExclusive(btn,selector){const pressed=btn.getAttribute('aria-pressed')==='true';const card=btn.closest('[data-card-kind]');if(card)card.querySelectorAll(selector).forEach(b=>b.setAttribute('aria-pressed','false'));btn.setAttribute('aria-pressed',pressed?'false':'true');}
function initClient(){document.querySelectorAll('.client-btn').forEach(btn=>btn.addEventListener('click',()=>{setExclusive(btn,'.client-btn');}));const copy=document.getElementById('copy-client-feedback-btn');if(copy)copy.addEventListener('click',async()=>{const lines=[];document.querySelectorAll('[data-card-kind]').forEach(card=>{const action=card.querySelector('.client-btn[aria-pressed=true]');const note=card.querySelector('.client-note');if(action||note?.value)lines.push('- '+card.dataset.cardKind+'#'+card.dataset.cardId+': '+(action?.dataset.clientAction||'comment')+(note&&note.value?' — '+note.value:''));});const block='VIDEOCLAW_CLIENT_FEEDBACK\\n'+(lines.join('\\n')||'(no feedback entered)')+'\\n';try{await navigator.clipboard.writeText(block);copy.textContent='Copied';setTimeout(()=>copy.textContent='Copy Feedback',1800);}catch{console.log(block);copy.textContent='See console';}});}
if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',initClient);else initClient();
})();
`;

export const PORTAL_REVIEW_TABS_JS = `
(function(){
function initReviewBar(){
  const tabs=document.querySelectorAll('.review-tab');
  tabs.forEach(t=>t.addEventListener('click',()=>{
    tabs.forEach(x=>x.setAttribute('aria-selected',x===t?'true':'false'));
    document.querySelectorAll('.tab-panel').forEach(p=>{p.hidden=p.dataset.tab!==t.dataset.tab;});
  }));
  const modeBtns=document.querySelectorAll('.review-mode button');
  modeBtns.forEach(b=>b.addEventListener('click',()=>{
    document.body.setAttribute('data-review-mode',b.dataset.mode);
    modeBtns.forEach(x=>x.setAttribute('aria-pressed',x===b?'true':'false'));
  }));
}
if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',initReviewBar);else initReviewBar();
})();
`;

/** Run dashboard: wire the per-card copy-command buttons (re-roll / approve)
 * through the clipboard, falling back to the console when clipboard is blocked
 * (file://). No server round-trip — the on-disk project stays the source of
 * truth, exactly like the editor/client copy blocks. */
export const PORTAL_RUN_JS = `
(function(){
function initRunCopy(){
  document.querySelectorAll('.run-copy[data-copy]').forEach(function(btn){
    btn.addEventListener('click',async function(){
      var cmd=btn.getAttribute('data-copy')||'';
      var label=btn.textContent;
      try{await navigator.clipboard.writeText(cmd);btn.textContent='Copied';}
      catch(e){console.log(cmd);btn.textContent='See console';}
      setTimeout(function(){btn.textContent=label;},1600);
    });
  });
}
if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',initRunCopy);else initRunCopy();
})();
`;