/* rs-wire:create (Parker 2026-10-18): Create video in the Riverside-style component language.
   Visual spec: .orch/qa/flow-design/riverside-review/create.html (+ create-STATES.md). Functional spec: js/flow-stage.js,
   js/script-doc.js, js/plan-record.js, js/reedit.js, unchanged. Loaded by js/flow-stage.js after css/rs-shell.css.
   Every rule is scoped to #fstage (the Create stage and a planned video's Script / Record / Setup) or to the progress
   panel while that stage is on the page, so Processing, Review and After-review keep their own look.
   Type 20 / 15 / 13 / 12, weights 400 / 500; 12 inside panels, 16 between panels; one periwinkle-deep action per view. */

:root #fstage { --rsc-side: 360px; font: var(--rs-w-reg) var(--rs-fs-body)/1.5 var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx); }
:root #fstage h1, :root #fstage h2, :root #fstage h3, :root #fstage h4, :root #fstage b, :root #fstage strong { font-weight: var(--rs-w-med); }

/* ---------------------------------------------------------------- head: crumb · sub over a 20px working name */
:root #fstage .head.p2-head { margin: 0 0 var(--rs-gap); min-height: 0; padding: 0; }
:root #fstage .head-row { display: flex; align-items: flex-end; gap: 16px; min-width: 0; }
:root #fstage .p2-titlebox { flex: 1; min-width: 0; display: grid; gap: 4px; }
:root #fstage .head.p2-head .head-sub { order: -1; display: flex; align-items: center; gap: 8px; margin: 0; min-height: 16px; font-size: var(--rs-fs-cap); line-height: 16px; color: var(--rs-tx-2); white-space: nowrap; overflow: hidden; }
:root #fstage .head.p2-head .head-sub #headSub { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
:root #fstage .rsc-crumb { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--rs-tx); text-decoration: none; font-size: var(--rs-fs-cap); }
:root #fstage .rsc-crumb:hover { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root #fstage .rsc-crumb svg { color: var(--rs-tx-3); }
:root #fstage .rsc-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--rs-tx-3); flex: none; }
:root #fstage .head.p2-head .head-alt { flex: none; padding: 0; font-size: var(--rs-fs-cap); }
:root #fstage .head.p2-head h1, :root #fstage .head.p2-head h1.long { font-size: var(--rs-fs-title); font-weight: var(--rs-w-med); line-height: 28px; letter-spacing: -.01em; min-height: 28px; margin: 0; display: flex; align-items: center; max-width: none; }
:root #fstage #titleText { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 6px; padding: 0 4px; margin-left: -4px; transition: background var(--rs-t), box-shadow var(--rs-t); outline: none; }
:root #fstage #titleText[role="button"] { cursor: text; }
:root #fstage #titleText[role="button"]:hover, :root #fstage #titleText:focus-visible { background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line); }
:root #fstage #titleText[contenteditable="true"] { background: var(--dk-paper, #fff); box-shadow: var(--rs-ring); text-overflow: clip; }
:root #fstage .p2-acts { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
:root #fstage .p2-cutacts.ghost { display: none; }
/* the ⋯ button: a 40px white disc with a hairline */
:root #fstage .p2-more { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; grid-auto-flow: column; place-content: center; gap: 3px; background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line); color: var(--rs-tx-2); }
:root #fstage .p2-more i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
:root #fstage .p2-more:hover, :root #fstage .p2-more[aria-expanded="true"] { color: var(--rs-tx); box-shadow: inset 0 0 0 1px var(--rs-line-2); }

