/* Area: storyboards (S25 storyboard sequence, S26 new sequence) in the unified shell (docs/SHELL-SPEC.md §6
   Boards; mockup docs/mockups/unified-shell/2-studio-everywhere.html#boards). Owned by the storyboards area.
   Loaded on every page by base.html, so every rule is scoped under .pg-storyboards.
   - List (#listcol): .sb-seqs, the storyboard pack's sequences.
   - Work (#center): #sb-head (.colbar) and .shots (rows).
   - Stage (#side): #sb-stagehead (.colbar), .sb-view (.stageview with #sb-frame, a .frame.wide), .sb-body
     (.colbody: details, refs, missing / covered, frame tools) and .sb-ft (.stageft: the timeline).
   Shared classes (colbar, stageview, stageft, badge, status, btn, chip, menu, sec-h) come from shell.css and
   components.css; area-only pieces are .shot, .tagc, .det, .tl, .ar, .plan, .ftool, .combo. */

/* ---------- List column: the storyboard pack's sequences ---------- */
.pg-storyboards .sb-seqs{display:flex;flex-direction:column;gap:2px}
.pg-storyboards .sb-seq{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center;width:100%;padding:7px 8px;border:0;border-radius:var(--radius-ctl);background:transparent;color:var(--text-2);font:inherit;text-align:left;text-decoration:none;cursor:pointer;min-width:0}
.pg-storyboards .sb-seq:hover{background:var(--panel);color:var(--text)}
.pg-storyboards .sb-seq.active{background:var(--raised);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.pg-storyboards .sb-seq .th{width:34px;height:34px;border-radius:7px;background:var(--panel);border:1px solid var(--line);overflow:hidden;display:grid;place-items:center;color:var(--muted)}
.pg-storyboards .sb-seq .th img{width:100%;height:100%;object-fit:cover}
.pg-storyboards .sb-seq .tx{min-width:0}
.pg-storyboards .sb-seq .tx b{display:block;font-weight:500;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-storyboards .sb-seq .tx > span{display:block;font:11px var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-storyboards .sb-seq.add{color:var(--muted)}
.pg-storyboards .sb-seq.add:hover{color:var(--text)}
.pg-storyboards .sb-seq.add .th{background:transparent;border-style:dashed}
.pg-storyboards .sb-newseq{margin:0}

/* ---------- Work column: the sequence bar (#sb-head) ---------- */
.pg-storyboards .sb-head{row-gap:6px}
.pg-storyboards .sb-head .crumb{flex:1 0 100%;line-height:1.35}
.pg-storyboards .sb-head .crumb a{color:var(--muted);text-decoration:none}
.pg-storyboards .sb-head .crumb a:hover{color:var(--text)}
.pg-storyboards .sb-head .crumb .sep{margin:0 6px;opacity:.6}
.pg-storyboards .sb-head h1{flex:1 1 0%}
.pg-storyboards .sb-head form{display:contents}
.pg-storyboards .sb-play[aria-pressed="true"]{background:var(--lime-soft);border-color:var(--lime-line);color:var(--lime)}
.pg-storyboards .sb-meta{flex:1 0 100%;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-width:0}
.pg-storyboards .ready{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pg-storyboards .ready a.status{text-decoration:none}
.pg-storyboards .ready a.status:hover{filter:brightness(1.18)}

/* ---------- Work column: the shot rows (#sb-shots) ---------- */
.pg-storyboards .sbw{position:relative;container:sb / inline-size;min-width:0}
.pg-storyboards .shots{display:flex;flex-direction:column;gap:8px}
.pg-storyboards .shot{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:start;padding:8px;border:1px solid var(--line);border-radius:var(--radius-box);background:var(--panel);color:inherit;text-decoration:none;min-width:0;transition:border-color var(--t-fast) ease,background var(--t-fast) ease}
.pg-storyboards .shot:hover{border-color:var(--line-2)}
.pg-storyboards .shot.on{border-color:var(--lime-line);box-shadow:inset 0 0 0 1px var(--lime-line);background:var(--raised)}
.pg-storyboards .shot .th{aspect-ratio:16/9;border-radius:6px;overflow:hidden;position:relative;background:var(--stage-warm);display:grid;place-items:center}
.pg-storyboards .shot .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-storyboards .shot .th.nofr{background:var(--planned-stripes);box-shadow:inset 0 0 0 1px var(--line-2)}
.pg-storyboards .shot .noprev{display:flex;flex-direction:column;align-items:center;gap:3px;padding:0 6px;font-size:10.5px;line-height:1.2;color:var(--muted);text-align:center}
.pg-storyboards .shot .noprev .i{width:14px;height:14px}
.pg-storyboards .shot .m{display:flex;flex-direction:column;gap:5px;min-width:0;padding-top:1px}
.pg-storyboards .shot .t{display:flex;gap:7px;align-items:baseline;min-width:0}
.pg-storyboards .shot .no{font:600 11.5px var(--mono);color:var(--lime);flex:none}
.pg-storyboards .shot .cap{font-size:12.5px;line-height:1.38;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0}
.pg-storyboards .shot .cap.none{color:var(--muted)}
.pg-storyboards .shot .d{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font:500 11px var(--mono);color:var(--muted);min-width:0}
.pg-storyboards .shot .cov{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.pg-storyboards .shot .cov .i{width:11px;height:11px}
.pg-storyboards .shot .chips{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.pg-storyboards .cov-ok{color:var(--pass)}
.pg-storyboards .cov-miss{color:var(--warn)}
.pg-storyboards .cov-rev,.pg-storyboards .cov-gen{color:var(--violet-text)}
.pg-storyboards .cov-none,.pg-storyboards .cov-plan,.pg-storyboards .cov-wip{color:var(--muted)}

/* Panels drawn from the editor (storyboards-in-chat plan §4.7): the state over a row's thumb while a panel is
   queued or drawing (or didn't draw), the work bar's "Drawing 2 panels" pill and the Frame tools' busy line. */
.pg-storyboards .shot .panel-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0 6px;font:500 10.5px/1.2 var(--mono);text-align:center;color:var(--violet-text);background:color-mix(in srgb,var(--panel) 72%,transparent)}
.pg-storyboards .shot .panel-ov .spinner{width:14px;height:14px;border-top-color:var(--violet)}
.pg-storyboards .shot .panel-ov.p-queued{color:var(--muted)}
.pg-storyboards .shot .panel-ov.p-queued .spinner{animation-duration:1.6s;border-top-color:var(--line-2)}
.pg-storyboards .shot .panel-ov.p-failed{color:var(--warn)}
.pg-storyboards .shot .panel-ov .i{width:12px;height:12px}
.pg-storyboards .sb-drawing{white-space:nowrap}
.pg-storyboards .ftool form{display:contents}
.pg-storyboards .ftool .sb-busy{cursor:default;color:var(--violet-text);gap:8px}
.pg-storyboards .ftool .sb-busy .spinner{width:12px;height:12px;border-top-color:var(--violet)}
.pg-storyboards .ftool .btn .k{margin-left:auto;font:500 10.5px var(--mono);color:var(--muted)}
.pg-storyboards .anim-noframe .ic .spinner{width:22px;height:22px;border-width:2.5px;border-top-color:var(--violet)}
.pg-storyboards .anim-fail{display:inline-flex;align-items:center;gap:5px;margin:4px 0 0;font:500 11px var(--mono);color:var(--warn)}
.pg-storyboards .anim-fail .i{width:12px;height:12px}
.pg-storyboards .sb-poll{display:none}

/* Asset chips: in the shot rows and over the stage's frame (status classes from presenters.status_display). */
.pg-storyboards .tagc{display:inline-block;vertical-align:middle;max-width:100%;height:20px;padding:0 7px;border:1px solid var(--line-2);border-radius:var(--radius-xs);background:var(--surface);color:var(--text-2);font:500 10.5px/18px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-storyboards .tagc .i{width:11px;height:11px;margin-right:4px;vertical-align:-2px}
.pg-storyboards .tagc.st-approved{color:var(--pass);border-color:var(--pass-line);background:var(--pass-soft)}
.pg-storyboards .tagc.st-missing{color:var(--warn);border-color:var(--warn-line);border-style:dashed;background:var(--warn-soft)}
.pg-storyboards .tagc.st-review{color:var(--violet-text);border-color:var(--violet-line);background:var(--violet-soft)}
.pg-storyboards .tagc.st-generating{color:var(--violet-text);border-color:var(--violet-line)}
.pg-storyboards .tagc.st-planned{border-style:dashed}

/* ---------- Stage (#side): the bar (#sb-stagehead) ---------- */
.pg-storyboards .sb-stagehead h2{flex:none;font-family:var(--mono);font-size:14px}
.pg-storyboards .sb-stagehead .cap{flex:1 1 0%}
.pg-storyboards .sb-stagehead form{display:contents}
.pg-storyboards .sb-move{display:inline-flex;align-items:center;gap:6px;flex:none}
.pg-storyboards .sb-move .icon-btn{width:28px;height:28px}
.pg-storyboards .sb-move .icon-btn:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
.pg-storyboards .sb-move .pos{font:500 11px var(--mono);color:var(--muted);white-space:nowrap}
.pg-storyboards .sb-stagehead .del{color:var(--muted)}
.pg-storyboards .sb-stagehead .del:hover{color:var(--fail);background:var(--fail-soft)}
.pg-storyboards .sb-stagehead .sheet-close{align-self:center}

/* ---------- Stage: the viewer (.sb-view) with the frame (#sb-frame) and the asset chips ---------- */
.pg-storyboards .sb-view{flex:1 0 auto;padding:52px 16px 40px}
/* The shot's assets: one line over the viewer (scrolls sideways, fading out at the edge, when there are many). */
.pg-storyboards .sb-view .sb-chips{right:16px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.pg-storyboards .sb-chips::-webkit-scrollbar{display:none}
.pg-storyboards .sb-chips .tagc{flex:none;max-width:none;background:var(--overlay);backdrop-filter:blur(4px)}
.pg-storyboards .sb-chips .tagc.st-approved{background:var(--pass-soft)}
.pg-storyboards .sb-chips .tagc.st-missing{background:var(--warn-soft)}
.pg-storyboards .sb-chips .tagc.st-review{background:var(--violet-soft)}
/* The player hosts the frame: the stage's 16:9 box (.frame.wide) plus the transport under it. */
.pg-storyboards .sb-view > #sb-frame{width:min(92%,980px);min-width:0;display:flex;flex-direction:column;gap:8px}
.pg-storyboards .sb-view .anim{width:100%}
.pg-storyboards .sb-view .anim .frame.wide{width:100%}
.pg-storyboards .sb-sample{margin:0;text-align:center}
.pg-storyboards .anim-upload .upf{width:min(100%,360px)}

/* ---------- Stage: the body (details, refs, missing / covered, frame tools) ---------- */
/* position:relative keeps absolutely positioned bits (.sr-only labels) inside the scrolling column; otherwise
   their containing block is .app and they stretch the document (scrollIntoView then scrolls the page). */
.pg-storyboards .sb-body{position:relative;container:sbstage / inline-size}
.pg-storyboards .sb-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
.pg-storyboards .sb-aside{display:flex;flex-direction:column;gap:18px;min-width:0}
.pg-storyboards .sb-body h2.sec-h{font-size:10.5px}
.pg-storyboards .sb-det .sec-h .r{display:inline-flex}
@container sbstage (min-width:700px){
  .pg-storyboards .sb-cols{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
}

/* Details: each field is a box; the Action textarea sits over its highlight mirror. */
.pg-storyboards .det{display:flex;flex-direction:column;gap:10px;min-width:0}
.pg-storyboards .det .f{border:1px solid var(--line);border-radius:var(--radius-box);background:var(--panel);padding:9px 12px;min-width:0;transition:border-color var(--t-fast) ease}
.pg-storyboards .det .f:hover{border-color:var(--line-2)}
.pg-storyboards .det .f:focus-within{border-color:var(--lime-line)}
.pg-storyboards .det .l{font:600 10.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;display:flex;align-items:center;gap:6px;min-width:0}
.pg-storyboards .det .l label{cursor:text}
.pg-storyboards .det .meta-r{margin-left:auto;text-transform:none;letter-spacing:0;font:500 11px var(--mono);color:var(--muted);white-space:nowrap}
.pg-storyboards .det .ed{display:none}
.pg-storyboards .det .f:focus-within .ed{display:inline}
.pg-storyboards .det textarea{display:block;width:100%;min-width:0;border:0;background:transparent;padding:0;margin:0;font:13px/1.45 var(--ui);color:var(--text);resize:none;outline:none;field-sizing:content;min-height:1.45em;overflow:auto}
.pg-storyboards .det textarea::placeholder{color:var(--muted)}
.pg-storyboards .det .f:focus-within textarea{min-height:2.9em}
.pg-storyboards .hlw{display:grid;min-width:0}
.pg-storyboards .hlw > *{grid-area:1/1;min-width:0}
.pg-storyboards .hlw textarea{color:transparent;caret-color:var(--text);overflow:hidden}
.pg-storyboards .hlw textarea:focus{color:var(--text)}
.pg-storyboards .hlw:focus-within .mirror{visibility:hidden}
.pg-storyboards .mirror{white-space:pre-wrap;overflow-wrap:break-word;font:13px/1.45 var(--ui);color:var(--text);pointer-events:none}
.pg-storyboards mark.nm{background:transparent;color:inherit;border-radius:3px;text-decoration:underline dotted var(--muted) 1px;text-underline-offset:3px}
.pg-storyboards mark.nm.miss{background:var(--warn-soft);color:var(--warn);box-shadow:0 0 0 2px var(--warn-soft);text-decoration:underline dashed var(--warn) 1.5px;text-underline-offset:3px}
.pg-storyboards mark.nm.ok{background:var(--pass-soft);color:var(--pass);box-shadow:0 0 0 2px var(--pass-soft);text-decoration:none}
.pg-storyboards mark.nm.rev{background:var(--violet-soft);color:var(--violet-text);box-shadow:0 0 0 2px var(--violet-soft);text-decoration:none}
/* Camera framing · movement read as mono text and open as selects. */
.pg-storyboards .cam{display:inline-flex;align-items:center;gap:4px}
.pg-storyboards .cam select{appearance:none;field-sizing:content;background:transparent;border:0;border-bottom:1px dotted var(--line-2);border-radius:0;color:var(--text-2);font:500 11px var(--mono);padding:0 1px;cursor:pointer;max-width:120px}
.pg-storyboards .cam select:hover,.pg-storyboards .cam select:focus-visible{color:var(--text);border-bottom-color:var(--lime-line);outline:none}
.pg-storyboards .cam option{background:var(--raised);color:var(--text)}
.pg-storyboards .det .f-row{display:flex;align-items:center;gap:10px}
.pg-storyboards .det .f-row .l{margin:0}
.pg-storyboards .det .dur{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:500 12px var(--mono);color:var(--muted)}
.pg-storyboards .det .dur input{width:76px;height:28px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font:500 12px var(--mono);padding:0 8px;text-align:right}
.pg-storyboards .det .dur input:focus{outline:none;border-color:var(--lime-line);box-shadow:0 0 0 3px var(--lime-soft)}
.pg-storyboards .det .dur input:invalid{border-color:var(--fail)}
.pg-storyboards .save{font:500 11px var(--mono);color:var(--muted);display:inline-flex;align-items:center;gap:4px;letter-spacing:0;text-transform:none}
.pg-storyboards .save.on{color:var(--pass)}
.pg-storyboards .save.err{color:var(--fail)}
.pg-storyboards .sb-alert{display:flex;align-items:flex-start;gap:7px;padding:8px 10px;border-radius:var(--radius-ctl);border:1px solid var(--fail-line);background:var(--fail-soft);color:var(--fail);font-size:12px;line-height:1.4}
.pg-storyboards .sb-alert .i{margin-top:2px}

/* Refs in the shot ("Assets in S02") and the "+ Link asset or type a name…" combobox. */
.pg-storyboards .arl{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.pg-storyboards .ar{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);border-radius:var(--radius-box);background:var(--panel);min-width:0;position:relative}
.pg-storyboards .ar .th{width:44px;height:44px;border-radius:var(--radius-sm);overflow:hidden;flex:none;background:var(--stage-warm);display:grid;place-items:center;color:var(--muted)}
.pg-storyboards .ar .th img{width:100%;height:100%;object-fit:contain}
.pg-storyboards .ar .tx{min-width:0;flex:1}
.pg-storyboards .ar .n{display:block;font-weight:600;font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-storyboards .ar a.n:hover{text-decoration:underline;text-underline-offset:2px}
.pg-storyboards .ar .r{font:500 10.5px/1.4 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.pg-storyboards .ar .pin{display:inline-flex;vertical-align:-1px;color:var(--text-2)}
.pg-storyboards .ar .s{flex:none}
.pg-storyboards .ar.miss{border-style:dashed;border-color:var(--warn-line);background:transparent}
.pg-storyboards .ar.miss .th{background:var(--warn-soft);color:var(--warn);font:700 16px var(--head)}
.pg-storyboards .ar.gone{border-style:dashed;opacity:.8}
.pg-storyboards .ar .gone-t{color:var(--warn)}
.pg-storyboards .ar .rmf{position:absolute;top:-7px;right:-7px;margin:0}
.pg-storyboards .ar .rm{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--raised-2);border:1px solid var(--line-2);color:var(--text-2);opacity:0;transition:opacity var(--t-fast) ease}
.pg-storyboards .ar .rm:hover{color:var(--fail);border-color:var(--fail-line)}
.pg-storyboards .ar:hover .rm,.pg-storyboards .ar:focus-within .rm,.pg-storyboards .ar .rm:focus-visible{opacity:1}
@media (hover:none) and (pointer:coarse){.pg-storyboards .ar .rm{opacity:1}}

.pg-storyboards .combo-f{position:relative}
.pg-storyboards .combo{display:flex;align-items:center;gap:7px;height:32px;padding:0 8px;border:1px solid transparent;border-radius:var(--radius-ctl);color:var(--muted);transition:border-color var(--t-fast) ease,background var(--t-fast) ease}
.pg-storyboards .combo:hover{border-color:var(--line)}
.pg-storyboards .combo:focus-within{border-color:var(--lime-line);background:var(--panel);box-shadow:0 0 0 3px var(--lime-soft)}
.pg-storyboards .combo input{flex:1;min-width:0;height:100%;background:transparent;border:0;outline:0;color:var(--text);font-size:12.5px}
.pg-storyboards .combo input::placeholder{color:var(--muted)}
.pg-storyboards .ref-menu{position:relative;z-index:30}
.pg-storyboards .ref-menu > .menu{position:absolute;top:4px;left:0;right:0;width:auto;min-width:0;max-width:none}
.pg-storyboards .ref-menu > .sb-alert{margin-top:6px}
.pg-storyboards .ref-menu .it small{overflow-wrap:anywhere}
.pg-storyboards .ref-menu .it:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
.pg-storyboards .ref-menu .as{display:flex;align-items:center;gap:6px;padding:0 8px 6px 44px;font-size:11px;color:var(--muted)}
.pg-storyboards .ref-menu .as select{appearance:none;field-sizing:content;height:22px;padding:0 20px 0 8px;border:1px solid var(--line-2);border-radius:var(--radius-pill);background-color:var(--raised-2);background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 11px) 55%,calc(100% - 7px) 55%;background-size:4px 4px;background-repeat:no-repeat;color:var(--text);font:500 11px var(--mono);cursor:pointer}
.pg-storyboards .ref-menu .as select:focus-visible{outline:none;border-color:var(--lime-line)}
.pg-storyboards .ref-menu .note{padding:8px;font-size:12px;color:var(--muted)}

/* The missing / covered panel. */
.pg-storyboards .plans{display:flex;flex-direction:column;gap:10px}
.pg-storyboards .plan{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius-panel);padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.pg-storyboards .plan h3{font:600 13px/1.35 var(--ui);letter-spacing:0;display:flex;align-items:center;gap:6px}
.pg-storyboards .plan p{font-size:12px;color:var(--muted)}
.pg-storyboards .plan.miss{border-color:var(--lime-line)}
.pg-storyboards .plan.ok{border-color:var(--pass-line)}
.pg-storyboards .plan.ok h3{color:var(--pass)}
.pg-storyboards .plan.tip{border-style:dashed;background:transparent}
.pg-storyboards .plan.wait ul,.pg-storyboards .plan .names{list-style:none;display:flex;flex-direction:column;gap:5px}
.pg-storyboards .plan.wait li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2)}
.pg-storyboards .plan.wait li span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-storyboards .plan .names li{display:flex;align-items:baseline;gap:8px;font-size:12px}
.pg-storyboards .plan .names b{font-weight:600}
.pg-storyboards .plan .names span{margin-left:auto;font:500 10.5px var(--mono);color:var(--muted);text-align:right}
.pg-storyboards .tgt{display:flex;gap:8px;align-items:center;font-size:12px;min-width:0}
.pg-storyboards .tgt select{appearance:none;height:26px;max-width:100%;min-width:0;padding:0 28px 0 10px;border:1px solid var(--line-2);border-radius:var(--radius-pill);background-color:var(--raised);background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;background-size:5px 5px;background-repeat:no-repeat;color:var(--text);font:500 12px var(--ui);cursor:pointer;field-sizing:content}
.pg-storyboards .tgt select:focus-visible{outline:none;border-color:var(--lime-line);box-shadow:0 0 0 3px var(--lime-soft)}
.pg-storyboards .plan .btn.block + .btn.block{margin-top:-2px}

/* Frame tools and the frame upload form. */
.pg-storyboards .ftool{display:grid;grid-template-columns:1fr;gap:6px}
.pg-storyboards .ftool > .btn,.pg-storyboards .ftool form > .btn,.pg-storyboards .ftool summary.btn{justify-content:flex-start;font-size:12px;height:30px;width:100%}
.pg-storyboards .ftool summary .k{margin-left:auto}
.pg-storyboards .upl[open] > summary{border-color:var(--line-2);background:var(--raised-2)}
.pg-storyboards .upl > .upf,.pg-storyboards .upl > .help{margin-top:8px}
.pg-storyboards .upf{display:flex;flex-direction:column;gap:9px;text-align:left;min-width:0}
.pg-storyboards .upf .file input{width:100%;min-width:0;font-size:12px;color:var(--text-2)}
.pg-storyboards .upf .file input::file-selector-button{height:28px;margin-right:10px;padding:0 10px;border-radius:var(--radius-sm);border:1px solid var(--line-2);background:var(--raised);color:var(--text);font:500 12px var(--ui);cursor:pointer}
.pg-storyboards .upf .file input::file-selector-button:hover{background:var(--raised-2)}
.pg-storyboards .upf .ai{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.pg-storyboards .upf .ai legend{float:left;margin-right:4px;font-size:12px;color:var(--text-2)}
.pg-storyboards .upf .ai .chip{height:26px;padding:0 10px;font-size:12px;gap:5px}
.pg-storyboards .upf .ai .chip:has(input:checked){background:var(--lime-soft);border-color:var(--lime-line);color:var(--text)}
.pg-storyboards .upf .ai input{margin:0}
.pg-storyboards .upf-go{display:flex;align-items:center;gap:10px}
.pg-storyboards .upf .help,.pg-storyboards .ftools .help{font-size:11.5px;color:var(--muted)}

/* ---------- Stage: the footer timeline (.sb-ft, #sb-timeline) ---------- */
.pg-storyboards .sb-ft{position:sticky;bottom:0;z-index:4;padding:10px 16px 12px}
.pg-storyboards .sb-ft > .tl{flex:1 1 100%}
.pg-storyboards .tl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.pg-storyboards .tl .segs{flex:1 1 240px;display:flex;gap:3px;height:38px;position:relative;min-width:0}
.pg-storyboards .tl .tseg{position:relative;min-width:0;border-radius:var(--radius-seg);background:var(--raised);border:1px solid var(--line);display:flex;align-items:flex-end;gap:5px;padding:0 6px 3px;overflow:hidden;white-space:nowrap;font:600 10.5px var(--mono);color:var(--text);text-decoration:none;transition:border-color var(--t-fast) ease,box-shadow var(--t-fast) ease}
.pg-storyboards .tl .tseg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72}
.pg-storyboards .tl .tseg .dot,.pg-storyboards .tl .tseg .lb{position:relative;z-index:1}
.pg-storyboards .tl .tseg .lb{min-width:0;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px var(--canvas),0 0 6px var(--canvas)}
.pg-storyboards .tl .tseg .d{font-weight:500;color:var(--text-2)}
.pg-storyboards .tl .tseg:hover{border-color:var(--muted)}
.pg-storyboards .tl .tseg.on{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)}
.pg-storyboards .tl .tseg.playing{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet)}
.pg-storyboards .tl .dot{width:6px;height:6px;margin-bottom:4px;border-radius:50%;flex:none;background:var(--muted)}
.pg-storyboards .t-ok .dot{background:var(--pass)}
.pg-storyboards .t-miss .dot{background:var(--warn)}
.pg-storyboards .t-rev .dot,.pg-storyboards .t-gen .dot{background:var(--violet)}
.pg-storyboards .t-none .dot,.pg-storyboards .t-plan .dot{background:transparent;box-shadow:inset 0 0 0 1px var(--text-2)}
.pg-storyboards .tl .ph{position:absolute;z-index:2;top:-5px;bottom:-5px;width:2px;margin-left:-1px;border-radius:1px;background:var(--lime);pointer-events:none;box-shadow:0 0 0 2px var(--overlay)}
.pg-storyboards .tl .time{font:500 11px var(--mono);color:var(--muted);white-space:nowrap;margin-left:auto}

/* ---------- The animatic player (.anim, islands/animatic.js; storyboards-in-chat plan §4.6, §4.7, §9) ----------
   Shared by the Boards stage and the chat stage, so these rules are not scoped under .pg-storyboards.
   Lifted from the mockup's .player / .screen / .transport / .tseg / .playhead (mockups/storyboards/_src/mock.css).
   Screen: a dark letterbox (#07080B) with the frame box inside at the sequence's aspect (--anim-ar); the image
   layers use object-fit: contain, so a frame is never cropped. Give .anim.fill a definite height and the frame
   box fits the screen on both axes. */
.anim{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;outline:none}
.anim:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-radius:12px}
.anim [data-anim-screen]{position:relative;min-height:0;display:grid;place-items:center;overflow:hidden}
.anim .anim-screen{background:#07080B;border-radius:12px;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.anim-frame{position:relative;width:100%;aspect-ratio:var(--anim-ar,16/9);max-height:100%;background:#07080B;overflow:hidden}
.anim.fill{height:100%;min-height:0}
.anim.fill [data-anim-screen]{flex:1;container-type:size}
.anim.fill .anim-frame{width:min(100cqw,calc(100cqh * (var(--anim-ar,16/9))))}
.anim-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.anim-bottom{z-index:0}
.anim-top{z-index:1}
.anim-black{position:absolute;inset:0;z-index:2;background:#000;opacity:0;pointer-events:none}
.anim-safe{position:absolute;inset:8%;z-index:3;border:1px dashed var(--line-2);border-radius:var(--radius-xs);pointer-events:none}
.anim-noframe{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:8px 16px;text-align:center;background:var(--planned-stripes);box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--text-2);font-size:12.5px;overflow:auto}
.anim-noframe .ic{width:40px;height:40px;border-radius:var(--radius-panel);background:var(--raised-2);display:grid;place-items:center;color:var(--text-2)}
.anim-noframe p{margin:0}
.anim-noframe p b{color:var(--text);font-weight:600}
.anim-spin{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:rgba(7,8,11,.35);pointer-events:none}
.anim-spin .spinner{width:28px;height:28px;border-width:3px}
/* Tags top-left and top-right (solid backgrounds for light frames, §4.9), the caption in the bottom bar. */
.anim-ov{position:absolute;z-index:6;display:flex;gap:6px;flex-wrap:wrap;max-width:calc(100% - 28px);pointer-events:none}
.anim-ov.tl{left:12px;top:12px}
.anim-ov.tr{right:12px;top:12px;justify-content:flex-end}
.anim-tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--radius-xs);font:500 11px var(--mono);border:1px solid var(--overlay-line);color:var(--text);background:rgba(12,14,20,.82);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.anim-caption{position:absolute;z-index:6;left:50%;bottom:14px;transform:translateX(-50%);max-width:min(80%,640px);margin:0;padding:6px 12px;border-radius:8px;border:1px solid var(--overlay-line);background:rgba(12,14,20,.8);color:var(--text);font-size:12.5px;line-height:1.4;text-align:center;pointer-events:none}
.anim-nocap .anim-caption,.anim-noframe-on .anim-caption{display:none}
/* Transport: prev · play (lime circle) · next · time · [Shot 3 of 7] · [Selected shot / Whole sequence] · Loop · Captions · 1× · fullscreen. */
.anim-transport{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.anim-transport .spacer{flex:1}
.anim-btn{width:32px;height:32px;border:1px solid transparent;cursor:pointer}
.anim-btn .i{width:16px;height:16px}
.anim-btn[aria-pressed="true"]{color:var(--lime)}
.anim-play{width:36px;height:36px;border-radius:50%;border:0;padding:0;background:var(--lime);color:var(--lime-ink);display:grid;place-items:center;cursor:pointer;flex:none;transition:box-shadow var(--t-fast) ease,filter var(--t-fast) ease}
.anim-play:hover{filter:brightness(1.06);box-shadow:0 0 0 4px var(--lime-soft)}
.anim-play:active{transform:translateY(1px)}
.anim-play .i{width:16px;height:16px}
.anim-play .pa,.anim.is-playing .anim-play .pl{display:none}
.anim.is-playing .anim-play .pa{display:grid}
.anim-time{font:500 12px var(--mono);color:var(--text-2);margin-left:6px;white-space:nowrap}
.anim-time b{color:var(--text);font-weight:600}
.anim-pos{font:500 11px var(--mono);color:var(--muted);margin-left:8px;white-space:nowrap}
.anim-chip{height:28px;font-size:12.5px;background:transparent}
.anim-chip .i{width:13px;height:13px}
.anim-chip[aria-pressed="true"]{background:var(--lime-soft);border-color:var(--lime-line);color:var(--lime)}
.anim-speed{font-family:var(--mono);min-width:44px;justify-content:center}
.anim-range > button{border:0;background:transparent;font:inherit;cursor:pointer}
.anim-range > button[aria-pressed="true"]{background:var(--raised-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
/* Filmstrip: one thumbnail per shot, width proportional to duration (the island sets the px), lime ring on the
   current one, a lime playhead with a handle (a slider) over it. */
.anim-strip{min-width:0;overflow-x:auto;overflow-y:visible;padding:6px 0 2px}
.anim-segs{position:relative;display:flex;gap:3px;height:46px;min-width:0;touch-action:pan-y}
.anim-seg{position:relative;flex:1 1 24px;min-width:24px;height:100%;padding:0;border:1px solid var(--line-2);border-radius:6px;background:var(--panel);overflow:hidden;cursor:pointer;color:#fff;transition:border-color var(--t-fast) ease,box-shadow var(--t-fast) ease}
.anim-seg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75;pointer-events:none}
.anim-seg .lb{position:absolute;left:4px;bottom:3px;max-width:calc(100% - 8px);padding:0 4px;border-radius:3px;background:rgba(12,14,20,.78);font:600 9.5px var(--mono);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.anim-seg:hover{border-color:var(--muted)}
.anim-seg.on{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)}
.anim-seg.on img{opacity:1}
.anim-ph{position:absolute;z-index:2;top:-6px;bottom:-6px;width:24px;margin-left:-12px;cursor:ew-resize;outline-offset:0}
.anim-ph i{position:absolute;left:11px;top:0;bottom:0;width:2px;border-radius:1px;background:var(--lime);box-shadow:0 0 0 2px rgba(12,14,20,.6)}
.anim-ph i::before{content:"";position:absolute;top:-3px;left:-4px;width:10px;height:6px;border-radius:2px;background:var(--lime)}
.anim.is-scrubbing{cursor:ew-resize;user-select:none}
/* Footer: the version chip, the facts and Export. */
.anim-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0;padding-top:10px;border-top:1px solid var(--line)}
.anim-foot .spacer{flex:1}
.anim-ver{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border:1px solid var(--lime-line);box-shadow:0 0 0 1px var(--lime-line);border-radius:var(--radius-box);background:var(--panel);color:var(--text);font-size:12px}
.anim-ver .th{width:40px;height:24px;border-radius:5px;overflow:hidden;background:var(--raised);display:grid;place-items:center;color:var(--muted);flex:none}
.anim-ver .th img{width:100%;height:100%;object-fit:cover}
.anim-ver b{display:block;font-weight:600}
.anim-ver small{display:block;font:10.5px var(--mono);color:var(--muted);white-space:nowrap}
.anim-facts{display:flex;gap:14px;flex-wrap:wrap;font:11.5px var(--mono);color:var(--muted)}
.anim-facts i{font-style:normal;color:var(--text-2)}
/* Fullscreen (the Fullscreen API on the screen element). */
.anim [data-anim-screen]:fullscreen{width:100%;height:100%;border-radius:0;background:#000;container-type:size}
.anim [data-anim-screen]:fullscreen .anim-frame{width:min(100cqw,calc(100cqh * (var(--anim-ar,16/9))))}
@media (pointer:coarse){
  .anim-btn{width:40px;height:40px}
  .anim-play{width:44px;height:44px}
  .anim-chip{min-height:36px}
  .anim-segs{height:52px}
}

/* ---------- Dialogs ---------- */
.pg-storyboards .sb-am .mlist{display:flex;flex-direction:column;gap:6px}
.pg-storyboards .sb-am .mrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px dashed var(--warn-line);border-radius:var(--radius-box);min-width:0}
.pg-storyboards .sb-am .ck{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer}
.pg-storyboards .sb-am .ck span{min-width:0}
.pg-storyboards .sb-am .ck b{display:block;font-weight:600}
.pg-storyboards .sb-am .ck small{font:500 10.5px var(--mono);color:var(--muted)}
.pg-storyboards .sb-am .mrow select{height:30px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--panel);color:var(--text);padding:0 8px;font-size:12px}
.pg-storyboards .sb-am .pill{margin-left:0}

/* ---------- Width-driven layout ---------- */
@container sb (max-width:400px){
  .pg-storyboards .shot{grid-template-columns:96px minmax(0,1fr);gap:10px}
  .pg-storyboards .shot .chips{flex-wrap:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent)}
  .pg-storyboards .shot .chips .tagc{flex:none}
}
/* Below 980px the stage is a sheet (shell.css): one-line bar, a compact viewer. */
@media (max-width:979px){
  .pg-storyboards .sb-move .pos,.pg-storyboards .sb-stagehead .del .wide{display:none}
  .pg-storyboards .sb-view{padding:44px 12px 30px;min-height:240px}
  .pg-storyboards .tl .tseg .d{display:none}
}
@media (pointer:coarse){
  .pg-storyboards .tl .segs{height:42px}
  .pg-storyboards .sb-move .icon-btn,.pg-storyboards .sb-stagehead .sheet-close{width:40px;height:40px}
  .pg-storyboards .sb-stagehead .del,.pg-storyboards .sb-head .btn{min-height:40px}
  .pg-storyboards .shot{min-height:44px}
}