/* Layout: a production desk. Left = videos + team library, centre = chat with the producer, right = the shot board. */
:root{
  color-scheme:light;
  --ground:#ECEEF1; --surface:#FFFFFF; --sunk:#E2E6EB; --ink:#171B22; --muted:#5A6271; --line:#D3D8E0;
  --accent:#0E6B71; --accent-ink:#FFFFFF; --accent-soft:#D5EBEB; --tally:#C8432B; --ok:#2E7D4F; --warn:#9A620A;
  --display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --body:"IBM Plex Sans","Helvetica Neue",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root{
  color-scheme:dark; --ground:#101317; --surface:#181C22; --sunk:#22272F; --ink:#E6E9ED; --muted:#98A1AE; --line:#2D333C;
  --accent:#4DB3B8; --accent-ink:#0A1A1B; --accent-soft:#17373A; --tally:#F0694F; --ok:#5CC08A; --warn:#E0A445;}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%; margin:0}
body{background:var(--ground); color:var(--ink); font:14.5px/1.5 var(--body); padding:14px max(16px,env(safe-area-inset-right)) 14px max(16px,env(safe-area-inset-left))}
button,input,textarea,select{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
img,video{max-width:100%}
a{color:var(--accent)}
.eyebrow{font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.mono{font-family:var(--mono); font-size:12px}
.muted{color:var(--muted)}
h1{font:700 22px/1.1 var(--display); letter-spacing:-.01em; margin:0}
h2{font:700 17px/1.2 var(--display); margin:0; text-wrap:balance}
h3{font:600 14px var(--body); margin:0}
p{margin:0}
.btn{border:0; border-radius:999px; padding:9px 16px; font-weight:600; background:var(--accent); color:var(--accent-ink); text-decoration:none; display:inline-block}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--ink)}
.btn.small{padding:6px 11px; font-size:13px}
.btn.danger{background:transparent; border:1px solid var(--tally); color:var(--tally)}
.linkbtn{background:none; border:0; padding:0; color:var(--accent); font-weight:600}
/* login */
.login{min-height:100%; display:grid; place-items:center}
.login-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px; width:min(380px,100%); display:flex; flex-direction:column; gap:10px}
.login-card h1{font-size:28px}
.login-card label{font-weight:600; font-size:13px; margin-top:6px}
.login-card input{border:1px solid var(--line); border-radius:10px; background:var(--ground); padding:10px 12px}
.login-card .btn{margin-top:10px}
/* app */
.app{height:100%; display:grid; grid-template-columns:270px minmax(0,1fr) minmax(0,1.2fr); grid-template-rows:auto minmax(0,1fr); gap:12px}
header.top{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px}
.brand{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.status{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.pill{display:inline-flex; align-items:center; gap:6px; font:500 11.5px/1 var(--mono); padding:6px 9px; border-radius:999px; background:var(--sunk); color:var(--muted); white-space:nowrap}
.pill::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--line)}
.pill[data-s="ok"]{color:var(--ok)} .pill[data-s="ok"]::before{background:var(--ok)}
.pill[data-s="bad"]{color:var(--tally)} .pill[data-s="bad"]::before{background:var(--tally)}
.pill[data-s="run"]::before{background:var(--tally); animation:blink 1.1s ease-in-out infinite}
@keyframes blink{50%{opacity:.2}}
@media (prefers-reduced-motion: reduce){.pill[data-s="run"]::before{animation:none}}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:14px; min-height:0; min-width:0; display:flex; flex-direction:column; overflow:hidden}
.panel > .head{padding:12px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:8px}
.scroll{overflow:auto; min-height:0; flex:1}
.rail{display:flex; flex-direction:column; gap:12px; min-height:0}
.rail .panel{flex:1}
.projects{list-style:none; margin:0; padding:6px}
.projects li button{width:100%; text-align:left; background:none; border:0; border-radius:8px; padding:8px 10px; display:flex; flex-direction:column; gap:2px}
.projects li button:hover{background:var(--sunk)}
.projects li button[aria-current="true"]{background:var(--accent-soft)}
.projects .t{font-weight:600}
.projects .s{font:500 11px var(--mono); color:var(--muted)}
.lib{padding:10px; display:flex; flex-direction:column; gap:10px}
.lib.drop{outline:2px dashed var(--accent); outline-offset:-6px}
.folder summary{cursor:pointer; font-weight:600; font-size:13px; list-style:none; display:flex; justify-content:space-between; gap:8px}
.folder summary::-webkit-details-marker{display:none}
.grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:6px}
.tile{position:relative; border:2px solid transparent; border-radius:8px; overflow:hidden; background:var(--sunk); padding:0; aspect-ratio:1}
.tile img{width:100%; height:100%; object-fit:contain; display:block}
.tile[aria-pressed="true"]{border-color:var(--accent)}
.tile .k{position:absolute; left:3px; bottom:3px; font:500 9.5px/1 var(--mono); background:var(--surface); color:var(--ink); padding:2px 4px; border-radius:4px; text-transform:uppercase}
.uploadrow{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.uploadrow select{border:1px solid var(--line); border-radius:8px; background:var(--ground); padding:5px 8px; font-size:12.5px}
input[type=file]{display:none}
.chat{display:flex; flex-direction:column; min-height:0}
.msgs{padding:14px; display:flex; flex-direction:column; gap:12px}
.msg{max-width:92%; padding:10px 12px; border-radius:12px; white-space:pre-wrap; overflow-wrap:anywhere}
.msg.user{align-self:flex-end; background:var(--accent-soft)}
.msg.assistant{align-self:flex-start; background:var(--sunk)}
.msg.note{align-self:center; background:transparent; color:var(--muted); font-size:12.5px; text-align:center; padding:2px}
.msg .by{display:flex; align-items:center; justify-content:space-between; gap:8px; font:500 10.5px var(--mono); color:var(--muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:.05em}
.copy-msg{font:500 10px var(--mono); text-transform:none; letter-spacing:0; color:var(--muted); background:none; border:1px solid var(--line); border-radius:999px; padding:2px 8px; cursor:pointer; opacity:.7}
.copy-msg:hover{opacity:1}
.copy-msg.ok{color:var(--ok); border-color:var(--ok); opacity:1}
.msg .att{display:flex; gap:4px; margin-top:6px; flex-wrap:wrap}
.msg .att img{width:44px; height:44px; object-fit:cover; border-radius:6px}
.composer{border-top:1px solid var(--line); padding:10px; display:flex; flex-direction:column; gap:8px}
.composer textarea{width:100%; min-height:64px; max-height:220px; resize:vertical; border:1px solid var(--line); border-radius:10px; background:var(--ground); padding:9px 11px}
.composer .row{display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between}
.chips{display:flex; gap:4px; flex-wrap:wrap}
.chips img{width:34px; height:34px; border-radius:6px; object-fit:cover; border:1px solid var(--line)}
.starters{display:flex; flex-wrap:wrap; gap:6px}
.starters button{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:6px 11px; font-size:12.5px}
.actions{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.stages{display:flex; flex-wrap:wrap; gap:4px}
.stage{font:500 11px/1 var(--mono); padding:6px 8px; border-radius:6px; background:var(--sunk); color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.stage[data-on="done"]{color:var(--ok)}
.stage[data-on="now"]{background:var(--ink); color:var(--surface)}
/* the stage chips are the step tabs */
button.stage{border:1px solid transparent; cursor:pointer}
button.stage:disabled{cursor:not-allowed; opacity:.55}
button.stage[aria-current="step"]{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset}
button.stage:not(:disabled):hover{border-color:var(--line)}
.board{padding:14px; display:flex; flex-direction:column; gap:14px}
.card{border:1px solid var(--line); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:10px; min-width:0}
.scene{display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px}
.slate{font:600 12px/1 var(--mono); background:var(--ink); color:var(--surface); border-radius:6px; padding:6px 7px; height:max-content; font-variant-numeric:tabular-nums}
.line{font-weight:600}
.shot{color:var(--muted); font-size:13.5px}
.cands{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.cands.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cand{position:relative; border:3px solid transparent; border-radius:10px; overflow:hidden; background:var(--sunk); padding:0; display:block; min-width:0}
.cand img{width:100%; display:block; aspect-ratio:9/16; object-fit:cover}
.cand[aria-pressed="true"]{border-color:var(--accent)}
.cand .n{position:absolute; top:5px; left:5px; font:600 11px/1 var(--mono); background:var(--surface); color:var(--ink); padding:3px 5px; border-radius:5px}
.cand .x{position:absolute; inset:auto 0 0 0; background:color-mix(in srgb,var(--tally) 88%,transparent); color:#fff; font-size:11.5px; padding:4px 6px; text-align:left}
.take{display:flex; flex-direction:column; gap:6px; min-width:0}
.take video{width:100%; aspect-ratio:9/16; background:#000; border-radius:10px; border:3px solid transparent}
.take[data-picked="true"] video{border-color:var(--accent)}
.take img{border-radius:6px}
.why{background:var(--accent-soft); border-radius:8px; padding:8px 10px; font-size:13.5px}
.warn{background:color-mix(in srgb,var(--warn) 14%,var(--surface)); border-radius:8px; padding:8px 10px; font-size:13.5px}
.err{background:color-mix(in srgb,var(--tally) 14%,var(--surface)); border-radius:8px; padding:8px 10px; font-size:13.5px}
.cost{font:500 12.5px var(--mono); color:var(--muted)}
.empty{border:1px dashed var(--line); border-radius:12px; padding:16px; color:var(--muted); display:flex; flex-direction:column; gap:8px}
.empty h3{color:var(--ink)}
.kv{display:grid; grid-template-columns:110px minmax(0,1fr); gap:4px 10px; font-size:13.5px; margin:0}
.kv dt{color:var(--muted)} .kv dd{margin:0}
.reftiles{display:flex; gap:6px; flex-wrap:wrap}
.reftiles img{width:56px; height:56px; object-fit:contain; background:var(--sunk); border-radius:8px}
.final video{width:min(320px,100%); aspect-ratio:9/16; background:#000; border-radius:12px}
.transcript{font-size:12.5px; color:var(--muted); font-style:italic}
/* settings sheet */
.sheet{position:fixed; inset:0; background:color-mix(in srgb,#000 45%,transparent); display:flex; justify-content:flex-end; z-index:20}
.sheet-card{background:var(--surface); width:min(560px,100%); height:100%; overflow:auto; padding:18px max(16px,env(safe-area-inset-right)) 24px 18px; display:flex; flex-direction:column; gap:12px; border-left:1px solid var(--line)}
.sheet-head{display:flex; justify-content:space-between; align-items:center; gap:10px}
.sheet-card fieldset{border:1px solid var(--line); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:6px; margin:0; min-width:0}
.sheet-card legend{font-weight:600; padding:0 6px}
.sheet-card label{font-size:13px; font-weight:600; margin-top:4px}
.sheet-card input,.sheet-card select,.sheet-card textarea{border:1px solid var(--line); border-radius:8px; background:var(--ground); padding:8px 10px; width:100%; min-width:0}
.sheet-card textarea{font-family:var(--mono); font-size:12.5px}
.sheet-card details summary{cursor:pointer; font-size:13px; color:var(--muted); margin-top:4px}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.two-col > div{display:flex; flex-direction:column; gap:6px; min-width:0}
.small{font-size:12.5px}
.sheet-foot{position:sticky; bottom:-24px; background:var(--surface); padding-block:10px}
.user-row{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:4px 0; border-bottom:1px solid var(--line)}
#t-llm[data-ok="true"],#t-media[data-ok="true"]{color:var(--ok)} #t-llm[data-ok="false"],#t-media[data-ok="false"]{color:var(--tally)}
@media (max-width:520px){ .two-col{grid-template-columns:1fr} }
.tabsm{display:none}
@media (max-width:1100px){
  html,body{height:auto}
  .app{grid-template-columns:minmax(0,1fr); grid-template-rows:auto; height:auto}
  .tabsm{display:flex; gap:4px; background:var(--sunk); padding:4px; border-radius:999px; width:max-content; max-width:100%}
  .tabsm button{border:0; background:transparent; padding:7px 14px; border-radius:999px; color:var(--muted); font-weight:500}
  .tabsm button[aria-selected="true"]{background:var(--surface); color:var(--ink)}
  .app > .col{display:none} .app > .col.on{display:flex}
  .rail .panel{flex:none} .rail .scroll{max-height:50vh}
  #msgs-scroll{max-height:58vh; min-height:240px}
}
@media (max-width:520px){ .cands{grid-template-columns:repeat(2,minmax(0,1fr))} .kv{grid-template-columns:1fr} }
.said{font-size:13.5px; margin:2px 0}
.said .mono{font-size:11px; letter-spacing:.06em; text-transform:uppercase; margin-right:6px}
.reftiles.small{margin-top:6px}
.reftiles.small img{width:36px; height:36px}
/* Higgsfield credits badge in the header */
.credits{display:inline-flex; align-items:center; gap:7px; font:500 11.5px/1 var(--mono); padding:4px 10px 4px 4px; border-radius:999px; border:1px solid var(--line); background:var(--sunk); color:var(--muted); white-space:nowrap; cursor:default}
.credits .hf{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--ink); color:var(--surface); font:700 9px/1 var(--mono); letter-spacing:-.02em}
.credits[data-s="ok"]{color:var(--ok); border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
.credits[data-s="warn"]{color:var(--warn); border-color:color-mix(in srgb,var(--warn) 50%,var(--line))}
.credits[data-s="bad"]{color:var(--tally); border-color:var(--tally)}
.credits[data-s="bad"] .hf{background:var(--tally)}
.credits{cursor:pointer}
.cr-wrap{position:relative}
.cr-pop{position:absolute; top:calc(100% + 8px); right:0; z-index:30; width:min(340px, calc(100vw - 32px)); background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px; box-shadow:0 12px 32px color-mix(in srgb,#000 22%,transparent); display:flex; flex-direction:column; gap:8px}
.cr-math{display:flex; flex-direction:column; gap:2px; font-variant-numeric:tabular-nums}
.cr-line{display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:13.5px}
.cr-line b{font-family:var(--mono); font-weight:500}
.cr-line.total{border-top:1px solid var(--line); margin-top:2px; padding-top:8px; font-weight:600}
.cr-line.total b{font-size:16px; font-weight:600}
.cr-line.total[data-s="ok"] b{color:var(--ok)} .cr-line.total[data-s="warn"] b{color:var(--warn)} .cr-line.total[data-s="bad"] b{color:var(--tally)}
.cr-form{display:flex; flex-direction:column; gap:6px; border-top:1px solid var(--line); padding-top:10px}
.cr-form label{font-size:12.5px; font-weight:600}
.cr-form .row{display:flex; gap:6px}
.cr-form input{flex:1; min-width:0; border:1px solid var(--line); border-radius:8px; background:var(--ground); padding:7px 10px}
/* all of a scene's frames: one row, thin sideways scrollbar, 4 visible at a time */
.frame-strip{display:flex; gap:8px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding-bottom:6px; scrollbar-width:thin; scrollbar-color:var(--line) transparent}
.frame-strip::-webkit-scrollbar{height:6px}
.frame-strip::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px}
.frame-strip:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:10px}
.frame-strip .cand{flex:0 0 calc((100% - 24px) / 4); min-width:120px; scroll-snap-align:start}
.frame-strip .cand.new-round{margin-left:14px}
.frame-strip .cand[disabled]{cursor:default; opacity:.8}
.cand .round{position:absolute; top:5px; right:5px; z-index:1; font:600 10px/1 var(--mono); background:var(--ink); color:var(--surface); padding:3px 6px; border-radius:5px}
/* reference photos per scene */
.refs-pick{border:1px solid var(--line); border-radius:10px; padding:10px; margin:6px 0 0; min-width:0}
.refs-pick legend{font-size:12.5px; font-weight:600; padding:0 4px}
.refs-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px}
.ref-opt{position:relative; display:flex; flex-direction:column; gap:3px; padding:5px; border:1px solid var(--line); border-radius:8px; cursor:pointer; font-size:11px; font-weight:500; min-width:0}
.ref-opt img{width:100%; aspect-ratio:1; object-fit:contain; background:var(--sunk); border-radius:6px}
.ref-opt span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ref-opt em{font:500 10px/1 var(--mono); font-style:normal; color:var(--muted)}
.ref-opt input{position:absolute; top:8px; left:8px; width:16px; height:16px; accent-color:var(--accent)}
.ref-opt:has(input:checked){border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset}
.ref-opt:has(input:disabled){opacity:.45; cursor:not-allowed}
/* how she speaks (Takes step) */
.card.speech{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.speech-opts{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0}
.speech-opt{display:flex; flex-direction:column; gap:4px; text-align:left; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--sunk); color:var(--ink); cursor:pointer}
.speech-opt span{font-size:12.5px; color:var(--muted); font-weight:400}
.speech-opt[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent) inset}
.speech-opt:disabled{opacity:.6; cursor:not-allowed}
.speech-voice{display:flex; flex-direction:column; gap:4px; margin-bottom:6px}
.speech-voice label{font-size:12.5px; font-weight:600}
.speech-voice select{border:1px solid var(--line); border-radius:8px; background:var(--ground); padding:7px 9px; font:inherit; color:inherit; max-width:100%}
.voice-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 10px; margin:6px 0; border:1px dashed var(--line); border-radius:10px}
.voice-row audio{height:32px; max-width:100%; flex:1 1 220px}
.voice-row.stale{border-color:var(--warn)}
.voice-row p{flex-basis:100%; margin:0}
@media (max-width:520px){ .speech-opts{grid-template-columns:1fr} }
/* pronunciation check */
.card.pron{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.card.pron.done{border-color:color-mix(in srgb,var(--ok) 45%,var(--line)); padding-block:10px}
.card.pron.done .eyebrow{color:var(--ok)}
.card.pron.done p{margin:4px 0 0}
.pron-applied{color:var(--ok); margin:4px 0 0}
.pron-list{display:flex; flex-direction:column; gap:6px; margin:8px 0}
.pron-row{display:grid; grid-template-columns:minmax(110px,1fr) minmax(140px,1.4fr) auto auto; gap:4px 10px; align-items:center; padding:6px 0; border-bottom:1px solid var(--line)}
.pron-w{font-weight:600; overflow:hidden; text-overflow:ellipsis}
.pron-row input[name=said], .pron-row input[name=written]{border:1px solid var(--line); border-radius:8px; background:var(--ground); padding:6px 9px; min-width:0; font:inherit; color:inherit}
.pron-ok{display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:600; white-space:nowrap}
.pron-ok input{accent-color:var(--accent)}
.pron-why{grid-column:1 / -1; font-size:12px}
@media (max-width:520px){ .pron-row{grid-template-columns:1fr auto auto} .pron-row input[name=said]{grid-column:1 / -1} }
/* lock frames → takes */
.card.lock{border-color:var(--accent)}
.card.lock.done{background:color-mix(in srgb,var(--ok) 8%,var(--surface)); border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.card.lock.pending{border-style:dashed; border-color:var(--line)}
.lock-strip{display:flex; gap:8px; overflow-x:auto; padding:6px 0 8px; scrollbar-width:thin}
.lock-thumb{margin:0; flex:0 0 96px; width:96px; min-width:0; display:flex; flex-direction:column; gap:4px}
.lock-thumb img, .lock-empty{width:96px; aspect-ratio:9/16; object-fit:cover; border-radius:8px; background:var(--sunk)}
.lock-empty{display:grid; place-items:center; color:var(--muted); font:600 18px/1 var(--mono); border:1px dashed var(--line)}
.lock-thumb figcaption{max-width:96px; font:500 10.5px/1.3 var(--mono); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.step-next{justify-content:flex-end}
/* loading */
.loading-panel{border-color:var(--accent)}
.loading-panel h3{display:flex; align-items:center; gap:10px}
.load-list{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px}
.load-list li{display:flex; align-items:center; gap:8px; font-size:13.5px}
.load-list li .mono{margin-left:auto}
.load-list .dot{width:9px; height:9px; border-radius:50%; background:var(--line); flex:none}
.load-list li[data-st="rendering"] .dot{background:var(--accent); animation:blink 1.1s ease-in-out infinite}
.load-list li[data-st="ready"] .dot{background:var(--ok)}
@media (prefers-reduced-motion: reduce){.load-list li[data-st="rendering"] .dot{animation:none}}
.loading-row{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13.5px; padding:10px 0}
/* takes: the locked frame beside the scene */
.take-head{display:flex; gap:12px; align-items:flex-start}
.take-head .scene{flex:1; min-width:0}
.take-frame{width:56px; aspect-ratio:9/16; object-fit:cover; border-radius:8px; flex:none; border:2px solid var(--ok)}
/* frame options per scene: 1 · 2 · 4 */
.fcount{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px}
.seg-btn{border:1px solid var(--line); background:var(--sunk); color:var(--muted); font:600 12px/1 var(--mono); padding:6px 11px; border-radius:999px; cursor:pointer}
.seg-btn[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.seg-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* frames ready: choose how to pick */
.card.choose{border-color:var(--accent); background:color-mix(in srgb,var(--accent-soft) 45%,var(--surface))}
.choose-row{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin-top:8px}
.why.pickme{color:var(--accent)}
/* cost on buttons */
.btn-cost{font-family:var(--mono); font-weight:500; opacity:.85}
.btn.over{outline:2px solid var(--warn); outline-offset:1px}
/* scene toolbar: timing, voice preview, edit */
.scene-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px 14px; flex-wrap:wrap}
.scene-tools{display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap}
.timing{font:500 11px/1 var(--mono); color:var(--muted); padding:4px 7px; border-radius:6px; background:var(--sunk)}
.timing.over{color:var(--warn); background:color-mix(in srgb,var(--warn) 14%,var(--sunk))}
.hear[aria-pressed="true"]{color:var(--accent); font-weight:600}
/* creator voice picker in the brief */
.voice-pick{display:flex; flex-direction:column; gap:6px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.voice-pick label{font-size:12.5px; font-weight:600}
.voice-pick select, .voice-pick input{border:1px solid var(--line); border-radius:8px; background:var(--ground); padding:7px 9px; width:100%; min-width:0; font:inherit; color:inherit}
.gender{display:inline-flex; gap:4px; background:var(--sunk); padding:4px; border-radius:999px; width:max-content; max-width:100%; flex-wrap:wrap}
.seg{position:relative; cursor:pointer}
.seg input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.seg span{display:inline-block; padding:7px 14px; border-radius:999px; font-weight:600; font-size:13px; color:var(--muted)}
.seg span em{font:500 10.5px/1 var(--mono); font-style:normal; color:var(--accent); margin-left:4px}
.seg input:checked + span{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px color-mix(in srgb,#000 18%,transparent)}
.seg input:focus-visible + span{outline:2px solid var(--accent); outline-offset:1px}
.voice-pick.edit{outline:1px solid var(--accent); outline-offset:6px; border-radius:6px}
/* edit forms on the board */
.card.editing{border-color:var(--accent)}
form.edit{display:flex; flex-direction:column; gap:6px}
form.edit label{font-size:12.5px; font-weight:600; margin-top:4px}
form.edit input, form.edit textarea{border:1px solid var(--line); border-radius:8px; background:var(--ground); padding:8px 10px; width:100%; min-width:0; font:inherit; color:inherit}
form.edit textarea{resize:vertical}
form.edit details summary{cursor:pointer; font-size:13px; color:var(--muted); margin-top:6px}
form.edit details textarea{font-family:var(--mono); font-size:12px}
form.edit .actions{margin-top:6px; align-items:center}
.three-col{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px}
.three-col > div{display:flex; flex-direction:column; gap:6px; min-width:0}
@media (max-width:520px){ .three-col{grid-template-columns:1fr} }
/* producer-at-work loaders */
.card-top{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.card.updating{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset}
.card.updating dl, .card.updating .scene{opacity:.55; transition:opacity .2s}
.pill[data-s="run"].working-pill{color:var(--accent); background:var(--accent-soft); white-space:normal; line-height:1.3; max-width:100%}
.pill[data-s="run"].working-pill::before{background:var(--accent)}
.card.scene-card{position:relative}
.busy-tag{position:absolute; top:10px; right:12px; z-index:1}
@media (max-width:520px){ .busy-tag{position:static; display:block; margin-bottom:6px} }
.working{display:flex; align-items:center; gap:8px; margin:6px 0 0; color:var(--muted); font-size:13.5px}
.spinner{width:13px; height:13px; flex:none; border-radius:50%; border:2px solid var(--line); border-top-color:var(--accent); animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spinner{animation:none; border-top-color:var(--line)}}

/* Brainstorm Mode */
.mode-toggle{display:inline-flex; align-items:center; gap:6px; font:500 12.5px/1 var(--mono); color:var(--muted); cursor:pointer}
.mode-toggle input{accent-color:var(--accent)}
#board-view-toggle .stage[aria-current="true"]{background:var(--ink); color:var(--surface)}
.draft-concept{border:1px solid var(--line); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:4px}
.draft-concept[data-s="selected"],.draft-concept[data-s="approved"]{border-color:var(--accent); background:color-mix(in srgb,var(--accent-soft) 35%,var(--surface))}
.draft-concept[data-s="rejected"]{opacity:.55}
.draft-concept p{margin:0}
.draft-suggestions{border-style:dashed}
.draft-history-row{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line)}
.draft-history-row:last-child{border-bottom:none}
.moodboard{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px}
.moodcard{border:1px solid var(--line); border-radius:10px; padding:8px; display:flex; flex-direction:column; gap:4px}
.moodcard[data-s="saved"]{border-color:var(--ok)}
.moodcard[data-s="rejected"]{opacity:.5}
.moodcard img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; background:var(--sunk)}
.moodcard select.small{font:500 11.5px/1 var(--mono); padding:5px 6px; border-radius:6px; border:1px solid var(--line); background:var(--surface)}