/* ---------------------------------------------------------------- the progress pill and its step sheet */
:root #fstage .prog-pill { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px 0 6px; border: 0; border-radius: var(--rs-r-pill); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line); font: var(--rs-w-med) var(--rs-fs-body)/1 var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx); min-width: 0; max-width: 100%; }
:root #fstage .prog-pill.bare { padding: 0 16px; }
:root #fstage .prog-pill:hover { box-shadow: inset 0 0 0 1px var(--rs-line-2); }
:root #fstage .prog-pill[aria-expanded="true"] { box-shadow: var(--rs-ring); }
:root #fstage .prog-pill .faint { color: var(--rs-tx-3); font-weight: var(--rs-w-reg); }
:root #fstage .prog-glyphs { display: inline-flex; align-items: center; gap: 3px; }
:root #fstage .prog-pill.bare .prog-glyphs { display: none; }
:root #fstage .head-prog, :root #fstage .head-prog .prog { width: auto; min-width: 0; flex: none; }
:root #fstage .prog-glyphs .pg { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--rs-line-2); color: var(--rs-tx-3); background: none; opacity: 1; transform: none; }
:root #fstage .prog-glyphs .pg .vi { width: 11px; height: 11px; }
:root #fstage .prog-glyphs .pg.done { background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); box-shadow: none; }
:root #fstage .prog-glyphs .pg.now { background: var(--rs-peri-deep); color: #fff; box-shadow: none; }
:root #fstage .prog-pill { justify-content: flex-start; width: auto; }
:root #fstage .prog-text { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body:has(#fstage) .prog-panel { width: 360px; padding: 12px; border: 0; border-radius: 12px; background: var(--rs-panel); box-shadow: 0 0 0 1px var(--rs-line), var(--rs-pop-shadow); font: var(--rs-w-reg) var(--rs-fs-body)/1.4 var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx); -webkit-backdrop-filter: none; backdrop-filter: none; }
body:has(#fstage) .prog-panel-head { display: flex; align-items: baseline; gap: 8px; padding: 0 4px 8px; margin: 0; border: 0; }
body:has(#fstage) .prog-panel-head > span:first-child { font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); color: var(--rs-tx); }
body:has(#fstage) .prog-panel-head .faint { margin-left: auto; font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
body:has(#fstage) .prog-panel .prog-list { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
body:has(#fstage) .prog-panel .prog-list li { margin: 0; padding: 0; border: 0; }
body:has(#fstage) .prog-panel .prow { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border-radius: 10px; color: var(--rs-tx); text-decoration: none; outline: none; background: none; box-shadow: none; min-height: 0; }
body:has(#fstage) .prog-panel .prow .pi { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--rs-line-2); color: var(--rs-tx-3); background: none; }
body:has(#fstage) .prog-panel .prow .pi .vi { width: 15px; height: 15px; }
body:has(#fstage) .prog-panel .prow .pn { display: block; font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); line-height: 1.4; color: var(--rs-tx); }
body:has(#fstage) .prog-panel .prow .pd { display: block; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body:has(#fstage) .prog-panel .prow .ps { font-size: var(--rs-fs-cap); color: var(--rs-tx-3); font-weight: var(--rs-w-reg); }
body:has(#fstage) .prog-panel .prow.done .pi { background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); box-shadow: none; }
body:has(#fstage) .prog-panel a.prow.done:hover, body:has(#fstage) .prog-panel a.prow.done:focus-visible { background: var(--rs-inset); }
body:has(#fstage) .prog-panel a.prow.done .ps { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
body:has(#fstage) .prog-panel .prow.now { background: var(--rs-sel); }
body:has(#fstage) .prog-panel .prow.now .pi { background: var(--rs-peri-deep); color: #fff; box-shadow: none; }
body:has(#fstage) .prog-panel .prow.now .ps { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font-weight: var(--rs-w-med); }
body:has(#fstage) .prog-panel .prow.later .pn { color: var(--rs-tx-2); font-weight: var(--rs-w-reg); }
body:has(#fstage) .prog-panel .prow:focus-visible { box-shadow: 0 0 0 2px var(--rs-peri); }
body:has(#fstage) .prog-panel .prog-empty { padding: 8px; color: var(--rs-tx-2); font-size: var(--rs-fs-body); }
body:has(#fstage) .prog-scrim { background: var(--dk-s-1f1f21a28, rgba(31,31,33,.28)); }

/* ---------------------------------------------------------------- layout: one white stage panel | a 360px side panel */
:root #fstage .stage { display: grid; grid-template-columns: minmax(0, 1fr) var(--rsc-side); gap: var(--rs-gap); align-items: start; }
:root #fstage .art-box, :root #fstage[data-page="setup"] .art-box, :root #fstage[data-page="editor"] .art-box, :root #fstage[data-reading] .art-box {
  grid-column: 1; position: relative; display: grid; gap: 12px; align-content: start; padding: var(--rs-pad); border-radius: var(--rs-r-panel); overflow: visible;
  background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-shadow); isolation: auto; justify-content: stretch; min-width: 0; }
:root #fstage .art-box > .art, :root #fstage .art-box > .glow, :root #fstage .art-box > .glints { display: none; }
:root #fstage .side { grid-column: 2; position: sticky; top: calc(var(--rs-top-h) + 16px); min-width: 0; display: grid; gap: var(--rs-gap); }
:root #fstage[data-page="setup"] .side { position: sticky; }
/* the stage's 16:9 frame: an inset well inside the panel */
:root #fstage .frame { border-radius: 10px; background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); transform: none; }
:root #fstage .frame.flow, :root #fstage .frame.tall { background: none; box-shadow: none; border-radius: 0; overflow: visible; -webkit-backdrop-filter: none; backdrop-filter: none; container-type: normal; }
:root #fstage .frame.flow > div.show, :root #fstage .frame.tall > div.show { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
:root #fstage .row-slot { margin: 0; justify-content: flex-start; }

/* side panes: white panels, plain explanations */
:root #fstage .pane { position: relative; inset: auto; overflow: visible; background: var(--rs-panel); border-radius: var(--rs-r-panel); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-shadow); padding: var(--rs-pad); gap: 12px; height: auto; }
:root #fstage .pane-h { font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); line-height: 1.4; letter-spacing: -.005em; margin: 0; }
:root #fstage .pane-p { margin: 0; font-size: var(--rs-fs-body); line-height: 1.5; color: var(--rs-tx-2); animation: none; }
:root #fstage .pane-q { margin: 0; padding: 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root #fstage .steps-h { margin: 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-3); font-weight: var(--rs-w-reg); text-transform: none; letter-spacing: var(--rs-ls); }
:root #fstage .path-steps { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
:root #fstage .path-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 8px 4px 4px; border-radius: 10px; color: var(--rs-tx-2); font-size: var(--rs-fs-body); animation: none; background: none; opacity: 1; }
:root #fstage .path-steps li > .vi { width: 28px; height: 28px; padding: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rs-line-2); color: var(--rs-tx-3); box-sizing: border-box; }
:root #fstage .path-steps li.done > .vi { background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); box-shadow: none; }
:root #fstage .path-steps li.now { background: var(--rs-sel); color: var(--rs-tx); font-weight: var(--rs-w-med); }
:root #fstage .path-steps li.now > .vi { background: var(--rs-peri-deep); color: #fff; box-shadow: none; }
:root #fstage .path-steps li.now::after { content: "Now"; font-size: var(--rs-fs-cap); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font-weight: var(--rs-w-med); }
:root #fstage .path-steps li::before { display: none; }
:root #fstage .facts { display: grid; gap: 12px; margin: 0; }
:root #fstage .fact { margin: 0; padding: 0; border: 0; }
:root #fstage .facts dt { display: flex; align-items: center; gap: 8px; font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); color: var(--rs-tx); }
:root #fstage .facts dt .vi { width: 16px; height: 16px; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root #fstage .facts dd { margin: 4px 0 0 24px; font-size: var(--rs-fs-body); color: var(--rs-tx-2); }
:root #fstage .consent { margin: 0; padding-top: 12px; border-top: 1px solid var(--rs-line); font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root #fstage .consent .link, :root #fstage .pane-q .link { color: inherit; }
:root #fstage .side-upload { padding: var(--rs-pad); height: auto; }

/* ---------------------------------------------------------------- shared controls inside the stage */
:root #fstage .pill { height: 36px; padding: 0 16px; gap: 7px; border: 0; border-radius: var(--rs-r-pill); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line-2); color: var(--rs-tx); font: var(--rs-w-med) var(--rs-fs-body)/1 var(--rs-font); letter-spacing: var(--rs-ls); transform: none; }
:root #fstage .pill:hover { background: var(--rs-inset); box-shadow: inset 0 0 0 1px rgba(31,31,33,.18); }
:root #fstage .pill.sm, :root #fstage .upbar .pill, :root #fstage .problem-actions .pill, :root #fstage .f-empty .pill, :root #fstage .veil .pill { height: 32px; padding: 0 12px; font-size: var(--rs-fs-body); }
:root #fstage .pill.ink, :root #fstage .go-btn { background: var(--rs-peri-deep); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(76,95,146,.25); }
:root #fstage .pill.ink:hover { background: var(--rs-peri-deep-hover); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(76,95,146,.25); }
:root #fstage .pill.ink[aria-disabled="true"], :root #fstage .pill:disabled { opacity: .45; cursor: default; }
:root #fstage .pill:focus-visible, :root #fstage .textbtn:focus-visible, :root #fstage .go-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--dk-paper, #fff), 0 0 0 4px var(--rs-peri); }
:root #fstage .textbtn { padding: 0 2px; font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); text-decoration: none; }
:root #fstage .textbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
:root #fstage .input { min-height: 36px; padding: 8px 12px; border: 0; border-radius: 10px; background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px var(--rs-line-2); font: var(--rs-w-reg) var(--rs-fs-body)/1.5 var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx); }
:root #fstage .input::placeholder { color: var(--rs-tx-3); }
:root #fstage .input:hover { box-shadow: inset 0 0 0 1px rgba(31,31,33,.2); }
:root #fstage .input:focus { box-shadow: var(--rs-ring); }
:root #fstage .input:disabled { background: var(--rs-inset); color: var(--rs-tx-3); }
:root #fstage .flabel, :root #fstage .field > label, :root #fstage .field legend, :root #fstage .lbl { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); color: var(--rs-tx); }
:root #fstage .from { font-size: var(--rs-fs-cap); font-weight: var(--rs-w-reg); color: var(--rs-tx-3); margin-left: 4px; }
:root #fstage .hint, :root #fstage .fi-msg { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root #fstage .glyph { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root #fstage .ck { font-size: var(--rs-fs-cap); }

/* ---------------------------------------------------------------- start-pick: one compact block, centred in a full-width panel */
:root #fstage[data-state="start-pick"] .stage { grid-template-columns: minmax(0, 1fr); }
:root #fstage[data-state="start-pick"] .side { display: none; }
:root #fstage[data-state="start-pick"] .art-box { height: calc(100vh - 136px); min-height: 480px; place-content: center; padding: 24px; overflow: hidden; }
:root #fstage[data-state="start-pick"] .frame { aspect-ratio: auto; background: none; box-shadow: none; overflow: visible; -webkit-backdrop-filter: none; backdrop-filter: none; container-type: normal; width: min(1100px, 100%); justify-self: center; }
:root #fstage[data-state="start-pick"] .f-start.show { position: relative; inset: auto; }
:root #fstage .f-start-in { width: 100%; padding: 0; display: grid; gap: 24px; text-align: left; }
:root #fstage .rsc-sph { display: grid; justify-items: center; gap: 4px; text-align: center; }
:root #fstage .rsc-sph .q { margin: 0; font-size: var(--rs-fs-title); font-weight: var(--rs-w-med); line-height: 28px; letter-spacing: -.01em; }
:root #fstage .rsc-sph p { margin: 0; color: var(--rs-tx-2); max-width: 64ch; }
:root #fstage .rsc-cap2 { font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root #fstage .start-slot .choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
:root #fstage .start-slot .ch { display: grid; grid-template-columns: 16px minmax(0, 1fr); grid-template-rows: auto auto auto; align-items: center; justify-items: start; column-gap: 8px; row-gap: 4px; padding: 8px 8px 12px; border-radius: 12px; border: 0; background: none; box-shadow: inset 0 0 0 1px var(--rs-line-2); text-align: left; color: var(--rs-tx); transform: none; animation: rsc-tileIn 560ms var(--rs-ease) both; transition: background var(--rs-t), box-shadow var(--rs-t); }
:root #fstage .start-slot .ch:nth-child(2) { animation-delay: 150ms; }
:root #fstage .start-slot .ch:nth-child(3) { animation-delay: 240ms; }
:root #fstage .start-slot .ch:nth-child(4) { animation-delay: 330ms; }
:root #fstage .start-slot .ch:first-child { animation-delay: 60ms; }
@keyframes rsc-tileIn { from { opacity: 0; transform: translateY(12px); } }
:root #fstage .start-slot .ch:hover { background: var(--rs-inset); transform: none; box-shadow: inset 0 0 0 1px var(--rs-line-2); }
:root #fstage .start-slot .ch:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--rs-line-2), 0 0 0 2px var(--rs-peri); }
:root #fstage .start-slot .ch[aria-checked="true"] { background: var(--rs-sel); box-shadow: none; }
:root #fstage .start-slot .ch .rsc-ill { grid-column: 1 / -1; position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 220px; margin-bottom: 8px; border-radius: 8px; background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); display: grid; place-items: center; overflow: hidden; transition: background var(--rs-t); }
:root #fstage .start-slot .ch:hover .rsc-ill, :root #fstage .start-slot .ch:focus-visible .rsc-ill { background: var(--dk-b-f1f0ea, #F1F0EA); }
:root #fstage .start-slot .ch .rsc-ill svg { width: 100%; height: 100%; display: block; }
:root #fstage .start-slot .ch .cg { grid-column: 1; height: auto; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); animation: none; transform: none; display: grid; }
:root #fstage .start-slot .ch .cg .vi { width: 16px; height: 16px; }
:root #fstage .start-slot .ch .cl { grid-column: 2; font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); line-height: 1.3; letter-spacing: -.005em; }
:root #fstage .start-slot .ch .cd { grid-column: 1 / -1; padding: 0 4px 0 0; font-size: var(--rs-fs-cap); line-height: 1.45; color: var(--rs-tx-2); min-height: 2.9em; }
:root #fstage .rsc-hintc { position: absolute; left: 8px; top: 8px; z-index: 1; height: 24px; line-height: 24px; padding: 0 8px; border-radius: 999px; background: var(--dk-paper, #fff); box-shadow: 0 0 0 1px var(--rs-line); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); font-style: normal; white-space: nowrap; }
:root #fstage .rsc-spf { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; }
:root #fstage .rsc-spf .reedit-link { margin: 0; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 8px; border-radius: 999px; font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); text-decoration: none; }
:root #fstage .rsc-spf .reedit-link:hover { background: var(--rs-sel); text-decoration: none; }
:root #fstage .rsc-spf .reedit-link .vi { width: 14px; height: 14px; }
:root #fstage .rsc-lbw { position: relative; min-width: 0; }
:root #fstage .rsc-lbadge { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin: 0; padding: 4px 8px 4px 12px; border: 0; border-radius: 999px; background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); font-size: var(--rs-fs-cap); color: var(--rs-tx-2); text-align: left; max-width: 100%; }
:root #fstage .rsc-lbadge.quiet { padding-right: 12px; }
:root #fstage button.rsc-lbadge:hover, :root #fstage .rsc-lbadge[aria-expanded="true"] { color: var(--rs-tx); box-shadow: inset 0 0 0 1px var(--rs-line-2); }
:root #fstage .rsc-lbadge > .vi { width: 14px; height: 14px; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); flex: none; }
:root #fstage .rsc-lbn { height: 24px; line-height: 24px; padding: 0 8px; border-radius: 999px; background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font-weight: var(--rs-w-med); white-space: nowrap; }
:root #fstage .rsc-lpop { position: absolute; z-index: 60; right: 0; bottom: calc(100% + 8px); width: 340px; display: grid; gap: 4px; padding: 8px; border-radius: 12px; background: var(--rs-panel); box-shadow: 0 0 0 1px var(--rs-line), var(--rs-pop-shadow); text-align: left; }
:root #fstage .rsc-lpop[hidden] { display: none; }
:root #fstage .rsc-lpop ul { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
:root #fstage .rsc-lpop li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px; border-radius: 8px; }
:root #fstage .rsc-lpop li:hover { background: var(--rs-inset); }
:root #fstage .rsc-lg { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root #fstage .rsc-lpop b { display: block; font-weight: var(--rs-w-med); line-height: 1.4; }
:root #fstage .rsc-lpop small { display: block; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root #fstage .rsc-lpop em { font-style: normal; font-size: var(--rs-fs-cap); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font-weight: var(--rs-w-med); }
:root #fstage .rsc-lpop a { display: flex; align-items: center; height: 36px; padding: 0 8px; border-top: 1px solid var(--rs-line); margin-top: 4px; font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); text-decoration: none; }

/* the drawings: thin lines, Volare colours only */
:root #fstage .rsc-ill { --ill-panel: var(--dk-paper, #fff); --ill-edge: var(--dk-l-1f1f21a32, rgba(31,31,33,.32)); --ill-line: var(--dk-l-1f1f21a16, rgba(31,31,33,.16)); --ill-ink: var(--dk-t-4c5f92, #4C5F92); --ill-mid: #8799C3;
  --ill-pale: var(--dk-b-c3cce1, #C3CCE1); --ill-soft: rgba(135,153,195,.22); --ill-cap: var(--dk-b-1f1f21a60, rgba(31,31,33,.6)); }
/* dark palette for these drawings: tools/theme/theme-dark.src.css (ASK 4) */
:root #fstage .rsc-ill svg * { vector-effect: non-scaling-stroke; }
:root #fstage .rsc-ill .k { fill: var(--ill-panel); stroke: var(--ill-edge); stroke-width: 1.5; }
:root #fstage .rsc-ill .kp { fill: none; stroke: var(--ill-mid); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:root #fstage .rsc-ill .kd { fill: none; stroke: var(--ill-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:root #fstage .rsc-ill .dash { stroke-dasharray: 3 4; }
:root #fstage .rsc-ill .fl { fill: var(--ill-line); }
:root #fstage .rsc-ill .fp { fill: var(--ill-pale); }
:root #fstage .rsc-ill .fd { fill: var(--ill-ink); }
:root #fstage .rsc-ill .fs { fill: var(--ill-soft); }
:root #fstage .rsc-ill .fw { fill: #fff; }
:root #fstage .rsc-ill .cap { fill: var(--ill-cap); }
:root #fstage .rsc-ill .hot { fill: var(--ill-soft); stroke: var(--ill-ink); }
:root #fstage .rsc-ill .tz { fill: #fff; font: 500 9px Inter, sans-serif; }
:root #fstage .rsc-ill .ok { fill: var(--dk-t-3f7a52, #3F7A52); }
:root #fstage .rsc-ill [class*="a-"] { transform-box: fill-box; transform-origin: center; animation-duration: 9s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.65,0,.35,1); }
:root #fstage .ch:hover .rsc-ill [class*="a-"], :root #fstage .ch:focus-visible .rsc-ill [class*="a-"] { animation-duration: 3.75s; }
:root #fstage .rsc-ill .a-pz { transform: scaleX(0); opacity: 0; animation-name: rsc-pz; }
@keyframes rsc-pz { 0%, 24% { transform: scaleX(1); opacity: 1; } 40%, 88% { transform: scaleX(0); opacity: 0; } 100% { transform: scaleX(1); opacity: 1; } }
:root #fstage .rsc-ill .a-sb { transform: translateX(-16px); animation-name: rsc-sb; }
@keyframes rsc-sb { 0%, 24% { transform: none; } 40%, 88% { transform: translateX(-16px); } 100% { transform: none; } }
:root #fstage .rsc-ill .a-sc { transform: translateX(-30px); animation-name: rsc-sc; }
@keyframes rsc-sc { 0%, 24% { transform: none; } 40%, 88% { transform: translateX(-30px); } 100% { transform: none; } }
:root #fstage .rsc-ill .a-sd { transform: translateX(-42px); animation-name: rsc-sd; }
@keyframes rsc-sd { 0%, 24% { transform: none; } 40%, 88% { transform: translateX(-42px); } 100% { transform: none; } }
:root #fstage .rsc-ill .a-cut { opacity: 0; animation-name: rsc-cut; }
@keyframes rsc-cut { 0%, 10% { opacity: 0; } 16%, 28% { opacity: 1; } 38%, 100% { opacity: 0; } }
:root #fstage .rsc-ill .a-card { animation-name: rsc-card; }
@keyframes rsc-card { 0%, 44% { opacity: 0; transform: scale(.6); } 52%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.9); } }
:root #fstage .rsc-ill .a-ok { animation-name: rsc-ok; }
@keyframes rsc-ok { 0%, 56% { opacity: 0; transform: scale(.4); } 62%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
:root #fstage .rsc-ill .a-read { transform: translateY(14px); animation-name: rsc-read; animation-timing-function: steps(1, end); }
@keyframes rsc-read { 0% { transform: none; } 24% { transform: translateY(14px); } 48% { transform: translateY(28px); } 72% { transform: translateY(42px); } 96%, 100% { transform: none; } }
:root #fstage .rsc-ill .a-flow { animation-name: rsc-flow; animation-timing-function: linear; }
@keyframes rsc-flow { to { stroke-dashoffset: -42; } }
:root #fstage .rsc-ill .a-w1 { animation-name: rsc-w1; } :root #fstage .rsc-ill .a-w2 { animation-name: rsc-w2; } :root #fstage .rsc-ill .a-w3 { animation-name: rsc-w3; } :root #fstage .rsc-ill .a-w4 { animation-name: rsc-w4; }
@keyframes rsc-w1 { 0%, 6% { opacity: .15; fill: var(--dk-t-4c5f92, #4C5F92); } 10%, 24% { opacity: 1; fill: var(--dk-t-4c5f92, #4C5F92); } 28%, 94% { opacity: 1; fill: #C3CCE1; } 100% { opacity: .15; } }
@keyframes rsc-w2 { 0%, 30% { opacity: .15; fill: var(--dk-t-4c5f92, #4C5F92); } 34%, 48% { opacity: 1; fill: var(--dk-t-4c5f92, #4C5F92); } 52%, 94% { opacity: 1; fill: #C3CCE1; } 100% { opacity: .15; } }
@keyframes rsc-w3 { 0%, 54% { opacity: .15; fill: var(--dk-t-4c5f92, #4C5F92); } 58%, 72% { opacity: 1; fill: var(--dk-t-4c5f92, #4C5F92); } 76%, 94% { opacity: 1; fill: #C3CCE1; } 100% { opacity: .15; } }
@keyframes rsc-w4 { 0%, 76% { opacity: .15; fill: var(--dk-t-4c5f92, #4C5F92); } 80%, 94% { opacity: 1; fill: var(--dk-t-4c5f92, #4C5F92); } 100% { opacity: .15; } }
:root #fstage .rsc-ill .a-spark { animation-name: rsc-spark; }
@keyframes rsc-spark { 0% { transform: scale(.7) rotate(0); } 10% { transform: scale(1.25) rotate(20deg); } 18%, 88% { transform: scale(.9) rotate(45deg); } 100% { transform: scale(.7) rotate(90deg); } }
:root #fstage .rsc-ill .a-ray { animation-name: rsc-ray; }
@keyframes rsc-ray { 0%, 4% { opacity: 0; transform: scale(.5); } 10% { opacity: 1; transform: scale(1.1); } 20%, 100% { opacity: 0; transform: scale(1.4); } }
:root #fstage .rsc-ill .a-link { stroke-dasharray: 80; animation-name: rsc-link; }
@keyframes rsc-link { 0%, 12% { stroke-dashoffset: 80; } 24%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 80; } }
:root #fstage .rsc-ill .a-r1, :root #fstage .rsc-ill .a-r2, :root #fstage .rsc-ill .a-r3, :root #fstage .rsc-ill .a-r4, :root #fstage .rsc-ill .a-r5 { transform-origin: left center; }
:root #fstage .rsc-ill .a-r1 { animation-name: rsc-r1; } :root #fstage .rsc-ill .a-r2 { animation-name: rsc-r2; } :root #fstage .rsc-ill .a-r3 { animation-name: rsc-r3; } :root #fstage .rsc-ill .a-r4 { animation-name: rsc-r4; } :root #fstage .rsc-ill .a-r5 { animation-name: rsc-r5; }
@keyframes rsc-r1 { 0%, 18% { opacity: 0; transform: translateX(-12px); } 26%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes rsc-r2 { 0%, 28% { opacity: 0; transform: translateX(-12px); } 36%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes rsc-r3 { 0%, 38% { opacity: 0; transform: translateX(-12px); } 46%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes rsc-r4 { 0%, 48% { opacity: 0; transform: translateX(-12px); } 56%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes rsc-r5 { 0%, 58% { opacity: 0; transform: translateX(-12px); } 66%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
:root #fstage .rsc-ill .a-scan { opacity: 0; animation-name: rsc-scan; animation-timing-function: linear; }
@keyframes rsc-scan { 0% { transform: translateX(0); opacity: 0; } 4% { opacity: 1; } 60% { transform: translateX(200px); opacity: 1; } 64%, 100% { transform: translateX(200px); opacity: 0; } }
:root #fstage .rsc-ill .a-h1, :root #fstage .rsc-ill .a-h2, :root #fstage .rsc-ill .a-h3 { transform: translateY(-4px); }
:root #fstage .rsc-ill .a-h1 { animation-name: rsc-h1; } :root #fstage .rsc-ill .a-h2 { animation-name: rsc-h2; } :root #fstage .rsc-ill .a-h3 { animation-name: rsc-h3; }
@keyframes rsc-h1 { 0%, 16% { transform: none; } 22%, 88% { transform: translateY(-4px); } 96%, 100% { transform: none; } }
@keyframes rsc-h2 { 0%, 32% { transform: none; } 38%, 88% { transform: translateY(-4px); } 96%, 100% { transform: none; } }
@keyframes rsc-h3 { 0%, 48% { transform: none; } 54%, 88% { transform: translateY(-4px); } 96%, 100% { transform: none; } }
:root #fstage .rsc-ill .a-hf1 { animation-name: rsc-hf1; } :root #fstage .rsc-ill .a-hf2 { animation-name: rsc-hf2; } :root #fstage .rsc-ill .a-hf3 { animation-name: rsc-hf3; }
@keyframes rsc-hf1 { 0%, 16% { fill: var(--ill-panel); } 22%, 88% { fill: var(--ill-soft); } 96%, 100% { fill: var(--ill-panel); } }
@keyframes rsc-hf2 { 0%, 32% { fill: var(--ill-panel); } 38%, 88% { fill: var(--ill-soft); } 96%, 100% { fill: var(--ill-panel); } }
@keyframes rsc-hf3 { 0%, 48% { fill: var(--ill-panel); } 54%, 88% { fill: var(--ill-soft); } 96%, 100% { fill: var(--ill-panel); } }
:root #fstage .rsc-ill .a-b1 { animation-name: rsc-b1; } :root #fstage .rsc-ill .a-b2 { animation-name: rsc-b2; } :root #fstage .rsc-ill .a-b3 { animation-name: rsc-b3; }
@keyframes rsc-b1 { 0%, 18% { opacity: 0; transform: scale(.4); } 24%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes rsc-b2 { 0%, 34% { opacity: 0; transform: scale(.4); } 40%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes rsc-b3 { 0%, 50% { opacity: 0; transform: scale(.4); } 56%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { :root #fstage .rsc-ill [class*="a-"] { animation: none !important; } :root #fstage .start-slot .ch { animation: none; } }

/* the starts, collapsed to a segmented row once one is picked */
:root #fstage .row-slot .choices { display: inline-flex; flex-wrap: nowrap; gap: 0; padding: 3px; border-radius: var(--rs-r-pill); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); max-width: 100%; }
:root #fstage .row-slot .ch { height: 30px; padding: 0 14px; gap: 6px; border: 0; border-radius: var(--rs-r-pill); background: none; box-shadow: none; color: var(--rs-tx-2); -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; animation: none; }
:root #fstage .row-slot .ch:hover { color: var(--rs-tx); transform: none; }
:root #fstage .row-slot .ch .rsc-ill, :root #fstage .row-slot .ch .cd { display: none; }
:root #fstage .row-slot .ch .cg .vi { width: 15px; height: 15px; }
:root #fstage .row-slot .ch .cl { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); }
:root #fstage .row-slot .ch[aria-checked="true"] { background: var(--dk-paper, #fff); color: var(--rs-tx); box-shadow: 0 1px 2px rgba(31,31,33,.1), 0 0 0 1px var(--rs-line); }
:root #fstage .row-slot .ch[aria-checked="true"] .cg { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); transform: none; }

/* ---------------------------------------------------------------- Setup: the take with your settings, and the form panel */
:root #fstage .side-setup, :root #fstage .side-started { position: relative; inset: auto; display: none; flex-direction: column; padding: 0; overflow: hidden;
  background: var(--rs-panel); border: 0; border-radius: var(--rs-r-panel); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
:root #fstage[data-side="setup"] .side-setup, :root #fstage[data-side="started"] .side-started { display: flex; }
:root #fstage .side-setup { max-height: calc(100vh - var(--rs-top-h) - 32px); min-height: 420px; }
:root #fstage .card-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: grid; gap: 16px; align-content: start; scrollbar-width: thin; }
:root #fstage .card-head h2 { margin: 0; font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); line-height: 1.4; letter-spacing: -.005em; }
:root #fstage .card-head p { margin: 4px 0 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root #fstage .side-setup .field, :root #fstage .side-setup .more, :root #fstage .err-top { margin: 0; }
:root #fstage .side-setup .field { display: grid; gap: 4px; min-width: 0; border: 0; padding: 0; }
:root #fstage .side-setup .field > label, :root #fstage .side-setup .field legend, :root #fstage .side-setup .lbl, :root #fstage .side-setup .label-row > label:first-child { margin: 0; font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); padding: 0; }
:root #fstage .side-setup .label-row { display: flex; align-items: center; gap: 8px; margin: 0; }
:root #fstage .side-setup .label-row > label:first-child { margin-right: auto; }
:root #fstage .side-setup .input { padding: 8px 12px; font-size: var(--rs-fs-body); }
:root #fstage .side-setup input.input { height: 36px; padding: 0 12px; }
:root #fstage .side-setup .hint { font-size: var(--rs-fs-cap); margin: 0; }
:root #fstage .switch { margin: 0; gap: 8px; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root #fstage .sw { width: 32px; height: 20px; background: var(--rs-raise); box-shadow: inset 0 0 0 1px var(--rs-line-2); }
:root #fstage .sw::after { left: 2px; top: 2px; width: 16px; height: 16px; }
:root #fstage .switch input:checked + .sw { background: var(--rs-peri-deep); box-shadow: none; }
:root #fstage .switch input:checked + .sw::after { transform: translateX(12px); }
:root #fstage .switch::after { content: "On"; }
:root #fstage .switch:has(input:not(:checked))::after { content: "Off"; }
:root #fstage .style-cur { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--rs-line); }
:root #fstage .sc-img { aspect-ratio: 16 / 9; border-radius: 6px; box-shadow: 0 0 0 1px var(--rs-line); }
:root #fstage .sc-t b { display: inline; font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); }
:root #fstage .sc-y { display: inline; margin-left: 4px; font-size: var(--rs-fs-cap); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root #fstage .sc-b { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); margin-top: 2px; line-height: 1.45; }
:root #fstage .more-styles { justify-self: start; margin: 0; padding: 0 4px; font-size: var(--rs-fs-cap); }
:root #fstage .style-more .style-row { padding: 8px 0 0; gap: 8px; }
:root #fstage .sty { border-radius: 10px; padding: 4px 4px 8px; background: none; box-shadow: none; }
:root #fstage .sty:hover { background: var(--rs-inset); }
:root #fstage .sty[aria-checked="true"] { background: var(--rs-sel); }
:root #fstage .sty-l { font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); }
:root #fstage .sty-y { font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root #fstage .sel-ring { display: none; }
:root #fstage .side-setup .more, :root #fstage .more { border: 0; padding: 0; margin: 0; }
:root #fstage .more-btn { display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: 2px 8px; align-items: center; width: 100%; padding: 8px 12px; border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--rs-line-2); background: none; text-align: left; }
:root #fstage .more-btn:hover { background: var(--rs-inset); }
:root #fstage .more-btn > span:first-child { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); }
:root #fstage .more-btn .more-sub { grid-column: 1; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root #fstage .more-btn .chev { grid-column: 2; grid-row: 1 / span 2; width: 14px; height: 14px; color: var(--rs-tx-3); }
:root #fstage .more-in { display: grid; gap: 16px; padding-top: 16px; }
:root #fstage .rad { padding: 8px; margin: 0; border-radius: 10px; }
:root #fstage .rad[aria-checked="true"] { background: var(--rs-sel); box-shadow: none; }
:root #fstage .rad b { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); }
:root #fstage .rad span.t { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root #fstage .seg { padding: 3px; border-radius: var(--rs-r-pill); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); border: 0; }
:root #fstage .seg .seg-thumb { border-radius: var(--rs-r-pill); background: var(--dk-paper, #fff); box-shadow: 0 1px 2px rgba(31,31,33,.1), 0 0 0 1px var(--rs-line); }
:root #fstage .segb { height: 30px; font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); color: var(--rs-tx-2); border-radius: var(--rs-r-pill); }
:root #fstage .segb[aria-checked="true"] { color: var(--rs-tx); }
:root #fstage .filedrop { grid-template-columns: 16px minmax(0, 1fr); gap: 8px; padding: 8px 12px; border: 0; border-radius: 10px; background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root #fstage .filedrop > .vi { width: 15px; height: 15px; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root #fstage .fd-acts { gap: 8px; }
:root #fstage .fd-acts .textbtn { font-size: var(--rs-fs-cap); }
:root #fstage .chips { gap: 4px; }
:root #fstage .chip { padding: 6px 4px 6px 12px; border: 0; border-radius: 10px; background: none; box-shadow: inset 0 0 0 1px var(--rs-line-2); font-size: var(--rs-fs-cap); }
:root #fstage .chip.ok { background: var(--rs-pos-soft); box-shadow: none; }
:root #fstage .chip.ok .vi { color: var(--dk-tx-rs-pos, var(--rs-pos)); }
:root #fstage .chip.bad { background: var(--rs-neg-soft); box-shadow: none; color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root #fstage .err, :root #fstage .err-top { font-size: var(--rs-fs-cap); color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root #fstage .err-top { padding: 8px 12px; border-radius: 10px; background: var(--rs-neg-soft); }
:root #fstage .card-foot { flex: none; display: grid; gap: 8px; padding: 12px; border-top: 1px solid var(--rs-line); background: var(--rs-panel); }
:root #fstage .go-btn { width: 100%; height: 36px; padding: 0 16px; border-radius: var(--rs-r-pill); font: var(--rs-w-med) var(--rs-fs-body)/1 var(--rs-font); letter-spacing: var(--rs-ls); transform: none; }
:root #fstage .go-btn:hover { background: var(--rs-peri-deep-hover); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(76,95,146,.25); }
:root #fstage .go-btn[aria-disabled="true"], :root #fstage[data-state="setup-loading"] .go-btn { background: var(--rs-peri-deep); opacity: .45; box-shadow: none; }
:root #fstage .go-fill { background: var(--dk-b-ffffffa22, rgba(255,255,255,.22)); }
:root #fstage .go-note { margin: 0; text-align: center; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); flex: none; min-width: 0; }
:root #fstage[data-state="setup-error"] .go-note { color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root #fstage .script-att .chip { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px; }
/* Setup done: what you set */
:root #fstage .side-started .card-scroll { padding: 12px; gap: 12px; }
:root #fstage .side-started .glyph { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--rs-pos-soft); color: var(--dk-tx-rs-pos, var(--rs-pos)); }
:root #fstage .side-started .glyph .vi { width: 20px; height: 20px; }
:root #fstage .side-started h2 { margin: 0; font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); letter-spacing: -.005em; }
:root #fstage .side-started .card-scroll > p { margin: 0; color: var(--rs-tx-2); font-size: var(--rs-fs-body); }
:root #fstage .set-list { display: grid; gap: 0; margin: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--rs-line); }
:root #fstage .set-list > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 8px 12px; margin: 0; border: 0; }
:root #fstage .set-list > div + div { border-top: 1px solid var(--rs-line); }
:root #fstage .set-list dt { color: var(--rs-tx-2); font-size: var(--rs-fs-body); font-weight: var(--rs-w-reg); }
:root #fstage .set-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: var(--rs-fs-body); }
:root #fstage .side-started #toProcessing { justify-self: start; }
:root #fstage .quiet-line { margin: 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
/* the take's frames under the preview */
:root #fstage .strip { display: none; gap: 4px; margin: 0; padding: 0; background: none; animation: none; }
:root #fstage[data-page="setup"] .strip:not([hidden]) { display: grid; }
:root #fstage .strip-head { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); text-shadow: none; }
:root #fstage .strip-frames { gap: 2px; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--rs-line); padding: 0; }
:root #fstage .strip-frames img { border-radius: 0; box-shadow: none; border: 0; outline: 0; }
:root #fstage .playhead { background: var(--dk-paper, #fff); box-shadow: 0 0 0 1px rgba(31,31,33,.4); width: 2px; }
/* on the take: quiet dark tags; the editing veil is white */
:root #fstage .live-pill { height: 26px; padding: 0 10px; gap: 6px; border-radius: 99px; background: rgba(20,21,25,.55); font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); }
:root #fstage .veil { background: var(--dk-b-ffffffa88, rgba(255,255,255,.88)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); gap: 8px; }
:root #fstage .veil-spark { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--rs-sel); }
:root #fstage .veil-spark .vi { width: 22px; height: 22px; }
:root #fstage .veil h2 { margin: 0; font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); letter-spacing: -.005em; }
:root #fstage .veil p { margin: 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root #fstage .seven { margin: 0; font-size: var(--rs-fs-cap); }

/* ---------------------------------------------------------------- Upload: drop frame, checks, progress, done, refused */
:root #fstage .f-empty { background: none; outline: 1.5px dashed var(--dk-l-1f1f21a22, rgba(31,31,33,.22)); outline-offset: -1.5px; border-radius: 10px; transition: background var(--rs-t), outline-color var(--rs-t); }
:root #fstage .f-empty:hover { background: var(--dk-b-f2f1ec, #F2F1EC); }
:root #fstage[data-state="upload-dragover"] .f-empty { background: var(--rs-sel); outline-color: var(--rs-peri); }
:root #fstage[data-state="upload-empty"] .frame, :root #fstage[data-state="upload-dragover"] .frame { background: var(--rs-inset); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; }
:root #fstage .corner { display: none; }
:root #fstage .f-empty-in { gap: 8px; }
:root #fstage .f-empty-in .glyph { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--dk-paper, #fff); box-shadow: 0 0 0 1px var(--rs-line), 0 2px 6px rgba(31,31,33,.06); margin: 0 0 4px; }
:root #fstage .f-empty-in .glyph .vi { width: 22px; height: 22px; }
:root #fstage .f-empty-in .g-up { position: absolute; top: 16px; }
:root #fstage .f-h { margin: 0; font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); letter-spacing: -.005em; }
:root #fstage .f-s { margin: 0; font-size: var(--rs-fs-body); color: var(--rs-tx-2); }
:root #fstage .f-empty .pill { margin-top: 4px; }
:root #fstage .drive-link { margin-top: 4px; }
:root #fstage .checklist { border-radius: 12px; background: var(--dk-paper, #fff); box-shadow: 0 0 0 1px var(--rs-line), 0 4px 12px rgba(31,31,33,.12); padding: 8px 12px; gap: 4px; font-size: var(--rs-fs-cap); color: var(--rs-tx); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root #fstage .ck-line { font-size: var(--rs-fs-cap); font-weight: var(--rs-w-reg); color: var(--rs-tx-2); }
:root #fstage .ck-row { gap: 12px; }
:root #fstage .ck { color: var(--rs-tx-3); font-weight: var(--rs-w-med); }
:root #fstage .ck.on { color: var(--dk-tx-rs-pos, var(--rs-pos)); }
:root #fstage .pline { height: 4px; background: var(--dk-b-ffffffa50, rgba(255,255,255,.5)); }
:root #fstage .pline i { background: var(--rs-peri-deep); }
:root #fstage .upbar { gap: 12px; }
:root #fstage .up-pct { font-size: var(--rs-fs-title); font-weight: var(--rs-w-med); font-variant-numeric: tabular-nums; }
:root #fstage .up-stats { font-size: var(--rs-fs-cap); font-variant-numeric: tabular-nums; }
:root #fstage .landed span { width: 64px; height: 64px; background: var(--rs-pos); }
:root #fstage .landed span .vi { width: 30px; height: 30px; }
:root #fstage .donecap { font-size: var(--rs-fs-cap); }
/* problems in place: refused take, script too long, idea failed, camera blocked */
:root #fstage .f-problem { background: none; gap: 16px; }
:root #fstage .problem-text { gap: 8px; }
:root #fstage .problem-text .glyph { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--rs-neg-soft); color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root #fstage .problem-text .glyph .vi { width: 16px; height: 16px; }
:root #fstage .problem-text h2 { margin: 0; font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); letter-spacing: -.005em; }
:root #fstage .problem-text p { margin: 0; font-size: var(--rs-fs-body); color: var(--rs-tx-2); }
:root #fstage .problem-actions { gap: 8px; margin-top: 4px; }
:root #fstage[data-state="upload-failed"] .problem-text { border-radius: 12px; padding: 12px; box-shadow: 0 0 0 1px var(--rs-line), var(--rs-pop-shadow); }
:root #fstage .sliver-cap { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }

/* ---------------------------------------------------------------- a script as a page: checking, ready, being written, the draft */
:root #fstage .f-page { display: grid; gap: 12px; background: none; min-height: 0; }
:root #fstage .f-page.show { min-height: 0; }
:root #fstage .rsc-desk { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; border-radius: 10px; background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); overflow: hidden; min-height: 360px; align-items: start; }
:root #fstage[data-state="idea-writing"] .rsc-desk { grid-template-columns: 220px minmax(0, 1fr); }
:root #fstage .fs-sheet, :root #fstage[data-state="idea-writing"] .fs-sheet, :root #fstage[data-state="script-ready"] .fs-sheet, :root #fstage[data-state="idea-draft"] .fs-sheet {
  position: relative; left: auto; top: auto; bottom: auto; transform: none; width: min(100%, 560px); justify-self: center; max-height: 560px; overflow: hidden;
  background: var(--dk-paper, #fff); border-radius: 6px; box-shadow: 0 0 0 1px var(--rs-line), 0 6px 20px rgba(41,52,92,.08); }
:root #fstage .fs-sheet::after { height: 72px; }
:root #fstage .sheet-in { padding: 24px; font-size: var(--rs-fs-body); line-height: 1.6; color: var(--rs-tx); display: grid; gap: 12px; }
:root #fstage .sheet-in .d-k { margin: 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root #fstage .sheet-in .d-t { margin: 0; font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); line-height: 1.35; letter-spacing: -.005em; }
:root #fstage .sheet-in p { margin: 0; }
:root #fstage .sheet-in h4 { margin: 4px 0 -8px; font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); }
:root #fstage .sheet-in .sk { height: 10px; margin: 0; border-radius: 3px; background: var(--rs-raise); }
:root #fstage .sources, :root #fstage[data-state="idea-writing"] .sources { position: relative; left: auto; top: auto; bottom: auto; width: auto; gap: 8px; }
:root #fstage .src-h { font-size: var(--rs-fs-cap); font-weight: var(--rs-w-reg); color: var(--rs-tx-3); padding: 0 4px; }
:root #fstage .src { padding: 8px 12px; border-radius: 10px; background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px var(--rs-line-2); font-size: var(--rs-fs-cap); }
:root #fstage .pg-check { position: absolute; left: 16px; bottom: 16px; }
:root #fstage .fs-pbar { position: static; left: auto; right: auto; bottom: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: flex-end; background: none; }
:root #fstage[data-state="script-ready"] .fs-pbar, :root #fstage[data-state="idea-draft"] .fs-pbar { transform: none; }
:root #fstage:not([data-state="script-ready"]):not([data-state="idea-draft"]) .fs-pbar { display: none; }
:root #fstage .fs-pbar .pmeta { margin-right: auto; padding: 0; background: none; box-shadow: none; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); font-variant-numeric: tabular-nums; }
:root #fstage .pacts { display: flex; flex-wrap: wrap; gap: 8px; }
:root #fstage .pacts .pill.sm { height: 36px; padding: 0 16px; }
:root #fstage .writing { position: static; left: auto; bottom: auto; justify-self: start; height: 32px; padding: 0 4px 0 12px; gap: 8px; border-radius: 999px; background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); box-shadow: none; font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); }
:root #fstage .writing .vi { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); width: 15px; height: 15px; }
:root #fstage .w-stop { height: 24px; padding: 0 8px; border: 0; border-radius: 999px; background: none; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root #fstage .w-stop:hover { background: var(--dk-paper, #fff); color: var(--rs-tx); }

/* script: drop or paste; idea; posted video; nothing yet — section heads as brand.html */
:root #fstage .f-script, :root #fstage .f-idea, :root #fstage .f-reedit, :root #fstage .f-topics, :root #fstage .f-research, :root #fstage .f-nothing { padding: 0; background: none; box-shadow: none; }
:root #fstage .f-script.show, :root #fstage .f-idea.show, :root #fstage .f-reedit.show { display: grid; gap: 12px; align-content: start; }
:root #fstage .fs-head, :root #fstage .fi-head, :root #fstage .tp-head { display: flex; align-items: flex-start; gap: 12px; margin: 0; }
:root #fstage .fs-head > .glyph, :root #fstage .fi-head > .glyph { display: none; }
:root #fstage .fs-h { margin: 0; font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); line-height: 1.4; letter-spacing: -.005em; }
:root #fstage .fs-s { margin: 4px 0 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root #fstage .paste { min-height: 240px; resize: vertical; }
:root #fstage .fs-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
:root #fstage .fs-count { margin-right: auto; font-size: var(--rs-fs-cap); color: var(--rs-tx-3); font-variant-numeric: tabular-nums; }
:root #fstage .fs-actions .pill.sm { height: 36px; padding: 0 16px; }
:root #fstage .draft-note { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font-size: var(--rs-fs-cap); }
:root #fstage .fi-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
:root #fstage .fi-col { display: grid; gap: 8px; align-content: start; min-width: 0; }
:root #fstage .fi-col .flabel { margin: 4px 0 0; }
:root #fstage .fi-col .flabel:first-child { margin-top: 0; }
:root #fstage .fi-go { justify-self: start; height: 36px; padding: 0 16px; }
:root #fstage .idea-list { list-style: none; display: grid; gap: 4px; margin: 0; padding: 0; }
:root #fstage .idea-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--rs-line); background: none; }
:root #fstage .ideas-h { margin: 8px 0 4px; }
:root #fstage .re-list { display: grid; gap: 4px; }
:root #fstage .re-link { display: grid; gap: 4px; }
:root #fstage .re-row { display: flex; gap: 8px; align-items: center; }
:root #fstage .re-row .input { flex: 1; }
:root #fstage .re-row .pill.sm { height: 36px; padding: 0 16px; }
/* nothing yet: find topics, researching, topics */
:root #fstage .f-center { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 24px 12px; }
:root #fstage .f-center > .glyph { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--rs-sel); }
:root #fstage .f-center > .glyph .vi { width: 22px; height: 22px; }
:root #fstage .f-center .pill { margin-top: 8px; }
:root #fstage .f-research { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 16px; align-items: center; }
:root #fstage .rs-left > .glyph { display: none; }
:root #fstage .rs-list { list-style: none; display: grid; gap: 8px; margin: 8px 0 0; padding: 0; font-size: var(--rs-fs-body); }
:root #fstage .rs-time { font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root #fstage .rs-grid { border-radius: 10px; background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); padding: 12px; }
:root #fstage .tp-head > div { min-width: 0; }
:root #fstage .tp-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
:root #fstage .tp-acts .pill.sm { height: 36px; padding: 0 16px; }
:root #fstage .tp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }

/* ---------------------------------------------------------------- full width: the editor and the read views (no side column) */
:root #fstage[data-page="editor"] .stage, :root #fstage[data-reading] .stage { grid-template-columns: minmax(0, 1fr); }
:root #fstage[data-page="editor"] .side, :root #fstage[data-reading] .side { display: none; }
:root #fstage[data-page="editor"] .art-box { background: none; box-shadow: none; padding: 0; }
:root #fstage[data-page="editor"] .frame { background: none; box-shadow: none; overflow: visible; }
/* the script editor: parts in the left gutter on the canvas, the document as one white panel, comments in the right margin */
:root #fstage .f-editor .sdoc { column-gap: 16px; grid-template-columns: 220px minmax(0, 1fr) 288px; justify-content: stretch; font: var(--rs-w-reg) var(--rs-fs-body)/1.5 var(--rs-font); }
:root #fstage .f-editor .sdoc-body { grid-template-columns: 220px minmax(0, 1fr) 288px; column-gap: 16px; }
:root #fstage .f-editor .sdoc-head { margin: 0; padding: 12px 24px; gap: 8px; border-radius: var(--rs-r-panel) var(--rs-r-panel) 0 0; background: var(--rs-panel); box-shadow: inset 1px 0 0 var(--rs-line), inset -1px 0 0 var(--rs-line), inset 0 1px 0 var(--rs-line); border-bottom: 1px solid var(--rs-line); }
:root #fstage .f-editor .sdoc-head > .step-head { padding-right: 80px; }
:root .sdoc-head .sd-kicker { font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root #fstage .f-editor .sdoc-head .sd-title, :root #fstage .f-editor .step-head { margin: 0; font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); line-height: 1.4; letter-spacing: -.005em; }
:root #fstage .f-editor .sd-close { right: 12px; top: 12px; }
:root #fstage .f-editor .sdoc-meter { max-width: 200px; margin: 4px 0 0; background: var(--rs-raise); }
:root #fstage .f-editor .sdoc-len, :root #fstage .f-editor .sdoc-tells, :root #fstage .f-editor .type-meta { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root #fstage .f-editor .sdoc-chip { min-height: 28px; padding: 0 12px; background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); color: var(--rs-tx-2); font-size: var(--rs-fs-cap); }
:root #fstage .f-editor .sdoc-head .sdoc-ro { padding: 8px 12px; border-radius: 10px; background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); color: var(--rs-tx-2); font-size: var(--rs-fs-cap); }
:root #fstage .f-editor .sdoc-article { margin: 0; padding: 8px 24px 24px; border-radius: 0 0 var(--rs-r-panel) var(--rs-r-panel); background: var(--rs-panel); box-shadow: inset 1px 0 0 var(--rs-line), inset -1px 0 0 var(--rs-line), inset 0 -1px 0 var(--rs-line); font-size: var(--rs-fs-sec); line-height: 1.7; }
:root #fstage .f-editor .sdoc:has(> details) .sdoc-article { border-radius: 0; box-shadow: inset 1px 0 0 var(--rs-line), inset -1px 0 0 var(--rs-line); }
:root #fstage .f-editor .sdoc > details { margin: 0; padding: 4px 24px 16px; border-radius: 0 0 var(--rs-r-panel) var(--rs-r-panel); background: var(--rs-panel); box-shadow: inset 1px 0 0 var(--rs-line), inset -1px 0 0 var(--rs-line), inset 0 -1px 0 var(--rs-line); }
:root #fstage .f-editor .sdoc-mark { padding: 8px; border-radius: 10px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root #fstage .f-editor .sdoc-mark.is-active, :root #fstage .f-editor .sdoc-mark:hover, :root #fstage .f-editor .sdoc-mark:focus-within { background: var(--dk-paper, #fff); box-shadow: 0 0 0 1px var(--rs-line), var(--rs-shadow); }
:root #fstage .f-editor .sdoc > .sdoc-foot { grid-column: 2; }
:root #fstage .f-editor .sdoc-mark-name { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); }
:root #fstage .f-editor .sdoc-mark-meta { font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root #fstage .f-editor .sdoc-tools { gap: 2px 8px; margin: 4px 0 0; padding: 0; }
:root #fstage .f-editor .sdoc-tool { font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); color: var(--rs-tx-2); }
:root #fstage .f-editor .sdoc-tool:hover { color: var(--rs-tx); text-decoration: none; }
:root #fstage .f-editor .sdoc-cmt { padding: 12px; gap: 8px; border: 0; border-radius: 12px; background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); font-size: var(--rs-fs-cap); }
:root #fstage .f-editor .sdoc-cmt.is-draft { background: var(--dk-paper, #fff); box-shadow: var(--rs-ring); }
:root #fstage .f-editor .sdoc-foot { bottom: 16px; margin-top: 16px; padding: 8px 8px 8px 16px; border-radius: var(--rs-r-pill); background: var(--dk-b-ffffffa96, rgba(255,255,255,.96)); box-shadow: 0 0 0 1px var(--rs-line), var(--rs-pop-shadow); }
:root #fstage .f-editor .sdoc-save, :root #fstage .f-editor .sw-status { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root #fstage .f-editor .btn { min-height: 36px; height: 36px; padding: 0 16px; border-radius: var(--rs-r-pill); font: var(--rs-w-med) var(--rs-fs-body)/1 var(--rs-font); letter-spacing: var(--rs-ls); }
:root #fstage .f-editor .btn.sdoc-sm { min-height: 32px; height: 32px; padding: 0 12px; }
:root #fstage .f-editor .btn--light, :root #fstage .f-editor .btn--ghost { background: var(--rs-panel); color: var(--rs-tx); border: 0; box-shadow: inset 0 0 0 1px var(--rs-line-2); }
:root #fstage .f-editor .btn--light:hover, :root #fstage .f-editor .btn--ghost:hover { background: var(--rs-inset); }
:root #fstage .f-editor .btn--primary { background: var(--rs-peri-deep); color: #fff; border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(76,95,146,.25); }
:root #fstage .f-editor .btn--primary:hover { background: var(--rs-peri-deep-hover); }
:root #fstage .f-editor .sdoc-bar { border-radius: 10px; background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font-size: var(--rs-fs-cap); }
@media (max-width: 1280px) {
  :root #fstage .f-editor .sdoc, :root #fstage .f-editor .sdoc-body { grid-template-columns: 180px minmax(0, 1fr) 240px; }
}

/* ---------------------------------------------------------------- record: self-view and script, then the camera check */
:root #fstage .f-record { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 0 0 48px; background: none; }
:root #fstage .selfview { border-radius: 10px; background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); }
:root #fstage .selfview p { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root #fstage .sv-glyph { color: var(--rs-peri-light); }
:root #fstage .cam-off { height: 26px; padding: 0 10px; border-radius: 99px; background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line); font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root #fstage .prompter { border-radius: 10px; background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px var(--rs-line); padding: 12px; }
:root #fstage .pr-h { font-size: var(--rs-fs-cap); color: var(--rs-tx-3); font-weight: var(--rs-w-reg); }
:root #fstage .pr-lines { font-size: var(--rs-fs-body); color: var(--rs-tx-2); }
:root #fstage .rec-bar { bottom: 0; }
:root #fstage .rec-dot { width: 8px; height: 8px; background: var(--dk-b-f4b8b1, #F4B8B1); box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
:root #fstage .rec-choices { margin: 0; gap: 8px; }
:root #fstage .rc { grid-template-columns: 32px minmax(0, 1fr); gap: 8px; padding: 12px; border: 0; border-radius: 10px; background: none; box-shadow: inset 0 0 0 1px var(--rs-line-2); transform: none; }
:root #fstage .rc:hover { background: var(--rs-inset); transform: none; }
:root #fstage .rc[aria-checked="true"] { background: var(--rs-sel); box-shadow: none; }
:root #fstage .rc > .vi { width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: var(--rs-inset); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); box-sizing: border-box; }
:root #fstage .rc[aria-checked="true"] > .vi { background: var(--dk-paper, #fff); }
:root #fstage .rc b { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); }
:root #fstage .rc span span { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root #fstage .rk-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; }
:root #fstage .rec-problem { font-size: var(--rs-fs-cap); color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root #fstage .side-path .path-steps, :root #fstage[data-state="idea-empty"] .side-path .path-steps { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; margin: 0; }
:root #fstage[data-state="idea-empty"] .side-path .path-steps li { padding: 4px 8px 4px 4px; }
:root #fstage .frame.tall > div.show { min-height: 0; height: auto; }
:root #fstage .f-topics { display: flex; flex-direction: column; gap: 12px; padding: 0; }
:root #fstage .tp-grid { margin: 0; }
:root #fstage .tp { gap: 8px; padding: 12px; border-radius: 12px; background: none; box-shadow: inset 0 0 0 1px var(--rs-line-2); transform: none; }
:root #fstage .tp:hover { background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line-2); transform: none; }
:root #fstage .tp:focus-visible { box-shadow: inset 0 0 0 1px var(--rs-line-2), 0 0 0 2px var(--rs-peri); }
:root #fstage .tp[aria-checked="true"] { background: var(--rs-sel); box-shadow: none; }
:root #fstage .tp .tick { display: none; }
:root #fstage .tp b { padding: 0; font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); line-height: 1.35; letter-spacing: -.005em; }
:root #fstage .tp span { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); line-height: 1.45; }
:root #fstage .tp span + span { color: var(--rs-tx-3); }
:root #fstage #topicGo[aria-disabled="true"] { opacity: .45; }
:root #fstage .f-reedit { gap: 12px; padding: 0; background: none; }
:root #fstage .re-v { grid-template-columns: 112px minmax(0, 1fr) 16px; gap: 12px; padding: 8px; border-radius: 10px; background: none; box-shadow: none; }
:root #fstage .re-v:hover { background: var(--rs-inset); }
:root #fstage .re-v[aria-checked="true"] { background: var(--rs-sel); box-shadow: none; }
:root #fstage .re-v img { width: 112px; border-radius: 6px; box-shadow: 0 0 0 1px var(--rs-line); }
:root #fstage .re-v[aria-checked="true"] .re-dot { border-color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root #fstage .re-v[aria-checked="true"] .re-dot::after { background: var(--rs-peri-deep); }

/* ---------------------------------------------------------------- smaller desktops, tablets, phones */
@media (max-width: 1180px) {
  :root #fstage { --rsc-side: 320px; }
  :root #fstage .start-slot .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root #fstage .start-slot .ch .rsc-ill { aspect-ratio: auto; height: 160px; }
  :root #fstage[data-state="start-pick"] .art-box { height: auto; min-height: calc(100vh - 136px); }
  :root #fstage[data-state="idea-writing"] .rsc-desk { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1040px) {
  :root #fstage .stage { grid-template-columns: minmax(0, 1fr); }
  :root #fstage .art-box, :root #fstage .side, :root #fstage[data-page="setup"] .art-box, :root #fstage[data-page="setup"] .side { grid-column: 1; }
  :root #fstage .side, :root #fstage[data-page="setup"] .side { position: static; }
  :root #fstage .side-setup { max-height: none; min-height: 0; overflow: visible; }
  :root #fstage .side-setup .card-foot { position: sticky; bottom: 0; border-radius: 0 0 var(--rs-r-panel) var(--rs-r-panel); }
  :root #fstage .card-scroll { overflow: visible; }
  :root #fstage .fi-grid { grid-template-columns: minmax(0, 1fr); }
  :root #fstage .f-editor .sdoc, :root #fstage .f-editor .sdoc-body { grid-template-columns: minmax(0, 1fr); }
  :root #fstage .f-editor .sdoc > .sdoc-foot { grid-column: 1; }
}
@media (max-width: 760px) {
  :root #fstage .head-row { flex-direction: column; align-items: stretch; gap: 12px; }
  :root #fstage .head.p2-head .head-sub { flex-wrap: wrap; white-space: normal; row-gap: 2px; }
  :root #fstage .head.p2-head .head-sub #headSub { white-space: normal; }
  :root #fstage .p2-acts { width: 100%; margin-left: 0; }
  :root #fstage .head-prog, :root #fstage .head-prog .prog { flex: 1; min-width: 0; }
  :root #fstage .prog-pill { width: 100%; overflow: hidden; }
  :root #fstage .prog-glyphs .pg:not(.now) { display: none; }
  :root #fstage .prog-pill.bare { justify-content: center; }
  body:has(#fstage) .prog-panel { width: auto; left: 0; right: 0; bottom: 0; top: auto; border-radius: 16px 16px 0 0; padding: 8px 16px 24px; max-height: 80vh; overflow-y: auto; }
  body:has(#fstage) .prog-panel::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--rs-line-2); margin: 0 auto 12px; }
  :root #fstage[data-state="start-pick"] .art-box { height: auto; min-height: 0; padding: 16px 12px; }
  :root #fstage .f-start-in { gap: 16px; }
  :root #fstage .start-slot .choices { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  :root #fstage .start-slot .ch { grid-template-columns: 152px 16px minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; height: 140px; padding: 8px; column-gap: 8px; row-gap: 4px; }
  :root #fstage .start-slot .ch .rsc-ill { grid-column: 1; grid-row: 1 / -1; height: 100%; margin: 0; aspect-ratio: auto; }
  :root #fstage .start-slot .ch .cg { grid-column: 2; grid-row: 2; }
  :root #fstage .start-slot .ch .cl { grid-column: 3; grid-row: 2; }
  :root #fstage .start-slot .ch .cd { grid-column: 2 / -1; grid-row: 3; min-height: 0; padding: 0; }
  :root #fstage .rsc-hintc { left: 6px; top: 6px; height: 20px; line-height: 20px; padding: 0 6px; }
  :root #fstage .rsc-spf { justify-content: flex-start; }
  :root #fstage .rsc-lbw { width: 100%; }
  :root #fstage .rsc-lbadge { border-radius: 12px; flex-wrap: wrap; padding: 8px 12px; }
  :root #fstage .rsc-lpop { left: 0; right: auto; width: min(340px, calc(100vw - 56px)); }
  :root #fstage .row-slot .choices { display: flex; width: 100%; }
  :root #fstage .row-slot .ch { flex: 1 1 0; padding: 0 4px; font-size: var(--rs-fs-cap); }
  :root #fstage .row-slot .ch .cg { display: none; }
  :root #fstage .row-slot .ch .cl { font-size: var(--rs-fs-cap); }
  :root #fstage .rsc-desk { padding: 8px; min-height: 0; }
  :root #fstage .sheet-in { padding: 16px; }
  :root #fstage .f-research { grid-template-columns: minmax(0, 1fr); }
  :root #fstage .tp-grid { grid-template-columns: minmax(0, 1fr); }
  :root #fstage .tp-head { flex-wrap: wrap; }
  :root #fstage .tp-acts { margin-left: 0; }
  :root #fstage .f-record { grid-template-columns: minmax(0, 1fr); }
  :root #fstage .re-v { grid-template-columns: 88px minmax(0, 1fr) 16px; }
  :root #fstage .re-v img { width: 88px; }
  :root #fstage .re-row { flex-wrap: wrap; }
  :root #fstage .re-row .pill { width: 100%; }
  :root #fstage .f-editor .sdoc-head, :root #fstage .f-editor .sdoc-article, :root #fstage .f-editor .sdoc > details { padding-left: 12px; padding-right: 12px; }
  :root #fstage .f-editor .sdoc-foot { border-radius: 14px; flex-wrap: wrap; padding: 8px 12px; }
}
/* the editor's narrow mode (js/script-doc.js measures it): the part label sits above its paragraph, inside the page */
:root #fstage .f-editor .sdoc-body.is-narrow { display: block; }
:root #fstage .f-editor .sdoc-body.is-narrow .sdoc-gutter, :root #fstage .f-editor .sdoc-body.is-narrow .sdoc-margin { left: 24px; right: 24px; }
:root #fstage .f-editor .sdoc-body.is-narrow .sdoc-mark, :root #fstage .f-editor .sdoc-body.is-narrow .sdoc-mark:hover, :root #fstage .f-editor .sdoc-body.is-narrow .sdoc-mark.is-active { padding: 0; background: none; box-shadow: none; }
@media (max-width: 760px) { :root #fstage .f-editor .sdoc-body.is-narrow .sdoc-gutter, :root #fstage .f-editor .sdoc-body.is-narrow .sdoc-margin { left: 12px; right: 12px; } }
:root #fstage .f-editor .sdoc-body.is-narrow .sdoc-article p.sdoc-first:first-child { margin-top: 2.6rem; }

/* ---------------------------------------------------------------- the read view: rehearse and recording (js/plan-record.js .rv--inline) */
:root #fstage[data-reading] .art-box { padding: var(--rs-pad); }
:root #fstage[data-reading] .frame > .f-recview { height: calc(100vh - 176px); min-height: 420px; border-radius: 10px; background: var(--dk-inv, #1F1F21); box-shadow: none; }
:root #fstage .readview.rv--inline { background: var(--dk-inv, #1F1F21); color: var(--dk-oninv, #fff); --rv-ink: var(--dk-oninv, #fff); --rv-ground: var(--dk-inv, #1F1F21); --rv-muted: rgba(255,255,255,.62); --rv-faint: rgba(255,255,255,.38); --rv-line: rgba(255,255,255,.14); --rv-fill: var(--dk-inv, #1F1F21); --rv-bar: 64px; }
:root #fstage .readview.rv--inline .rv-title { font-size: var(--rs-fs-body); color: rgba(255,255,255,.5); }
:root #fstage .readview.rv--inline .rv-part-head { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); color: var(--rs-peri-light); }
:root #fstage .readview.rv--inline .readview-marker { background: none; color: rgba(255,255,255,.45); min-width: 0; height: auto; padding: 0; margin-right: 8px; font-size: var(--rs-fs-body); }
:root #fstage .readview.rv--inline .rv-line { color: rgba(255,255,255,.38); }
:root #fstage .readview.rv--inline .rv-line.is-lit { color: rgba(255,255,255,.62); }
:root #fstage .readview.rv--inline .rv-line.is-now { color: #fff; }
:root #fstage .readview.rv--inline .rv-self { border-radius: 8px; border: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 8px 24px rgba(0,0,0,.4); background: #333; }
:root #fstage .rv--rehearse .rv-self-l { background: rgba(20,21,25,.55); color: #fff; font-size: var(--rs-fs-cap); }
:root #fstage .rv--rehearse .rv-self-ph { color: rgba(255,255,255,.3); }
:root #fstage .readview.rv--inline .rv-bar { background: var(--rs-panel); border-top: 1px solid var(--rs-line); color: var(--rs-tx); gap: 8px; padding: 12px; }
:root #fstage .readview.rv--inline .rv-bar .btn { min-height: 32px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--rs-r-pill) !important; background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line-2); color: var(--rs-tx); font: var(--rs-w-med) var(--rs-fs-body)/1 var(--rs-font); letter-spacing: var(--rs-ls); }
:root #fstage .readview.rv--inline .rv-bar .btn:hover { background: var(--rs-inset); }
:root #fstage .readview.rv--inline .rv-q[aria-pressed="true"] { background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); box-shadow: none; }
:root #fstage .readview.rv--inline .rv-bar .rv-record, :root #fstage .readview.rv--inline .rv-bar .btn--primary { background: var(--rs-peri-deep); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(76,95,146,.25); }
:root #fstage .readview.rv--inline .rv-dot { background: var(--dk-b-f4b8b1, #F4B8B1); }
:root #fstage .readview.rv--inline .rv-speed { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root #fstage .readview.rv--inline .rv-speed input { accent-color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root #fstage .readview.rv--inline .rv-select { height: 32px; border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--rs-line-2); color: var(--rs-tx); font-size: var(--rs-fs-body); }
:root #fstage .readview.rv--inline .rv-time { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); color: var(--rs-tx); }
:root #fstage .readview.rv--inline .readview-count { background: rgba(20,21,25,.55); color: #fff; }
:root #fstage .readview.rv--inline .rv-notice { background: var(--dk-b-ffffffa95, rgba(255,255,255,.95)); color: var(--rs-tx); border: 0; font-size: var(--rs-fs-cap); }
:root #fstage .readview.rv--inline .rv-bar { --rv-fill: var(--dk-paper, #fff); --rv-ink: var(--rs-tx); --rv-line: var(--rs-line-2); }
:root #fstage .readview.rv--inline .rv-bar .rv-q[aria-pressed="true"] { background: var(--rs-sel) !important; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)) !important; border-color: transparent !important; }
:root #fstage .card-head { position: static; background: none; margin: 0; padding: 0; }
:root #fstage .card-scroll { display: flex; flex-direction: column; gap: 16px; }
:root #fstage .card-scroll > * { flex: none; }

/* ---------------------------------------------------------------- the editor's list mode (js/script-doc.js .is-list, wide, on #fstage):
   the parts list on the left and the comments on the right, both sticky, starting level with the page's head (mockup script-open) */
:root #fstage .f-editor .sdoc-mh { display: none; }
:root #fstage .f-editor .sdoc-body.is-list .sdoc-gutter, :root #fstage .f-editor .sdoc-body.is-list .sdoc-margin {
  position: sticky; top: calc(var(--rs-top-h) + 16px); align-self: start; margin-top: calc(-1 * var(--sdoc-head-h, 0px)); display: grid; gap: 4px; align-content: start;
  max-height: calc(100vh - var(--rs-top-h) - 32px); overflow-y: auto; scrollbar-width: thin; min-height: 0 !important; }
:root #fstage .f-editor .sdoc-body.is-list .sdoc-gutter { counter-reset: rscpart; }
:root #fstage .f-editor .sdoc-body.is-list .sdoc-gutter::before { content: "Parts"; padding: 4px 8px; font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root #fstage .f-editor .sdoc-body.is-list .sdoc-mark, :root #fstage .f-editor .sdoc-body.is-list .sdoc-mark:hover, :root #fstage .f-editor .sdoc-body.is-list .sdoc-mark:focus-within {
  position: relative; left: auto; right: auto; top: auto; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 8px; align-items: center; padding: 8px; border-radius: 10px;
  background: none; box-shadow: none; cursor: pointer; counter-increment: rscpart; z-index: auto; }
:root #fstage .f-editor .sdoc-body.is-list .sdoc-mark::before { content: counter(rscpart); grid-row: 1; grid-column: 1; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--rs-inset); color: var(--rs-tx-2); font-size: 11px; font-weight: var(--rs-w-med); }
:root #fstage .f-editor .sdoc-body.is-list .sdoc-mark:hover { background: var(--rs-inset); }
:root #fstage .f-editor .sdoc-body.is-list .sdoc-mark.is-active { background: var(--rs-sel); }
:root #fstage .f-editor .sdoc-body.is-list .sdoc-mark.is-active::before { background: var(--rs-peri-deep); color: #fff; }
:root #fstage .f-editor .sdoc-body.is-list .sdoc-mark-name { grid-column: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
:root #fstage .f-editor .sdoc-body.is-list .sdoc-mark-meta, :root #fstage .f-editor .sdoc-body.is-list .sdoc-tools { grid-column: 2; }
:root #fstage .f-editor .sdoc-body.is-list .sdoc-tools { display: none; margin: 4px 0 0; }
:root #fstage .f-editor .sdoc-body.is-list .sdoc-mark.is-active .sdoc-tools, :root #fstage .f-editor .sdoc-body.is-list .sdoc-mark:focus-within .sdoc-tools { display: flex; opacity: 1; pointer-events: auto; box-shadow: none !important; background: none; }
:root #fstage .f-editor .sdoc-body.is-list .sdoc-mark[hidden] { display: none; }
:root #fstage .f-editor .sdoc-body.is-list .sdoc-margin { gap: 8px; }
:root #fstage .f-editor .sdoc-body.is-list .sdoc-mh { display: grid; gap: 2px; padding: 0 4px 4px; }
:root #fstage .f-editor .sdoc-mh-t { margin: 0; font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); line-height: 1.4; }
:root #fstage .f-editor .sdoc-mh-s { margin: 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root #fstage .f-editor .sdoc-body.is-list .sdoc-cmt { position: relative; left: auto; right: auto; top: auto; }
:root #fstage .f-editor .sdoc-cmt-quote { margin: 0; padding-left: 8px; box-shadow: inset 2px 0 0 rgba(244,200,96,.8); font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root #fstage .f-editor .sdoc-cmt-text { margin: 0; font-size: var(--rs-fs-body); line-height: 1.5; color: var(--rs-tx); }
:root #fstage .f-editor .sdoc-cmt.is-resolved { padding: 8px 12px; background: none; }
:root #fstage .f-editor .sdoc-cmt.is-resolved .link { color: var(--rs-tx-3); font-size: var(--rs-fs-cap); text-align: left; }

/* ---------------------------------------------------------------- pages whose head is the shared videoHead (views.js): the posted-video plan
   (reedit.js) and a script past its step (read only). The back link sits on the caption line, as Create's crumb. */
:root #fstage.fstage--ws .head.p2-head { position: relative; }
:root #fstage.fstage--ws .p2-back { position: absolute; left: 0; top: 0; z-index: 1; display: inline-flex; align-items: center; gap: 4px; height: 16px; margin: 0; padding: 0; font-size: 0; color: var(--rs-tx); text-decoration: none; }
:root #fstage.fstage--ws .p2-back::after { content: "Videos"; font-size: var(--rs-fs-cap); line-height: 16px; }
:root #fstage.fstage--ws .p2-back .p2-back-ar { width: 6px; height: 6px; margin: 0 4px 0 2px; border: solid var(--rs-tx-3); border-width: 0 0 1.5px 1.5px; transform: rotate(45deg); background: none; }
:root #fstage.fstage--ws .head.p2-head .head-sub { padding-left: 70px; position: relative; display: block; }
:root #fstage.fstage--ws .head.p2-head .head-sub::before { content: ""; position: absolute; left: 60px; top: 6.5px; width: 3px; height: 3px; border-radius: 50%; background: var(--rs-tx-3); }
:root #fstage.fstage--ws .head.p2-head h1 .ws-title, :root #fstage.fstage--ws .head.p2-head h1.ws-h1 { font-size: var(--rs-fs-title); font-weight: var(--rs-w-med); line-height: 28px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the posted-video plan: its card is the stage panel's content */
:root #fstage.fstage--reedit .art-box > :not(.frame) { display: none; }
:root #fstage.fstage--reedit .frame { aspect-ratio: auto; background: none; box-shadow: none; overflow: visible; }
:root #fstage.fstage--reedit .frame > * { position: relative; inset: auto; opacity: 1; visibility: visible; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; padding: 0; }
:root #fstage.fstage--reedit .side-reedit { display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- camera and microphone check, the take */
:root #fstage .side-reccheck, :root #fstage .side-take { position: relative; inset: auto; }
:root #fstage .rec-devices, :root #fstage .rec-dev, :root #fstage .rec-level { border: 0; padding: 0; }
:root #fstage .rec-devices { display: grid; gap: 12px; }
:root #fstage .rec-dev, :root #fstage .rec-level { grid-template-columns: minmax(0, 1fr); gap: 4px; }
:root #fstage .rec-dev-k, :root #fstage .rk-field > label { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); color: var(--rs-tx); }
:root #fstage .rec-dev-v { font-size: var(--rs-fs-body); color: var(--rs-tx-2); }
:root #fstage .rec-dev select.input, :root #fstage .rk-field select.input { min-height: 36px; height: 36px; padding: 0 32px 0 12px; font-size: var(--rs-fs-body); }
:root #fstage .rk-field { margin: 0; }
:root #fstage .sound, :root #fstage .rec-meter { height: 8px; border-radius: 4px; background: var(--rs-raise); }
:root #fstage .sound i, :root #fstage .rec-meter span { background: var(--rs-peri-deep); }
:root #fstage .rk-heard { margin-top: 4px; font-size: var(--rs-fs-cap); }
:root #fstage .rk-heard.ok { color: var(--dk-tx-rs-pos, var(--rs-pos)); font-weight: var(--rs-w-reg); }
:root #fstage .advice, :root #fstage .rec-checks { margin: 0; gap: 8px; }
:root #fstage .advice li, :root #fstage .rec-checks li { padding: 8px 12px; border: 0; border-radius: 10px; background: var(--rs-inset); box-shadow: none; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root #fstage .advice li .vi, :root #fstage .rec-checks li .vi { color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root #fstage .cam-fps { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 99px; background: rgba(20,21,25,.55); color: #fff; font-size: var(--rs-fs-cap); }
:root #fstage .side-reccheck .pane-h { margin-bottom: 0; }
:root #fstage .rec-take { display: grid; gap: 12px; }
:root #fstage .rec-take .recovered { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font-size: var(--rs-fs-cap); }
:root #fstage .rec-take dl { display: grid; margin: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--rs-line); }
:root #fstage .rec-take dl > div { display: flex; gap: 12px; padding: 8px 12px; margin: 0; border: 0; }
:root #fstage .rec-take dl > div + div { border-top: 1px solid var(--rs-line); }
:root #fstage .rec-take dt { color: var(--rs-tx-2); font-size: var(--rs-fs-body); }
:root #fstage .rec-take dd { margin: 0 0 0 auto; font-weight: var(--rs-w-med); font-size: var(--rs-fs-body); font-variant-numeric: tabular-nums; }
:root #fstage .side-take .btn, :root #fstage .side-record .btn { min-height: 36px; height: 36px; padding: 0 16px; border: 0; border-radius: var(--rs-r-pill); font: var(--rs-w-med) var(--rs-fs-body)/1 var(--rs-font); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line-2); color: var(--rs-tx); }
:root #fstage .side-take .btn--primary, :root #fstage .side-record .btn--primary { background: var(--rs-peri-deep); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(76,95,146,.25); }
:root #fstage .side-take .btn--ghost { background: none; box-shadow: none; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); padding: 0 4px; }
/* the recording view page (data-page="recview") is full width like the read view */
:root #fstage[data-page="recview"] .stage { grid-template-columns: minmax(0, 1fr); }
:root #fstage[data-page="recview"] .side { display: none; }
:root #fstage[data-page="recview"] .art-box { padding: var(--rs-pad); }
:root #fstage .f-recview { border-radius: 10px; box-shadow: none; background: var(--dk-inv, #1F1F21); height: calc(100vh - 176px); }
/* the stage's own pop-up (paste a script, describe a change) */
:root #fstage dialog.pop { width: min(480px, calc(100vw - 32px)); padding: 16px; border: 0; border-radius: 14px; background: var(--rs-panel); color: var(--rs-tx); box-shadow: 0 0 0 1px var(--rs-line), 0 24px 64px rgba(31,31,33,.22); }
:root #fstage dialog.pop::backdrop { background: var(--dk-s-1f1f21a32, rgba(31,31,33,.32)); }
:root #fstage dialog.pop form { display: grid; gap: 12px; }
:root #fstage dialog.pop h2 { margin: 0; font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); }
:root #fstage .pop-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 0; }
/* the editor's notes over the page */
:root #fstage .f-editor p[role="alert"], :root #fstage .f-editor .pkg-preread { margin: 0; padding: 8px 12px; border-radius: 10px; font-size: var(--rs-fs-cap); }
:root #fstage .f-editor p[role="alert"] { background: var(--rs-neg-soft); color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root #fstage .f-editor .pkg-preread { background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); color: var(--rs-tx-2); }
:root #fstage .readview.rv--inline.is-recording .rv-bar .rv-record, :root #fstage .readview.rv--inline .rv-bar .btn.rv-record { background: var(--rs-peri-deep); color: #fff; opacity: 1; }
:root #fstage .f-editor .sdoc-article:focus { outline: none; }

/* ---------------------------------------------------------------- rs-fix (merged app vs mockup, 2026-10-18) */
:root #fstage { max-width: none; }
:root #fstage .row-slot.on { display: flex; align-items: center; gap: 12px; min-width: 0; }
:root #fstage .rsc-rowcap { margin-left: auto; min-width: 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root #fstage .row-slot:not(.on) .rsc-rowcap { display: none; }
@media (max-width: 1180px) { :root #fstage .rsc-rowcap { display: none; } }
/* record: a section head over self-view and script; Start recording is the side's one primary */
:root #fstage .f-record { padding: 0; align-content: start; }
:root #fstage .rsc-sh { grid-column: 1 / -1; display: grid; gap: 4px; }
:root #fstage .f-record:not(.show) .rsc-sh { display: none; }
:root #fstage .selfview { aspect-ratio: 4 / 5; max-height: 420px; justify-content: center; align-items: center; gap: 8px; }
:root #fstage .rec-off { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; }
:root #fstage .sv-glyph { margin: 0; color: var(--rs-tx-3); line-height: 0; }
:root #fstage .sv-glyph .vi { width: 40px; height: 40px; max-width: none; }
:root #fstage .selfview p { position: static; margin: 0; }
:root #fstage .cam-off { position: absolute; left: 12px; top: 12px; }
:root #fstage .prompter { max-height: 420px; padding: 0 12px 12px; -webkit-mask: linear-gradient(#000 70%, transparent); mask: linear-gradient(#000 70%, transparent); }
:root #fstage .prompter::after { display: none; }
:root #fstage .pr-h { position: sticky; top: 0; z-index: 2; margin: 0 -12px 8px; padding: 12px 12px 8px; background: var(--dk-paper, #fff); }
:root #fstage .pr-lines p { color: var(--rs-tx-2); }
:root #fstage .pr-lines p.now { color: var(--rs-tx); background: none; padding: 0; margin-left: 0; }
:root #fstage .rec-browser { display: grid; gap: 8px; }
:root #fstage .rsc-recgo { width: 100%; }
:root #fstage .rec-bar { display: none; }
@media (max-width: 760px) { :root #fstage .selfview { aspect-ratio: 16 / 9; } }
/* idea: Write my script sits at the end of its column (mockup) */
:root #fstage .fi-go { justify-self: end; }
:root #fstage .side-record .rec-browser { grid-template-columns: minmax(0, 1fr); }
:root #fstage .side-record .rsc-recgo { grid-column: 1 / -1; width: 100%; }
:root #fstage .frame.flow, :root #fstage .frame.tall { aspect-ratio: auto; }
:root #fstage .frame.flow > div.show, :root #fstage .frame.tall > div.show { position: relative; inset: auto; }
:root #fstage .row-slot .choices { flex: none; }
:root #fstage .row-slot .ch { flex: none; white-space: nowrap; }
@media (max-width: 760px) { :root #fstage .row-slot .choices { flex: 1 1 auto; } :root #fstage .row-slot .ch { flex: 1 1 0; } }

/* ---------------------------------------------------------------- rs-fix2 (Parker 2026-10-19): content shows at once; media layers keep 16:9 */
/* the camera check, the take, the setup preview and the upload shot are pictures: a 16:9 frame, never a collapsed bar */
:root #fstage .frame.flow > .f-camera.show, :root #fstage .frame.flow > .f-takeview.show, :root #fstage .frame.flow > .f-video.show, :root #fstage .frame.flow > .f-shot.show {
  aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--dk-inv, #1F1F21); }
:root #fstage .f-camera .rec-video, :root #fstage .f-camera video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* entrances are at most 200ms and never delayed; the page never waits on them */
:root #fstage { --t-medium: 200ms; --t-large: 200ms; --t-small: 160ms; }
:root #fstage .start-slot .ch, :root #fstage .start-slot .ch:nth-child(n) { animation-duration: 200ms; animation-delay: 0s; }
html:has(#fstage)::view-transition-group(*), html:has(#fstage)::view-transition-old(*), html:has(#fstage)::view-transition-new(*) { animation-duration: 160ms !important; animation-delay: 0s !important; }

/* ---------------------------------------------------------------- rs-clip (whole-app clipping detector, 2026-10-19) */
/* the head never grows past the page on a phone: its title box is one shrinking column */
:root #fstage .head-row > * { min-width: 0; max-width: 100%; }
:root #fstage .p2-titlebox { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) {
  :root #fstage .head.p2-head .head-sub { white-space: normal; overflow: visible; height: auto; }
  :root #fstage .head.p2-head h1, :root #fstage .head.p2-head h1.long { min-width: 0; }
  /* the read view's controls wrap instead of running past its edge */
  :root #fstage .readview.rv--inline .rv-bar { flex-wrap: wrap; }
  :root #fstage .readview .rv-quiet { flex-wrap: wrap; overflow: visible; width: 100%; }
}
/* the part picker sizes to its (short) labels */
:root #fstage .readview.rv--inline .rv-select { width: auto; max-width: none; padding: 0 28px 0 12px; }
/* part names in the editor's list wrap rather than hide behind an ellipsis */
:root #fstage .f-editor .sdoc-body.is-list .sdoc-mark-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* the editing card on a short screen (1280x720): a little tighter, so it fits instead of scrolling a sliver */
@media (max-height: 760px) { :root .fstage .proc-scroll { gap: 8px; padding-top: 4px; } }
:root #fstage #titleText { min-width: 0; }
:root #fstage .f-editor .sdoc-body.is-narrow .sdoc-mark-name { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; flex: 1 1 auto; min-width: 0; }
@media (max-width: 760px) { :root #fstage .readview .rv-quiet { width: auto; flex: 1 1 100%; min-width: 0; max-width: 100%; padding-right: 0; } }

/* ---------------------------------------------------------------- rs-rhythm (2026-10-19): no card inside a card; inner boxes are flat insets */
:root #fstage .rsc-desk { box-shadow: none; }
:root #fstage .fs-sheet, :root #fstage[data-state="idea-writing"] .fs-sheet, :root #fstage[data-state="script-ready"] .fs-sheet, :root #fstage[data-state="idea-draft"] .fs-sheet { box-shadow: none; border: 0; }
:root #fstage .rsc-lbadge, :root #fstage .rsc-lbadge.quiet { box-shadow: none; }
:root #fstage button.rsc-lbadge:hover, :root #fstage .rsc-lbadge[aria-expanded="true"] { box-shadow: none; background: var(--rs-raise); }
:root #fstage .im, :root #fstage[data-state="idea-empty"] .im { background: var(--rs-inset); border: 0; box-shadow: none; border-radius: 10px; }
/* the script editor in one column (phones, narrow windows): the head and the text are one white page, not two stacked cards */
@media (max-width: 1100px) {
  :root #fstage .f-editor .sdoc { background: var(--rs-panel); border-radius: var(--rs-r-panel); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-shadow); }
  :root #fstage .f-editor .sdoc-head, :root #fstage .f-editor .sdoc-article, :root #fstage .f-editor .sdoc > details { background: none; box-shadow: none; }
  :root #fstage .f-editor .sdoc-head { border-bottom: 1px solid var(--rs-line); }
}