/* ============================================================
   Kinolot — Story architecture for AI filmmakers (internal codename: TURN)
   Dark cinematic editing-suite. Teal/orange = value charge.
   ============================================================ */

:root {
  /* surfaces — warm charcoal */
  --bg-0:#08090b;
  --bg-1:#0e0f12;
  --bg-2:#15161a;
  --bg-3:#1c1d22;
  --bg-4:#24262c;
  --bg-5:#2d2f37;

  /* lines */
  --line:rgba(255,255,255,.06);
  --line-2:rgba(255,255,255,.1);
  --line-3:rgba(255,255,255,.16);

  /* text — warm whites. Consistency pass 2026-09-29: every text step is AA (4.5:1) on the
     surfaces it sits on (bg-0…bg-3); --txt-3 is the quietest TEXT colour, not a decoration-only
     grey — the old #7d7a73 / #56544e measured 3.9:1 and 2.2–2.5:1. */
  --txt-0:#f3f1ec;
  --txt-1:#b6b3ab;
  --txt-2:#9a968e;                 /* 6.5:1 on bg-1, 5.7:1 on bg-3 */
  --txt-3:#88857d;                 /* 5.2:1 on bg-1, 4.6:1 on bg-3 */

  /* value charge — the cinematic grade */
  --pos:oklch(0.76 0.145 62);      /* warm amber = positive */
  --pos-soft:oklch(0.76 0.145 62 / .16);
  --pos-line:oklch(0.76 0.145 62 / .5);
  --neg:oklch(0.72 0.10 232);      /* cool teal = negative */
  --neg-soft:oklch(0.72 0.10 232 / .16);
  --neg-line:oklch(0.72 0.10 232 / .5);
  /* the charge colours USED AS TEXT — identical in the dark theme; the light theme swaps in darker
     inks so amber/teal words stay AA on paper (the fills keep the bright grade) */
  --pos-ink:var(--pos);
  --neg-ink:var(--neg);

  /* ONE accent family (defined here for both themes, never set from JS): --accent is the fill
     (primary buttons, selected chips) — the logo's amber ≈ #F29A43 in BOTH themes, always with
     --ink-on-accent on it (6.7:1); --accent-ink is amber used as text. */
  --accent:oklch(0.76 0.145 62);
  --accent-soft:oklch(0.76 0.145 62 / .16);
  --accent-line:oklch(0.76 0.145 62 / .5);
  --accent-ink:var(--accent);
  --accent2:var(--neg);            /* (legacy teal fill — no longer used for buttons; see .btn-secondary) */
  --accent2-ink:#06141d;           /* dark ink on the secondary fill */
  --ink-on-accent:#2c2722;         /* ink on the amber primary — a warm dark grey, softer than black, still high-contrast */

  --brand:var(--accent);           /* amber brand (the Stage's name for the accent) */
  --alert:oklch(0.64 0.17 27);     /* red = cut / doesn't turn */
  --alert-soft:oklch(0.64 0.17 27 / .15);
  --prog:oklch(0.74 0.12 300);     /* violet = progresses on the same side, doesn't reverse */
  --prog-soft:oklch(0.74 0.12 300 / .15);
  /* status colours for notices — separate from the value-charge grade, so "positive" amber and
     "negative" teal never stand in for success / error */
  --ok:oklch(0.74 0.13 155);
  --ok-soft:oklch(0.74 0.13 155 / .14);
  --ok-line:oklch(0.74 0.13 155 / .45);
  --danger:var(--alert);
  --danger-soft:var(--alert-soft);
  --danger-line:oklch(0.64 0.17 27 / .45);
  --danger-ink:oklch(0.74 0.14 27);     /* red WORDS on a red-tinted surface (AA on --danger-soft) */
  /* (every notice that sets red text on --danger-soft uses it: the Stage errors / warnings, the
     script's missing-beat number — plain --danger there measured 3.8–4.3:1; review 2026-09-29) */
  --danger-fill:oklch(0.55 0.19 27);    /* a red badge FILL that carries white text at AA */
  /* names some rules asked for but nothing defined, so each rule's own fallback (three different ambers,
     two greys, two reds) was the de-facto palette — they now resolve to the shared tokens */
  --warn:var(--accent-ink);
  --warn-soft:var(--accent-soft);
  --err:var(--danger);
  --alert-line:var(--danger-line);
  --line-1:var(--line-3);
  --ink-3:var(--txt-2);
  --shadow-2:var(--shadow-pop);

  /* type */
  --f-display:"Space Grotesk",sans-serif;
  --f-ui:"Hanken Grotesk",sans-serif;
  --f-mono:"Space Mono",monospace;
  --f-serif:"Spectral",Georgia,serif;   /* the wordmark + the room page titles */
  --f-body:var(--f-ui);                 /* (alias — five rules asked for it before it existed) */

  --r-s:6px; --r-m:9px; --r-l:14px; --r-xl:20px;
  --shadow-pop:0 18px 50px -12px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.5);

  /* stacking scale — content < docks < menus < dialogs < confirms < toasts. The floating
     docks (Writing / Images engine, Frances) sit BELOW every overlay, so a dialog, the Plans
     window or Home always covers them. */
  --z-raised:30;      /* the top bar */
  --z-dock:50;        /* .nb-dock, .muse-dock-wrap */
  --z-menu:60;        /* dropdowns anchored in the page */
  --z-overlay:120;    /* full-screen dialogs (New Story, Story Editors, Plans, auth) + Home */
  --z-overlay-2:124;  /* a dialog opened from a dialog (Film bible, Plans from Home) */
  --z-confirm:9990;   /* appConfirm, lightboxes, floating pickers */
  --z-toast:99999;

  /* density (driven by tweak) */
  --pad:16px;
  /* Writers' Room and Stage both use balanced side panels. Keep these two
     tokens explicit because each component owns one, but give them the same
     value so a room never opens with a narrower navigation rail than its
     contextual inspector. */
  --rail-w:380px;
  --insp-w:380px;
  /* clearance for the floating MUSE bubble (bottom 22px + 54px + 12px air): the end of a
     scroll area that reaches the bottom-right corner scrolls clear of it (2026-09-28) */
  --muse-clear:88px;

  color-scheme:dark;
}

/* ============================================================
   LIGHT THEME — "Paper & Ink", matched to the marketing homepage:
   cool neutral surfaces, near-black ink, hairline structure. Charge
   colors (--pos/--neg) stay as the cinematic grade (warm amber harmonises
   with the homepage's Reel orange). This block flips the WHOLE app light.
   ============================================================ */
html[data-theme="light"]{
  color-scheme:light;

  --bg-0:#EBEBE8;   /* canvas / letterbox — the darkest neutral, panels float on it */
  --bg-1:#F1F1EE;   /* panels: topbar, rail, inspector */
  --bg-2:#FCFCFB;   /* cards — Paper */
  --bg-3:#F6F6F4;   /* raised controls / segmented container — Bone */
  --bg-4:#FFFFFF;   /* higher */
  --bg-5:#FFFFFF;   /* highest — active segment */

  --line:rgba(15,16,18,.07);    /* Hairline */
  --line-2:rgba(15,16,18,.12);
  --line-3:rgba(15,16,18,.20);

  --txt-0:#24262B;  /* Ink — soft charcoal, not pure black */
  --txt-1:#474B51;  /* Ink, soft */
  --txt-2:#5E6268;  /* Slate — 5.1:1 on bg-0 (was #74787E, 3.7:1) */
  --txt-3:#666A70;  /* muted — 4.55:1 on bg-0 (was #9A9DA3, 2.3:1) */

  /* the value-charge grade on paper: a deeper amber/teal for the spine, borders and dots
     (3:1+ as graphics), darker inks for words (AA). The accent FILL stays the bright logo amber
     (set in :root) so primary buttons keep their dark ink at 6.7:1. (These used to be written
     inline from JS by app.jsx's grade effect; the CSS now owns them.) */
  --pos:oklch(0.62 0.162 62);
  --pos-soft:oklch(0.62 0.162 62 / .14);
  --pos-line:oklch(0.62 0.162 62 / .42);
  --neg:oklch(0.54 0.112 232);
  --neg-soft:oklch(0.54 0.112 232 / .14);
  --neg-line:oklch(0.54 0.112 232 / .42);
  --pos-ink:#8F4C0E;   /* 5.5:1 on bg-0, 6.4:1 on bg-2, 5.2:1 on the amber-tinted chips */
  --neg-ink:#006A90;   /* 5.1:1 on bg-0 */
  --accent-ink:#8F4C0E;

  --alert:oklch(0.55 0.19 27);
  --alert-soft:oklch(0.55 0.19 27 / .12);
  --prog:oklch(0.52 0.14 300);
  --prog-soft:oklch(0.52 0.14 300 / .12);
  --ok:oklch(0.5 0.12 155);
  --ok-soft:oklch(0.5 0.12 155 / .12);
  --ok-line:oklch(0.5 0.12 155 / .4);
  --danger-line:oklch(0.55 0.19 27 / .4);
  --danger-ink:oklch(0.5 0.19 27);

  --shadow-pop:0 16px 44px -14px rgba(15,16,18,.20),0 2px 8px rgba(15,16,18,.10);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#dededa}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:#cfcabe;background-clip:padding-box}


*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg-0);
  color:var(--txt-0);
  font-family:var(--f-ui);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
#root{height:100vh}
::selection{background:var(--pos-soft);color:var(--txt-0)}

/* scrollbars */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--bg-5);border-radius:6px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:#3b3e47;background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}

.mono{font-family:var(--f-mono)}
.eyebrow{
  font-family:var(--f-mono);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-2);
}
.display{font-family:var(--f-display);font-weight:600;letter-spacing:-.01em}
/* form controls inherit the UI font — without this every button that doesn't name a family
   (the welcome card's "+ New Story", Home's "New Project", sheet accordions, icon buttons…)
   rendered in the browser default Arial 13.33px (consistency pass 2026-09-29) */
button,input,select,textarea{font-family:inherit}

/* ============================================================
   APP SHELL
   ============================================================ */
.app{display:flex;flex-direction:column;height:100vh;background:var(--bg-1)}

/* top bar */
.topbar{
  height:52px;flex:0 0 52px;display:flex;align-items:center;gap:14px;
  padding:0 16px;background:var(--bg-1);
  border-bottom:1px solid var(--line);
  position:relative;z-index:30;
}
/* a menu or window opened FROM the top bar (⋯, Export, the room / film / account menus, the Story
   brief, Team, the Film bible…) is rendered inside it, and the bar's z-index:30 capped them all: on a
   phone the Scene drawer, the MUSE bubble and the Writing dock covered them. While one is open the
   bar sits above those layers; dialogs (appConfirm) and toasts stay higher still (2026-09-28). */
.topbar:has(.export-menu, .room-menu, .proj-menu, .acct-menu, .bible-overlay){z-index:130}
/* the same raise as a class, set by chrome.jsx turnWatchTopbarLayer, for browsers without :has()
   (kept a separate rule: a browser that can't parse :has() drops the whole rule it sits in) */
.topbar.is-raised{z-index:130}
.brand{display:flex;align-items:baseline;gap:9px;cursor:default}
/* Kinolot identity (owner decision 2026-09-28, logo direction B "The Lot"): the mark is inline SVG
   (app/chrome.jsx BrandMark) — outer bays in currentColor, the middle bay amber — and the wordmark is
   Spectral 600 at -0.01em in ONE colour. Every logo on every surface uses these two rules; a surface
   only sets size and colour. */
/* nudged 0.5px down on every surface (owner 2026-09-29: 1px, 0.5px more, then 1px back up); relative, so no layout moves */
.brand-mark{display:block;flex:0 0 auto;width:29px;height:16px;color:var(--txt-0);overflow:visible;position:relative;top:0.5px}
.brand-name{
  font-family:"Spectral",Georgia,serif;font-weight:600;font-size:19px;line-height:1;
  letter-spacing:-.01em;color:var(--txt-0);white-space:nowrap;
}

.topbar-divider{width:1px;height:22px;background:var(--line-2)}

.proj{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.proj-name{font-family:var(--f-display);font-weight:600;font-size:13.5px;color:var(--txt-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Badges were flex:0 0 auto inside a chip that CAN shrink, so once the film title +
   SHARED + format + framework stopped fitting, the last badge was hard-clipped mid-word
   ("STORY CI"). Now the chip shrinks cleanly, the NAME yields first, and if a badge still
   has to give it ellipsizes instead of being cut with no indication. */
.proj-format{flex:0 1 auto;min-width:0;max-width:104px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font-family:var(--f-mono);font-size:9px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-2);background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:20px;padding:2px 8px}
/* SHARED is the one badge that changes what you're allowed to do — it never shrinks away */
.proj-format.shared{flex:0 0 auto}
/* framework badge — shown only for non-default frameworks (e.g. Kishōtenketsu) */
.proj-format.fw{color:var(--accent-ink);border-color:var(--accent)}

/* New Story — Step 0 format cards ("What are we making?") */
.ns-formats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 6px}
.ns-format{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 14px 12px;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-l);text-align:left;transition:.12s}
.ns-format:hover{border-color:var(--line-3)}
.ns-format:disabled{cursor:not-allowed;opacity:.46}
.ns-format.on:disabled{opacity:1}
.ns-format.on{border-color:var(--txt-0);box-shadow:0 0 0 1px var(--txt-0) inset}
.ns-format svg{color:var(--txt-2)}
.ns-format.on svg{color:var(--txt-0)}
.ns-format-name{font-family:var(--f-display);font-weight:600;font-size:13.5px;color:var(--txt-0)}
.ns-format-blurb{font-size:11px;line-height:1.45;color:var(--txt-2)}
/* the format picker's groups (Long form · Short form · Non-fiction & brand) */
.ns-format-group + .ns-format-group{margin-top:12px}
/* 2 · 4 · 2 formats per group: two columns fill every row */
.ns-format-group .ns-formats{grid-template-columns:1fr 1fr}
.ns-format-grouplab{font-size:11.5px;font-weight:600;color:var(--txt-1);margin:0 0 6px}
.ns-formats.fw{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){ .ns-formats{grid-template-columns:1fr 1fr} .ns-formats.fw{grid-template-columns:1fr} }
.proj-meta{font-family:var(--f-mono);font-size:10px;color:var(--txt-2);letter-spacing:.04em}

/* export menu */
.export-wrap{position:relative}
.tb-btn.on{background:var(--bg-4);color:var(--txt-0);border-color:var(--line-3)}
.export-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;width:266px;opacity:1;
  background:var(--bg-2);border:1px solid var(--line-3);border-radius:var(--r-l);box-shadow:var(--shadow-pop);padding:6px;animation:menupop .16s ease}
@keyframes menupop{from{transform:translateY(-5px)}to{transform:none}}
.export-head{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt-1);padding:7px 8px 8px}
.export-subhead{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-3);padding:9px 8px 6px;margin-top:4px;border-top:1px solid var(--line)}
.export-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:0;background:transparent;
  border-radius:var(--r-m);padding:9px 8px;cursor:pointer;transition:.1s}
.export-item:hover{background:var(--bg-4)}
.export-item-ic{width:30px;height:30px;flex:0 0 30px;border-radius:var(--r-m);display:grid;place-items:center;
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--pos-ink)}
.export-item-t{display:flex;flex-direction:column;min-width:0}
.export-item-t .t{font-size:12.5px;font-weight:500;color:var(--txt-0)}
.export-item-t .s{font-size:10.5px;color:var(--txt-2)}
.export-foot{border-top:1px solid var(--line);margin-top:5px;padding-top:5px}
.export-item.reset .export-item-ic{color:var(--alert);border-color:var(--alert)}
.export-item.reset:hover{background:var(--alert-soft)}
.export-item.reset .t{color:var(--alert)}

.topbar-spacer{flex:1}

/* three-zone layout — center group stays horizontally centered */
.tb-left{flex:1;min-width:0;display:flex;align-items:center;gap:14px}
.tb-center{flex:0 0 auto;display:flex;align-items:center;gap:10px}
.tb-right{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:14px}

/* SEGMENTED CONTROL — ONE pattern for every switch between views or modes (the room view bars,
   the Art tabs, the Board layout, the Storyboard mode, the Breakdown filter, the Stage composer
   tabs): a bg-3 track, sentence-case Hanken 12.5px segments, the active one raised on bg-5.
   (Consistency pass 2026-09-29 — five styles before: mono caps, black pills, …) */
.segmented{display:flex;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-m);padding:3px;gap:2px}
.seg{
  display:flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--r-s);border:0;background:transparent;cursor:pointer;
  color:var(--txt-2);font-family:var(--f-ui);font-size:12.5px;font-weight:500;
  transition:.13s;
}
.seg:hover{color:var(--txt-1)}
.seg.on{background:var(--bg-5);color:var(--txt-0);box-shadow:0 1px 2px rgba(0,0,0,.3)}
.seg svg{opacity:.85}

/* view sub-nav — the room's view tabs, moved out of the top bar to a full-width
   bar directly beneath it (frees top-bar space at every screen size). */
.viewnav{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;justify-content:safe center;gap:10px;
  padding:13px 16px;background:var(--bg-1);border-bottom:1px solid var(--line);
  position:relative;z-index:20;overflow-x:auto;scrollbar-width:none;
}
.viewnav::-webkit-scrollbar{display:none}
.viewnav .segmented{flex:0 0 auto}
/* the bar has the full width now — keep text labels (the top bar hid them ≤1360px
   only because space was tight there). Higher specificity re-shows them here. */
.viewnav .seg{gap:6px;padding:5px 11px}
.viewnav .seg .seg-lab{display:inline}
/* Lookbook — the north-star visual statement block above the reference grid */
.lb-statement{margin:0 0 18px;padding:14px 16px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-l)}

/* three balanced zones: equal-width flex sides keep the CENTER group (tab strip +
   the room's agent CTA) horizontally centered. The side panel-toggles only render
   usefully in drawer modes — on desktop the panels collapse/expand from inside. */
.viewnav .vn-side{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:8px}
.viewnav .vn-left{justify-content:flex-start}
.viewnav .vn-right{justify-content:flex-end}
.viewnav .vn-center{flex:0 0 auto;display:flex;align-items:center;gap:10px}
.viewnav .vn-cta{flex:0 0 auto}
/* the view-nav panel toggles are only needed on mobile, where the rail/inspector
   are full overlay drawers with no in-flow strip. On tablet + desktop both panels
   dock and carry their own collapse/expand strip, so these would be duplicates. */
@media (min-width:700px){ .viewnav .vn-paneltoggle{display:none} }
/* Lookbook staleness — amber dot on an out-of-date Art Room tab + the in-tab "re-draft" banner */
.seg-stale-dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:oklch(0.74 0.15 60);margin-left:1px;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
/* wardrobe-attention: a waiting one-tap action inside the tab — yellow, gentle pulse */
.seg-attn-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:oklch(0.85 0.16 95);margin-left:1px;box-shadow:0 0 0 2px rgba(0,0,0,.25);animation:segAttnPulse 1.8s ease-in-out infinite}
@keyframes segAttnPulse{0%,100%{opacity:1}50%{opacity:.4}}
.lb-stale-notice{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:0 0 16px;padding:9px 12px;border-radius:9px;
  background:oklch(0.72 0.13 60 / .13);border:1px solid oklch(0.72 0.13 60 / .34);font-size:12px;line-height:1.45;color:oklch(0.86 0.1 72)}
.lb-stale-notice > svg{flex:0 0 auto;color:oklch(0.78 0.15 64)}
.lb-stale-notice > span{flex:1 1 200px}
.lb-stale-notice b{color:var(--txt-0)}
.lb-stale-affect{display:block;margin-top:2px;font-size:11px;opacity:.82}
.lb-stale-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-m);cursor:pointer;
  border:1px solid oklch(0.72 0.13 60 / .5);background:oklch(0.72 0.13 60 / .2);color:oklch(0.9 0.08 75);font-family:var(--f-ui);font-size:11.5px;font-weight:600;transition:.12s}
.lb-stale-btn:hover{background:oklch(0.72 0.13 60 / .34)}
/* "Re-draft only" — the quieter sibling: specs update now, images stay until regenerated */
.lb-stale-btn.ghost{background:transparent}
.lb-stale-btn.ghost:hover{background:oklch(0.72 0.13 60 / .18)}
/* light theme: the amber notice needs DARK amber ink, not the dark-theme cream */
html[data-theme="light"] .lb-stale-notice{background:oklch(0.78 0.12 70 / .16);border-color:oklch(0.6 0.13 62 / .38);color:oklch(0.42 0.1 58)}
html[data-theme="light"] .lb-stale-notice > svg{color:oklch(0.55 0.14 60)}
html[data-theme="light"] .lb-stale-notice b{color:oklch(0.32 0.09 58)}
html[data-theme="light"] .lb-stale-btn{border-color:oklch(0.55 0.13 60 / .45);background:oklch(0.72 0.13 60 / .16);color:oklch(0.36 0.1 58)}
html[data-theme="light"] .lb-stale-btn:hover{background:oklch(0.72 0.13 60 / .28)}
html[data-theme="light"] .lb-stale-btn.ghost{background:transparent}
html[data-theme="light"] .lb-stale-btn.ghost:hover{background:oklch(0.72 0.13 60 / .14)}
html[data-theme="light"] .seg-stale-dot{box-shadow:0 0 0 2px var(--bg-3)}
html[data-theme="light"] .seg-attn-dot{box-shadow:0 0 0 2px var(--bg-3)}
/* the raised segment casts a paper-weight shadow in the light theme (every segmented variant) */
html[data-theme="light"] :is(.seg,.theme-opt,.nb-seg-btn,.board-mode-btn,.sb-mode-btn,.stage2-seg-btn,.stage2-ctab-btn,.bd-filter-btn).on{box-shadow:0 1px 2px rgba(15,16,18,.14)}
/* truly narrow screens: icon-only tabs, centered ("safe" falls back to
   start-alignment when the strip overflows, so nothing clips off-screen) */
@media (max-width:640px){
  .viewnav{justify-content:center;justify-content:safe center;padding:6px 12px}
  .viewnav .vn-side{flex:0 0 auto}
  .viewnav .seg{gap:0;padding:6px 9px}
  .viewnav .seg .seg-lab{display:none}
  .viewnav .vn-cta-lab{display:none}
}
/* the Art Room row (eight tabs + Blender Studio, Production check and Run pre-production) needs
   ~960px with labels. Below that it overflowed a bar that hides its scrollbar, so the room's main
   action and Production check sat off-screen with nothing to say the row scrolls (review
   2026-09-29). Icon-only tabs there, as on a phone — each keeps its title / accessible name — so the
   whole row fits down to the phone breakpoint. The Writers' Room and Stage rows fit with labels. */
@media (min-width:641px) and (max-width:960px){
  .viewnav-art .seg{gap:0;padding:6px 9px}
  .viewnav-art .seg .seg-lab{display:none}
}

/* BUTTONS (consistency pass 2026-09-29) — one family: sm 28px · md 32px · lg 38px, one radius
   (--r-m, 9px), variants primary (the amber fill + --ink-on-accent) · secondary (raised neutral) ·
   ghost (outline) · danger. Pills are reserved for chips, toggles and avatars. .tb-btn is the md. */
.tb-btn{
  display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-m);
  color:var(--txt-1);font-family:var(--f-ui);font-size:12.5px;font-weight:500;cursor:pointer;
  transition:.13s;
}
.tb-btn:hover{background:var(--bg-4);color:var(--txt-0);border-color:var(--line-3)}
.tb-btn.accent{background:var(--accent);border-color:transparent;color:var(--ink-on-accent);font-weight:600}
.tb-btn.accent:hover{filter:brightness(1.07)}
/* secondary action buttons — a raised NEUTRAL button, a step below the amber primary (it used to
   be a teal fill, but teal is the value charge’s "negative", not a button colour — 2026-09-29).
   Use the `.secondary` modifier on a .tb-btn, or the standalone `.btn-secondary` anywhere. */
.tb-btn.secondary{background:var(--bg-4);border-color:var(--line-3);color:var(--txt-0);font-weight:600}
.tb-btn.secondary:hover{background:var(--bg-5);color:var(--txt-0)}
.btn-secondary{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:var(--r-m);
  border:1px solid var(--line-3);background:var(--bg-4);color:var(--txt-0);
  font-family:var(--f-ui);font-size:12.5px;font-weight:600;cursor:pointer;transition:.13s}
.btn-secondary:hover{background:var(--bg-5)}
.btn-secondary:disabled{opacity:.55;cursor:default}

/* theme switch (Light / System / Dark) */
.theme-seg{display:flex;align-items:center;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-m);padding:3px;gap:2px}
.theme-opt{width:28px;height:26px;display:grid;place-items:center;border:0;background:transparent;border-radius:var(--r-s);
  color:var(--txt-2);cursor:pointer;transition:.13s}
.theme-opt:hover{color:var(--txt-1)}
.theme-opt.on{background:var(--bg-5);color:var(--txt-0);box-shadow:0 1px 2px rgba(0,0,0,.22)}

.avatar{
  width:30px;height:30px;border-radius:50%;flex:0 0 30px;
  background:linear-gradient(135deg,#3a4a5a,#1f262e);
  display:grid;place-items:center;font-family:var(--f-display);font-weight:600;font-size:12px;
  color:var(--txt-0);border:1px solid var(--line-2);cursor:pointer;
}

/* body columns */
.body{flex:1;display:flex;min-height:0}

/* ============================================================
   LEFT RAIL
   ============================================================ */
.rail{
  width:var(--rail-w);flex:0 0 var(--rail-w);
  background:var(--bg-1);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;position:relative;
}

/* collapse button shared */
.panel-collapse{
  width:24px;height:24px;border-radius:var(--r-s);border:1px solid var(--line-2);background:var(--bg-2);
  color:var(--txt-2);cursor:pointer;display:grid;place-items:center;transition:.12s;flex:0 0 auto;
}
.panel-collapse:hover{background:var(--bg-4);color:var(--txt-0);border-color:var(--line-3)}

/* collapsed strips */
.strip{
  width:48px;flex:0 0 48px;background:var(--bg-1);
  display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:16px;
}
.strip.left{border-right:1px solid var(--line)}
.strip.right{border-left:1px solid var(--line)}
/* buttonless strip (inspector): the whole rail is the click target to reopen */
.strip.strip-clickable{cursor:pointer;border:0;border-left:1px solid var(--line);margin:0;font:inherit;text-align:inherit;background:var(--bg-1)}
.strip.strip-clickable:hover{background:var(--bg-2)}
.strip-btn{
  width:30px;height:30px;border-radius:var(--r-m);border:1px solid var(--line-2);background:var(--bg-3);
  color:var(--txt-1);cursor:pointer;display:grid;place-items:center;transition:.12s;
}
.strip-btn:hover{background:var(--bg-4);color:var(--txt-0)}
.strip-label{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-3);
  margin-top:4px;user-select:none;
}
.strip-flag{
  margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-family:var(--f-mono);font-size:9px;color:var(--alert);
}
.strip-flag .dot{width:20px;height:20px;border-radius:50%;background:var(--alert-soft);display:grid;place-items:center}

/* topbar panel toggles */
.tb-icon{
  width:32px;height:32px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--bg-3);
  color:var(--txt-2);cursor:pointer;display:grid;place-items:center;transition:.12s;
}
.tb-icon:hover{background:var(--bg-4);color:var(--txt-1)}
.tb-icon.on{color:var(--pos-ink);border-color:var(--line-2)}
.rail-scroll{flex:1;overflow-y:auto;padding:14px 12px 24px}
.rail-sec{margin-bottom:20px}
.rail-sec.folded{margin-bottom:8px}
.rail-sec-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 6px 8px;
}
.rail-sec-head.clickable{cursor:pointer;border-radius:var(--r-m);padding:7px 6px;margin-bottom:0;
  transition:background .12s}
.rail-sec-head.clickable:hover{background:var(--bg-2)}
.rail-fold-ic{display:flex;color:var(--txt-3);transition:.12s}
.rail-sec-head.clickable:hover .rail-fold-ic{color:var(--txt-1)}
.rail-sec-head .eyebrow{display:flex;align-items:center;gap:7px}
.rail-add{
  width:20px;height:20px;border-radius:5px;border:0;background:transparent;
  color:var(--txt-2);cursor:pointer;display:grid;place-items:center;transition:.12s;
}
.rail-add:hover{background:var(--bg-3);color:var(--txt-0)}

/* premise / controlling idea cards */
.idea-card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-m);
  padding:12px;margin:0 2px;
}
.idea-card .eyebrow{margin-bottom:7px}
.idea-card .premise{font-size:13px;color:var(--txt-1);line-height:1.5;font-style:italic}
.char-arc-stage{display:grid;grid-template-columns:92px 1fr;gap:8px;align-items:start;margin-top:6px}
.char-arc-stage-act{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);padding-top:4px}
/* editable story-level inputs in the left rail */
.idea-card .premise-edit.edit-in{font-size:13px;color:var(--txt-1);line-height:1.5;font-style:italic;width:100%}
.ctrl-idea-edit .edit-in{width:100%;display:block}
.ctrl-idea-edit .val.edit-in{font-weight:600;color:var(--txt-0)}
.ctrl-polarity{margin-top:6px;max-width:100%}
.rail-synopsis{display:flex;flex-direction:column;gap:10px;padding:0 4px}
.rail-syn-para .edit-in{width:100%;font-size:12px;line-height:1.5;color:var(--txt-1)}
.rail-setting-val.edit-in{width:100%;font-size:12.5px;color:var(--txt-0);line-height:1.45}

/* ---- left rail · SETTING: the story world, each field read against the film ---- */
.world-pane{display:flex;flex-direction:column;gap:8px;padding:0 2px}
.world-field{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-m);padding:10px 11px 11px;
  transition:border-color .12s}
.world-field:focus-within{border-color:var(--accent-line)}
.world-field.empty{background:transparent;border-style:dashed}
.world-head{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.world-ic{width:22px;height:22px;border-radius:var(--r-s);display:grid;place-items:center;flex:none;
  background:var(--accent-soft);color:var(--pos-ink)}
.world-lab{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-1)}
.world-field .rail-setting-val.edit-in{font-size:13px;line-height:1.5;padding:2px 0;background:transparent}
.world-ctx{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line-2);display:flex;flex-direction:column;gap:6px}
.world-ctx-lab{font-size:10.5px;color:var(--txt-2)}
.world-ctx-note{display:flex;flex-wrap:wrap;gap:4px 10px}
.world-key{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--txt-2)}
.world-key::before{content:"";width:7px;height:7px;border-radius:2px;background:currentColor;opacity:.9}
.world-key.day{color:oklch(0.72 0.14 80)} .world-key.dusk{color:oklch(0.64 0.15 40)} .world-key.night{color:oklch(0.5 0.1 265)}
.world-tod{display:flex;gap:2px;height:10px}
.world-tod-cell{flex:1;border-radius:2px;background:var(--bg-4);border:1px solid var(--line)}
.world-tod-cell.day{background:oklch(0.82 0.12 85);border-color:transparent}
.world-tod-cell.dusk{background:oklch(0.68 0.14 45);border-color:transparent}
.world-tod-cell.night{background:oklch(0.42 0.09 265);border-color:transparent}
.world-places{display:flex;flex-wrap:wrap;gap:4px}
.world-place{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--txt-1);background:var(--bg-3);
  border:1px solid var(--line);border-radius:999px;padding:2px 4px 2px 8px;max-width:100%}
.world-place b{font-family:var(--f-mono);font-size:9.5px;font-weight:600;color:var(--txt-2);background:var(--bg-1);
  border-radius:999px;padding:0 5px;line-height:15px}
.world-place.more{padding:2px 8px;color:var(--txt-2)}
.world-conf{display:flex;gap:2px;height:8px;border-radius:4px;overflow:hidden}
.world-conf-seg{flex-basis:0;min-width:6px}
.world-conf-seg.c1,.world-key.c1{color:oklch(0.55 0.12 300)} .world-conf-seg.c1{background:oklch(0.55 0.12 300)}
.world-conf-seg.c2,.world-key.c2{color:var(--pos-ink)} .world-conf-seg.c2{background:var(--pos)}
.world-conf-seg.c3,.world-key.c3{color:var(--neg-ink)} .world-conf-seg.c3{background:var(--neg)}

/* ---- left rail · CAST: one card per character, with where they carry the film ---- */
.cast-pane{display:flex;flex-direction:column;gap:7px;padding:0 2px}
.cast-card{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-m);
  padding:10px 11px;cursor:pointer;transition:border-color .12s,box-shadow .12s,background .12s;outline:none}
.cast-card:hover{border-color:var(--line-3)}
.cast-card:focus-visible{box-shadow:0 0 0 2px var(--accent-line)}
.cast-card.sel{border-color:var(--pos);box-shadow:0 0 0 1px var(--pos) inset}
.cast-card.lead{background:linear-gradient(180deg,color-mix(in oklab,var(--bg-2),var(--accent) 7%),var(--bg-2) 70%)}
.cast-top{display:flex;align-items:center;gap:9px}
.cast-av{width:32px;height:32px;border-radius:9px;flex:0 0 32px;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:600;font-size:12px;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.cast-id{flex:1;min-width:0}
.cast-name{font-size:13px;font-weight:600;color:var(--txt-0);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cast-tags{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}
.cast-tag{font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-2);
  background:var(--bg-3);border:1px solid var(--line);border-radius:4px;padding:1px 5px;line-height:14px}
.cast-tag.arch{color:var(--txt-0);border-color:var(--line-3)}
.cast-card.lead .cast-tag.arch{color:var(--pos-ink);background:var(--accent-soft);border-color:var(--accent-line)}
.cast-drives{flex:none;display:flex;flex-direction:column;align-items:center;min-width:34px}
.cast-drives b{font-family:var(--f-display);font-size:17px;font-weight:600;line-height:1;color:var(--txt-0)}
.cast-drives span{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);margin-top:2px}
.cast-desc{margin-top:7px;font-size:11.5px;line-height:1.45;color:var(--txt-1);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cast-card.sel .cast-desc{-webkit-line-clamp:unset;display:block}
.cast-track{display:flex;gap:2px;margin-top:9px;height:7px}
.cast-cell{flex:1;border-radius:2px;background:var(--bg-4);border:1px solid var(--line);min-width:3px}
.cast-cell.brk{margin-left:5px}
.cast-cell.drive{border-color:transparent}
.cast-cell.face{background:transparent;border:1.5px solid var(--txt-2)}
.cast-legend{display:flex;gap:12px;flex-wrap:wrap;padding:4px 4px 0;font-size:10.5px;color:var(--txt-2)}
.cast-legend span{display:inline-flex;align-items:center;gap:5px}
.cast-legend .cast-cell{display:inline-block;flex:none;width:10px;height:7px}
.cast-legend .cast-cell.drive{background:var(--txt-1)}
.cast-empty{padding:10px 6px;font-size:12px;color:var(--txt-2);line-height:1.5}
.rail-genre{display:flex;align-items:center;gap:8px;margin-top:10px}
.rail-genre .eyebrow{margin:0;flex:0 0 auto}
.rail-genre .edit-in{flex:1;min-width:0;font-size:12.5px;color:var(--txt-1)}
.ctrl-idea{
  margin-top:9px;padding-top:10px;border-top:1px dashed var(--line-2);
  font-size:12.5px;line-height:1.5;color:var(--txt-1);
}
.ctrl-idea .val{color:var(--pos-ink);font-weight:600}
.ctrl-idea .cause{color:var(--txt-0)}
.tag-ironic{
  display:inline-block;margin-top:8px;font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--neg-ink);
  border:1px solid var(--neg-line);border-radius:20px;padding:2px 8px;
}

/* hierarchy tree */
.tree-act{margin-bottom:4px}
.tree-act-head{
  display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--r-m);cursor:pointer;
  transition:.12s;
}
.tree-act-head:hover{background:var(--bg-2)}
.tree-act-no{
  font-family:var(--f-mono);font-size:10px;color:var(--bg-0);
  background:var(--txt-2);border-radius:4px;padding:1px 5px;font-weight:700;letter-spacing:.05em;
}
.tree-act-title{font-family:var(--f-display);font-size:12.5px;font-weight:500;color:var(--txt-0);flex:1}
.tree-act-count{font-family:var(--f-mono);font-size:10px;color:var(--txt-3)}
.tree-scenes{padding-left:6px;margin:2px 0 6px;border-left:1px solid var(--line-2);margin-left:12px}
.tree-scene{
  display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:var(--r-s);cursor:pointer;
  position:relative;transition:.1s;
}
.tree-scene:hover{background:var(--bg-2)}
.tree-scene.sel{background:var(--bg-3)}
.tree-scene.sel::before{
  content:"";position:absolute;left:-7px;top:50%;transform:translateY(-50%);
  width:2px;height:16px;background:var(--accent);border-radius:2px;
}
.tree-scene-dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.tree-scene-no{font-family:var(--f-mono);font-size:10px;color:var(--txt-3);width:18px;flex:0 0 18px}
.tree-scene-title{font-size:12px;color:var(--txt-1);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree-scene.sel .tree-scene-title{color:var(--txt-0)}
.board-mode{display:inline-flex;padding:3px;gap:2px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-3);margin-left:auto;align-self:center}
.board-mode-btn{padding:5px 11px;border:0;border-radius:var(--r-s);background:transparent;color:var(--txt-2);font-family:var(--f-ui);font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;cursor:pointer;transition:.13s}
.board-mode-btn:hover{color:var(--txt-1)}
.board-mode-btn.on{background:var(--bg-5);color:var(--txt-0);box-shadow:0 1px 2px rgba(0,0,0,.3)}
.tree-flag{color:var(--alert);flex:0 0 auto;display:flex}
.tree-flag.prog{color:var(--prog)}

/* characters mini */

/* Shots — screenplay-first opening-keyframe cards live inside the actual
   production sheet card; no outer beat-card, preview, or collapsed editor. */
.shot-card .shot-beat-context{margin:0 0 11px}
.shot-beat-context-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.shot-beat-context-head .beat-lane-no{margin-right:auto}
.beat-opening-chip{display:inline-flex;align-items:center;min-height:20px;padding:2px 7px;border-radius:999px;
  background:var(--pos-soft);border:1px solid var(--pos-line);color:var(--pos-ink);font-family:var(--f-mono);
  font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.bc-screenplay,.bc-alternatives{margin-top:11px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-2)}
.bc-screenplay summary,.bc-alternatives summary{cursor:pointer;list-style:none;padding:9px 11px;color:var(--txt-1);
  font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.bc-screenplay summary::-webkit-details-marker,.bc-alternatives summary::-webkit-details-marker{display:none}
.bc-screenplay summary:after,.bc-alternatives summary:after{content:"+";float:right;color:var(--txt-3);font-size:14px;line-height:10px}
.bc-screenplay[open] summary:after,.bc-alternatives[open] summary:after{content:"−"}
.bc-screenplay-copy{padding:1px 11px 10px;color:var(--txt-1);font-size:12px;line-height:1.58;white-space:pre-wrap}
.bc-source-empty{padding:1px 11px 10px;color:var(--txt-2);font-size:12px;line-height:1.5}
.bc-cast-line{margin:0 11px 8px;padding-top:7px;border-top:1px solid var(--line);font-size:11px;color:var(--txt-1)}
.bc-cast-line b{font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-2)}
.bc-cast-line.remote{color:var(--txt-2)}
.bc-opening-empty{margin-top:11px;padding:12px;border:1px dashed var(--line-3);border-radius:var(--r-m);color:var(--txt-2);font-size:12px;line-height:1.5}
.bc-stale{margin:0 0 7px;padding:8px 10px;border-radius:var(--r-m);background:var(--pos-soft);border:1px solid var(--pos-line);color:var(--txt-1);font-size:11px;line-height:1.4}
.shot-card .shot-beat-script.bc-scripted{display:block;padding:0;border-left:1px solid var(--line-2)}
.bc-scripted summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;height:30px;padding:0 11px}
.bc-scripted summary .shot-beat-script-lab{margin-top:0}
.bc-scripted summary::-webkit-details-marker{display:none}
.bc-scripted summary:after{content:"+";float:right;color:var(--txt-3);font-size:14px}
.bc-scripted[open] summary:after{content:"−"}
.bc-scripted > .shot-purpose{margin:0;padding:8px 11px 10px}
.bc-source-note{margin:8px 11px;color:var(--txt-2);font-size:11px;line-height:1.5}
.shot-review-actions{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap}
.opening-beat-empty{min-height:170px}
@media(max-width:640px){
  .shot-beat-context-head{gap:6px}
  .shot-beat-context-head .beat-lane-btn{font-size:10.5px;padding-inline:8px}
}

/* ---- Character panel (inspector) ---- */
.char-head{display:flex;align-items:flex-start;gap:13px}
.char-head-av{width:48px;height:48px;flex:0 0 48px;border-radius:var(--r-m);display:grid;place-items:center;
  font-family:var(--f-display);font-weight:600;font-size:17px;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.char-head-name.edit-in{font-family:var(--f-display);font-size:18px;font-weight:600;color:var(--txt-0);padding:2px 6px}
.char-head-role.edit-in{font-family:var(--f-mono);font-size:10.5px;color:var(--txt-2);letter-spacing:.04em;text-transform:uppercase;padding:2px 6px}
.char-draft-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r-m);
  border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-1);font-family:var(--f-ui);font-size:11px;font-weight:600;cursor:pointer;transition:.12s}
.char-draft-btn:hover:not(:disabled){background:var(--bg-4);color:var(--txt-0)}
.char-draft-btn:disabled{opacity:.55;cursor:default}
.char-draft-btn svg{color:var(--pos-ink)}
.sheet-head-actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;flex:0 0 auto;align-items:center}
.char-draft-btn.ghost{background:transparent;border-color:var(--line-2);color:var(--txt-2)}
.char-draft-btn.ghost svg{color:var(--txt-3)}
.char-draft-btn.ghost:hover:not(:disabled){background:var(--bg-3);color:var(--txt-1)}
/* PRIMARY — the scene's main render action (accent fill) */
.char-draft-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--ink-on-accent)}
.char-draft-btn.primary svg{color:var(--ink-on-accent)}
.char-draft-btn.primary:hover:not(:disabled){background:var(--accent);filter:brightness(1.06);color:var(--ink-on-accent)}
/* WORKING state — must stay obvious (don't fade to a dim disabled look). Accent fill,
   spinning icon, soft glow pulse. Overrides .ghost + :disabled (later + same specificity). */
.char-draft-btn.busy, .char-draft-btn.busy:disabled, .char-draft-btn.ghost.busy{
  opacity:1; background:var(--accent); border-color:var(--accent); color:var(--ink-on-accent); cursor:progress;
  animation:draft-busy 1.15s ease-in-out infinite}
.char-draft-btn.busy svg, .char-draft-btn.ghost.busy svg{ color:var(--ink-on-accent); animation:draft-busy-spin .9s linear infinite }
@keyframes draft-busy{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pos) 55%,transparent)}70%,100%{box-shadow:0 0 0 6px transparent}}
@keyframes draft-busy-spin{to{transform:rotate(360deg)}}
.char-field{margin-bottom:11px}
.char-field .obj-lab{margin-bottom:4px}

.char-arc-card{display:flex;align-items:center;gap:14px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-m);padding:12px 14px;overflow-x:auto}
.arc-spark{flex:0 0 auto}
.char-arc-meta{display:flex;flex-direction:column;gap:7px;min-width:0}
.char-arc-summary{font-family:var(--f-display);font-size:13px;font-weight:500;color:var(--txt-0);line-height:1.3}
.char-arc-verdict{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-s);width:max-content}
.char-arc-verdict.ok{background:var(--pos-soft);color:var(--pos-ink)}
.char-arc-verdict.no{background:var(--alert-soft);color:var(--alert)}
.char-arc-note{font-size:11.5px;line-height:1.5;color:var(--txt-2);margin-top:9px}
.char-arc-note b{color:var(--txt-1);font-weight:600}
.char-empty-arc{display:flex;gap:10px;align-items:flex-start;background:var(--alert-soft);border:1px solid var(--alert);
  border-radius:var(--r-m);padding:11px 13px;font-size:12px;line-height:1.5;color:var(--txt-1)}
.char-empty-arc svg{flex:0 0 auto;color:var(--alert);margin-top:1px}

.char-scene-list{display:flex;flex-direction:column;gap:3px}
.char-scene-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-m);padding:8px 10px;transition:.1s}
.char-scene-row:hover{background:var(--bg-3);border-color:var(--line-3)}
.char-scene-no{font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--txt-3);flex:0 0 auto}
.char-scene-title{flex:1;min-width:0;font-size:12px;color:var(--txt-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.char-scene-flag{color:var(--alert);flex:0 0 auto;display:flex}
.char-scene-go{color:var(--txt-3);flex:0 0 auto;display:flex}
.char-scene-row:hover .char-scene-go{color:var(--txt-1)}

/* ============================================================
   CENTER — SPINE CANVAS
   ============================================================ */
.canvas{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg-0);position:relative}
/* clean-canvas onboarding (empty/new project) */
.empty-canvas{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:6;padding:24px}
/* EMPTY STATE — the Art Room’s .art-soon pattern everywhere (consistency pass 2026-09-29): no card
   chrome, a 64px icon tile, the Spectral 22px title, a 13px line, a standard lg primary */
.empty-canvas-card{pointer-events:auto;max-width:460px;text-align:center;padding:24px;
  display:flex;flex-direction:column;align-items:center;gap:12px}
.empty-canvas-card .empty-canvas-title{margin-bottom:0}
.empty-canvas-card .empty-canvas-sub{margin-bottom:4px;max-width:440px}
/* the chart key has nothing to explain on an empty canvas (its colour swatches go; the runtime item only
   renders once there are scenes) */
.canvas:has(> .empty-canvas) .legend-item:has(> .legend-swatch){display:none}
.empty-canvas-title{font-family:var(--f-serif);font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--txt-0);margin-bottom:9px}
.empty-canvas-sub{font-size:13px;line-height:1.55;color:var(--txt-2);margin-bottom:20px}
.empty-canvas-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 18px;
  font:600 13px var(--f-ui);color:var(--ink-on-accent);background:var(--accent);border:0;border-radius:var(--r-m);cursor:pointer}
.empty-canvas-btn:hover{filter:brightness(1.08)}
.scroll-fade{
  position:absolute;top:96px;bottom:0;right:0;width:54px;pointer-events:none;z-index:5;
  background:linear-gradient(90deg,transparent,var(--bg-0));
}
.canvas-head{
  display:flex;align-items:center;gap:14px;padding:14px 22px 0;flex:0 0 auto;
}
.canvas-head-copy{min-width:0;max-width:100%}
/* PAGE TITLE — one role for every room view (the Writers’ Room spine / board / script title and each Art Room
   department title, .art-intro-t): Spectral 600 at 22px, the wordmark’s serif; an optional mono subline
   (.canvas-sub). Consistency pass 2026-09-29 — the two rooms used Space Grotesk 15px and Spectral 25px. */
.canvas-title,.art-intro-t{font-family:var(--f-serif);font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--txt-0)}
.canvas-sub{font-family:var(--f-mono);font-size:11px;line-height:1.35;color:var(--txt-2);letter-spacing:.03em}
.legend{display:flex;align-items:center;gap:16px;margin-left:auto}
.legend-item{display:flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;color:var(--txt-2);text-transform:uppercase}
.legend-swatch{width:12px;height:12px;border-radius:3px}
/* the film's estimated total runtime (the one legend item with no swatch) reads on one line,
   however narrow the canvas (2026-09-28) */
.legend-item:not(:has(> .legend-swatch)){white-space:nowrap}

.canvas-scroll{flex:1;overflow-x:auto;overflow-y:auto;padding:8px 22px 26px;-webkit-overflow-scrolling:touch}
.spine-wrap{min-width:max-content}
/* grab-to-pan on desktop; cards/controls keep their own cursors */
.canvas-scroll.spine-pan{cursor:grab}
.canvas-scroll.spine-pan.grabbing{cursor:grabbing}
.canvas-scroll.spine-pan.grabbing *{cursor:grabbing !important}
.canvas-scroll.spine-pan .scard,
.canvas-scroll.spine-pan .scard *,
.canvas-scroll.spine-pan .spine-add,
.canvas-scroll.spine-pan select,
.canvas-scroll.spine-pan button{cursor:auto}
.canvas-scroll.spine-pan .scard-grip{cursor:grab}
/* board grab-to-pan */
.canvas-scroll.board-pan{cursor:grab}
.canvas-scroll.board-pan.grabbing{cursor:grabbing}
.canvas-scroll.board-pan.grabbing *{cursor:grabbing !important}
.canvas-scroll.board-pan .scard,.canvas-scroll.board-pan .scard *,
.canvas-scroll.board-pan button,.canvas-scroll.board-pan select{cursor:auto}

/* act ruler */
.act-ruler{display:flex;gap:6px;margin-bottom:6px;height:30px}
.act-band{
  border-radius:var(--r-m) 7px 0 0;display:flex;align-items:center;gap:9px;padding:0 14px;
  background:var(--bg-2);border:1px solid var(--line);border-bottom:0;position:relative;overflow:hidden;
}
.act-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.act-band .no{font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--txt-0);letter-spacing:.08em}
.act-band .nm{font-family:var(--f-display);font-size:11px;color:var(--txt-2);font-weight:500;white-space:nowrap}
.act-band .pct{font-family:var(--f-mono);font-size:10px;color:var(--txt-3);margin-left:auto}
.act-band .act-fold-ic{display:flex;color:var(--txt-3);transition:color .12s}
.act-band:hover{background:var(--bg-3)}
.act-band:hover .act-fold-ic{color:var(--txt-1)}
.act-band.collapsed .no{color:var(--txt-2)}
/* the act bands and scene cards take keyboard focus (2026-09-28) */
.act-band:focus-visible{outline:2px solid var(--pos-line);outline-offset:-2px}
.spine-act-strip:hover{background:var(--bg-3)}

/* graph */
.graph-box{
  background:
    linear-gradient(180deg,var(--pos-soft) 0%,transparent 48%,transparent 52%,var(--neg-soft) 100%);
  border:1px solid var(--line);border-radius:0;position:relative;
}
.graph-svg{display:block}
.graph-zero-label{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-family:var(--f-mono);font-size:9px;color:var(--txt-3);letter-spacing:.1em}
.graph-ylabel{position:absolute;font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.graph-ylabel.top{top:7px;left:9px;color:var(--pos-ink)}
.graph-ylabel.bot{bottom:7px;left:9px;color:var(--neg-ink)}

/* filmstrip of scene cards */
.filmstrip{display:flex;gap:6px;margin-top:6px}
.scard{
  background:var(--bg-2);border:1px solid var(--line);border-top:0;border-radius:0 0 8px 8px;
  padding:11px 12px 12px;cursor:pointer;transition:.13s;position:relative;
  display:flex;flex-direction:column;gap:9px;
}
.scard:hover{background:var(--bg-3)}
.scard:focus-visible{outline:2px solid var(--pos-line);outline-offset:-2px}
.scard.sel{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--pos-line)}
.scard.sel::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--accent);
}
/* Board cards are fully rounded (inline border-radius), so the filmstrip's
   square-top accent bar would overshoot the corners. There the selection is a
   2px ring that follows the rounded corners (inset shadow tracks border-radius). */
.board-pan .scard.sel{box-shadow:inset 0 0 0 2px var(--pos)}
.board-pan .scard.sel::before{display:none}
.scard.climax::after{
  content:"CLIMAX";position:absolute;top:8px;left:0;right:0;text-align:center;font-family:var(--f-mono);
  font-size:9px;letter-spacing:.12em;color:var(--pos-ink);pointer-events:none;
}
.scard-top{display:flex;align-items:center;gap:7px}
.scard-no{font-family:var(--f-mono);font-size:10px;color:var(--txt-3);font-weight:700}
.scard-conf{margin-left:auto;display:flex;gap:3px}
.conf-pip{width:5px;height:5px;border-radius:50%;background:var(--bg-5)}
.conf-pip.on{background:var(--txt-2)}
.scard-title{font-family:var(--f-display);font-size:12.5px;font-weight:500;color:var(--txt-0);line-height:1.25}
.scard.sel .scard-title{color:var(--txt-0)}
.scard-charge{display:flex;align-items:center;gap:6px}
.scard-foot{display:flex;align-items:center;gap:8px;margin-top:1px}
.scard-dur{font-family:var(--f-mono);font-size:9px;color:var(--txt-3);white-space:nowrap;flex:0 0 auto;text-align:right}

/* charge chip */
.chip{
  display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:5px;
  font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.04em;white-space:nowrap;
}
.chip.pos{background:var(--pos-soft);color:var(--pos-ink)}
.chip.neg{background:var(--neg-soft);color:var(--neg-ink)}
.chip.zero{background:var(--bg-4);color:var(--txt-2)}
.chip-arrow{color:var(--txt-3);display:flex;align-items:center}

/* turn badge */
.turn-badge{
  display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:5px;white-space:nowrap;
  font-family:var(--f-mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.turn-badge.ok{background:rgba(255,255,255,.05);color:var(--txt-1)}
.turn-badge.no{background:var(--alert-soft);color:var(--alert)}
.turn-badge.prog{background:var(--prog-soft);color:var(--prog)}
.turn-badge.settle{background:rgba(255,255,255,.04);color:var(--txt-2)}

/* ============================================================
   RIGHT — INSPECTOR
   ============================================================ */
.inspector{
  width:var(--insp-w);flex:0 0 var(--insp-w);
  background:var(--bg-1);border-left:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;
}
.insp-tabs{display:flex;gap:2px;padding:10px 12px 0;flex:0 0 auto;border-bottom:1px solid var(--line)}
.insp-tab{
  padding:8px 12px 10px;border:0;background:transparent;cursor:pointer;position:relative;
  font-family:var(--f-ui);font-size:12.5px;font-weight:500;color:var(--txt-2);transition:.12s;
}
.insp-tab:hover{color:var(--txt-1)}
.insp-tab.on{color:var(--txt-0)}
.insp-tab.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--accent);border-radius:2px}
.insp-scroll{flex:1;overflow-y:auto;padding:16px}
/* the Scene / Character panel reaches the bottom-right corner at every width, where the MUSE
   bubble floats: its last row (the scene's Delete sits far right) scrolls clear (2026-09-28) */
.insp-scroll{padding-bottom:var(--muse-clear)}

/* The Writers' Room's film-level information uses the inspector's exact tab
   language on the left. The scene spine stays below as persistent navigation. */
.rail-tabs .rail-panel-collapse{flex:0 0 auto;align-self:center;margin:0 auto 6px 0}
.rail-tab-pane{margin-bottom:18px}
.rail-cast-pane{padding:1px 0 3px}

.insp-eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.insp-scene-no{font-family:var(--f-mono);font-size:10px;color:var(--ink-on-accent);background:var(--accent);border-radius:4px;padding:1px 6px;font-weight:700}
.insp-title{font-family:var(--f-display);font-size:18px;font-weight:600;color:var(--txt-0);line-height:1.15;margin-bottom:5px}
.insp-loc{font-family:var(--f-mono);font-size:10.5px;color:var(--txt-2);letter-spacing:.04em;display:flex;align-items:center;gap:6px;margin-bottom:13px}
.insp-summary{font-size:13px;line-height:1.55;color:var(--txt-1);margin-bottom:16px}

.insp-block{margin-bottom:18px}
.insp-block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.insp-block-head .eyebrow{display:flex;align-items:center;gap:7px}

/* charge stepper */
.charge-grid{display:flex;align-items:stretch;gap:8px}
/* one value at stake — the axis the scene opens and closes on */
.charge-wrap{display:flex;flex-direction:column;gap:8px}
.value-axis{padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-1)}
.value-axis .lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2);margin-bottom:6px}
.va-row{display:flex;align-items:center;gap:6px}
.va-row .va-in{flex:1;min-width:0;font-family:var(--f-mono);font-size:11px;font-weight:700;color:var(--txt-0)}
.va-pole{font-family:var(--f-mono);font-size:11px;font-weight:700;flex:0 0 auto}
.va-pole.pos{color:var(--pos-ink)} .va-pole.neg{color:var(--neg-ink)}
.va-sep{color:var(--txt-3);flex:0 0 auto}
.va-hint{margin-top:6px;font-size:10.5px;line-height:1.4;color:var(--txt-3)}
.va-name-all{margin-top:8px}
.charge-name.derived{font-family:var(--f-mono);font-size:11px;font-weight:700;color:var(--txt-0);text-align:center;margin-bottom:6px;min-height:16px}
.charge-cell{
  flex:1;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-m);padding:10px 11px;
}
.charge-cell .lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2);margin-bottom:8px}
.stepper{display:flex;align-items:center;gap:8px}
.step-btn{
  width:26px;height:26px;border-radius:var(--r-m);border:1px solid var(--line-2);background:var(--bg-3);
  color:var(--txt-1);cursor:pointer;display:grid;place-items:center;transition:.1s;font-size:15px;
}
.step-btn:hover{background:var(--bg-4);color:var(--txt-0)}
.step-val{flex:1;text-align:center;font-family:var(--f-mono);font-size:15px;font-weight:700}
.step-val.pos{color:var(--pos-ink)}
.step-val.neg{color:var(--neg-ink)}
.step-val.zero{color:var(--txt-2)}
.charge-arrow{display:flex;align-items:center;color:var(--txt-3);padding-top:18px}

/* Turn Audit table: keeps desktop column widths everywhere; on narrow screens
   the table scrolls sideways inside its own container instead of crushing */
.audit-tablewrap{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border-radius:var(--r-l)}
.audit-tablewrap::-webkit-scrollbar{display:none}
.audit-mobile-list{display:none}

/* turn verdict */
.verdict{border-radius:var(--r-m);padding:13px 14px;display:flex;gap:11px;align-items:flex-start}
.verdict.ok{background:var(--pos-soft);border:1px solid var(--pos-line)}
.verdict.no{background:var(--alert-soft);border:1px solid var(--alert)}
.verdict.prog{background:var(--prog-soft);border:1px solid var(--prog)}
.verdict.prog .verdict-icn,.verdict.prog .verdict-t{color:var(--prog)}
.verdict-icn{flex:0 0 auto;margin-top:1px}
.verdict.ok .verdict-icn{color:var(--pos-ink)}
.verdict.no .verdict-icn{color:var(--alert)}
.verdict-t{font-family:var(--f-display);font-size:13px;font-weight:600;margin-bottom:3px}
.verdict.ok .verdict-t{color:var(--pos-ink)}
.verdict.no .verdict-t{color:var(--alert)}
.verdict-d{font-size:11.5px;line-height:1.5;color:var(--txt-1)}

/* beat grid */
.beatgrid{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.beat-head{display:grid;grid-template-columns:34px 1fr 1fr;background:var(--bg-2);border-bottom:1px solid var(--line)}
.beat-head>div{padding:8px 10px;font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2)}
.beat-head>div+div{border-left:1px solid var(--line)}
.beat-row{display:grid;grid-template-columns:34px 1fr 1fr;border-bottom:1px solid var(--line);transition:.1s}
.beat-row:last-child{border-bottom:0}
.beat-row:hover{background:var(--bg-2)}
.beat-no{padding:10px;font-family:var(--f-mono);font-size:11px;color:var(--txt-3);display:flex;align-items:flex-start;justify-content:center;font-weight:700}
.beat-cell{padding:10px;font-size:11.5px;line-height:1.45;color:var(--txt-1)}
.beat-cell+.beat-cell,.beat-no+.beat-cell{border-left:1px solid var(--line)}
.beat-cell .who{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);display:block;margin-bottom:3px}
.beat-cell .act{color:var(--txt-0)}
.beat-row.turn{background:var(--neg-soft)}
.beat-row.turn .beat-no{color:var(--neg-ink)}
.beat-turnflag{
  grid-column:1/-1;padding:7px 12px;background:var(--bg-2);border-top:1px solid var(--neg-line);
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--neg-ink);
  display:flex;align-items:center;gap:7px;
}

/* analysis steps */
.steps{display:flex;flex-direction:column;gap:1px}
.step-item{display:flex;gap:11px;padding:10px;background:var(--bg-2);border:1px solid var(--line)}
.step-item:first-child{border-radius:var(--r-m) var(--r-m) 0 0}
.step-item:last-child{border-radius:0 0 var(--r-m) var(--r-m)}
.step-item+.step-item{border-top:0}
.step-num{
  flex:0 0 22px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-3);
  display:grid;place-items:center;font-family:var(--f-mono);font-size:10px;color:var(--txt-1);font-weight:700;
}
.step-body{flex:1}
.step-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2);margin-bottom:3px}
.step-txt{font-size:12px;line-height:1.5;color:var(--txt-0)}
.step-txt em{color:var(--pos-ink);font-style:normal;font-weight:600}

/* objective rows */
.obj-row{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.obj-row:last-child{border-bottom:0}
.obj-icn{flex:0 0 auto;color:var(--txt-2);margin-top:1px}
.obj-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2);margin-bottom:2px}
.obj-val{font-size:12.5px;color:var(--txt-0);line-height:1.45}

/* ============================================================
   AI CO-WRITER  (overlay panel)
   ============================================================ */
.ai-fab{
  position:absolute;right:22px;bottom:22px;z-index:20;
  display:flex;align-items:center;gap:9px;height:42px;padding:0 16px 0 14px;
  background:var(--bg-3);border:1px solid var(--line-3);border-radius:24px;
  color:var(--txt-0);font-family:var(--f-ui);font-size:13px;font-weight:500;cursor:pointer;
  box-shadow:var(--shadow-pop);transition:.15s;
}
.ai-fab:hover{background:var(--bg-4);transform:translateY(-1px)}
.ai-orb{
  width:22px;height:22px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--neg),var(--pos),var(--neg));
  box-shadow:0 0 12px -2px var(--pos-line);animation:spin 8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.ai-fab .badge{background:var(--alert);color:#fff;font-family:var(--f-mono);font-size:9px;font-weight:700;border-radius:var(--r-m);padding:1px 6px;margin-left:2px}

.ai-panel{
  position:absolute;right:22px;bottom:22px;z-index:25;
  width:388px;max-height:min(620px,calc(100vh - 120px));
  background:var(--bg-2);border:1px solid var(--line-3);border-radius:var(--r-l);
  box-shadow:var(--shadow-pop);display:flex;flex-direction:column;overflow:hidden;
  animation:popup .18s cubic-bezier(.2,.8,.2,1);
}
@keyframes popup{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.ai-head{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line)}
.ai-head .ai-orb{width:24px;height:24px}
.ai-head-t{flex:1}
.ai-head-name{font-family:var(--f-display);font-size:13px;font-weight:600;color:var(--txt-0);display:flex;align-items:center;gap:6px}
.ai-head-sub{font-family:var(--f-mono);font-size:9.5px;color:var(--txt-2);letter-spacing:.04em}
.ai-x{width:26px;height:26px;border-radius:var(--r-m);border:0;background:transparent;color:var(--txt-2);cursor:pointer;display:grid;place-items:center;transition:.1s}
/* writing-model picker in the MUSE header */
.muse-model-sel{flex:0 0 auto;font:500 11px var(--f-ui);color:var(--txt-1);background:var(--bg-3);
  border:1px solid var(--line-2);border-radius:7px;padding:5px 8px;cursor:pointer;max-width:150px}
.muse-model-sel:hover{border-color:var(--line-1);color:var(--txt-0)}
.ai-x:hover{background:var(--bg-4);color:var(--txt-0)}

.ai-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.ai-msg{display:flex;gap:9px}
.ai-msg-orb{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:conic-gradient(from 0deg,var(--neg),var(--pos),var(--neg));margin-top:1px}
.ai-bubble{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-l);border-top-left-radius:3px;padding:11px 13px;font-size:12.5px;line-height:1.55;color:var(--txt-1)}
.ai-bubble strong{color:var(--txt-0);font-weight:600}
.ai-bubble .hi-pos{color:var(--pos-ink);font-weight:600}
.ai-bubble .hi-neg{color:var(--neg-ink);font-weight:600}
.ai-msg.me{flex-direction:row-reverse}
.ai-msg.me .ai-bubble{background:var(--bg-4);border-top-left-radius:11px;border-top-right-radius:3px;color:var(--txt-0)}
.ai-msg.me .ai-msg-orb{background:linear-gradient(135deg,#3a4a5a,#1f262e)}

/* flag card inside ai */
.flag-card{border:1px solid var(--alert);background:var(--alert-soft);border-radius:var(--r-l);padding:11px 12px;margin-top:3px}
.flag-card.warn{border-color:var(--neg-line);background:var(--neg-soft)}
.flag-card-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.flag-card-top .sc{font-family:var(--f-mono);font-size:9px;color:var(--txt-2);letter-spacing:.06em}
.flag-card-t{font-family:var(--f-display);font-size:12px;font-weight:600;color:var(--alert)}
.flag-card.warn .flag-card-t{color:var(--neg-ink)}
.flag-card-d{font-size:11.5px;line-height:1.5;color:var(--txt-1)}
.flag-act{display:flex;gap:7px;margin-top:9px}
.flag-btn{
  font-family:var(--f-ui);font-size:11px;font-weight:600;padding:5px 10px;border-radius:var(--r-s);cursor:pointer;
  border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-0);transition:.1s;
}
.flag-btn:hover{background:var(--bg-4)}
.flag-btn.primary{background:var(--accent);border-color:transparent;color:var(--ink-on-accent)}

.ai-chips-wrap{padding:2px 14px 10px}
.ai-chips-label{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-3);margin-bottom:7px;padding-left:1px}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px}
.ai-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-ui);font-size:11.5px;font-weight:500;color:var(--txt-1);cursor:pointer;
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:18px;padding:5px 11px;transition:.1s;
  text-align:left;
}
.ai-chip-q{color:var(--pos-ink);font-weight:700}
.ai-chip:hover{background:var(--bg-4);color:var(--txt-0);border-color:var(--line-3)}
.ai-chip.skel{pointer-events:none;color:transparent;border-color:var(--line);
  width:120px;height:28px;background:linear-gradient(90deg,var(--bg-2),var(--bg-3),var(--bg-2));
  background-size:200% 100%;animation:chipskel 1.1s linear infinite}
.ai-chip.skel:nth-child(2){width:150px}
.ai-chip.skel:nth-child(3){width:104px}
@keyframes chipskel{0%{background-position:200% 0}100%{background-position:-200% 0}}
.ai-input{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.ai-input input{
  flex:1;height:36px;background:var(--bg-3);border:1px solid var(--line-2);border-radius:9px;
  padding:0 12px;color:var(--txt-0);font-family:var(--f-ui);font-size:12.5px;outline:none;
}
.ai-input input:focus{border-color:var(--line-3)}
.ai-input input::placeholder{color:var(--txt-3)}
.ai-send{width:36px;height:36px;flex:0 0 36px;border-radius:9px;border:0;background:var(--accent);color:var(--ink-on-accent);cursor:pointer;display:grid;place-items:center}
.ai-send:hover{filter:brightness(1.07)}

/* empty state */
/* the panel empty state (inspector / character panel: className "empty" alone). Matched by the EXACT class so
   it no longer leaks into state modifiers that happen to be called .empty (the Shots "No style preset" chip,
   the Stage's zero-credit cost pill and credit line, the empty world field…) — 2026-09-29 */
[class="empty"]{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--txt-2);text-align:center;padding:40px}
[class="empty"] svg{opacity:.4}
.empty-t{font-family:var(--f-display);font-size:14px;color:var(--txt-1)}
.empty-d{font-size:12.5px;max-width:240px;line-height:1.5}

/* generic divider label */
.divider{display:flex;align-items:center;gap:10px;margin:4px 0 12px}
.divider .eyebrow{flex:0 0 auto}
.divider .ln{flex:1;height:1px;background:var(--line)}

/* ============================================================
   SCRIPT VIEW — beats → screenplay bridge
   ============================================================ */
.script-scroll{flex:1;overflow-y:auto;padding:22px 26px 60px}
.script-head{max-width:1000px;margin:0 auto 18px;display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
/* HEADER RHYTHM — context (scene + slugline) → title → status, one weight each.
   The meta column was allowed to shrink to 220px while the toolbar kept its full width,
   so the scene title wrapped ("Bedtime / Check") even on a wide screen. Give the title
   column the larger basis and let the TOOLBAR wrap first when space runs out. */
.script-head>*:first-child{flex:1 1 460px;min-width:300px}
.script-head .meta{flex:1;min-width:0}
.script-slug{font-family:var(--f-mono);font-size:11px;color:var(--txt-2);letter-spacing:.04em;margin-bottom:5px}
/* the provenance badge shares the title's row but must never force the title to wrap:
   the ROW wraps, dropping the badge to its own line, before the title breaks */
.script-title-row{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;min-width:0}
.script-title{font-family:var(--f-display);font-size:20px;font-weight:600;color:var(--txt-0);line-height:1.25}
.script-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px}
.script-missing{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.02em;color:#e2a24e;
  border:1px solid color-mix(in srgb,#e2a24e 45%,transparent);background:color-mix(in srgb,#e2a24e 10%,transparent);
  border-radius:20px;padding:3px 10px;
}
.script-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.script-scenestep{display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11px;color:var(--txt-2)}

.script-body{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:88px minmax(0,1fr)}
.sp-seg{display:contents}
.sp-gut{
  padding:18px 10px 6px 8px;text-align:left;border-right:1px solid var(--line-2);
  position:relative;cursor:pointer;transition:.12s;
  /* the gutter is a TAP TARGET (focus the beat), not content — without this, touch
     devices pop the text-selection UI (blue handles + highlight) on accidental presses */
  user-select:none;-webkit-user-select:none;
}
.sp-gut:hover{background:rgba(255,255,255,.02)}
.sp-gut .bnum{
  display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--bg-4);color:var(--txt-1);font-family:var(--f-mono);font-size:10px;font-weight:700;margin-bottom:6px;
}
.sp-gut .blab{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-1);line-height:1.4}
.sp-gut .bsub{font-size:10.5px;color:var(--txt-3);line-height:1.4;margin-top:3px}
.sp-gut.on .bnum{background:var(--accent);color:var(--ink-on-accent)}
.sp-gut.on .blab{color:var(--pos-ink)}
.sp-seg.missing-script .sp-gut .bnum{background:var(--danger-soft);color:var(--danger-ink)}
.sp-seg.missing-script .sp-gut .bsub{color:var(--danger)}
.sp-gut::after{content:"";position:absolute;right:-1px;top:18px;bottom:0;width:2px;background:transparent}
.sp-gut.on::after{background:var(--accent)}

.sp-page{
  background:#f4f1e9;color:#1b1a16;padding:16px 60px 22px;
  font-family:var(--f-mono);font-size:12.5px;line-height:1.55;
  box-shadow:inset 0 0 0 0 var(--pos);transition:box-shadow .12s;
}
/* active beat (hover or click in the gutter) — accent the screenplay block's left edge */
.sp-seg:first-child .sp-page{padding-top:40px;border-radius:0 6px 0 0}
.sp-seg:last-child .sp-page{padding-bottom:48px;border-radius:0 0 6px 0}
.sp-seg:first-child .sp-gut{border-radius:var(--r-s) 0 0 0;background:rgba(255,255,255,.015)}
.sp-page-inner{max-width:600px;margin:0 auto}

.spb-scene{font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin:4px 0 12px;color:#111}
.spb-action{margin:0 0 11px;color:#26241e}
.spb-missing{color:#8d7f63;font-style:italic}
/* the one-click fix under a "no screenplay text" gap — writes just that beat's prose */
.spb-missing-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.spb-write-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-2);color:var(--txt-1);
  font-size:11.5px;font-weight:600;transition:border-color .12s ease,color .12s ease,background .12s ease}
.spb-write-btn:hover:not(:disabled){border-color:var(--accent,#d8a657);color:var(--txt-0)}
.spb-write-btn:disabled{opacity:.55;cursor:default}
.spb-write-btn .ns-spin{width:11px;height:11px}
.spb-char{margin:10px 0 0;padding-left:42%;text-transform:uppercase;color:#111;font-weight:700;letter-spacing:.02em}
.spb-paren{padding-left:34%;color:#6b6657;margin:0}
.spb-dia{padding-left:24%;padding-right:8%;margin:0 0 2px;color:#1b1a16}
.spb-trans{text-align:right;text-transform:uppercase;font-weight:700;letter-spacing:.02em;color:#111;margin:12px 0}

/* EDIT MODE — each screenplay block becomes a directly-editable line (the page stays
   on its paper colours, so these are dark-on-light regardless of the app theme) */
/* longhand padding so each block type's INDUSTRY indent (char 42% / paren 34% /
   dia 24%) survives in edit mode — the old shorthand clobbered padding-left and
   every element rendered flush-left while editing */
.sp-editable{outline:0;border-radius:5px;padding-top:2px;padding-bottom:2px;padding-right:6px;cursor:text;white-space:pre-wrap;min-height:1.25em;transition:background .12s,box-shadow .12s}
.spb-action.sp-editable,.spb-scene.sp-editable{padding-left:6px;margin-left:-6px}
.spb-sctext.sp-editable{display:inline-block;min-width:60px;padding-left:4px}
.sp-addrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0 2px}
.sp-add-btn,.sp-add-chip{border:1px dashed var(--line-3,#c9c2b4);border-radius:var(--r-m);background:transparent;
  color:#8a8371;font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;padding:3px 9px;cursor:pointer}
.sp-add-btn:hover,.sp-add-chip:hover{border-style:solid;color:#111;border-color:#111}
.sp-add-chip.ghost{border-style:solid;padding:3px 7px}
.sp-editable:hover{background:rgba(0,0,0,.04)}
.sp-editable:focus{background:#fff;box-shadow:0 0 0 2px var(--brand)}
.sp-editable:empty::before{content:attr(data-ph);color:#b9b2a3;pointer-events:none}
.script-body.editing{position:relative}
.script-body.editing .sp-gut{opacity:.45}
.script-body.editing .sp-page{box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);border-radius:var(--r-s)}

.script-empty{
  max-width:560px;margin:40px auto;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-l);padding:30px;text-align:center;
}
.script-empty .ico{width:56px;height:56px;border-radius:var(--r-l);background:var(--bg-3);display:grid;place-items:center;margin:0 auto 16px;color:var(--txt-2)}
.script-empty h3{font-family:var(--f-display);font-size:16px;color:var(--txt-0);margin-bottom:8px;font-weight:600}
.script-empty p{font-size:13px;color:var(--txt-1);line-height:1.55;margin-bottom:18px;max-width:420px;margin-left:auto;margin-right:auto}
.script-empty .beats-pre{display:flex;flex-direction:column;gap:6px;text-align:left;margin-bottom:20px}
.sp-pre-row{display:flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:11px;color:var(--txt-2);background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-m);padding:7px 10px}
.sp-pre-row .n{color:var(--txt-3);font-weight:700}
.sp-pre-row .arrow{margin-left:auto;color:var(--txt-3)}
.draft-btn{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;border-radius:var(--r-m);border:0;
  background:var(--accent);color:var(--ink-on-accent);font-family:var(--f-ui);font-size:13px;font-weight:600;cursor:pointer;
}
.draft-btn:hover{filter:brightness(1.07)}
.draft-btn.sm{height:32px;padding:0 13px;font-size:12px}
.draft-btn.ghost{background:var(--bg-3);color:var(--txt-0);border:1px solid var(--line-2)}
.draft-btn.ghost:hover{background:var(--bg-4);filter:none}

/* transition hinge bars */
.sp-trans{
  max-width:1000px;margin:0 auto 12px;display:flex;align-items:center;gap:11px;
  padding:9px 14px;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;
}
.sp-trans.out{margin:14px auto 0}
.sp-trans .ttype{
  font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--pos-ink);border:1px solid var(--pos-line);border-radius:5px;padding:3px 8px;white-space:nowrap;
}
.sp-trans .ttype.contrast{color:var(--neg-ink);border-color:var(--neg-line)}
.sp-trans .ttype.act{color:var(--txt-0);border-color:var(--line-3);background:var(--bg-4)}
.sp-trans .tgloss{font-size:11.5px;color:var(--txt-1);line-height:1.4}
.sp-trans .tdir{font-family:var(--f-mono);font-size:9.5px;color:var(--txt-3);margin-left:auto;white-space:nowrap;display:flex;align-items:center;gap:6px}

/* continuity ledger */
.sp-carry{max-width:1000px;margin:0 auto 14px;display:flex;flex-wrap:wrap;gap:7px}
.sp-carry .clab2{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);width:100%;margin-bottom:1px;display:flex;align-items:center;gap:6px}
.sp-carry .cell{display:flex;flex-direction:column;gap:2px;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-m);padding:7px 11px;min-width:90px}
.sp-carry .cell .clab{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3)}
.sp-carry .cell .cval{font-size:11.5px;color:var(--txt-1)}
.sp-carry .cell .cval em{font-style:normal;color:var(--pos-ink);font-weight:600}
.sp-carry .cell .cval em.neg{color:var(--neg-ink)}

/* draft badges + progress */
.sp-badge{
  font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  border-radius:5px;padding:3px 7px;white-space:nowrap;
}
.sp-badge.polished{color:var(--pos-ink);background:var(--pos-soft)}
.sp-badge.structural{color:var(--txt-2);background:var(--bg-3);border:1px solid var(--line-2)}
/* engine provenance rides the version badge ("MUSE draft · Kimi K3") — muted, same chip */
.sp-badge .sp-badge-model{opacity:.72;font-weight:500;white-space:nowrap}
/* when the version was written — quieter still than the engine name */
.sp-badge .sp-badge-when{opacity:.55;font-weight:500;white-space:nowrap}
/* beat-map provenance line in the Inspector's Beats tab */
.beat-by-line{display:flex;align-items:center;gap:5px;margin:0 0 10px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.03em;color:var(--txt-2)}
.draft-prog{display:flex;align-items:center;gap:11px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:9px;padding:8px 13px}
.draft-prog .lbl{font-family:var(--f-mono);font-size:11px;color:var(--txt-1)}
.draft-prog .bar{width:150px;height:6px;border-radius:4px;background:var(--bg-4);overflow:hidden}
.draft-prog .bar i{display:block;height:100%;background:var(--accent);transition:width .18s linear}
.draft-prog .orb{width:16px;height:16px;border-radius:50%;background:conic-gradient(from 0deg,var(--neg),var(--pos),var(--neg));animation:spin 1.2s linear infinite}

/* ============================================================
   CONTINUITY + POLISH (Script view additions)
   ============================================================ */
.tier-seg{display:flex;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-m);padding:3px;gap:2px}
.tier-seg button{border:0;background:transparent;color:var(--txt-2);font-family:var(--f-ui);font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:var(--r-s);cursor:pointer;transition:.12s}
.tier-seg button.on{background:var(--bg-5);color:var(--txt-0)}
.tier-seg button:disabled{opacity:.5;cursor:default}

/* version history control */
.ver-ctl{display:flex;align-items:center;gap:6px;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-m);padding:3px 4px}
.ver-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--txt-1);font-family:var(--f-ui);font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:var(--r-s);cursor:pointer;transition:.12s}
.ver-btn:hover:not(:disabled){background:var(--bg-5);color:var(--txt-0)}
.ver-btn:disabled{opacity:.32;cursor:default}
.ver-btn.icon{padding:4px 7px}
.ver-now{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.04em;color:var(--txt-2);padding:0 4px;white-space:nowrap}

.cont-btn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:var(--r-m);cursor:pointer;font-family:var(--f-ui);font-size:12px;font-weight:600;transition:.12s}
.cont-btn.ok{background:var(--pos-soft);color:var(--pos-ink);border:1px solid var(--pos-line)}
.cont-btn.warn{background:var(--alert-soft);color:var(--danger-ink);border:1px solid var(--alert)}
.cont-btn:hover{filter:brightness(1.08)}

/* the Script toolbar = two groups, so mobile can stack them as two lines with the
   SAME desktop look. Group A is a glued strip inside a housing container (border +
   radius on the container, 32px cells, hairline dividers); group B is the accent
   Redraft button beside the housed scene pager. */
.st-group{display:flex;align-items:stretch;flex:0 0 auto}
.st-group.a{border:1px solid var(--line-2);border-radius:9px;background:var(--bg-3);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.st-group.a::-webkit-scrollbar{display:none}
.st-group.a>*{height:32px;border:0;border-radius:0;flex:0 0 auto}
.st-group.a>*+*{border-left:1px solid var(--line-2)}
.st-group.a>.cont-btn.ok,.st-group.a>.cont-btn.warn{border:0;border-radius:0}
.st-group.a>.ver-ctl{border:0;border-radius:0;background:transparent;padding:0 3px}
.st-group.a>.ver-ctl+*{border-left:1px solid var(--line-2)}
/* "Redraft N out-of-date" — its own housed strip, the same look as group A (2026-09-28) */
.st-group.r{border:1px solid var(--line-2);border-radius:9px;background:var(--bg-3);overflow:hidden}
.st-group.r>*{height:32px;border:0;border-radius:0;flex:0 0 auto}
.st-group.b{gap:8px;align-items:center}
.st-group.b .draft-btn.sm{height:32px}
.st-group.b .script-scenestep{height:32px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-3);padding:0 8px}

/* Redraft button drops its middle word on very narrow screens: "Redraft from beats" */
@media (max-width:400px){ .draft-btn .redraft-long{display:none} }

/* EDIT MODE: per-element remove control — deleting commits a version (Undo restores) */
.sp-editwrap{position:relative}
.sp-del-btn{position:absolute;right:0;top:1px;width:20px;height:20px;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--bg-2);color:var(--txt-3);
  font-size:13px;line-height:1;cursor:pointer;opacity:.35;transition:.12s}
.sp-editwrap:hover .sp-del-btn,.sp-editwrap:focus-within .sp-del-btn{opacity:1}
.sp-del-btn:hover{color:var(--neg-ink);border-color:var(--neg)}

.cont-report{max-width:1000px;margin:0 auto 14px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-l);overflow:hidden}
.cont-report-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.cont-report-head .t{font-family:var(--f-display);font-size:13px;font-weight:600;color:var(--txt-0);display:flex;align-items:center;gap:8px}
.cont-report-head .sub{font-family:var(--f-mono);font-size:10px;color:var(--txt-2);margin-left:auto;letter-spacing:.04em}
.cont-explain{padding:11px 16px;font-size:11.5px;line-height:1.5;color:var(--txt-2);border-bottom:1px solid var(--line);background:var(--bg-1)}
.cont-explain b{color:var(--txt-1);font-weight:600}
.cont-row{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:.1s;align-items:center}
.cont-row:last-child{border-bottom:0}
.cont-row:hover{background:var(--bg-3)}
.cont-row .ic{flex:0 0 auto;align-self:flex-start;margin-top:1px}
.cont-row.error .ic{color:var(--alert)}
.cont-row.warn .ic{color:var(--neg-ink)}
.cont-row .body{flex:1}
.cont-row .kind{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px;display:flex;gap:8px;align-items:center}
.cont-row.error .kind{color:var(--alert)}
.cont-row.warn .kind{color:var(--neg-ink)}
.cont-row .kind .sc{color:var(--txt-3)}
.cont-row .msg{font-size:12.5px;color:var(--txt-1);line-height:1.45}
.cont-row .fix{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:11px;color:var(--txt-2);font-style:italic}
.cont-row .fix svg{color:var(--pos-ink);flex:0 0 auto}
.cont-jump{flex:0 0 auto;display:flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt-2);background:var(--bg-3);border:1px solid var(--line-2);border-radius:20px;padding:5px 11px;transition:.1s;white-space:nowrap}
.cont-row:hover .cont-jump{color:var(--txt-0);border-color:var(--line-3);background:var(--bg-4)}
.stale-inline{align-items:center;flex-wrap:wrap;background:var(--prog-soft);border-color:var(--prog)}
.stale-inline .ic{color:var(--prog)}
.stale-inline .tx{flex:1;min-width:220px}
.stale-acts{display:flex;gap:6px;flex:0 0 auto}
.cont-btn.stale{color:var(--prog);border-color:var(--prog)}
.scard-stale{display:inline-flex;align-items:center;color:var(--prog);margin-left:4px}
.insp-stale{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px;padding:9px 11px;border:1px solid var(--prog);border-radius:var(--r-m);background:var(--prog-soft);font-size:11.5px;line-height:1.45;color:var(--txt-1)}
.insp-stale span{flex:1;min-width:160px}
.cont-ledger{display:flex;align-items:center;gap:12px;padding:12px 16px;font-size:12px;line-height:1.5;color:var(--txt-1);border-bottom:1px solid var(--line);background:var(--bg-2)}
.cont-ledger span{flex:1;min-width:0}
.cont-clean{padding:20px 16px;display:flex;align-items:center;gap:11px;color:var(--txt-1);font-size:13px}
.cont-clean .ic{color:var(--pos-ink)}

.cont-inline{max-width:1000px;margin:0 auto 12px;display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:9px;background:var(--alert-soft);border:1px solid var(--alert)}
.cont-inline.warn{background:var(--neg-soft);border-color:var(--neg-line)}
.cont-inline .ic{flex:0 0 auto;color:var(--alert);margin-top:1px}
.cont-inline.warn .ic{color:var(--neg-ink)}
.cont-inline .tx{font-size:12px;color:var(--txt-1);line-height:1.45}
.cont-inline .tx b{color:var(--txt-0)}

.sp-seg.polishing .sp-page{animation:polishpulse .55s ease}@keyframes polishpulse{0%{background:#fff5e2}100%{background:#f4f1e9}}
.script-body.just-polished .sp-page{animation:polishpulse 1s ease}
.polish-note{display:flex;align-items:center;gap:8px;max-width:1000px;margin:0 auto 12px;
  font-family:var(--f-mono);font-size:10.5px;color:var(--pos-ink);letter-spacing:.03em}

/* MUSE typing indicator */
.ai-typing{display:inline-flex;gap:4px;align-items:center;padding:2px 0}
.ai-typing i{width:6px;height:6px;border-radius:50%;background:var(--txt-2);display:inline-block;animation:aitype 1s infinite ease-in-out}
.ai-typing i:nth-child(2){animation-delay:.16s}
.ai-typing i:nth-child(3){animation-delay:.32s}
@keyframes aitype{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* ============================================================
   EDITING (inspector + spine)
   ============================================================ */
.edit-in{display:block;width:100%;background:transparent;border:1px solid transparent;border-radius:var(--r-s);color:inherit;font:inherit;padding:3px 6px;transition:.1s;resize:vertical}
/* a one-line field that runs past its box shows an ellipsis at rest (the phone Scene panel clipped the
   slugline mid-word, "…MORPHEUS'S RO"); editing shows the whole line */
input.edit-in{text-overflow:ellipsis}
input.edit-in:focus{text-overflow:clip}
.edit-in:hover{background:var(--bg-2)}
.edit-in:focus{outline:none;background:var(--bg-1);border-color:var(--line-3)}
.edit-in::placeholder{color:var(--txt-3)}
textarea.edit-in{line-height:1.5;min-height:36px;font-family:var(--f-ui);box-sizing:border-box;overflow:hidden;resize:none}
/* EditableItemList — individually editable bullet rows (worn/carried) */
.eil{display:flex;flex-direction:column;gap:2px}
.eil-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:1px}
.eil-row{display:flex;align-items:flex-start;gap:4px}
.eil-dot{flex:0 0 auto;width:4px;height:4px;border-radius:50%;background:var(--txt-3);margin:11px 3px 0 3px}
.eil-row .edit-in{flex:1;min-width:0;min-height:28px}
.eil-del{flex:0 0 auto;opacity:0;background:transparent;border:none;color:var(--txt-3);cursor:pointer;
  padding:4px;border-radius:5px;display:inline-flex;align-items:center;margin-top:4px;transition:.1s}
.eil-row:hover .eil-del{opacity:1}
/* keyboard reachable (2026-09-28): it shows while focus is in its row */
.eil-row:focus-within .eil-del{opacity:1}
.eil-del:focus-visible{opacity:1;outline:2px solid var(--pos-line);outline-offset:1px}
.eil-del:hover{background:var(--bg-3);color:var(--alert)}
.eil-add{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;margin-top:3px;
  background:transparent;border:1px dashed var(--line-3);color:var(--txt-2);font-family:var(--f-ui);font-size:11px;
  padding:4px 9px;border-radius:var(--r-s);cursor:pointer;transition:.1s}
.eil-add:hover{background:var(--bg-2);color:var(--txt-0);border-color:var(--line-2)}
.insp-title.edit-in{font-family:var(--f-display);font-size:18px;font-weight:600;color:var(--txt-0);margin-bottom:3px}
.loc.edit-in{font-family:var(--f-mono);font-size:11px;color:var(--txt-2);letter-spacing:.03em}
.summary.edit-in{font-size:13px;color:var(--txt-1);line-height:1.5}
.charge-name.edit-in{font-family:var(--f-mono);font-size:11px;font-weight:700;color:var(--txt-0);text-align:center;margin-bottom:6px}

.insp-select{background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-m);color:var(--txt-0);font-family:var(--f-ui);font-size:12px;padding:5px 8px;cursor:pointer}
/* a select that fills its column and never outgrows the panel (long option labels) */
.insp-select-full{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;text-overflow:ellipsis}
.insp-select:focus{outline:none;border-color:var(--line-3)}

.conf-edit{display:flex;gap:5px}
.conf-edit .pip{width:24px;height:10px;border:0;padding:0;border-radius:4px;background:var(--bg-4);cursor:pointer;transition:.1s}
.conf-edit .pip.on{background:var(--txt-1)}
.conf-edit .pip:hover{background:var(--txt-2)}

.insp-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
.ia-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:var(--r-m);border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-1);font-family:var(--f-ui);font-size:12px;font-weight:500;cursor:pointer;transition:.1s}
.ia-btn:hover{background:var(--bg-4);color:var(--txt-0)}
.ia-btn:disabled{opacity:.4;cursor:default}
.ia-btn.danger{margin-left:auto;border-color:transparent}
.ia-btn.danger:hover{background:var(--alert-soft);color:var(--alert)}

/* beat editor */
.beat-labels{display:flex;gap:8px;margin-bottom:10px}
.beat-labels .cell{flex:1}
.beat-edit{border:1px solid var(--line);border-radius:var(--r-m);padding:9px 10px;margin-bottom:8px;background:var(--bg-2);transition:box-shadow .15s,background .15s}
.beat-edit.turn{border-color:var(--neg-line)}
/* beat opened from the Script gutter — ring it so the link reads at a glance */
.beat-edit.focus{box-shadow:0 0 0 2px var(--pos-line);background:var(--bg-3)}
.beat-edit-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.beat-edit-head .bn{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-size:10px;font-weight:700;background:var(--bg-4);color:var(--txt-1);flex:0 0 auto}
.beat-edit.turn .bn{background:var(--neg);color:#08272e}
.beat-turn-btn{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);background:transparent;border:1px solid var(--line-2);border-radius:5px;padding:3px 7px;cursor:pointer;transition:.1s}

.beat-turn-btn:hover{color:var(--txt-1)}
.beat-edit.turn .beat-turn-btn{color:var(--neg-ink);border-color:var(--neg-line)}
.beat-edit-tools{margin-left:auto;display:flex;gap:2px}
.bx{width:24px;height:24px;border-radius:var(--r-s);border:0;background:transparent;color:var(--txt-3);cursor:pointer;display:grid;place-items:center;transition:.1s}
.bx:hover{background:var(--bg-4);color:var(--txt-0)}
.bx:disabled{opacity:.3;cursor:default}
.beat-edit-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.beat-edit-col .clab{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);margin-bottom:3px}
/* Action = compact, mono, bright-grey caps · Behaviour = larger, dim prose */
.edit-in.bt-act{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--txt-0);margin-bottom:3px}
.edit-in.bt-beh{font-size:12.5px;color:var(--txt-2);line-height:1.5;font-family:var(--f-ui)}
.add-beat{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;height:34px;border-radius:var(--r-m);border:1px dashed var(--line-3);background:transparent;color:var(--txt-2);font-family:var(--f-ui);font-size:12px;font-weight:500;cursor:pointer;transition:.1s;margin-top:2px}
.add-beat:hover{background:var(--bg-2);color:var(--txt-0)}

/* spine: drag-reorder + add scene */
.scard{user-select:none}
.scard.dragging{opacity:.35}
.scard.dragover{box-shadow:inset 0 0 0 2px var(--pos)}
.scard-grip{position:absolute;top:7px;right:8px;color:var(--txt-3);cursor:grab;opacity:0;transition:.12s}
.scard:hover .scard-grip{opacity:.7}
.scard-grip:active{cursor:grabbing}
.scard.climax .scard-grip{top:22px}
.spine-add{flex:0 0 auto;width:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border:1px dashed var(--line-3);border-top:0;border-radius:0 0 8px 8px;background:transparent;color:var(--txt-2);
  cursor:pointer;font-family:var(--f-ui);font-size:12px;font-weight:500;transition:.12s}
.spine-add:hover{background:var(--bg-2);color:var(--txt-0)}
.tree-scene[draggable]{cursor:grab}
.tree-scene.dragover{box-shadow:inset 2px 0 0 var(--pos)}

/* ============================================================
   NEW STORY intake (modal overlay)
   ============================================================ */
.ns-overlay{position:fixed;inset:0;z-index:142;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:24px;opacity:1}
.ns-panel{width:min(600px,96vw);max-height:calc(100dvh - 48px);background:var(--bg-1);border:1px solid var(--line-3);
  border-radius:var(--r-l);box-shadow:var(--shadow-pop);display:flex;flex-direction:column;overflow:hidden}
.ns-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.ns-head-t{display:flex;align-items:center;gap:11px;flex:1}
.ns-orb{width:30px;height:30px;border-radius:9px;flex:0 0 30px;background:conic-gradient(from 0deg,var(--neg),var(--pos),var(--neg));
  box-shadow:0 0 16px -3px var(--pos-line);animation:spin 9s linear infinite}
.ns-title{font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--txt-0)}
.ns-sub{font-family:var(--f-mono);font-size:10px;color:var(--txt-2);letter-spacing:.03em}
/* progress stepper — the four intake screens */
.ns-steps{display:flex;align-items:center;gap:7px;padding:10px 18px;border-bottom:1px solid var(--line)}
.ns-step{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
.ns-step::after{content:"";width:14px;height:1px;background:var(--line-2);margin-left:1px}
.ns-step:last-child::after{display:none}
.ns-step-dot{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex:0 0 18px;
  font-family:var(--f-mono);font-size:9px;font-weight:700;background:var(--bg-3);color:var(--txt-3);
  border:1px solid var(--line-2);transition:.15s}
.ns-step-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);transition:.15s}
.ns-step.on .ns-step-dot{background:var(--accent);border-color:transparent;color:var(--ink-on-accent)}
.ns-step.on .ns-step-lab{color:var(--txt-0)}
.ns-step.done .ns-step-dot{background:var(--pos-soft);border-color:var(--pos-line);color:var(--pos-ink)}
.ns-step.done .ns-step-lab{color:var(--txt-2)}
@media (max-width:560px){ .ns-step-lab{display:none} .ns-step::after{width:10px} }
.ns-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:13px}
.ns-seclab{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
.ns-chips{display:flex;flex-wrap:wrap;gap:8px}
.ns-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:9px;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line);color:var(--txt-1);font-family:var(--f-ui);font-size:12.5px;font-weight:500;transition:.12s}
.ns-chip:hover{background:var(--bg-3);color:var(--txt-0)}
.ns-chip.on{background:var(--accent);border-color:transparent;color:var(--ink-on-accent)}
.ns-chip svg{opacity:.85}
.ns-hint{font-size:12px;color:var(--txt-2);font-style:italic}
.ns-field{display:flex;flex-direction:column;gap:6px}
.ns-input-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2)}
.ns-input{width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:9px;padding:11px 13px;
  color:var(--txt-0);font-family:var(--f-ui);font-size:13.5px;line-height:1.5;outline:none;resize:vertical}
.ns-input:focus{border-color:var(--line-3)}
.ns-input::placeholder{color:var(--txt-3)}
.ns-surprise{display:flex;align-items:center;gap:9px;padding:13px 14px;border-radius:9px;background:var(--bg-2);
  border:1px dashed var(--line-3);font-size:12.5px;color:var(--txt-1)}
.ns-surprise svg{color:var(--pos-ink);flex:0 0 auto}
.ns-err{font-size:12px;color:var(--alert)}

/* ---- Talk it through (voice interview) ---- */
.ns-talk{gap:11px}
.ns-talk-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ns-talk-status{display:flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:var(--txt-2)}
.ns-talk-orb{width:11px;height:11px;border-radius:50%;flex:0 0 11px;background:var(--txt-3)}
.ns-talk-orb.live{background:var(--neg);box-shadow:0 0 0 0 var(--neg);animation:talkpulse 1.3s ease-out infinite}
.ns-talk-orb.think{background:var(--accent);animation:talkpulse 1s ease-out infinite}
@keyframes talkpulse{0%{box-shadow:0 0 0 0 color-mix(in oklch,currentColor 40%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.ns-talk-mute{display:inline-flex;align-items:center;gap:5px;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:var(--r-m);padding:5px 9px;cursor:pointer;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--txt-2);transition:.12s}
.ns-talk-mute:hover{background:var(--bg-4);color:var(--txt-0)}
.ns-talk-note{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:9px;
  background:var(--bg-2);border:1px dashed var(--line-3);font-size:12px;line-height:1.45;color:var(--txt-1)}
.ns-talk-note svg{color:var(--pos-ink);flex:0 0 auto;margin-top:1px}
.ns-talk-note b{color:var(--txt-0);font-weight:600}

.ns-talk-thread{display:flex;flex-direction:column;gap:9px;min-height:200px;max-height:46vh;overflow-y:auto;
  padding:14px;border-radius:var(--r-l);background:var(--bg-2);border:1px solid var(--line)}
.ns-talk-msg{display:flex}
.ns-talk-msg.assistant{justify-content:flex-start}
.ns-talk-msg.user{justify-content:flex-end}
.ns-talk-bubble{max-width:82%;padding:10px 13px;border-radius:var(--r-l);font-size:13.5px;line-height:1.5}
.ns-talk-msg.assistant .ns-talk-bubble{background:var(--bg-4);color:var(--txt-0);border-bottom-left-radius:4px}
.ns-talk-msg.user .ns-talk-bubble{background:var(--accent);color:var(--ink-on-accent);border-bottom-right-radius:4px}
.ns-talk-msg.pending .ns-talk-bubble{opacity:.6;font-style:italic}
.ns-talk-empty{margin:auto;color:var(--txt-3);font-size:12px;font-style:italic;text-align:center}
.ns-talk-dots{display:inline-flex;gap:4px;align-items:center;height:8px}
.ns-talk-dots i{width:6px;height:6px;border-radius:50%;background:var(--txt-3);animation:talkdot 1.1s infinite ease-in-out}
.ns-talk-dots i:nth-child(2){animation-delay:.18s}
.ns-talk-dots i:nth-child(3){animation-delay:.36s}
@keyframes talkdot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

.ns-talk-input{display:flex;align-items:center;gap:9px}
.ns-talk-type{flex:1;min-width:0}
.ns-mic{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--txt-1);transition:.14s}
.ns-mic:hover{background:var(--bg-4);color:var(--txt-0)}
.ns-mic.on{background:var(--neg);border-color:transparent;color:#fff;box-shadow:0 0 0 0 var(--neg);animation:talkpulse 1.3s ease-out infinite}
.ns-mic:disabled{opacity:.5;cursor:default}
.ns-live-note{border-style:solid;background:var(--pos-soft);border-color:var(--pos-line)}
.ns-talk-mute.off{color:var(--alert);border-color:color-mix(in oklch,var(--alert) 36%,var(--line-2))}
.ns-hear{height:29px;padding:0 10px;margin-left:auto;white-space:nowrap}
.ns-live-foot{flex-wrap:wrap}
.ns-live-foot .ns-btn.link{margin-right:auto}
.ns-foot{display:flex;gap:9px;justify-content:flex-end;align-items:center;margin-top:2px}
.ns-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:9px;cursor:pointer;
  font-family:var(--f-ui);font-size:13px;font-weight:600;border:1px solid var(--line-2);transition:.12s}
.ns-btn.ghost{background:var(--bg-3);color:var(--txt-1)}
.ns-btn.ghost:hover{background:var(--bg-4);color:var(--txt-0)}
.ns-btn.link{background:transparent;border-color:transparent;color:var(--txt-2);margin-right:auto}
.ns-btn.link:hover{color:var(--txt-0)}
.ns-btn.primary{background:var(--accent);border-color:transparent;color:var(--ink-on-accent)}
.ns-btn.primary:hover{filter:brightness(1.08)}
.ns-btn:disabled{opacity:.55;cursor:default}
.ns-spin,.ns-spin::after{width:14px;height:14px;border-radius:50%}
.ns-spin{border:2px solid rgba(26,18,5,.3);border-top-color:var(--ink-on-accent);animation:spin .7s linear infinite;display:inline-block}
.ns-cands{display:flex;flex-direction:column;gap:8px}
.ns-cand{display:flex;gap:10px;align-items:flex-start;text-align:left;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-l);padding:12px 13px;cursor:pointer;transition:.12s}
.ns-cand:hover{background:var(--bg-3)}
.ns-cand.on{border-color:var(--pos-line);box-shadow:inset 0 0 0 1px var(--pos-line)}
.ns-cand-dot{width:14px;height:14px;border-radius:50%;flex:0 0 14px;margin-top:2px;border:2px solid var(--line-3)}
.ns-cand.on .ns-cand-dot{border-color:var(--pos);background:radial-gradient(var(--pos) 40%,transparent 45%)}
.ns-cand-tx{font-size:13px;line-height:1.5;color:var(--txt-0)}

/* ---- synopsis / research stage ---- */
.syn-titlerow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.syn-worktitle{font-family:var(--f-display);font-size:19px;font-weight:600;letter-spacing:.01em;color:var(--txt-0);text-transform:uppercase}
/* editable working title — reads like the heading, behaves like a field */
.syn-title-input{flex:1;min-width:0;background:transparent;border:1px solid transparent;border-radius:var(--r-m);
  padding:5px 8px;margin:-5px -8px;outline:none;transition:.12s}
.syn-title-input::placeholder{color:var(--txt-3)}
.syn-title-input:hover{border-color:var(--line-2)}
.syn-title-input:focus{border-color:var(--line-3);background:var(--bg-2)}
.syn-research-toggle{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:var(--r-m);padding:6px 10px;cursor:pointer;font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;color:var(--txt-2);transition:.12s}
.syn-research-toggle:hover{background:var(--bg-4);color:var(--txt-0)}
.syn-research{display:flex;flex-direction:column;gap:11px;padding:14px;border-radius:var(--r-m);
  background:var(--bg-2);border:1px solid var(--line)}
.syn-research-head{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2)}
.syn-pillar{display:flex;flex-direction:column;gap:5px}
.syn-pillar-lab{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2)}
.syn-pillar-tx{font-size:12.5px;line-height:1.55;color:var(--txt-1)}
.syn-fact-line{font-size:12.5px;line-height:1.5;color:var(--txt-1);margin-bottom:3px}
.syn-fact-k{display:inline-block;font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt-3);margin-right:7px}
.syn-lens-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:5px}
.syn-lens{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-m);padding:9px 10px;display:flex;flex-direction:column;gap:3px}
.syn-lens-k{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--pos-ink)}
.syn-lens-v{font-size:11.5px;line-height:1.45;color:var(--txt-1)}
.syn-seclab{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);margin-top:2px}
.syn-para{display:flex;flex-direction:column;gap:6px}
.syn-para-lab{font-family:var(--f-display);font-size:12.5px;font-weight:600;color:var(--txt-1)}
.syn-input{font-size:13px;line-height:1.6}
@media (max-width:640px){ .syn-lens-grid{grid-template-columns:1fr} }

.tb-btn.newstory{color:var(--pos-ink)}
.tb-btn.newstory:hover{background:var(--pos-soft);border-color:var(--pos-line)}
@media (max-width:640px){
  .ns-overlay{padding:0}
  .ns-panel{width:100vw;max-height:100vh;max-height:100dvh;height:100vh;height:100dvh;border-radius:0}
}

/* ============================================================
   AGENTS — Writers' Room (modal overlay)
   ============================================================ */
.ag-overlay{position:fixed;inset:0;z-index:140;background:rgba(0,0,0,.6);display:grid;place-items:center;
  padding:24px;opacity:1}
.ag-panel{width:min(620px,96vw);max-height:min(86vh,860px);background:var(--bg-1);border:1px solid var(--line-3);
  border-radius:var(--r-l);box-shadow:var(--shadow-pop);display:flex;flex-direction:column;overflow:hidden;opacity:1}

.ag-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.ag-head-t{display:flex;align-items:center;gap:11px;flex:1}
.ag-orb{width:30px;height:30px;border-radius:9px;flex:0 0 30px;
  background:conic-gradient(from 0deg,var(--neg),var(--pos),var(--neg));box-shadow:0 0 16px -3px var(--pos-line);animation:spin 9s linear infinite}
.ag-title{font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--txt-0)}
.ag-sub{font-family:var(--f-mono);font-size:10px;color:var(--txt-2);letter-spacing:.03em}
/* shared modal/popup CLOSE button — a visible rounded chip (matches the cameo-x style) */
.ag-x{width:30px;height:30px;border-radius:var(--r-m);border:1px solid var(--line-2);background:var(--bg-2);color:var(--txt-2);cursor:pointer;display:grid;place-items:center;transition:.12s;flex:0 0 auto}
.ag-x:hover{background:var(--bg-3);color:var(--txt-0)}

.ag-warn{display:flex;align-items:flex-start;gap:8px;margin:12px 18px 0;padding:9px 11px;border-radius:var(--r-m);
  background:var(--neg-soft);border:1px solid var(--neg-line);font-size:11.5px;line-height:1.45;color:var(--txt-1)}
.ag-warn svg{flex:0 0 auto;color:var(--neg-ink);margin-top:1px}

/* agent picker grid */
.ag-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px;overflow-y:auto}
.ag-card{text-align:left;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-m);
  padding:15px;cursor:pointer;transition:.13s;display:flex;flex-direction:column;gap:9px;font-family:var(--f-ui)}
.ag-card:hover{background:var(--bg-3);border-color:var(--line-3);transform:translateY(-2px)}
.ag-card-top{display:flex;align-items:center;justify-content:space-between}
.ag-card-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--bg-4);color:var(--pos-ink);border:1px solid var(--line-2)}
.ag-card-kind{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 7px;border-radius:20px;border:1px solid var(--line-2);color:var(--txt-2)}
.ag-card-kind.k-fix{color:var(--pos-ink);border-color:var(--pos-line)}
.ag-card-kind.k-build{color:var(--neg-ink);border-color:var(--neg-line)}
.ag-card-kind.k-report{color:var(--txt-1)}
.ag-card-name{font-family:var(--f-display);font-size:14px;font-weight:600;color:var(--txt-0)}
.ag-card-blurb{font-size:11.5px;line-height:1.5;color:var(--txt-2);flex:1}
.ag-card-go{display:flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--txt-2)}
.ag-card:hover .ag-card-go{color:var(--pos-ink)}

/* MUSE — floating help-assistant dock (bottom-right, every room) + shared chat bits */
.muse-dock-wrap{position:fixed;right:22px;bottom:22px;z-index:75;display:flex;flex-direction:column;
  align-items:flex-end;gap:12px;font-family:var(--f-ui)}
/* no resting disc — the button is just the orb itself (the pulse provides the
   presence); voice states (listening/speaking) still paint their own circle */
.muse-bubble{width:54px;height:54px;border-radius:50%;border:1px solid transparent;cursor:pointer;
  position:relative;background:transparent;display:grid;place-items:center;color:var(--txt-0);
  box-shadow:none;transition:.15s}
.muse-bubble:hover{transform:translateY(-2px);border-color:transparent;box-shadow:none}
.muse-bubble.open{background:transparent}
.muse-bubble .ai-orb{width:40px;height:40px;position:relative;z-index:2}   /* orb stays crisp above the pulse */

/* attention pulse — the SAME expanding soft ring the Art Room's Re-draft buttons
   use while working (the draft-busy keyframes), running on the orb's circle. The
   orb's own slow conic spin is kept. */
.muse-bubble .ai-orb{animation:spin 8s linear infinite, draft-busy 1.15s ease-in-out infinite}
.muse-bubble.open .ai-orb,
.muse-bubble:hover .ai-orb{animation:spin 8s linear infinite}   /* calm once opened or hovered */
@media (prefers-reduced-motion: reduce){ .muse-bubble .ai-orb{animation:none} }

/* ── MUSE voice ORB (no modal): a wave ripples around the button by state ── */
.muse-orb-wrap{position:fixed;right:24px;bottom:24px;z-index:75;
  display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--f-ui)}
.muse-orb-stage{position:relative;width:56px;height:56px;display:grid;place-items:center}
.muse-orb-wrap .muse-bubble{position:relative;z-index:2;width:56px;height:56px}
.muse-orb-wrap .muse-bubble.listening{background:var(--pos);color:var(--bg-0);border-color:var(--pos)}
.muse-orb-wrap .muse-bubble.speaking{background:var(--bg-4);color:#e2a24e;border-color:#e2a24e}
.muse-orb-wrap .muse-bubble.thinking{color:var(--pos)}
/* wave rings — expand outward from the orb and fade */
.muse-ring{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;
  border-radius:50%;border:2px solid var(--pos-line);opacity:0;pointer-events:none;z-index:1}
@keyframes muse-wave{0%{transform:scale(.92);opacity:.5}100%{transform:scale(2.1);opacity:0}}
/* the wave ONLY ripples while MUSE is active — which only happens after a tap.
   Idle = no animation (rings stay invisible). */
.muse-orb-wrap.listening .muse-ring{animation:muse-wave 1.5s ease-out infinite;border-color:var(--pos)}
.muse-orb-wrap.listening .muse-ring.r2{animation-delay:.5s}
.muse-orb-wrap.listening .muse-ring.r3{animation-delay:1s}
.muse-orb-wrap.speaking .muse-ring{animation:muse-wave 1.9s ease-out infinite;border-color:#e2a24e}
.muse-orb-wrap.speaking .muse-ring.r2{animation-delay:.63s}
.muse-orb-wrap.speaking .muse-ring.r3{animation-delay:1.26s}
.muse-orb-wrap.thinking .muse-ring{animation:muse-wave 1.1s ease-out infinite;border-color:var(--pos-line)}
.muse-orb-wrap.thinking .muse-ring.r2{animation-delay:.37s}
.muse-orb-wrap.thinking .muse-ring.r3{animation-delay:.74s}
@media (prefers-reduced-motion: reduce){ .muse-orb-wrap .muse-ring{animation:none;opacity:0} }
.muse-caption{max-width:210px;text-align:center;font-size:11.5px;line-height:1.45;
  color:var(--txt-1);background:var(--bg-2);border:1px solid var(--line-2);border-radius:13px;
  padding:7px 12px;box-shadow:0 8px 22px rgba(0,0,0,.45)}
.muse-caption.err{color:var(--neg);border-color:var(--neg-line);max-width:250px}
.muse-dock{width:352px;max-width:calc(100vw - 44px);max-height:min(70vh,560px);
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.muse-dock-head{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line);
  background:var(--bg-2)}
.muse-dock-head .ai-orb{width:26px;height:26px;flex:none}
.muse-dock-ht{flex:1;min-width:0}
.muse-dock-t{font-family:var(--f-display);font-size:14px;font-weight:600;color:var(--txt-0);letter-spacing:.02em}
.muse-dock-status{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--txt-2)}
.muse-dot{width:6px;height:6px;border-radius:50%;background:var(--txt-3,#777)}
.muse-dot.on{background:var(--pos)}
.muse-dock-x{background:none;border:none;color:var(--txt-2);cursor:pointer;padding:4px;border-radius:6px;display:grid;place-items:center}
.muse-dock-x:hover{color:var(--txt-0);background:var(--bg-4)}
.muse-dock-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.muse-greet{padding:6px 2px 4px}
.muse-greet-t{font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--txt-0);margin-bottom:4px}
.muse-greet-d{font-size:12px;color:var(--txt-2);line-height:1.5}
.muse-dock .muse-chips{padding:0 14px 4px}
.muse-dock .muse-chips.followup{padding-top:6px;margin-top:2px}
.muse-chips-lab{width:100%;font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-2);margin-bottom:5px}
.muse-dock .muse-ask-bar{padding:12px 14px;border-top:1px solid var(--line);background:var(--bg-2)}
.muse-dock .muse-ask-off{padding:0 14px 12px}

/* MUSE signed-out teaser (visitor mode) */
.muse-visitor-foot{display:flex;flex-direction:column;gap:9px;padding:12px 14px;border-top:1px solid var(--line);background:var(--bg-2)}
.muse-visitor-foot .muse-ask-bar{padding:0}
.muse-signup{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;cursor:pointer;
  font-family:var(--f-ui);font-size:11.5px;font-weight:600;color:var(--pos);
  background:transparent;border:1px dashed var(--pos-line);border-radius:var(--r-m);padding:8px 12px;transition:.12s}
.muse-signup:hover{background:var(--bg-3);border-style:solid}
.muse-signup.big{font-size:13px;color:var(--bg-0);background:var(--pos);border:none;padding:11px 14px}
.muse-signup.big:hover{filter:brightness(1.06);background:var(--pos)}
.muse-cap-note{font-size:11.5px;line-height:1.45;color:var(--txt-1);text-align:center}
.muse-a.gate{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.muse-inline-signup{align-self:flex-start;cursor:pointer;font-family:var(--f-ui);font-size:11px;font-weight:600;
  color:var(--pos);background:transparent;border:none;padding:0;text-decoration:underline;text-underline-offset:2px}
.muse-inline-signup:hover{color:var(--txt-0)}
@media (max-width:520px){ .muse-dock{width:calc(100vw - 44px)} }

/* MUSE voice controls */
.muse-dot.live{background:var(--pos);animation:muse-blink .9s steps(2,start) infinite}
@keyframes muse-blink{50%{opacity:.25}}
.muse-dock-x.on{color:var(--pos)}
.ai-orb.pulse{animation:muse-orbpulse 1.1s ease-in-out infinite}
@keyframes muse-orbpulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:1}}
.muse-mic{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--txt-1);transition:.13s}
.muse-mic:hover:not(:disabled){border-color:var(--pos-line);color:var(--pos)}
.muse-mic:disabled{opacity:.4;cursor:default}
.muse-mic.on{background:var(--pos);border-color:var(--pos);color:var(--bg-0);
  box-shadow:0 0 0 0 var(--pos-line);animation:muse-mic-ring 1.4s ease-out infinite}
@keyframes muse-mic-ring{0%{box-shadow:0 0 0 0 rgba(120,200,160,.5)}100%{box-shadow:0 0 0 12px rgba(120,200,160,0)}}
.muse-a.speaking{border-color:var(--pos-line);box-shadow:0 0 0 1px var(--pos-line) inset}

/* MUSE voice-only surface */
.muse-voice{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 14px 18px;
  border-top:1px solid var(--line);background:var(--bg-2)}
.muse-talk{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--pos);border:none;color:var(--bg-0);transition:.14s;
  box-shadow:0 6px 22px rgba(0,0,0,.4)}
.muse-talk:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.5)}
.muse-talk:disabled{opacity:.5;cursor:default;background:var(--bg-4);color:var(--txt-2)}
.muse-talk.listening{background:var(--pos);animation:muse-talk-ring 1.3s ease-out infinite}
.muse-talk.speaking{background:var(--bg-4);color:var(--pos);border:1px solid var(--pos-line)}
@keyframes muse-talk-ring{0%{box-shadow:0 0 0 0 rgba(120,200,160,.55)}100%{box-shadow:0 0 0 16px rgba(120,200,160,0)}}
.muse-talk-label{font-size:11.5px;color:var(--txt-2);letter-spacing:.01em}
.muse-q.pending{opacity:.7;font-style:italic;background:var(--bg-3);border-style:dashed}
.muse-trysay{margin-top:6px;padding-top:10px;border-top:1px dashed var(--line)}
.muse-trysay-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-3,var(--txt-2));margin-bottom:7px}
.muse-trysay .muse-chip{font-style:italic}
.muse-voice-err{display:flex;align-items:flex-start;gap:6px;max-width:280px;text-align:left;
  font-size:11px;line-height:1.45;color:var(--neg);margin-top:2px}
.muse-voice-err svg{flex:none;margin-top:1px}
.muse-voice-fallback{display:flex;flex-direction:column;gap:9px;padding:14px;border-top:1px solid var(--line);background:var(--bg-2)}
.muse-voice-fallback .muse-voice-err{margin:0 auto}
.muse-voice-fallback .muse-ask-bar{padding:0}

/* MUSE Q&A — pinned below the agent grid (legacy in-panel variant) */
.muse-ask{border-top:1px solid var(--line);background:var(--bg-1);padding:14px 18px 16px;
  display:flex;flex-direction:column;gap:10px}
.muse-ask-head{display:flex;align-items:center;gap:10px}
.muse-ask-head .ai-orb{width:22px;height:22px;flex:none}
.muse-ask-t{font-family:var(--f-display);font-size:13.5px;font-weight:600;color:var(--txt-0)}
.muse-ask-sub{font-size:11px;color:var(--txt-2);line-height:1.4}
.muse-thread{display:flex;flex-direction:column;gap:8px;max-height:230px;overflow-y:auto;
  padding:4px 2px;margin:0 -2px}
.muse-q{align-self:flex-end;max-width:85%;background:var(--bg-4);border:1px solid var(--line-2);
  border-radius:12px 12px 3px 12px;padding:7px 11px;font-size:12px;color:var(--txt-0);line-height:1.45}
.muse-a{align-self:flex-start;max-width:90%;background:var(--bg-2);border:1px solid var(--line);
  border-radius:12px 12px 12px 3px;padding:8px 12px;font-size:12.5px;color:var(--txt-1);line-height:1.55}
.muse-a.err{color:var(--neg);border-color:var(--neg-line)}
.muse-a.typing{padding:10px 12px}
.muse-chips{display:flex;flex-wrap:wrap;gap:6px}
.muse-chip{font-family:var(--f-ui);font-size:11px;color:var(--txt-1);background:var(--bg-2);
  border:1px solid var(--line-2);border-radius:20px;padding:5px 11px;cursor:pointer;transition:.12s}
.muse-chip:hover:not(:disabled){background:var(--bg-3);border-color:var(--pos-line);color:var(--pos)}
.muse-chip:disabled{opacity:.5;cursor:default}
.muse-ask-bar{display:flex;gap:8px;align-items:center}
.muse-ask-in{flex:1;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-m);
  padding:9px 12px;font-family:var(--f-ui);font-size:12.5px;color:var(--txt-0);outline:none}
.muse-ask-in:focus{border-color:var(--pos-line)}
.muse-ask-send{display:flex;align-items:center;gap:6px;font-family:var(--f-ui);font-size:12px;font-weight:600;
  color:var(--bg-0);background:var(--pos);border:none;border-radius:var(--r-m);padding:9px 15px;cursor:pointer;transition:.12s}
.muse-ask-send:disabled{opacity:.45;cursor:default}
.muse-ask-off{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--txt-2)}

/* runner */
.ag-runner{display:flex;flex-direction:column;min-height:0;flex:1}
.ag-runner-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.ag-runner-ic{width:30px;height:30px;border-radius:var(--r-m);display:grid;place-items:center;background:var(--bg-3);color:var(--pos-ink);border:1px solid var(--line-2);flex:0 0 auto}
.ag-runner-t{flex:1;min-width:0}
.ag-runner-name{font-family:var(--f-display);font-size:14px;font-weight:600;color:var(--txt-0)}
.ag-runner-muse{color:var(--txt-2);font-weight:600;letter-spacing:.06em}
.ag-runner-sub{font-family:var(--f-mono);font-size:10px;color:var(--txt-2);letter-spacing:.03em}

.ag-input-wrap{padding:14px 16px 0}
.ag-input-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2);margin-bottom:6px}
.ag-input{width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:9px;padding:10px 12px;
  color:var(--txt-0);font-family:var(--f-ui);font-size:13px;line-height:1.5;outline:none;resize:vertical}
.ag-input:focus{border-color:var(--line-3)}
.ag-input::placeholder{color:var(--txt-3)}

/* idea helper (logline starters) */
.idea-helper{margin-top:10px}
.idea-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.idea-hint{font-size:11.5px;color:var(--txt-2)}
.idea-spark{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--pos-line);background:var(--pos-soft);
  color:var(--pos-ink);font-family:var(--f-ui);font-size:11px;font-weight:600;padding:4px 10px;border-radius:var(--r-m);cursor:pointer;transition:.12s}
.idea-spark:hover:not(:disabled){filter:brightness(1.08)}
.idea-spark:disabled{opacity:.6;cursor:default}
.idea-toggle{border:0;background:transparent;color:var(--txt-2);font-family:var(--f-ui);font-size:11px;font-weight:600;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:4px 2px;margin-left:auto}
.idea-toggle:hover{color:var(--txt-0)}
.idea-list{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.idea-ex{position:relative;text-align:left;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-m);
  padding:8px 11px 8px 26px;font-size:11.5px;line-height:1.45;color:var(--txt-1);cursor:pointer;transition:.1s;font-family:var(--f-ui)}
.idea-ex:hover{background:var(--bg-4);color:var(--txt-0);border-color:var(--line-3)}
.idea-ex-q{position:absolute;left:9px;top:6px;font-family:var(--f-display);font-size:16px;color:var(--txt-3)}
.idea-tip{display:flex;align-items:flex-start;gap:7px;margin-top:10px;font-size:11px;line-height:1.5;color:var(--txt-3)}
.idea-tip svg{flex:0 0 auto;color:var(--txt-2);margin-top:2px}
.idea-tip b{color:var(--txt-1);font-weight:600}

.ag-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:120px}
.ag-intro{color:var(--txt-1)}
.ag-intro p{font-size:13px;line-height:1.6;margin-bottom:12px}
.ag-intro-note{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:var(--r-m);background:var(--bg-2);
  border:1px solid var(--line);font-size:11.5px;line-height:1.45;color:var(--txt-2)}
.ag-intro-note svg{flex:0 0 auto;color:var(--pos-ink);margin-top:1px}

/* reasoning trace */
.ag-step{display:flex;gap:10px;align-items:flex-start;opacity:1;animation:agslide .18s ease}
.ag-step-ic{width:22px;height:22px;border-radius:50%;flex:0 0 22px;display:grid;place-items:center;
  background:var(--bg-3);color:var(--txt-2);border:1px solid var(--line-2);margin-top:1px}
.ag-step-t{font-size:12.5px;line-height:1.5;color:var(--txt-1);padding-top:2px}
.ag-step.k-plan .ag-step-ic{color:var(--neg-ink);border-color:var(--neg-line)}
.ag-step.k-observe .ag-step-ic{color:var(--txt-0)}
.ag-step.k-ok .ag-step-ic,.ag-step.k-done .ag-step-ic{color:var(--pos-ink);border-color:var(--pos-line)}
.ag-step.k-flag .ag-step-ic{color:var(--alert);border-color:var(--alert)}
.ag-step.k-done .ag-step-t{color:var(--txt-0);font-weight:500}

.ag-thinking{padding:4px 0 4px 32px}

/* proposal card */
.ag-prop{border:1px solid var(--pos-line);background:var(--bg-2);border-radius:var(--r-m);padding:13px;
  opacity:1;animation:agslide .2s ease;box-shadow:0 8px 24px -12px rgba(0,0,0,.6)}
.ag-prop.danger{border-color:var(--alert)}
.ag-prop-h{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.ag-prop-h svg{color:var(--pos-ink)}
.ag-prop.danger .ag-prop-h svg{color:var(--alert)}
.ag-prop-title{font-family:var(--f-display);font-size:13px;font-weight:600;color:var(--txt-0);flex:1}
.ag-prop-tag{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--pos-ink);
  border:1px solid var(--pos-line);border-radius:20px;padding:2px 7px}
.ag-prop.danger .ag-prop-tag{color:var(--alert);border-color:var(--alert)}
.ag-prop-reason{font-size:11.5px;line-height:1.5;color:var(--txt-2);margin-bottom:10px}
.ag-diff{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.ag-diff-row{display:flex;gap:9px;align-items:baseline;padding:7px 10px;border-radius:var(--r-m);font-size:12px}
.ag-diff-row.before{background:var(--bg-3);text-decoration:line-through;color:var(--txt-2)}
.ag-diff-row.after{background:var(--pos-soft);color:var(--txt-0)}
.ag-diff-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);flex:0 0 56px}
.ag-diff-row.after .ag-diff-lab{color:var(--pos-ink)}
.ag-diff-v{flex:1;line-height:1.45}
.ag-prop-list{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;max-height:200px;overflow-y:auto;
  border:1px solid var(--line);border-radius:var(--r-m);padding:8px}
.ag-prop-li{font-family:var(--f-mono);font-size:11px;color:var(--txt-1);padding:3px 4px;line-height:1.4}
.ag-prop-rat{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;line-height:1.5;color:var(--txt-1);
  background:var(--bg-3);border-radius:var(--r-m);padding:8px 10px;margin-bottom:11px}
.ag-prop-rat svg{flex:0 0 auto;color:var(--pos-ink);margin-top:2px}
.ag-prop-act{display:flex;gap:8px;justify-content:flex-end}

/* Colorist proposal — palette swatches + per-scene colour script */
.ag-color{display:flex;flex-direction:column;gap:10px;margin-bottom:11px}
.ag-color-presets{display:flex;flex-direction:column;gap:7px}
.ag-color-preset{display:flex;flex-direction:column;gap:4px}
.ag-color-pname{font-size:11.5px;font-weight:600;color:var(--txt-1)}
.ag-color-bar{display:flex;height:14px;border-radius:4px;overflow:hidden;border:1px solid var(--line-2)}
.ag-color-bar span{display:block;height:100%}
.ag-color-grade{font-size:10.5px;line-height:1.4;color:var(--txt-3)}
.ag-color-stock{font-size:11px;color:var(--txt-2)}
.ag-color-stock b{color:var(--txt-3);font-weight:600}
.ag-color-strip{display:flex;flex-wrap:wrap;gap:3px}
.ag-color-cell{width:24px;height:20px;border-radius:3px;display:grid;place-items:center;font-family:var(--f-mono);
  font-size:9px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.12);cursor:default}
.ag-color-cell.none{background:repeating-linear-gradient(135deg,var(--bg-3),var(--bg-3) 4px,var(--bg-2) 4px,var(--bg-2) 8px);color:var(--txt-3);text-shadow:none}
.ag-color-whys{display:flex;flex-direction:column;gap:3px;max-height:170px;overflow-y:auto;
  background:var(--bg-3);border-radius:var(--r-m);padding:8px 10px}
.ag-color-why{display:flex;align-items:flex-start;gap:7px;font-size:11px;line-height:1.45}
.ag-color-why-sw{flex:0 0 auto;width:11px;height:11px;border-radius:3px;margin-top:2px;border:1px solid rgba(255,255,255,.15)}
.ag-color-why-no{flex:0 0 auto;font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--txt-3);margin-top:1px}
.ag-color-why-tx{flex:1;min-width:0;color:var(--txt-2)}

/* references shown on the Colorist's launch screen */
.ag-coloref{display:flex;flex-direction:column;gap:7px;padding:10px 12px;border-radius:var(--r-m);background:var(--bg-3);margin-bottom:10px}
.ag-coloref.empty{flex-direction:row;align-items:center;gap:8px;font-size:11.5px;color:var(--txt-3)}
.ag-coloref.empty svg{flex:0 0 auto;color:var(--txt-3)}
.ag-coloref-lab{display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-3)}
.ag-coloref-lab svg{color:var(--pos-ink)}
.ag-coloref-txt{font-size:12px;color:var(--txt-1);line-height:1.4}
.ag-coloref-imgs{display:flex;flex-wrap:wrap;gap:8px}
.ag-coloref-img{display:flex;flex-direction:column;gap:3px}
.ag-coloref-img img{width:64px;height:40px;object-fit:cover;border-radius:4px;border:1px solid var(--line-2);display:block}
.ag-coloref-sw{display:flex;height:6px;border-radius:2px;overflow:hidden}
.ag-coloref-sw span{flex:1;display:block}
.ag-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;font-family:var(--f-ui);font-size:12px;font-weight:600;padding:0 14px;border-radius:var(--r-m);cursor:pointer;transition:.12s;border:1px solid var(--line-2)}
.ag-btn.ghost{background:var(--bg-3);color:var(--txt-1)}
.ag-btn.ghost:hover{background:var(--bg-4);color:var(--txt-0)}
.ag-btn.primary{background:var(--accent);border-color:transparent;color:var(--ink-on-accent)}
.ag-btn.primary:hover{filter:brightness(1.08)}
.ag-prop.danger .ag-btn.primary{background:var(--alert);color:#fff}

/* table-read report */
.tr-report{margin-top:8px;display:flex;flex-direction:column;gap:9px}
.tr-block{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-m);padding:9px 11px}
.tr-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2);margin-bottom:4px}
.tr-txt{font-size:12px;line-height:1.5;color:var(--txt-1)}
.tr-notes{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-m);padding:9px 11px}
.tr-note{display:flex;gap:9px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line);cursor:pointer}
.tr-note:last-child{border-bottom:0}
.tr-note:hover .tr-note-tx{color:var(--txt-0)}
.tr-note-sc{font-family:var(--f-mono);font-size:9.5px;font-weight:700;color:var(--pos-ink);flex:0 0 auto}
.tr-note-tx{font-size:12px;line-height:1.45;color:var(--txt-1)}

/* runner footer */
/* in-modal error bar — provider/AI errors land here while the panel is open,
   with any URLs clickable (billing consoles etc.) */
.ag-errbar{display:flex;align-items:flex-start;gap:9px;margin:0 16px 0;padding:10px 12px;border-radius:var(--r-l);background:oklch(0.42 0.12 30 / .14);border:1px solid oklch(0.55 0.15 30 / .4);color:var(--alert);font-size:12.5px;line-height:1.45}
html[data-theme="light"] .ag-errbar{background:oklch(0.62 0.16 30 / .1);border-color:oklch(0.55 0.17 30 / .35)}
.ag-errbar-ic{flex:0 0 auto;opacity:.9}
.ag-errbar-msgs{flex:1;min-width:0}
.ag-errbar-msg{word-break:break-word}
.ag-errbar-msg + .ag-errbar-msg{margin-top:5px;padding-top:5px;border-top:1px dashed oklch(0.55 0.15 30 / .3)}
.ag-errbar-x{flex:0 0 auto;appearance:none;border:0;background:transparent;color:inherit;opacity:.6;cursor:pointer;font-size:12px;padding:0 2px}
.ag-errbar-x:hover{opacity:1}
.ag-errbar a,.ns-err a,.ag-step-t a,.turn-toast-msg a{color:inherit;text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.ag-errbar a:hover,.ns-err a:hover,.ag-step-t a:hover,.turn-toast-msg a:hover{opacity:.85}
.ag-runner-foot{display:flex;gap:10px;padding:13px 16px;border-top:1px solid var(--line);justify-content:flex-end}
.ag-run{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;border-radius:9px;border:0;
  background:var(--accent);color:var(--ink-on-accent);font-family:var(--f-ui);font-size:13px;font-weight:600;cursor:pointer;transition:.12s}
.ag-run:hover{filter:brightness(1.08)}
.ag-run.ghost{background:var(--bg-3);color:var(--txt-1)}
.ag-run.ghost:hover{background:var(--bg-4);color:var(--txt-0)}
.ag-run.stop{background:var(--bg-3);color:var(--alert);border:1px solid var(--alert)}

@media (max-width:640px){
  .ag-grid{grid-template-columns:1fr}
  .ag-overlay{padding:0}
  /* 100dvh, not 100vh: on iOS Safari 100vh includes the strip under the browser
     toolbar, which pushed the footer (Run button) below the visible screen.
     vh declarations stay as the fallback for browsers without dvh support. */
  .ag-panel{width:100vw;max-height:100vh;max-height:100dvh;height:100vh;height:100dvh;border-radius:0}
}

/* in-panel undo row */
.ag-undo-row{display:flex;align-items:center;gap:9px;margin:12px 18px 0;padding:9px 12px;border-radius:9px;
  background:var(--bg-3);border:1px solid var(--line-2)}
.ag-undo-row svg{color:var(--txt-1);flex:0 0 auto}

/* in-panel story-health explainer (decodes the badge number) */
.ag-issues-row{display:flex;align-items:flex-start;gap:10px;margin:12px 18px 0;padding:10px 12px;border-radius:9px;
  background:var(--alert-soft);border:1px solid var(--alert)}
.ag-issues-row.clean{background:var(--pos-soft);border-color:var(--pos-line)}
/* optional Story Doctor notes: neutral, never the red alarm */
.ag-issues-row.notes{background:var(--bg-3);border-color:var(--line-2)}
.ag-issues-badge.note,.ag-card-count.note{background:var(--bg-5);color:var(--txt-1);border:1px solid var(--line-3)}
.ag-issues-badge{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-m);display:grid;place-items:center;
  background:var(--danger-fill);color:#fff;font-family:var(--f-mono);font-size:11px;font-weight:700;margin-top:1px}
.ag-issues-badge.ok{background:var(--accent);color:var(--ink-on-accent)}
.ag-issues-tx{flex:1;font-size:11.5px;line-height:1.5;color:var(--txt-1)}
.ag-issues-tx b{color:var(--txt-0);font-weight:600}
.ag-card-tags{display:flex;align-items:center;gap:6px}
.ag-card-count{font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  padding:3px 7px;border-radius:20px;background:var(--danger-fill);color:#fff}
.ag-undo-tx{flex:1;font-size:11.5px;color:var(--txt-1);line-height:1.4}
.ag-undo-btn{font-family:var(--f-ui);font-size:11.5px;font-weight:600;color:var(--txt-0);cursor:pointer;
  background:var(--bg-5);border:1px solid var(--line-3);border-radius:var(--r-m);padding:5px 11px;transition:.12s;flex:0 0 auto}
.ag-undo-btn:hover{background:var(--bg-4)}

/* floating undo toast (works whether the Writers' Room is open or not) */
.agent-undo{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:70;opacity:1;
  display:flex;align-items:center;gap:12px;padding:11px 12px 11px 15px;border-radius:var(--r-l);
  background:var(--bg-3);border:1px solid var(--line-3);box-shadow:var(--shadow-pop);
  animation:undoIn .22s cubic-bezier(.2,.8,.2,1)}
@keyframes undoIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
/* sized to its words, not to half the window (2026-09-28): on a portrait tablet the left:50% box
   wrapped the text into a taller toast that ran under the stacked one */
.agent-undo{width:max-content;max-width:calc(100vw - 24px)}
/* a deleted-scene undo sits above an agent undo when both are showing */
.agent-undo.scene-undo.stacked{bottom:86px}
.agent-undo .au-ic{width:30px;height:30px;border-radius:9px;flex:0 0 30px;display:grid;place-items:center;
  background:var(--neg-soft);color:var(--neg-ink);border:1px solid var(--neg-line)}
.agent-undo .au-text{display:flex;flex-direction:column;line-height:1.25;padding-right:4px}
.agent-undo .au-t{font-family:var(--f-display);font-size:12.5px;font-weight:500;color:var(--txt-0)}
.agent-undo .au-s{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.02em;color:var(--txt-2)}
.agent-undo .au-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:9px;
  background:var(--accent);border:0;color:var(--ink-on-accent);font-family:var(--f-ui);font-size:12.5px;font-weight:600;cursor:pointer;transition:.12s}
.agent-undo .au-btn:hover{filter:brightness(1.08)}
.agent-undo .au-x{width:30px;height:30px;border-radius:var(--r-m);border:0;background:transparent;color:var(--txt-2);
  cursor:pointer;display:grid;place-items:center;transition:.1s;flex:0 0 auto}
.agent-undo .au-x:hover{background:var(--bg-4);color:var(--txt-0)}
@media (max-width:640px){
  .agent-undo{left:12px;right:12px;bottom:12px;transform:none}
  @keyframes undoIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  /* 2026-09-28: the toast's right end (its ×) sat under the MUSE bubble. It now stops short of
     the bubble, sheds its decorative icons to keep its words room, and the stacked one sits
     higher since a narrower toast can wrap to more lines. */
  .agent-undo{right:var(--muse-clear);width:auto;max-width:none}
  .agent-undo .au-ic,.agent-undo .au-btn svg{display:none}
  .agent-undo .au-text{flex:1 1 auto;min-width:0;padding-right:0}
  .agent-undo .au-btn{padding:0 12px;flex:0 0 auto}
  .agent-undo.scene-undo.stacked{bottom:98px}
}
@media (max-width:380px){
  /* the narrowest phones: tighter spacing, and the stacked toast higher still */
  .agent-undo{gap:8px;padding:9px 10px 9px 12px}
  .agent-undo.scene-undo.stacked{bottom:124px}
}

/* ============================================================
   THE ART ROOM (pre-production) + room switcher
   ============================================================ */
.room-switch{position:relative}
.room-btn{display:flex;align-items:center;gap:9px;height:36px;padding:0 10px 0 9px;border-radius:9px;
  background:var(--bg-2);border:1px solid var(--line);cursor:pointer;transition:.12s;color:var(--txt-0)}
.room-btn:hover{background:var(--bg-3);border-color:var(--line-2)}
.room-btn-ic{width:24px;height:24px;flex:0 0 24px;border-radius:var(--r-s);display:grid;place-items:center;
  background:var(--bg-4);color:var(--pos-ink)}
.room-btn-t{display:flex;flex-direction:column;line-height:1.15;text-align:left;min-width:0}
.room-btn-name{font-family:var(--f-display);font-size:12.5px;font-weight:600;color:var(--txt-0);white-space:nowrap}
.room-btn-phase{font-family:var(--f-mono);font-size:9px;letter-spacing:.04em;color:var(--txt-2);text-transform:uppercase;white-space:nowrap}
.room-btn svg:last-child{color:var(--txt-2)}

.room-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:304px;max-width:calc(100vw - 24px);   /* 304: a "Needs a story" chip no longer wraps the room name onto two lines */
  
  background:var(--bg-2);border:1px solid var(--line-3);border-radius:var(--r-l);box-shadow:var(--shadow-pop);
  display:flex;flex-direction:column;gap:6px;padding:6px; /* row gap = container inset */
  animation:popup .16s ease}
.room-menu-h{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);padding:7px 9px 6px}
.room-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px;border:0;background:transparent;
  border-radius:var(--r-m);cursor:pointer;transition:.1s}
.room-item:hover{background:var(--bg-3)}
.room-item.on{background:var(--bg-3)}
.room-item.soon{cursor:default;opacity:.6}
.room-item.soon:hover{background:transparent}
.room-item-no{font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--txt-3);width:16px;flex:0 0 16px;text-align:center}
.room-item-ic{width:30px;height:30px;flex:0 0 30px;border-radius:var(--r-m);display:grid;place-items:center;
  background:var(--bg-4);color:var(--txt-1);border:1px solid var(--line-2)}
.room-item.on .room-item-ic{color:var(--pos-ink);border-color:var(--pos-line)}
.room-item-t{flex:1;display:flex;flex-direction:column;line-height:1.2;min-width:0}
.room-item-name{font-family:var(--f-display);font-size:13px;font-weight:500;color:var(--txt-0)}
.room-item-phase{font-family:var(--f-mono);font-size:9px;letter-spacing:.04em;color:var(--txt-2);text-transform:uppercase}
.room-item-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.room-item-soon{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);
  border:1px solid var(--line-2);border-radius:20px;padding:2px 7px;flex:0 0 auto}

.artroom{flex:1;min-width:0;background:var(--bg-0);overflow-y:auto}

/* ── Pre-production readiness strip (#1) — top of every Art Room tab ───────── */
.pp-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  width:max-content;max-width:calc(100% - 40px);margin:16px auto 4px;
  padding:8px 12px;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-l)}
.pp-status-lead{display:flex;align-items:center;gap:8px;flex:0 0 auto;background:transparent;border:0;cursor:pointer;padding:2px 4px;margin:-2px -4px;border-radius:var(--r-m);font:inherit;color:inherit;transition:.12s}
.pp-status-lead:hover{background:var(--bg-2)}
.pp-status-lead svg{color:var(--txt-3)}
.pp-status.collapsed{gap:0}
.pp-status-eyebrow{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
.pp-status-pct{font-family:var(--f-display);font-size:13px;font-weight:600;color:var(--txt-0)}
.pp-status-pct.done{color:var(--pos-ink)}
.pp-chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center;justify-content:center}
.pp-chip{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;white-space:nowrap;padding:5px 9px;border-radius:var(--r-m);cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line);transition:.12s;font-family:var(--f-ui)}
.pp-chip:hover{background:var(--bg-3);border-color:var(--line-2);transform:translateY(-1px)}
.pp-chip-dot{width:6px;height:6px;border-radius:50%;flex:0 0 6px;background:var(--txt-3)}
.pp-chip.pp-complete .pp-chip-dot{background:var(--accent)}
.pp-chip.pp-partial .pp-chip-dot{background:oklch(0.74 0.15 60)}
.pp-chip-lab{font-size:11.5px;color:var(--txt-1);font-weight:500}
.pp-chip-ct{font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--txt-3)}
.pp-chip.pp-complete{border-color:var(--pos-line)}
.pp-chip.pp-complete .pp-chip-ct{color:var(--pos-ink)}
.pp-chip.pp-partial .pp-chip-ct{color:var(--txt-0)}

/* ── shared scene pager (Stage / Shots / Storyboards) ─────────────────────── */
.scene-pager{display:flex;align-items:center;gap:14px;justify-content:center;max-width:760px;margin:0 auto 18px;
  padding:9px 14px;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-l)}
.scene-pager-arrow{width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center;cursor:pointer;
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--txt-1);transition:.12s}
.scene-pager-arrow:hover:not(:disabled){background:var(--bg-4);color:var(--txt-0);transform:translateY(-1px)}
.scene-pager-arrow:disabled{opacity:.35;cursor:default}
.scene-pager-mid{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center}
.scene-pager-no{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.scene-pager-title{font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--txt-0);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.scene-pager-sub{font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;color:var(--txt-2)}
.scene-pager-mid.jump{cursor:pointer;border-radius:var(--r-m);padding:4px 10px;margin:-4px 0;transition:.12s;position:relative}
.scene-pager-mid.jump:hover{background:var(--bg-2)}
.scene-pager-no svg{vertical-align:middle;margin-left:4px;color:var(--txt-3)}
.scene-pager-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:40;
  width:min(300px,80vw);max-height:300px;overflow-y:auto;background:var(--bg-2);border:1px solid var(--line-3);border-radius:var(--r-l);box-shadow:var(--shadow-pop);padding:6px;text-align:left}
.scene-pager-menu-item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border:0;background:transparent;
  border-radius:var(--r-m);cursor:pointer;font-family:var(--f-ui);font-size:12.5px;color:var(--txt-1);transition:.1s}
.scene-pager-menu-item:hover{background:var(--bg-3);color:var(--txt-0)}
.scene-pager-menu-item.on{background:var(--bg-2);color:var(--txt-0)}
.scene-pager-menu-item.on svg{margin-left:auto;color:var(--pos-ink)}
.scene-pager-menu-no{font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--txt-3);flex:0 0 auto}
.scene-pager-menu-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}

/* ── Voices tab (Art Room) ────────────────────────────────────────────────── */
.vc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.vc-card{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-l);padding:13px;display:flex;flex-direction:column;gap:11px}
.vc-card.locked{border-color:var(--pos-line)}
.vc-card.silent{opacity:.72}
.vc-head{display:flex;align-items:center;gap:10px}
.vc-av{width:34px;height:34px;border-radius:9px;flex:0 0 34px;display:grid;place-items:center;color:#fff;font-family:var(--f-mono);font-size:11px;font-weight:700}
.vc-id{flex:1;min-width:0}
.vc-name{font-family:var(--f-display);font-size:13.5px;font-weight:600;color:var(--txt-0);line-height:1.2}
.vc-role{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--txt-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-tag{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);padding:2px 7px;border-radius:999px;background:var(--bg-3);flex:0 0 auto}
.vc-tag.speaks{color:var(--pos-ink);background:var(--pos-soft)}
.vc-note{display:flex;align-items:flex-start;gap:7px;font-size:11px;line-height:1.4;color:var(--txt-2);background:var(--bg-2);border:1px dashed var(--line-3);border-radius:var(--r-m);padding:8px 10px}
.vc-note svg{color:oklch(0.74 0.15 60);flex:0 0 auto;margin-top:1px}
.vc-body{display:flex;flex-direction:column;gap:9px}
.vc-modes{display:flex;gap:5px}
.vc-mode{flex:1;padding:5px 0;border-radius:var(--r-m);border:1px solid var(--line);background:var(--bg-2);cursor:pointer;font-family:var(--f-ui);font-size:11.5px;color:var(--txt-2);transition:.12s}
.vc-mode:hover{background:var(--bg-3);color:var(--txt-0)}
.vc-mode.on{background:var(--accent);border-color:transparent;color:var(--ink-on-accent);font-weight:500}
.vc-field{display:flex;flex-direction:column;gap:5px}
.vc-lab{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3)}
.vc-rebuild{border:1px solid var(--line-2);border-radius:5px;background:var(--bg-2);color:var(--txt-2);font:700 9px var(--f-mono);letter-spacing:.04em;padding:3px 6px;cursor:pointer;text-transform:none}
.vc-rebuild:hover{border-color:var(--brand);color:var(--txt-0)}
.vc-accent-note{border-style:solid;border-color:var(--accent-line,rgba(214,126,0,.4));background:var(--accent-soft,rgba(214,126,0,.08));color:var(--txt-1)}
.vc-accent-note svg{color:var(--accent-ink)}
.vc-spec{font-size:12px;min-height:42px}
.vc-delivery{width:100%;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-2);color:var(--txt-0);
  font:600 11.5px var(--f-ui);padding:7px 26px 7px 9px;outline:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-delivery:focus{border-color:var(--brand)}
.vc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 11px;border-radius:var(--r-m);cursor:pointer;
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--txt-1);font-family:var(--f-ui);font-size:12px;font-weight:500;text-decoration:none;transition:.12s}
.vc-btn:hover:not(:disabled){background:var(--bg-4);color:var(--txt-0)}
.vc-btn.primary{background:var(--accent);border-color:transparent;color:var(--ink-on-accent)}
.vc-btn.primary:hover:not(:disabled){filter:brightness(1.07)}
.vc-btn.ghost{background:transparent;border-color:transparent;color:var(--txt-2)}
.vc-btn:disabled{opacity:.5;cursor:default}
.vc-btn.audio-toggle.playback{width:82px;flex:0 0 82px;padding-left:8px;padding-right:8px}
.vc-previews{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.vc-preview{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-m);background:var(--bg-2);border:1px solid var(--line)}
.vc-preview-lab{flex:1;min-width:0;font-size:12px;color:var(--txt-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-play{width:26px;height:26px;border-radius:50%;flex:0 0 26px;display:grid;place-items:center;cursor:pointer;background:var(--bg-4);border:1px solid var(--line-2);color:var(--txt-1)}
.vc-play:hover{color:var(--pos-ink)}
.vc-play.playing,.vc-btn.audio-toggle.playing{border-color:var(--pos-line);background:var(--pos-soft);color:var(--pos-ink)}
.vc-play:focus-visible,.vc-btn.audio-toggle:focus-visible{outline:2px solid var(--pos);outline-offset:2px}
.vc-pause-mark{display:inline-flex;align-items:center;gap:2px;width:11px;height:11px;justify-content:center}
.vc-pause-mark::before,.vc-pause-mark::after{content:"";display:block;width:2.5px;height:10px;border-radius:1px;background:currentColor}
.vc-upload{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:var(--r-m);cursor:pointer;border:1px dashed var(--line-3);background:var(--bg-2);font-size:12px;color:var(--txt-1)}
.vc-upload:hover{background:var(--bg-3);color:var(--txt-0)}
.vc-consent{display:flex;align-items:flex-start;gap:7px;font-size:11px;line-height:1.4;color:var(--txt-2);cursor:pointer}
.vc-consent input{margin-top:2px;flex:0 0 auto}
.vc-locked{display:flex;flex-direction:column;gap:9px}
.vc-locked-row{display:flex;align-items:center;gap:8px}
.vc-locked-row svg{color:var(--pos-ink);flex:0 0 auto}
.vc-locked-name{flex:1;min-width:0;font-size:13px;font-weight:500;color:var(--txt-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-src{font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-2);padding:2px 7px;border-radius:999px;background:var(--bg-3)}
.vc-actions{display:flex;gap:7px}
.vc-master{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-2)}
.vc-master[data-state="ready"]{border-color:var(--pos-line);background:var(--pos-soft)}
.vc-master-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.vc-master-tools{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex:0 0 auto}
.vc-master-tools .infotip-pop{left:auto;right:0;width:min(280px,calc(100vw - 56px));max-width:calc(100vw - 56px)}
.vc-master-file{margin-top:2px;font:600 11px var(--f-mono);color:var(--txt-1);overflow-wrap:anywhere}
.vc-master-state{flex:0 0 auto;padding:2px 7px;border-radius:999px;background:var(--bg-4);color:var(--txt-3);font:700 9px var(--f-mono);letter-spacing:.05em;text-transform:uppercase}
.vc-master-state.ready{background:var(--accent);color:var(--ink-on-accent)}
.vc-master-text{font-size:11px;line-height:1.45;color:var(--txt-2)}
.vc-master-note{padding:6px 8px;background:transparent}
.vc-master-actions{flex-wrap:wrap}
.vc-err{font-size:11.5px;color:var(--alert);line-height:1.4}

/* ── Coordinator cost/scope preview (#2) ──────────────────────────────────── */
.cc-modal{width:min(440px,92vw);background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-l);
  box-shadow:var(--shadow-pop);display:flex;flex-direction:column;gap:14px;padding:18px}
.cc-head{display:flex;align-items:flex-start;gap:11px}
.cc-orb{width:30px;height:30px;border-radius:9px;flex:0 0 30px;display:grid;place-items:center;
  background:var(--pos-soft);color:var(--pos-ink);border:1px solid var(--pos-line)}
.cc-title{font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--txt-0)}
.cc-sub{font-size:11.5px;line-height:1.45;color:var(--txt-2);margin-top:2px}
.cc-est{display:flex;align-items:baseline;gap:8px;padding:11px 13px;border-radius:var(--r-l);background:var(--bg-2);border:1px solid var(--line)}
.cc-est-n{font-family:var(--f-display);font-size:24px;font-weight:700;color:var(--txt-0);line-height:1}
.cc-est-l{font-family:var(--f-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-2)}
.cc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.cc-list li{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--txt-1);
  padding:5px 2px;border-bottom:1px solid var(--line)}
.cc-list li:last-child{border-bottom:0}
.cc-list-lab{font-weight:500}
.cc-list-n{font-family:var(--f-mono);font-size:10.5px;color:var(--txt-2)}
.cc-note{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;line-height:1.45;color:var(--txt-2)}
.cc-note svg{color:oklch(0.74 0.15 60);flex:0 0 auto;margin-top:1px}
.cc-note.ok svg{color:var(--pos-ink)}
.cc-note.info svg{color:var(--txt-3)}
.cc-foot{display:flex;gap:9px;justify-content:flex-end;align-items:center;margin-top:2px}
.art-scroll{padding:24px 28px 60px;max-width:1280px;margin:0 auto}

.art-intro{margin-bottom:22px}
.art-intro-row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
/* the tab title keeps one line ("Props Master", "Location Scout"): when the actions don't
   fit beside it they wrap below instead of squeezing the title onto two lines */
.art-intro-row > div:first-child{flex:1 1 240px !important;min-width:0}   /* !important: the tabs set an inline flex:1 (basis 0), which stopped the row from wrapping, so at tablet widths the actions ran over the title */
.art-intro-row .art-intro-t{white-space:nowrap}
.art-intro-actions{display:flex;gap:8px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.art-intro-t{margin-bottom:6px}
.art-intro-d{font-size:13px;line-height:1.6;color:var(--txt-2);max-width:680px}
/* LOOKBOOK FIRST hint (Characters tab, 2026-09-27): quiet muted line under the header — same family
   as the card hints (.state-hint): small, --txt tokens only, so light + dark follow the theme */
.char-lookbook-hint{display:flex;gap:7px;align-items:flex-start;margin-top:10px;max-width:680px;
  font-size:12px;line-height:1.5;color:var(--txt-2);text-wrap:pretty}
.char-lookbook-hint > svg{flex:0 0 auto;margin-top:3px;color:var(--txt-3)}
.char-lookbook-hint > span{flex:1 1 auto;min-width:0}
.char-lookbook-hint-link{display:inline;padding:0;margin:0;border:0;background:transparent;cursor:pointer;
  font:inherit;color:var(--txt-1);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:2px}
.char-lookbook-hint-link:hover{color:var(--txt-0);text-decoration-color:currentColor}
.char-lookbook-hint-link:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px;border-radius:3px}
/* mobile: stack the header so the title/intro get full width and the action
   buttons drop to their own full-width row instead of crushing the text column */
@media (max-width:700px){
  .art-intro-row{flex-direction:column;gap:14px}
  .art-intro-row > div:first-child{flex:0 0 auto !important}   /* stacked: the 240px basis would become a height */
  .art-intro-d,.char-lookbook-hint{max-width:none}
  .art-intro-actions{width:100%;justify-content:flex-start}
  .art-intro-actions > button{flex:1 1 140px;justify-content:center;height:38px}
}

.sheet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.sheet-card{display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  /* perf: skip render/layout/paint for offscreen cards. The whole grid used to
     keep every card's full-res base64 image decoded and laid out at once, so the
     app got slower with each sheet. content-visibility virtualizes that; the
     intrinsic size keeps the scrollbar stable for un-rendered cards. */
  content-visibility:auto;contain-intrinsic-size:auto 420px}
.sheet-card.voice-open{position:relative;isolation:isolate;content-visibility:visible}
.sheet-frame{flex:0 0 auto;display:flex;flex-direction:column;background:var(--bg-2);border-bottom:1px solid var(--line);padding:12px;position:relative}
/* generated image + generate button */
.sheet-genwrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line-2);background:#000}
.sheet-genimg{display:block;width:100%;height:100%;object-fit:contain;cursor:zoom-in}
/* full-view lightbox */
/* Film Bible viewer (admin) — read-only continuity JSON */
.bible-overlay{position:fixed;inset:0;z-index:122;background:rgba(0,0,0,.74);display:grid;place-items:center;padding:24px}
.bible-modal{width:min(900px,96vw);max-height:90vh;display:flex;flex-direction:column;background:var(--bg-1);
  border:1px solid var(--line-3);border-radius:var(--r-l);box-shadow:var(--shadow-pop);overflow:hidden}
/* dialog header — the same header as Story Editors / New Story (.ag-head/.ns-head): 16/18px padding on the
   dialog surface itself, a hairline under it (Brief and Team sat on a separate bg-2 band) */
.bible-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.bible-title{display:flex;align-items:center;gap:8px;font-family:var(--f-display,inherit);font-size:15px;font-weight:600;color:var(--txt-0)}
.bible-sub{font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--txt-3);font-weight:400}
.bible-head-acts{display:flex;align-items:center;gap:8px}
.bible-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--r-m);cursor:pointer;
  border:1px solid var(--line-3);background:var(--bg-4);color:var(--txt-1);font:600 12px var(--f-ui);transition:.12s}
.bible-btn:hover{background:var(--bg-5);color:var(--txt-0)}
.bible-btn.on{color:var(--pos-ink);border-color:var(--pos)}
.bible-x{width:30px;height:30px;display:grid;place-items:center;border:0;background:transparent;color:var(--txt-2);cursor:pointer;border-radius:var(--r-m)}
.bible-x:hover{background:var(--bg-4);color:var(--txt-0)}
.bible-pre{margin:0;overflow:auto;padding:16px;font-family:var(--f-mono);font-size:11.5px;line-height:1.55;color:var(--txt-1);white-space:pre;tab-size:2}
/* admin "Render styles" manager (RenderStylesModal) */
.styles-mgr{width:min(560px,96vw)}
.styles-body{overflow:auto;padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px}
.styles-sec-h{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:600;color:var(--txt-1);margin:12px 0 4px;font-family:var(--f-ui)}
.styles-sec-h:first-child{margin-top:0}
.styles-sec-h-sub{margin-top:10px}
.styles-sec-sub{font-size:10.5px;font-weight:400;color:var(--txt-3);letter-spacing:.02em}
.styles-sec-sub.warn{color:oklch(0.62 0.21 25)}
.styles-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-3)}
.styles-row-name{font-size:12.5px;color:var(--txt-1);font-family:var(--f-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.styles-row-acts{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.styles-mini{font-size:11px;font-family:var(--f-ui);color:var(--txt-1);background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-m);padding:4px 9px;cursor:pointer;line-height:1;display:inline-flex;align-items:center;gap:4px}
.styles-mini-square{width:26px;justify-content:center;padding-left:0;padding-right:0;font-family:var(--f-mono)}
.styles-mini:hover:not(:disabled){border-color:var(--accent2,oklch(0.62 0.18 295));color:var(--accent2,oklch(0.62 0.18 295))}
.styles-mini:disabled{opacity:.5;cursor:default}
.styles-mini.danger:hover:not(:disabled){border-color:oklch(0.6 0.2 25);color:oklch(0.62 0.21 25)}
.styles-empty{font-size:12px;color:var(--txt-3);padding:8px 2px;font-family:var(--f-ui)}
.styles-empty-sm{padding:4px 2px;margin-bottom:2px}
.styles-global-list{display:flex;flex-direction:column;gap:5px;margin-bottom:4px}
.styles-row-builtin{opacity:.72}
.styles-row-hidden{opacity:.62;border-style:dashed}
.styles-row-badge{font-size:9.5px;font-family:var(--f-mono);color:var(--txt-3);background:var(--bg-2);border:1px solid var(--line-2);border-radius:5px;padding:1px 5px;letter-spacing:.04em;flex:0 0 auto;white-space:nowrap}
.styles-row-badge-curated{color:var(--accent2,oklch(0.62 0.18 295));border-color:var(--accent2,oklch(0.62 0.18 295)/.35)}
.api-keys-mgr{width:min(680px,96vw)}
.api-keys-body{overflow:auto;padding:15px 16px 18px;display:flex;flex-direction:column;gap:10px}
.api-keys-note{font-size:12px;line-height:1.55;color:var(--txt-2);background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-m);padding:10px 12px}
.api-key-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(260px,1.1fr);gap:12px;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-3);padding:11px}
.api-key-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650;color:var(--txt-0)}
.api-key-status{font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);border:1px solid var(--line-2);background:var(--bg-2);border-radius:999px;padding:2px 6px}
.api-key-status.on{color:var(--pos-ink);border-color:color-mix(in oklab,var(--pos) 42%,transparent)}
.api-key-hint{margin-top:4px;font-size:11.5px;line-height:1.4;color:var(--txt-2)}
.api-key-edit{display:flex;align-items:center;gap:7px;min-width:0}
.api-key-input{flex:1;min-width:0;height:31px;box-sizing:border-box;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-m);color:var(--txt-1);font:12px var(--f-ui);padding:0 10px;outline:none}
.api-key-input:focus{border-color:var(--line-3)}
.api-key-input::placeholder{color:var(--txt-3)}
@media (max-width:720px){
  .api-key-row{grid-template-columns:1fr}
  .api-key-edit{align-items:stretch}
  .api-key-input{height:34px}
}
/* IMMERSIVE lightbox — the image fills the screen; minimal floating chrome (centred title
   top, close top-right, a floating download bar bottom-centre) over a near-black backdrop. */
.lb-overlay{position:fixed;inset:0;z-index:200;background:rgba(8,8,10,.94);display:block;padding:0;opacity:1}
.lb-panel{position:relative;width:100vw;height:100vh;display:flex;flex-direction:column;gap:0;
  background:transparent;border:0;border-radius:0;overflow:hidden;box-shadow:none}
.lb-head{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:center;
  padding:14px 16px;border:0;pointer-events:none}
.lb-head .ag-x{position:absolute;right:14px;top:11px;pointer-events:auto}
.lb-title{font-family:var(--f-display);font-size:14px;font-weight:600;color:rgba(255,255,255,.92);
  background:rgba(0,0,0,.4);border-radius:999px;padding:4px 14px}
.lb-imgwrap{flex:1;min-height:0;display:grid;place-items:center;background:transparent;padding:60px 24px 78px;overflow:auto}
.lb-img{max-width:96vw;max-height:90vh;object-fit:contain;display:block;border-radius:var(--r-s);box-shadow:0 12px 50px -12px rgba(0,0,0,.7)}
.lb-foot{position:absolute;bottom:18px;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  width:fit-content;margin:0 auto;background:var(--bg-1);border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.35);
  padding:0;border:0;pointer-events:none}
.lb-foot > *{pointer-events:auto}
.lb-foot .nb-seg{background:var(--bg-3)}
.lb-foot-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-2)}
/* the pill has no horizontal padding (end BUTTONS sit glued to its rounded corners),
   so when Remaster is hidden and the DOWNLOAD label leads the row, give the label
   its own clearance from the curved left edge */
.lb-foot-lab:first-child{margin-left:14px}
.lb-dl{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;border-radius:999px;border:0;
  background:var(--accent);color:var(--ink-on-accent);font-family:var(--f-ui);font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:0 6px 20px -6px rgba(0,0,0,.6)}
.lb-dl:hover:not(:disabled){filter:brightness(1.08)}
.lb-dl:disabled{opacity:.7;cursor:default}
.sheet-gen-tools{position:absolute;top:20px;right:20px;display:flex;gap:6px;z-index:20}
.sheet-gen-tool{width:28px;height:28px;border-radius:var(--r-m);border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;display:grid;place-items:center;transition:.1s}
.sheet-gen-tool:hover{background:rgba(0,0,0,.85)}
.sheet-gen-tool:disabled{opacity:.5;cursor:default}
/* on an EMPTY card the tools button sits over the light slot / drop zone, not a dark image —
   use a neutral, theme-aware chip so it doesn't read as a heavy dark blob */
.sheet-frame:not(:has(.sheet-genwrap)) .sheet-gen-tool{background:var(--bg-3);color:var(--txt-2);border:1px solid var(--line-2)}
.sheet-frame:not(:has(.sheet-genwrap)) .sheet-gen-tool:hover{background:var(--bg-4);color:var(--txt-1);border-color:var(--line-3)}
.sheet-gen-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;height:36px;margin-top:10px;
  border-radius:var(--r-m);border:1px solid var(--line-3);background:var(--bg-4);color:var(--txt-0);font-family:var(--f-ui);font-size:12.5px;font-weight:600;cursor:pointer;transition:.12s}
.sheet-gen-btn > svg:first-child{color:var(--accent-ink)}
.sheet-gen-btn:hover:not(:disabled){background:var(--bg-5);border-color:var(--accent-line)}
.sheet-gen-btn:disabled{opacity:.7;cursor:default}
.sheet-gen-btn.waiting,
.sheet-gen-btn.waiting:disabled{background:var(--bg-3);color:var(--txt-3);border:1px solid var(--line-2);
  opacity:.58;cursor:not-allowed;box-shadow:none;filter:grayscale(.15)}
.sheet-gen-btn.waiting svg{opacity:.75}
.sheet-gen-btn.needs-review{background:var(--accent-soft);color:var(--txt-1);border:1px solid var(--accent-line);min-height:36px;height:auto;padding:8px 12px}
.sheet-gen-btn.needs-review:hover:not(:disabled){border-color:var(--accent);filter:none}
.sheet-gen-btn.needs-review svg{color:var(--accent-ink)}
/* Generate stays full-width while idle. During a run, progress and Stop remain
   on one line at 60/40, including narrow nested cards. */
.sheet-gen-row{display:flex;gap:8px;margin-top:10px}
.sheet-gen-row .sheet-gen-btn{flex:1;margin-top:0}
.sheet-gen-row:has(.sheet-gen-stop){flex-wrap:nowrap}
.sheet-gen-row:has(.sheet-gen-stop) .sheet-gen-btn{flex:0 1 calc(60% - 4px)}
/* Stop an in-flight generation — always 40% of the shared action row. */
.sheet-gen-stop{flex:0 0 calc(40% - 4px);display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;
  border-radius:9px;border:1px solid var(--danger);background:transparent;color:var(--danger);
  font-family:var(--f-ui);font-size:12.5px;font-weight:600;cursor:pointer;transition:.12s}
.sheet-gen-stop:hover{background:var(--danger);color:#fff}
.sheet-gen-stop svg{flex:0 0 auto}
/* dropToImport: the empty slot doubles as a full-res upload target (drop or click-to-browse) */
.sheet-dropzone{width:100%;aspect-ratio:16/9;box-sizing:border-box;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;padding:12px;cursor:pointer;
  color:var(--txt-2);background:var(--bg-2);border:1.5px dashed var(--line-3);border-radius:var(--r-l);
  transition:border-color .12s,background .12s}
.sheet-dropzone:hover{border-color:var(--pos-line)}
.sheet-dropzone.over{border-color:var(--pos);background:oklch(0.78 0.15 62 / .08)}
.sheet-dropzone.busy{opacity:.7;cursor:default}
.sheet-dropzone svg{opacity:.5}
.sheet-dropzone-cap{font-size:13px;font-weight:500;color:var(--txt-1);letter-spacing:.01em}
.sheet-dropzone-sub{font-size:11px;color:var(--txt-3)}
.sheet-upload-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;height:30px;margin-top:7px;
  border-radius:var(--r-m);border:1px solid var(--line-3);background:transparent;color:var(--txt-2);font-family:var(--f-ui);font-size:11.5px;font-weight:500;cursor:pointer;transition:.12s}
.sheet-upload-btn:hover:not(:disabled){background:var(--bg-3);color:var(--txt-1);border-color:var(--line-3)}
.sheet-upload-btn:disabled{opacity:.5;cursor:default}
.sheet-gen-err{margin-top:8px;font-size:11px;line-height:1.4;color:var(--alert);background:var(--alert-soft);
  border:1px solid var(--alert);border-radius:var(--r-m);padding:7px 9px;display:flex;flex-direction:column;gap:7px}
.sheet-gen-err-msg{line-height:1.4}
.sheet-gen-err-acts{display:flex;gap:6px;flex-wrap:wrap}
.sheet-gen-err-btn{font:500 10px/1 var(--f-ui);letter-spacing:.04em;color:var(--txt-1);background:var(--bg-4);
  border:1px solid var(--line-3);border-radius:5px;padding:4px 8px;cursor:pointer;white-space:nowrap}
.sheet-gen-err-btn:hover{background:var(--bg-5);color:var(--txt-0)}
.sheet-gen-err-btn.primary{color:var(--ink-on-accent);background:var(--accent);border-color:transparent;font-weight:600}
.sheet-gen-err-btn.primary:hover{filter:brightness(1.08);color:var(--ink-on-accent);background:var(--accent)}

.sheet-frame-meta{display:flex;align-items:center;flex-wrap:nowrap;min-width:0;max-width:100%;gap:10px;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-2)}
.sheet-meta-item{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;white-space:nowrap}
.sheet-meta-model{flex:0 1 auto;min-width:0}
.sheet-meta-model-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-meta-item svg{flex:0 0 auto;color:var(--txt-3);opacity:.85}
.sheet-meta-dot{color:var(--txt-3)}
.sheet-frame-cap-label{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-2)}
.sheet-gen-tool.on{background:oklch(0.78 0.15 62 / .25);color:var(--pos-ink)}
.sheet-gen-tool.on:hover{background:oklch(0.78 0.15 62 / .35)}

/* reference art indicator */
.sheet-ref-pill{display:flex;align-items:center;gap:5px;margin-top:7px;padding:5px 9px;
  background:oklch(0.78 0.15 62 / .08);border:1px solid oklch(0.78 0.15 62 / .25);
  border-radius:var(--r-s);font-size:10.5px;color:var(--pos-ink);letter-spacing:.02em}
.sheet-ref-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;
  background:oklch(0.78 0.15 62 / .12);border:1px solid oklch(0.78 0.15 62 / .3);
  border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--pos-ink);
  text-transform:uppercase;flex:0 0 auto}
.sheet-tier-warn{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;
  background:oklch(0.72 0.17 45 / .12);border:1px solid oklch(0.72 0.17 45 / .35);
  border-radius:4px;font-size:9px;font-weight:600;letter-spacing:.04em;
  color:oklch(0.82 0.14 55);text-transform:uppercase;flex:0 0 auto;cursor:default}
.sheet-ground-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;
  background:oklch(0.6 0.13 230 / .14);border:1px solid oklch(0.6 0.13 230 / .38);
  border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.05em;
  color:oklch(0.78 0.11 230);text-transform:uppercase;flex:0 0 auto;cursor:default}
.sheet-prop-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;
  background:oklch(0.62 0.16 35 / .14);border:1px solid oklch(0.62 0.16 35 / .36);
  border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.05em;
  color:oklch(0.74 0.14 38);text-transform:uppercase;flex:0 0 auto;cursor:default}
.sheet-cameo-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;
  background:oklch(0.62 0.18 295 / .16);border:1px solid oklch(0.62 0.18 295 / .42);
  border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.05em;
  color:oklch(0.8 0.13 296);text-transform:uppercase;flex:0 0 auto;cursor:default}

/* ── Cameo: "Cast yourself" likeness capture ───────────────────────────── */
.sheet-head-acts{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.char-cameo-btn{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-m);
  border:1px solid oklch(0.62 0.18 295 / .4);background:oklch(0.62 0.18 295 / .1);color:oklch(0.82 0.12 296);
  font-family:var(--f-ui);font-size:11px;font-weight:600;cursor:pointer;transition:.12s;white-space:nowrap}
.char-cameo-btn:hover:not(:disabled){background:oklch(0.62 0.18 295 / .2);color:oklch(0.88 0.1 296)}
.char-cameo-btn:disabled{opacity:.5;cursor:default}
.char-cameo-btn.on{background:oklch(0.62 0.18 295 / .22);border-color:oklch(0.62 0.18 295 / .6)}
html[data-theme="light"] .char-cameo-btn{border-color:oklch(0.55 0.17 295 / .45);background:oklch(0.6 0.18 295 / .1);color:oklch(0.42 0.16 295)}
html[data-theme="light"] .char-cameo-btn:hover:not(:disabled){background:oklch(0.6 0.18 295 / .18);color:oklch(0.34 0.16 295)}
html[data-theme="light"] .char-cameo-btn.on{background:oklch(0.6 0.18 295 / .16);border-color:oklch(0.55 0.17 295 / .55);color:oklch(0.36 0.16 295)}

.sheet-cameo-status{display:flex;align-items:center;gap:9px;margin:0 0 12px;padding:8px 11px;border-radius:9px;
  background:oklch(0.62 0.18 295 / .09);border:1px solid oklch(0.62 0.18 295 / .28);font-family:var(--f-ui)}
.sheet-cameo-status>svg{color:oklch(0.78 0.13 296);flex:0 0 auto}
.sheet-cameo-status .scs-t{font-size:11.5px;font-weight:700;color:oklch(0.86 0.1 296);letter-spacing:.01em}
.sheet-cameo-status .scs-meta{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--txt-3);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-cameo-status .scs-act{flex:0 0 auto;background:none;border:0;cursor:pointer;font-family:var(--f-ui);font-size:11px;
  font-weight:600;color:var(--txt-2);padding:2px 4px;border-radius:5px;transition:.12s}
.sheet-cameo-status .scs-act:hover{color:var(--txt-0);background:var(--bg-4)}
.sheet-cameo-status .scs-act.danger:hover{color:var(--neg-ink);background:oklch(0.6 0.2 18 / .12)}

.cameo-overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:safe center;justify-content:center;padding:24px;
  overflow-y:auto;background:oklch(0.16 0.02 280 / .72);backdrop-filter:blur(6px);animation:cameo-in .16s ease}
@keyframes cameo-in{from{opacity:0}to{opacity:1}}
.cameo-modal{width:min(460px,100%);max-height:calc(100vh - 48px);overflow:auto;display:flex;flex-direction:column;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-l);box-shadow:0 24px 70px -20px rgba(0,0,0,.7)}
.cameo-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 18px 14px}
.cameo-title{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-size:17px;font-weight:600;color:var(--txt-0)}
.cameo-title svg{color:oklch(0.78 0.13 296)}
.cameo-sub{margin-top:3px;font-family:var(--f-ui);font-size:12px;color:var(--txt-2)}
.cameo-x{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border-radius:var(--r-m);border:1px solid var(--line-2);
  background:var(--bg-2);color:var(--txt-2);cursor:pointer;transition:.12s}
.cameo-x:hover{background:var(--bg-3);color:var(--txt-0)}
.cameo-stage{position:relative;margin:0 18px;aspect-ratio:1;border-radius:var(--r-m);overflow:hidden;background:#0c0d12;
  display:grid;place-items:center;border:1px solid var(--line-2)}
.cameo-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cameo-shot{width:100%;height:100%;object-fit:cover}
.cameo-guide{position:absolute;inset:0;pointer-events:none}
/* faint pencil pose-guide ghosted into the ring (mirrored to match the selfie video) */
.cameo-guide-ghost{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%) scaleX(-1);
  width:60%;height:74%;object-fit:contain;opacity:.55;pointer-events:none;mix-blend-mode:multiply;z-index:1}
.cameo-guide-loading{color:var(--txt-3);font-style:italic}
.cameo-guide::before{content:"";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:54%;height:70%;border:2px dashed oklch(0.85 0.08 296 / .6);border-radius:50%}
.cameo-hint{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.04em;text-transform:uppercase;color:oklch(0.92 0.02 280 / .82);text-shadow:0 1px 4px rgba(0,0,0,.8)}
.cameo-msg{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:24px;color:var(--txt-2)}
.cameo-msg>svg{color:oklch(0.72 0.16 45)}
.cameo-msg-t{font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--txt-0)}
.cameo-msg-s{font-family:var(--f-ui);font-size:12px;color:var(--txt-2);max-width:30ch}
.cameo-msg-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:2px}
.cameo-consent{margin:14px 18px 0;display:flex;flex-direction:column;gap:9px}
.cameo-check{display:flex;align-items:flex-start;gap:9px;font-family:var(--f-ui);font-size:12px;line-height:1.45;color:var(--txt-1);cursor:pointer}
.cameo-check input{margin-top:2px;width:15px;height:15px;flex:0 0 auto;accent-color:oklch(0.62 0.18 295)}
.cameo-check.sync{color:var(--txt-2);font-size:11.5px}
.cameo-check b{color:var(--txt-0);font-weight:600}
.cameo-err{font-family:var(--f-ui);font-size:11.5px;color:var(--neg-ink)}
/* wraps on narrow widths: Lock likeness takes its own full row instead of clipping */
.cameo-acts{display:flex;flex-wrap:wrap;gap:9px;padding:16px 18px 18px;margin-top:4px}
.cameo-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 16px;border-radius:9px;
  font-family:var(--f-ui);font-size:13px;font-weight:600;cursor:pointer;transition:.12s;border:1px solid transparent;white-space:nowrap}
.cameo-btn.ghost{background:var(--bg-2);border-color:var(--line-2);color:var(--txt-1)}
.cameo-btn.ghost:hover{background:var(--bg-3);color:var(--txt-0)}
.cameo-btn.primary{flex:1 1 auto;min-width:190px;background:oklch(0.62 0.18 295);color:#fff}
.cameo-btn.primary:hover:not(:disabled){background:oklch(0.66 0.18 295)}
.cameo-btn.primary:disabled{opacity:.45;cursor:default}
.cameo-btn.cap{flex:1}

/* B: multi-angle strip */
/* left-anchored so it can never collide with the "Capture now" button top-right;
   long labels ellipsize instead of running underneath it */
.cameo-anglebadge{position:absolute;top:10px;left:10px;font-family:var(--f-mono);
  font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:oklch(0.4 0.05 290 / .7);
  padding:3px 9px;border-radius:20px;white-space:nowrap;max-width:calc(100% - 128px);overflow:hidden;text-overflow:ellipsis}
.cameo-anglebadge b{color:oklch(0.86 0.1 296)}
/* auto-capture: readiness ring, cue, progress, flash, manual + toggle */
.cameo-guide.go::before{border-color:oklch(0.78 0.16 150 / .9);border-style:solid;
  box-shadow:0 0 0 3px oklch(0.78 0.16 150 / .25),0 0 24px oklch(0.78 0.16 150 / .35)}
.cameo-cue{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:#fff;
  background:oklch(0.2 0.02 280 / .68);padding:5px 12px;border-radius:var(--r-l);text-shadow:0 1px 3px rgba(0,0,0,.6);
  max-width:calc(100% - 24px);white-space:normal;text-align:center;line-height:1.45}
.cameo-cue-dot{width:7px;height:7px;border-radius:50%;background:oklch(0.72 0.16 45);flex:0 0 auto}
/* GO state — unmistakable: the pill itself turns green while the countdown runs */
.cameo-cue.go{background:oklch(0.36 0.1 150 / .88);box-shadow:0 0 0 1px oklch(0.78 0.16 150 / .5)}
.cameo-cue.go .cameo-cue-dot{background:oklch(0.82 0.17 150);animation:cameo-pulse .8s ease-in-out infinite}
.cameo-cue.done .cameo-cue-dot{background:oklch(0.78 0.16 150)}
.cameo-cue.off .cameo-cue-dot{background:var(--txt-3)}
@keyframes cameo-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.cameo-prog{position:absolute;left:14px;right:14px;bottom:14px;height:6px;border-radius:4px;background:oklch(0.3 0.02 280 / .6);overflow:hidden}
.cameo-prog-fill{height:100%;border-radius:4px;background:oklch(0.78 0.16 150);transition:width .14s linear}
.cameo-capnow{position:absolute;top:10px;right:10px;background:oklch(0.2 0.02 280 / .66);color:#fff;border:1px solid rgba(255,255,255,.2);
  font-family:var(--f-ui);font-size:11px;font-weight:600;padding:4px 10px;border-radius:var(--r-m);cursor:pointer;transition:.12s}
.cameo-capnow:hover{background:oklch(0.62 0.18 295)}
.cameo-flash{position:absolute;inset:0;background:#fff;animation:cameo-flash .28s ease-out;pointer-events:none;z-index:3}
@keyframes cameo-flash{0%{opacity:.9}100%{opacity:0}}
.cameo-autopill{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 13px;border-radius:9px;cursor:pointer;
  font-family:var(--f-ui);font-size:12px;font-weight:600;transition:.12s;
  border:1px solid var(--line-2);background:var(--bg-2);color:var(--txt-2)}
.cameo-autopill svg{opacity:.6}
.cameo-autopill.on{border-color:oklch(0.78 0.16 150 / .5);background:oklch(0.78 0.16 150 / .12);color:oklch(0.82 0.13 152)}
.cameo-autopill.on svg{opacity:1}
.cameo-strip{display:flex;gap:9px;padding:14px 18px 0}
.cameo-slot{position:relative;flex:1;aspect-ratio:1;border-radius:var(--r-l);border:1.5px dashed var(--line-3);
  background:var(--bg-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;transition:.12s;overflow:hidden;padding:0}
.cameo-slot:hover{border-color:oklch(0.62 0.18 295 / .5)}
.cameo-slot.active{border-style:solid;border-color:oklch(0.62 0.18 295);box-shadow:0 0 0 3px oklch(0.62 0.18 295 / .16)}
.cameo-slot.filled{border-style:solid;border-color:var(--line-2)}
.cameo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cameo-slot-empty{color:var(--txt-3);display:grid;place-items:center}
.cameo-slot-guide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;filter:grayscale(1) contrast(1.05)}
.cameo-slot-lab{position:absolute;bottom:0;left:0;right:0;font-family:var(--f-mono);font-size:9px;
  letter-spacing:.04em;text-transform:uppercase;text-align:center;padding:3px 2px;color:var(--txt-2);
  background:linear-gradient(transparent,var(--bg-1) 60%);z-index:1}
.cameo-slot.filled .cameo-slot-lab{color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6) 70%)}
.cameo-slot-lab i{color:oklch(0.78 0.13 296);font-style:normal}
.cameo-slot-x{position:absolute;top:4px;right:4px;z-index:2;width:18px;height:18px;border-radius:50%;
  background:rgba(0,0,0,.62);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.12s}
.cameo-slot-x:hover{background:var(--neg)}
.cameo-subject{width:100%;height:34px;padding:0 11px;border-radius:var(--r-m);border:1px solid var(--line-2);
  background:var(--bg-2);color:var(--txt-0);font-family:var(--f-ui);font-size:12.5px;outline:none}
.cameo-subject:focus{border-color:oklch(0.62 0.18 295 / .6)}
.cameo-check.sync.disabled{opacity:.6}

/* B: cameo manager */
.cameo-modal.mgr{width:min(540px,100%)}
.cameo-mgr-body{padding:6px 18px 18px;display:flex;flex-direction:column;gap:10px;overflow:auto}
.cameo-mgr-empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:30px 20px;
  color:var(--txt-2);font-family:var(--f-ui);font-size:13px}
.cameo-mgr-empty svg{color:var(--txt-3)}
.cameo-mgr-row{display:flex;align-items:center;gap:13px;padding:11px;border-radius:var(--r-l);
  background:var(--bg-2);border:1px solid var(--line-2)}
.cameo-mgr-thumbs{display:flex;gap:4px;flex:0 0 auto}
.cameo-mgr-thumbs img{width:42px;height:42px;border-radius:var(--r-m);object-fit:cover;border:1px solid var(--line-2)}
.cameo-mgr-noimg{width:42px;height:42px;border-radius:var(--r-m);display:grid;place-items:center;
  background:var(--bg-3);color:var(--txt-3)}
.cameo-mgr-meta{flex:1;min-width:0}
.cameo-mgr-name{font-family:var(--f-display);font-size:14px;font-weight:600;color:var(--txt-0)}
.cameo-mgr-prov{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.02em;color:var(--txt-3);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cameo-mgr-store{margin-top:6px}
.cameo-store-pill{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-ui);font-size:10px;font-weight:600;
  padding:2px 7px;border-radius:5px}
.cameo-store-pill.local{background:var(--bg-4);color:var(--txt-2)}
.cameo-store-pill.cloud{background:oklch(0.6 0.13 230 / .16);color:oklch(0.78 0.11 230)}
.cameo-mgr-acts{display:flex;gap:6px;flex:0 0 auto}
.cameo-mgr-btn{height:28px;padding:0 11px;border-radius:var(--r-m);border:1px solid var(--line-2);background:var(--bg-3);
  color:var(--txt-1);font-family:var(--f-ui);font-size:11.5px;font-weight:600;cursor:pointer;transition:.12s}
.cameo-mgr-btn:hover{background:var(--bg-4);color:var(--txt-0)}
.cameo-mgr-btn.danger{color:oklch(0.7 0.16 25)}
.cameo-mgr-btn.danger:hover{background:oklch(0.6 0.2 18 / .14);color:var(--neg-ink)}
.art-cameo-mgr{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:9px;
  border:1px solid oklch(0.62 0.18 295 / .4);background:oklch(0.62 0.18 295 / .1);color:oklch(0.82 0.12 296);
  font-family:var(--f-ui);font-size:12.5px;font-weight:600;cursor:pointer;transition:.12s;white-space:nowrap}
.art-cameo-mgr:hover{background:oklch(0.62 0.18 295 / .2);color:oklch(0.88 0.1 296)}

/* linked prop sheets (character card) */
.linked-props{margin-top:10px}
.linked-props-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.linked-props-head .obj-lab{flex:1;min-width:0}
.linked-props-clean{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;cursor:pointer;
  padding:3px 8px;border-radius:var(--r-s);font-size:10px;font-weight:600;letter-spacing:.02em;
  color:oklch(0.7 0.17 25);background:oklch(0.7 0.17 25 / .1);border:1px solid oklch(0.7 0.17 25 / .32)}
.linked-props-clean:hover{background:oklch(0.7 0.17 25 / .18)}
.linked-props-clean svg{flex:0 0 auto}
.linked-prop-list{display:flex;flex-direction:column;gap:3px}
.linked-prop{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:4px 6px;border-radius:var(--r-s);
  background:var(--bg-3);border:1px solid var(--line-2);font-size:10px;color:var(--txt-2)}
.linked-prop svg{flex:0 0 auto;color:var(--txt-3)}
.linked-prop-title{display:flex;align-items:center;gap:4px;min-width:0}
.linked-prop-name{min-width:0;flex:1;color:var(--txt-1);font-weight:650;line-height:1.15;overflow-wrap:anywhere}
.linked-prop-controls{display:flex;align-items:center;gap:4px;min-width:0}
.linked-prop-controls>.linked-prop-status{margin-left:auto}
.linked-prop-status{flex:0 0 auto;font-size:9px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  color:var(--txt-3)}
/* has a generated sheet -> green */
.linked-prop.ready{border-color:oklch(0.6 0.13 150 / .38);background:oklch(0.6 0.13 150 / .08)}
.linked-prop.ready svg{color:oklch(0.7 0.14 150)}
.linked-prop.ready .linked-prop-status{color:var(--ok)}
.linked-prop.available{border-color:color-mix(in srgb,var(--pos) 36%,var(--line-2));background:color-mix(in srgb,var(--pos) 6%,var(--bg-3))}
.linked-prop.available .linked-prop-status{color:var(--txt-2)}
.linked-prop-thumb{width:22px;height:22px;flex:0 0 22px;padding:0;border:1px solid var(--line-2);border-radius:4px;overflow:hidden;background:var(--bg-2);cursor:zoom-in}
.linked-prop-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.worn-lock-summary{display:flex;align-items:center;gap:7px;padding:8px 9px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-3);font-size:11px;color:var(--txt-2)}
.worn-lock-summary svg{color:var(--pos-ink);flex:0 0 auto}.worn-lock-summary b{color:var(--txt-0)}
.worn-lock-fallback{margin-left:auto;color:var(--txt-3);font-family:var(--f-mono);font-size:9px;text-transform:uppercase}
.worn-lock-toggle{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;font-size:9px;font-weight:650;color:var(--txt-2);cursor:pointer}
.worn-lock-toggle input{width:11px;height:11px;margin:0;accent-color:var(--pos)}
/* no sheet yet -> red */
.linked-prop.missing{border-color:oklch(0.62 0.2 25 / .34);background:oklch(0.62 0.2 25 / .07)}
.linked-prop.missing svg{color:oklch(0.66 0.19 25)}
.linked-prop.missing .linked-prop-status{color:oklch(0.68 0.19 25)}
/* carried prop: deferred to the shot level, not attached to the character sheet — its own
   BLUE tint (matching the CARRIED badge) so it never reads as the red "needs a sheet" error */
.linked-prop.shot{border-color:oklch(0.72 0.1 250 / .32);background:oklch(0.72 0.1 250 / .06)}
.linked-prop.shot svg{color:oklch(0.74 0.1 250)}
.linked-prop.shot .linked-prop-status{color:oklch(0.74 0.1 250 / .85)}
/* carried prop WITH a generated sheet: keep the neutral row, but green the tick + icon
   so "generated" reads the same everywhere and an ungenerated carried prop is distinguishable */
.linked-prop.shot.genned svg{color:oklch(0.7 0.14 150)}
.linked-prop.shot.genned .linked-prop-status{color:var(--ok)}
/* orphaned owned-prop: owned by the character but absent from the worn/carried lists */
.linked-prop.orphan{border-color:oklch(0.7 0.17 25 / .45);background:oklch(0.7 0.17 25 / .1);opacity:.95}
.linked-prop.orphan svg{color:oklch(0.7 0.17 25)}
.linked-prop-orphan-tag{flex:0 0 auto;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:oklch(0.72 0.17 25);background:oklch(0.7 0.17 25 / .14);padding:2px 6px;border-radius:5px}
/* worn/carried tag on every linked-prop row — readable without scrolling to the lists */
.linked-prop-kind{flex:0 0 auto;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 6px;border-radius:5px}
.linked-prop-kind.worn{color:oklch(0.72 0.14 150);background:oklch(0.7 0.14 150 / .13)}
.linked-prop-kind.carried{color:oklch(0.74 0.1 250);background:oklch(0.72 0.1 250 / .13)}

/* in-app confirm dialog (replaces window.confirm) */
.appconfirm-scrim{position:fixed;inset:0;z-index:9990;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);animation:appconfirm-fade .12s ease}
@keyframes appconfirm-fade{from{opacity:0}to{opacity:1}}
.appconfirm{width:min(440px,94vw);background:var(--bg-1);border:1px solid var(--line);
  border-radius:var(--r-l,14px);box-shadow:0 24px 80px rgba(0,0,0,.6);padding:22px 22px 18px;
  animation:appconfirm-pop .14s cubic-bezier(.2,.8,.3,1)}
@keyframes appconfirm-pop{from{transform:translateY(8px) scale(.985);opacity:.4}to{transform:none;opacity:1}}
.appconfirm-title{font-size:16px;font-weight:650;color:var(--txt-0);line-height:1.3;margin-bottom:8px}
.appconfirm-body{font-size:13px;color:var(--txt-1);line-height:1.5}
.appconfirm-items{margin:10px 0 0;padding:10px 12px;list-style:none;display:flex;flex-direction:column;gap:5px;
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:9px;
  font-size:12.5px;color:var(--txt-1);max-height:180px;overflow:auto}
.appconfirm-items li{display:flex;gap:7px;align-items:baseline;line-height:1.4}
.appconfirm-items li::before{content:"\2022";color:var(--txt-3);flex:0 0 auto}
.appconfirm-note{margin-top:12px;font-size:11.5px;color:var(--txt-3);line-height:1.45}
.appconfirm-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:18px}
.appconfirm-btn{font-family:var(--f-ui);font-size:12.5px;font-weight:600;padding:8px 16px;border-radius:var(--r-m);
  cursor:pointer;border:1px solid transparent;transition:background .12s,border-color .12s}
.appconfirm-btn.ghost{background:transparent;border-color:var(--line);color:var(--txt-1)}
.appconfirm-btn.ghost:hover{background:var(--bg-3);border-color:var(--line-2)}
.appconfirm-btn.primary{background:var(--accent);color:var(--ink-on-accent)}
.appconfirm-btn.primary:hover{filter:brightness(1.08)}
.appconfirm-btn.danger{background:oklch(0.62 0.2 25);color:#fff}
.appconfirm-btn.danger:hover{filter:brightness(1.08)}
.appconfirm-btn.alt{background:var(--bg-4);border-color:var(--line-2);color:var(--txt-0)}
.appconfirm-btn.alt:hover{background:var(--bg-5);border-color:var(--line-1)}

/* image details modal */
/* the details modal is a CENTERED card (not the full-screen image viewer), so its
   overlay must center the panel + use a softer scrim than .lb-overlay's near-opaque one */
.dt-overlay{display:grid;place-items:center;padding:24px;background:rgba(8,8,10,.72)}
.dt-panel{width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.6)}
/* version preview — sits ON TOP of the details modal (not behind it) */
.dt-preview{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.9);display:grid;place-items:center;padding:24px;cursor:zoom-out}
.dt-preview-img{max-width:96vw;max-height:90vh;object-fit:contain;border-radius:var(--r-m);box-shadow:0 20px 70px rgba(0,0,0,.6)}
.dt-preview-x{position:fixed;top:18px;right:20px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:rgba(20,20,22,.85);border:1px solid var(--line-2);color:#fff;cursor:pointer}
.dt-preview-x:hover{background:rgba(40,40,44,.95)}
.dt-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line)}
.dt-title{font-size:15px;font-weight:650;color:var(--txt-0);line-height:1.25;word-break:break-word}
.dt-head>div:first-child{min-width:0}
.ag-x{flex:0 0 auto}
.dt-sub{font-size:11px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.06em;margin-top:3px}
.dt-scroll{overflow-y:auto;padding:16px 18px 22px;display:flex;flex-direction:column;gap:16px}
.dt-hero{width:100%;border-radius:var(--r-l);border:1px solid var(--line-2);background:#000;cursor:zoom-in;display:block}
.dt-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px 16px}
/* phones: the details modal gets the full width (less a thin margin) and the
   metadata grid stacks to one column so long mono values don't get cramped. */
@media (max-width:480px){
  .lb-overlay{padding:14px}
  .dt-grid{grid-template-columns:1fr}
}
.dt-field{min-width:0}
.dt-flab{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--txt-3);margin-bottom:3px}
.dt-fval{font-size:12.5px;color:var(--txt-1);line-height:1.35;word-break:break-word;font-family:var(--f-mono)}
.dt-section{display:flex;flex-direction:column;gap:9px}
.dt-sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dt-sec-lab{display:flex;align-items:center;gap:6px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--txt-2);font-weight:600}
.dt-copy{display:inline-flex;align-items:center;gap:5px;font:500 10px/1 var(--f-ui);color:var(--txt-2);
  background:var(--bg-4);border:1px solid var(--line-2);border-radius:5px;padding:4px 8px;cursor:pointer}
.dt-copy:hover{background:var(--bg-5);color:var(--txt-0)}
.dt-prompt{font-size:11.5px;line-height:1.55;color:var(--txt-1);background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:var(--r-m);padding:11px 12px;max-height:180px;overflow-y:auto;white-space:pre-wrap;
  font-family:var(--f-mono);word-break:break-word}
.dt-camera-box{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:var(--r-m);padding:10px 12px}
.dt-camera-row{display:flex;flex-direction:column;gap:2px;min-width:0}
.dt-camera-k{font:600 9.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3)}
.dt-camera-v{font:600 11.5px/1.35 var(--f-ui);color:var(--txt-1);word-break:break-word}
.dt-camera-note{grid-column:1/-1;font:11px/1.45 var(--f-mono);color:var(--txt-2);border-top:1px solid var(--line);
  margin-top:2px;padding-top:8px;white-space:pre-wrap}
@media (max-width:480px){ .dt-camera-box{grid-template-columns:1fr} }
.dt-thumbs{display:flex;flex-wrap:wrap;gap:10px}
.dt-thumb{width:88px;cursor:zoom-in}
.dt-thumb img{width:88px;height:66px;object-fit:cover;border-radius:var(--r-m);border:1px solid var(--line-2);background:#000;display:block}
.dt-thumb-ph{width:88px;height:66px;border-radius:var(--r-m);border:1px dashed var(--line-2);background:var(--bg-2);
  place-items:center;color:var(--txt-3)}
.dt-thumb-lab{display:block;font-size:9.5px;color:var(--txt-3);margin-top:4px;line-height:1.25;text-wrap:pretty}
.dt-noref{font-size:11.5px;color:var(--txt-3);font-style:italic}
.dt-hist{display:flex;flex-direction:column;gap:8px}
.dt-hist-row{display:flex;align-items:center;gap:11px;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:9px;padding:8px 10px}
.dt-hist-thumb{width:54px;height:40px;object-fit:cover;border-radius:5px;border:1px solid var(--line-2);
  background:#000;cursor:zoom-in;flex:0 0 auto}
.dt-hist-info{flex:1;min-width:0}
.dt-hist-layer{display:flex;align-items:center;gap:5px;font-size:11.5px;line-height:1.3;margin-bottom:2px}
.dt-hist-layer-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-hist-layer.edit{color:oklch(0.82 0.11 295)}
.dt-hist-layer.edit svg{color:oklch(0.72 0.14 295)}
.dt-hist-layer.base{color:var(--txt-1)}
.dt-hist-layer.base svg{color:var(--txt-3)}
.dt-hist-meta{font-size:11.5px;color:var(--txt-1);line-height:1.3}
.dt-hist-mode{font-size:10px;color:var(--txt-3);font-family:var(--f-mono)}
.dt-hist-acts{display:flex;gap:6px;flex:0 0 auto}
.dt-hist-item{display:flex;flex-direction:column}
.dt-hist-item.active{outline:2px solid oklch(0.62 0.14 295 / .6);outline-offset:2px;border-radius:9px}
/* "viewing an earlier version" banner */
.dt-viewing{display:flex;align-items:center;gap:8px;margin:10px 0 4px;padding:8px 11px;border-radius:var(--r-m);
  background:oklch(0.92 0.055 296);border:1px solid oklch(0.68 0.13 296 / .55);
  color:oklch(0.36 0.13 296);font-size:12px;font-weight:600}
.dt-viewing svg{flex:0 0 auto;color:oklch(0.48 0.15 296)}
.dt-viewing-t{flex:1;min-width:0}
.dt-viewing-back{flex:0 0 auto;font:600 11px var(--f-ui);color:var(--txt-0);background:var(--bg-3,#2a2a2a);
  border:1px solid var(--line-2);border-radius:var(--r-s);padding:4px 10px;cursor:pointer}
.dt-viewing-back:hover{border-color:var(--line-1)}
html[data-theme="dark"] .dt-viewing{background:oklch(0.33 0.08 296 / .72);border-color:oklch(0.65 0.13 296 / .5);color:oklch(0.9 0.055 296)}
html[data-theme="dark"] .dt-viewing svg{color:oklch(0.82 0.09 296)}
.dt-current-actions{display:flex;justify-content:flex-end;margin-top:-4px}
.dt-current-delete{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--f-ui);
  color:oklch(0.72 0.18 25);background:oklch(0.55 0.18 25 / .08);
  border:1px solid oklch(0.55 0.18 25 / .28);border-radius:var(--r-m);padding:7px 10px;cursor:pointer}
.dt-current-delete:hover:not(:disabled){background:oklch(0.55 0.18 25 / .16);border-color:oklch(0.55 0.18 25 / .45);color:oklch(0.82 0.16 25)}
.dt-current-delete:disabled{opacity:.55;cursor:default}
.dt-hist-btn.del{padding:4px 7px;color:var(--txt-2)}
.dt-hist-btn.del:hover:not(:disabled){background:oklch(0.55 0.18 25 / .18);border-color:oklch(0.55 0.18 25 / .5);color:oklch(0.82 0.16 25)}
.dt-hist-btn.on{border-color:var(--line-1);color:var(--txt-0)}
.dt-hist-prompt{margin:2px 0 8px;padding:9px 11px;background:var(--bg-2);border:1px solid var(--line-3);border-radius:var(--r-m)}
.dt-hist-prompt-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.dt-hist-prompt-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-hist-btn{font:500 10.5px/1 var(--f-ui);color:var(--txt-1);background:var(--bg-4);border:1px solid var(--line-2);
  border-radius:var(--r-s);padding:6px 10px;cursor:pointer}
.dt-hist-btn:hover{background:var(--bg-5);color:var(--txt-0)}
.dt-hist-btn.restore{color:var(--pos-ink);border-color:oklch(0.78 0.15 62 / .35)}
.dt-hist-btn.restore:hover{background:oklch(0.78 0.15 62 / .14);color:var(--pos-ink)}
.dt-hist-btn:disabled{opacity:.5;cursor:default}
/* clickable version row: thumb + info select the version (its image + all props) */
.dt-hist-main{flex:1;min-width:0;display:flex;align-items:center;gap:11px;
  background:none;border:0;margin:0;padding:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.dt-hist-main:hover .dt-hist-layer-t{color:var(--txt-0)}
.dt-hist-main:hover .dt-hist-thumb,.dt-hist-main:hover .dt-hist-thumb-ph{border-color:var(--line-1)}
.dt-hist-thumb-wrap{position:relative;width:54px;height:40px;flex:0 0 auto}
.dt-hist-thumb-ph{width:54px;height:40px;border-radius:5px;border:1px dashed var(--line-2);
  background:var(--bg-3);place-items:center;color:var(--txt-3)}
/* current/version image missing from storage (dangling path) */
.dt-hero-missing{align-items:center;gap:9px;padding:16px 14px;border:1px dashed var(--line-2);
  border-radius:var(--r-l);background:var(--bg-2);color:var(--txt-3);font-size:12px;line-height:1.4}
.dt-hero-missing svg{flex:0 0 auto;color:var(--txt-3)}

/* auth modal + account chip */
/* auth modal has its OWN overlay (not the immersive image lightbox's .lb-overlay,
   which is display:block / top-aligned) so the panel stays centered in the viewport */
.auth-overlay{position:fixed;inset:0;z-index:144;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(8,8,10,.6)}
.auth-panel{position:relative;width:min(400px,94vw);background:var(--bg-1);border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.6)}
.auth-head{padding:22px 24px 16px;border-bottom:1px solid var(--line)}
/* the brand row: the Kinolot lockup (mark + one-colour Spectral wordmark), both panel themes
   (padding-right keeps it clear of the close button) */
.auth-brand{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-bottom:14px;padding-right:34px}
.auth-mark{display:flex;align-items:baseline;gap:8px;font-family:"Spectral",Georgia,serif;font-weight:600;letter-spacing:-.01em;
  font-size:19px;line-height:1;color:var(--txt-0)}
.auth-mark .brand-mark{width:25px;height:14px;color:inherit}
/* the dialog title — Space Grotesk 600, the app's display face, in both panel themes */
.auth-title{font-family:var(--f-display);font-weight:600;font-size:22px;letter-spacing:-.01em;color:var(--txt-0);line-height:1.2}
.auth-sub{font-size:12.5px;color:var(--txt-2);margin-top:5px;line-height:1.45;text-wrap:pretty}
.auth-body{padding:18px 24px 22px;display:flex;flex-direction:column;gap:13px}
.auth-field{display:flex;flex-direction:column;gap:6px}
/* field labels — the app's eyebrow (Space Mono, uppercase), at AA contrast (was --txt-3) */
.auth-lab{font-family:var(--f-mono);font-size:10.5px;font-weight:400;text-transform:uppercase;letter-spacing:.12em;color:var(--txt-2)}
/* inputs share the buttons' 9px radius (--r-m), so the form reads as one set of controls */
.auth-input{width:100%;box-sizing:border-box;height:42px;background:var(--bg-2);border:1px solid var(--line-3);
  border-radius:var(--r-m);color:var(--txt-0);font:14px var(--f-ui);padding:0 12px;outline:none;transition:border-color .12s,box-shadow .12s}
.auth-input:focus{border-color:var(--pos);box-shadow:0 0 0 3px var(--pos-soft)}
.auth-input::placeholder{color:var(--txt-2)}
/* the sign-in password's placeholder is decorative bullets — kept faint so it never reads as a filled password */
.auth-input[autocomplete="current-password"]::placeholder{color:var(--txt-3)}
/* password field — show/hide toggle + a "forgot" link on the label row */
.auth-lab-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.auth-forgot{background:0;border:0;cursor:pointer;padding:0;color:var(--txt-2);
  font:600 11.5px var(--f-ui);transition:.12s}
.auth-forgot:hover{color:var(--pos-ink)}
.auth-pw{position:relative}
.auth-pw .auth-input{padding-right:42px}
.auth-pw-toggle{position:absolute;top:50%;right:7px;transform:translateY(-50%);display:inline-flex;
  align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:var(--r-s);
  background:transparent;color:var(--txt-2);font:inherit;cursor:pointer;transition:.12s}
.auth-pw-toggle:hover{color:var(--txt-0);background:var(--bg-4)}
/* the primary — the app's large button: 44px, 9px radius, amber fill with dark ink */
.auth-submit{margin-top:4px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;
  background:var(--accent);color:var(--ink-on-accent);font:600 14px var(--f-ui);border:0;border-radius:var(--r-m);cursor:pointer;transition:.12s}
.auth-submit:hover:not(:disabled){filter:brightness(1.08)}
.auth-submit:disabled{opacity:.7;cursor:default}
.auth-err{font-size:12px;line-height:1.4;color:var(--alert);background:var(--alert-soft);
  border:1px solid var(--alert);border-radius:var(--r-s);padding:8px 10px}
.auth-notice{font-size:12px;line-height:1.4;color:var(--pos-ink);background:oklch(0.78 0.15 62 / .1);
  border:1px solid oklch(0.78 0.15 62 / .3);border-radius:var(--r-s);padding:8px 10px}
.auth-switch{font-size:12.5px;color:var(--txt-2);text-align:center;margin-top:2px}
.auth-link{background:none;border:0;color:var(--pos-ink);font:600 12.5px var(--f-ui);cursor:pointer;padding:0}
.auth-link:hover{text-decoration:underline}
/* close — a 30px icon button (named "Close" in auth-ui.jsx) */
.auth-close{position:absolute;top:14px;right:14px;display:inline-grid;place-items:center;width:30px;height:30px;
  background:transparent;border:0;color:var(--txt-2);cursor:pointer;padding:0;border-radius:var(--r-s)}
.auth-close:hover{color:var(--txt-0);background:var(--bg-4)}
.auth-panel :is(.auth-submit,.auth-link,.auth-forgot,.auth-pw-toggle,.auth-close):focus-visible{outline:2px solid var(--txt-0);outline-offset:2px}

/* ---- the paper sign-in panel — over the landing page ----
   The website palette (--lpw-*, defined with the landing) and the Kinolot amber: Paper panel,
   hairlines, mono labels, the amber primary, amber tints for the chosen plan and the notice
   (the landing's green is gone); errors stay red, as in the app. */
.auth-overlay.auth-light{background:rgba(15,16,18,.38);backdrop-filter:blur(6px)}
.auth-panel.light{background:var(--lpw-bg);border-color:var(--lpw-line);box-shadow:0 24px 64px rgba(15,16,18,.16)}
.auth-panel.light .auth-head{border-bottom-color:var(--lpw-line);padding:24px 26px 18px}
.auth-panel.light .auth-mark{color:var(--lpw-ink)}
.auth-panel.light .auth-act{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lpw-sub);margin-bottom:8px}
.auth-panel.light .auth-title{color:var(--lpw-ink)}
.auth-panel.light .auth-sub{color:var(--lpw-sub);font-size:13px}
.auth-panel.light .auth-body{padding:20px 26px 24px}
.auth-panel.light .auth-lab{color:var(--lpw-sub)}
.auth-panel.light .auth-input{background:var(--lpw-surface);border-color:var(--lpw-line-2);color:var(--lpw-ink)}
.auth-panel.light .auth-input:focus{border-color:var(--lpw-ink);box-shadow:0 0 0 3px var(--lpw-amber-soft)}
.auth-panel.light .auth-input::placeholder{color:#6B6F75}
.auth-panel.light .auth-input[autocomplete="current-password"]::placeholder{color:#A3A6AB}
.auth-panel.light .auth-submit{background:var(--lpw-amber);color:var(--lpw-on-amber)}
.auth-panel.light .auth-submit:hover:not(:disabled){background:var(--lpw-amber-hover);filter:none}
.auth-panel.light .auth-err{color:#B23E33;background:rgba(210,73,62,.07);border-color:rgba(210,73,62,.35)}
.auth-panel.light .auth-notice{color:var(--lpw-amber-ink);background:var(--lpw-amber-soft);border-color:var(--lpw-amber-line)}
.auth-panel.light .auth-forgot{color:var(--lpw-sub)}
.auth-panel.light .auth-forgot:hover{color:var(--lpw-ink)}
.auth-panel.light .auth-pw-toggle{color:var(--lpw-sub)}
.auth-panel.light .auth-pw-toggle:hover{color:var(--lpw-ink);background:var(--lpw-card-2)}
.auth-panel.light .auth-switch{color:var(--lpw-sub)}
.auth-panel.light .auth-link{color:var(--lpw-ink);text-decoration:underline;text-underline-offset:2px}
.auth-panel.light .auth-close{color:var(--lpw-sub)}
.auth-panel.light .auth-close:hover{color:var(--lpw-ink);background:var(--lpw-card-2)}
.auth-panel.light :is(.auth-submit,.auth-link,.auth-forgot,.auth-pw-toggle,.auth-close):focus-visible{outline-color:var(--lpw-ink)}
.auth-panel.light .auth-plan{color:var(--lpw-amber-ink);background:var(--lpw-amber-soft);border-color:var(--lpw-amber-line)}
.auth-panel.light :is(.auth-plan-note,.auth-plan-sep){color:var(--lpw-sub)}

.acct-signin{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r-m);
  background:var(--bg-4);border:1px solid var(--line-2);color:var(--txt-1);font:600 12px var(--f-ui);cursor:pointer}
.acct-signin:hover{background:var(--bg-5);color:var(--txt-0)}
.acct-wrap{position:relative}
.acct-chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:3px 9px 3px 3px;border-radius:20px;
  background:var(--bg-4);border:1px solid var(--line-2);cursor:pointer;transition:.12s}
.acct-chip:hover,.acct-chip.open{background:var(--bg-5)}
.acct-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--ink-on-accent);font:700 12px var(--f-ui);flex:0 0 auto}
.acct-cloud{display:inline-flex;align-items:center;gap:3px;font:600 10px var(--f-ui);letter-spacing:.04em;
  text-transform:uppercase;color:var(--pos-ink)}
.acct-cloud.warn{color:oklch(0.82 0.14 55)}
/* healthy "Synced" hides until the chip is hovered (desktop) or tapped open (mobile);
   margin-left cancels the chip's flex gap while collapsed so it reads as just the avatar */
.acct-cloud.quiet{max-width:0;opacity:0;overflow:hidden;gap:0;margin-left:-7px;white-space:nowrap;
  transition:max-width .45s cubic-bezier(.22,1,.36,1),margin-left .45s cubic-bezier(.22,1,.36,1),
    opacity .3s ease .06s,gap .45s cubic-bezier(.22,1,.36,1)}
/* (2026-09-29) opening the menu no longer widens the chip (it pushed every top-bar button left, and on a
   phone the tap-open was the only trigger): the reveal follows the pointer over the chip AND its menu, so
   it stays put while you use the menu; the menu itself states the save status */
.acct-wrap:hover .acct-cloud.quiet,.acct-chip:focus-visible .acct-cloud.quiet{
  max-width:90px;opacity:1;gap:3px;margin-left:0}
/* save actually failed — uses the themed --neg token (a raw oklch here washes out in
   light mode), and pulses so a silent data-loss risk isn't easy to miss */
.acct-cloud.bad{color:var(--neg-ink);animation:acctBad 1.6s ease-in-out infinite}
@keyframes acctBad{0%,100%{opacity:1}50%{opacity:.45}}
.acct-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:210px;background:var(--bg-2);border:1px solid var(--line-3);border-radius:var(--r-l);box-shadow:var(--shadow-pop);padding:12px;z-index:60}
.acct-email{font-size:12.5px;color:var(--txt-0);font-weight:600;word-break:break-all;line-height:1.3}
.acct-status{font-size:10.5px;color:var(--txt-3);margin-top:3px;margin-bottom:11px}
.acct-signout{width:100%;height:32px;background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-m);
  color:var(--txt-1);font:600 12px var(--f-ui);cursor:pointer}
.acct-signout:hover{background:var(--bg-4);color:var(--txt-0)}
.acct-upgrade{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;margin:8px 0 2px;
  background:var(--pos-soft);border:1px solid var(--pos-line);border-radius:var(--r-m);color:var(--pos-ink);
  font:700 12px var(--f-ui);cursor:pointer;transition:.12s}
.acct-upgrade:hover{background:var(--accent);color:var(--ink-on-accent)}

/* ---- Kinolot plans / paywall modal ---- */
.plans-modal{position:relative;width:min(880px,94vw);max-height:88vh;overflow:auto;background:var(--bg-1);
  border:1px solid var(--line-2);border-radius:var(--r-l);padding:26px 26px 20px;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.plans-x{position:absolute;top:14px;right:14px}
.plans-head{text-align:center;margin-bottom:20px}
.plans-title{font-family:var(--f-display);font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--txt-0)}
.plans-sub{font-size:12.5px;color:var(--txt-2);margin-top:5px}
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:720px){.plans-grid{grid-template-columns:1fr}}
.plan-card{position:relative;display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:var(--r-l);padding:18px 16px}
.plan-card.popular{border-color:var(--pos-line);box-shadow:0 0 0 1px var(--pos-line)}
.plan-card.active{border-color:var(--pos)}
.plan-flag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--accent);color:var(--ink-on-accent);font:700 9px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px}
.plan-name{font-family:var(--f-display);font-size:16px;font-weight:700;color:var(--txt-0)}
.plan-price{font-family:var(--f-display);font-size:30px;font-weight:700;color:var(--txt-0);margin:6px 0 2px}
.plan-per{font-size:13px;font-weight:600;color:var(--txt-2);margin-left:2px}
.plan-blurb{font-size:12px;color:var(--txt-1);min-height:32px;line-height:1.4}
.plan-feats{list-style:none;margin:10px 0 14px;padding:0;display:flex;flex-direction:column;gap:7px;flex:1}
.plan-feats li{display:flex;align-items:flex-start;gap:7px;font-size:12px;color:var(--txt-1);line-height:1.4}
.plan-feats li svg{color:var(--pos-ink);flex-shrink:0;margin-top:2px}
.plan-cta{height:38px;border:1px solid var(--line-3);border-radius:var(--r-m);background:var(--bg-3);color:var(--txt-0);
  font:700 12.5px var(--f-ui);cursor:pointer;transition:.12s}
.plan-cta:hover:not(:disabled){border-color:var(--pos-line);color:var(--pos-ink)}
.plan-cta.primary{background:var(--accent);border-color:var(--accent);color:var(--ink-on-accent)}
.plan-cta.primary:hover:not(:disabled){filter:brightness(1.06)}
.plan-cta.is-active{background:var(--bg-2);color:var(--txt-2);cursor:default}
/* an unavailable action reads as unavailable: no amber fill, no hover (the credit packs’ "Coming soon") */
.plan-cta:disabled:not(.is-active),.plan-cta.primary:disabled:not(.is-active){background:var(--bg-2);border-color:var(--line-2);border-style:dashed;color:var(--txt-2);cursor:not-allowed;filter:none}
.credit-packs{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.credit-packs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}
.credit-packs-title{font-family:var(--f-display);font-size:15px;font-weight:700;color:var(--txt-0)}
.credit-packs-sub{font-size:11.5px;color:var(--txt-2);margin-top:2px}
.credit-packs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:720px){.credit-packs-grid{grid-template-columns:1fr}}
.credit-pack{position:relative;display:flex;flex-direction:column;gap:7px;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:var(--r-l);padding:13px}
.credit-pack.popular{border-color:var(--pos-line)}
.credit-pack-flag{position:absolute;top:-8px;right:10px;background:var(--accent);color:var(--ink-on-accent);
  font:700 9px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px}
.credit-pack-name{font:700 12.5px var(--f-display);color:var(--txt-0)}
.credit-pack-price{font:800 20px var(--f-display);color:var(--txt-0)}
.credit-pack-blurb{min-height:33px;font-size:11.5px;line-height:1.4;color:var(--txt-2)}
.credit-pack .plan-cta{height:32px;margin-top:2px}
.plans-foot{text-align:center;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.05em;color:var(--txt-2);margin-top:16px}

/* project switcher */
.proj-wrap{position:relative}
.proj-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:9px;
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--txt-1);font:600 12px var(--f-ui);cursor:pointer;
  /* 200px predates the SHARED badge: a title plus format + framework + shared could not
     fit, and the overflow hard-clipped the last badge mid-word ("STORY CI"). The cap is
     now generous enough for the full set; under real pressure the name ellipsizes, then
     badges shed by viewport (below), so nothing is ever cut without indication. */
  max-width:420px}
.proj-btn:hover,.proj-btn.open{background:var(--bg-4);color:var(--txt-0)}
.proj-btn{min-width:0;overflow:hidden}
.proj-btn .proj-name{flex:0 1 auto;min-width:0;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* tight widths: shed the framework badge first (it's also on the Brief), then the format —
   shedding beats squeezing three badges into a space that fits one */
.vp-tablet .proj-btn .proj-format.fw{display:none}
.vp-mobile .proj-btn .proj-format.fw,
.vp-mobile .proj-btn .proj-format:not(.shared){display:none}
.proj-btn>svg:first-child{color:var(--pos-ink);flex:0 0 auto}
.proj-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;background:var(--bg-2);border:1px solid var(--line-3);border-radius:var(--r-l);box-shadow:var(--shadow-pop);padding:6px;z-index:60}
.proj-menu-lab{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--txt-3);padding:4px 8px 7px}
/* no films yet: the switcher says so instead of listing a blank canvas as "Untitled film" */
.proj-empty{padding:8px 9px 10px;font-size:12px;line-height:1.45;color:var(--txt-2)}
.proj-list{display:flex;flex-direction:column;gap:2px;max-height:320px;overflow-y:auto}
.proj-row{display:flex;align-items:center;gap:2px;border-radius:var(--r-m)}
.proj-row.on{background:var(--bg-4)}
.proj-row-main{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
  padding:8px 9px;color:var(--txt-1);font:500 12.5px var(--f-ui);text-align:left}
.proj-row-main:hover{color:var(--txt-0)}
.proj-dot{width:6px;height:6px;border-radius:50%;background:var(--line-3);flex:0 0 auto}
.proj-row.on .proj-dot{background:var(--accent)}
.proj-row-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-format.shared{background:var(--pos-soft);border-color:var(--pos-line);color:var(--pos-ink)}
.proj-row-share{flex:0 0 auto;font-family:var(--f-mono);font-size:9px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--pos-ink);border:1px solid var(--pos-line);background:var(--pos-soft);
  border-radius:20px;padding:1px 6px;white-space:nowrap}
.proj-row-act{flex:0 0 auto;display:inline-flex;background:none;border:0;color:var(--txt-3);cursor:pointer;
  padding:6px;border-radius:5px;opacity:0;transition:opacity .12s}
.proj-row:hover .proj-row-act{opacity:1}
.proj-row-act:hover{color:var(--txt-0);background:var(--bg-3)}
.proj-row-act.danger:hover{color:var(--alert)}
.proj-rename{display:flex;align-items:center;gap:5px;padding:4px 6px}
.proj-rename-input{flex:1;min-width:0;background:var(--bg-2);border:1px solid var(--pos);border-radius:var(--r-s);
  color:var(--txt-0);font:500 12.5px var(--f-ui);padding:6px 8px;outline:none}
.proj-rename-ok{display:inline-flex;background:var(--accent);color:var(--ink-on-accent);border:0;border-radius:var(--r-s);padding:6px;cursor:pointer}
.proj-new{display:flex;align-items:center;gap:7px;width:100%;margin-top:6px;padding:9px 9px;border-radius:var(--r-m);
  background:var(--bg-2);border:1px solid var(--line-2);color:var(--txt-1);font:600 12px var(--f-ui);cursor:pointer}
.proj-new:hover{background:var(--bg-3);color:var(--txt-0)}
.proj-new svg{color:var(--pos-ink)}
.proj-new.ghosted{background:transparent;border-style:dashed}

/* shows (series) — a group header with its episodes nested beneath */
.proj-show{margin-top:8px;padding-top:6px;border-top:1px solid var(--line)}
.proj-show-head{display:flex;align-items:center;gap:7px;padding:4px 9px 6px;color:var(--txt-2)}
.proj-show-head svg{color:var(--txt-3)}
.proj-show-name{flex:1;min-width:0;font:600 12px var(--f-display);color:var(--txt-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-show-tag{font-family:var(--f-mono);font-size:9px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-3);border:1px solid var(--line-2);border-radius:20px;padding:1px 7px}
.proj-row.ep{margin-left:14px}
.proj-newep{display:flex;align-items:center;gap:6px;width:calc(100% - 14px);margin:2px 0 4px 14px;
  padding:6px 9px;border-radius:var(--r-m);background:transparent;border:1px dashed var(--line-2);
  color:var(--txt-2);font:600 11px var(--f-ui);cursor:pointer}
.proj-newep:hover{color:var(--txt-0);background:var(--bg-3)}

/* edit sheet panel */
.sheet-edit-panel{margin-top:8px;display:flex;flex-direction:column;gap:7px;
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:9px;padding:10px}
.sheet-edit-input{width:100%;box-sizing:border-box;background:var(--bg-2);border:1px solid var(--line-3);
  border-radius:var(--r-s);color:var(--txt-0);font:13px var(--f-ui);padding:7px 10px;outline:none;
  transition:border-color .12s}
.sheet-edit-input:focus{border-color:var(--pos)}
.sheet-edit-input::placeholder{color:var(--txt-3)}
/* one-click edit suggestions (e.g. a location's set-dressing fixtures) — chips
   that fill the edit input with a ready instruction built from the prop's spec */
.sheet-edit-suggests{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.sheet-edit-suggests-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-2);margin-right:2px}
.sheet-edit-suggest{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;border-radius:999px;
  background:var(--bg-2);border:1px solid var(--line-2);color:var(--txt-1);font:600 11px var(--f-ui);cursor:pointer;transition:.12s}
.sheet-edit-suggest:hover{border-color:var(--pos-line);color:var(--txt-0)}
/* the chip's attach half: text + the fixture's sheet as an edit reference image */
.sheet-edit-suggest-group{display:inline-flex;align-items:center}
/* "Interior of" shell link on the location card head */

/* MULTI-SHOT editor (Stage composer) — Kling-style per-shot rows */
.stage2-ms{display:flex;flex-direction:column;gap:8px;margin:2px 0 8px}
.stage2-ms-row{background:var(--bg-2);border:1px solid var(--line-2);border-radius:9px;padding:8px 10px}
/* the selected shot's row — picking a micro-beat in the Scenes rail scrolls here */
.stage2-ms-row.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
/* a COLLAPSED row keeps its header; only the text box is hidden */
.stage2-ms-row.folded .stage2-ms-head{margin-bottom:0}
/* an EXCLUDED shot is dimmed but stays fully in the list */
.stage2-ms-row.off{opacity:.62;background:var(--bg-3)}
.stage2-ms-row.off .stage2-ms-dur{pointer-events:none;opacity:.6}
.stage2-ms-offlab{font-family:var(--f-mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-2)}
.stage2-ms-fold{width:18px;height:18px;flex-shrink:0;border:0;background:transparent;color:var(--txt-2);
  font:700 10px/1 var(--f-ui);cursor:pointer;border-radius:5px;padding:0}
.stage2-ms-fold:hover{background:var(--bg-3);color:var(--txt-0)}
.stage2-ms-check{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--line-3);border-radius:var(--r-s);background:var(--bg-3);
  color:var(--ink-on-accent);font:800 12px/1 var(--f-ui);cursor:pointer;display:grid;place-items:center;padding:0}
.stage2-ms-check.on{background:var(--brand,#d67e00);border-color:var(--brand,#d67e00)}
.stage2-ms-check:hover{border-color:var(--txt-3)}
.stage2-ms-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.stage2-ms-tag{font:700 11px var(--f-ui);color:var(--txt-0);background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-s);padding:2px 8px}
.stage2-ms-beat{font-family:var(--f-mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-2)}
.stage2-ms-dur{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:var(--r-m);padding:1px 4px;background:var(--bg-2)}
.stage2-ms-dur b{font:650 11px var(--f-ui);color:var(--txt-0);min-width:26px;text-align:center}
.stage2-ms-durpick{border:0;background:transparent;font:650 11px var(--f-ui);color:var(--txt-0);
  min-width:34px;text-align:center;cursor:pointer;outline:0;-webkit-appearance:none;appearance:none;padding:0 2px}
.stage2-ms-durpick:hover{color:var(--accent-ink)}
.stage2-ms-dur button{width:20px;height:20px;border:0;background:transparent;color:var(--txt-2);font:700 13px var(--f-ui);cursor:pointer;border-radius:5px}
.stage2-ms-dur button:hover:not(:disabled){background:var(--bg-3);color:var(--txt-0)}
.stage2-ms-dur button:disabled{opacity:.35;cursor:default}
.stage2-ms-text{width:100%;box-sizing:border-box;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-1);
  color:var(--txt-0);font:12.5px/1.5 var(--f-ui);padding:7px 9px;outline:0;resize:vertical;min-height:44px}
.stage2-ms-text:focus{border-color:var(--pos)}
.stage2-ms-text::placeholder{color:var(--txt-3);font-style:italic}
.stage2-ms-hint{font-size:10.5px;color:var(--txt-2);padding:0 2px}
.stage2-ms-caphead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-1);padding:6px 10px}
.stage2-ms-caphead-model{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--f-ui);color:var(--txt-1)}
.stage2-ms-caphead-model svg{color:var(--accent-ink)}
.stage2-ms-caphead-total{font:650 11px var(--f-mono);color:var(--txt-1)}
.stage2-ms-caphead.at{border-color:var(--accent-line);background:var(--accent-soft)}
.stage2-ms-caphead.at .stage2-ms-caphead-total{color:var(--accent-ink)}
.stage2-ms-caphead.over{border-color:var(--danger-line);background:var(--danger-soft)}
.stage2-ms-caphead.over .stage2-ms-caphead-total{color:var(--danger)}
.stage2-ms-check.blocked{border-style:dashed;opacity:.45}
.stage2-ms-reset{border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--bg-3);color:var(--txt-2);
  font:600 10px var(--f-ui);padding:2px 7px;cursor:pointer}
.stage2-ms-reset:hover{color:var(--txt-0);border-color:var(--line-3)}
.stage2-ms-text.edited{background:var(--bg-2);border-color:var(--line-3)}
.stage2-ms-over{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:600 11px var(--f-ui);color:var(--accent-ink);
  background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-m);padding:7px 10px}
.stage2-ms-over-text{flex:1;min-width:200px}
.stage2-ms-over-act{border:1px solid var(--accent-line);border-radius:var(--r-m);background:var(--bg-3);color:var(--accent-ink);
  font:700 11px var(--f-ui);padding:4px 11px;cursor:pointer;white-space:nowrap}
.stage2-ms-over-act:hover{border-color:var(--accent)}
.stage2-ms-over-act.primary{background:var(--brand,#d67e00);border-color:var(--brand,#d67e00);color:var(--ink-on-accent,#2c2722)}
.stage2-ms-over-act.primary:hover{filter:brightness(1.06)}
.stage2-gen-box.ms-mode{padding-top:6px}
/* Multi-shot: the pills box and Generate sit SIDE BY SIDE — the button lives
   outside the box, inline to its right */
.stage2-gen-row{display:flex;align-items:stretch;gap:10px}
.stage2-gen-row .stage2-gen-box{flex:1;min-width:0}
.stage2-gen-submit-neon.standalone{position:static;width:122px;flex-shrink:0;height:auto;min-height:56px}

/* the SCRIPT BEAT a shot covers — quoted source text on the shot card */
.shot-beat-script{display:flex;align-items:flex-start;gap:7px;margin:2px 0 4px;padding:7px 10px;
  background:var(--bg-2);border:1px solid var(--line-2);border-left:3px solid var(--line-3);border-radius:var(--r-m)}
.shot-beat-script-lab{flex-shrink:0;font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt-2);margin-top:2px}
.shot-beat-script-body{font-size:11.5px;line-height:1.45;color:var(--txt-1);font-style:italic}
.sheet-edit-suggest-group .sheet-edit-suggest{border-top-right-radius:0;border-bottom-right-radius:0}
.sheet-edit-suggest.refclip{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0;padding:0 7px}
.sheet-edit-acts{display:flex;align-items:center;gap:7px}
.sheet-edit-apply{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 13px;
  background:var(--accent);color:var(--ink-on-accent);font:600 11.5px var(--f-ui);border:0;border-radius:var(--r-s);cursor:pointer;transition:.12s}
.sheet-edit-apply:hover:not(:disabled){filter:brightness(1.08)}
.sheet-edit-apply:disabled{opacity:.55;cursor:default}
.sheet-edit-cancel{display:inline-flex;align-items:center;height:30px;padding:0 10px;font:500 11.5px var(--f-ui);color:var(--txt-2);background:transparent;
  border:0;cursor:pointer}
.sheet-edit-cancel:hover{color:var(--txt-0)}
.sheet-edit-undo{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;font:500 11.5px var(--f-ui);
  color:var(--txt-1);background:var(--bg-4);border:1px solid var(--line-2);border-radius:var(--r-s);cursor:pointer;transition:.12s}
.sheet-edit-undo:hover:not(:disabled){border-color:var(--line-1);color:var(--txt-0)}
.sheet-edit-undo:disabled{opacity:.5;cursor:default}
.sheet-edit-layers{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:10.5px;color:var(--txt-3)}
.sheet-edit-layers svg{flex:0 0 auto}

/* grounding tooltip */
.nb-ctl-note{font-size:10px;color:var(--txt-3);letter-spacing:.02em}
.nb-ctl-row{display:flex;align-items:center;gap:8px}
.nb-ground-wrap{position:relative}
.nb-ground-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-s);
  color:var(--txt-2);font:600 10px/1 var(--f-ui);letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;transition:.12s;white-space:nowrap}
.nb-ground-btn:hover,.nb-ground-btn.open{background:var(--bg-4);color:var(--txt-1);border-color:var(--line-3)}
.nb-ground-btn.on{background:oklch(0.78 0.15 62 / .12);border-color:oklch(0.78 0.15 62 / .4);color:var(--pos-ink)}
.nb-ground-btn.on:hover{background:oklch(0.78 0.15 62 / .2)}
.nb-ground-tip{width:260px;z-index:1000;
  background:var(--bg-4);border:1px solid var(--line-2);border-radius:var(--r-l);
  padding:12px 14px;z-index:50;box-shadow:0 10px 32px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:10px}
.nb-ground-tip-head{display:flex;align-items:center;gap:6px;font:600 11.5px/1 var(--f-ui);color:var(--txt-0)}
.nb-ground-tip-badge{margin-left:2px;padding:2px 6px;background:oklch(0.78 0.15 62 / .12);
  border:1px solid oklch(0.78 0.15 62 / .3);border-radius:4px;font-size:9px;
  font-weight:700;letter-spacing:.06em;color:var(--pos-ink);text-transform:uppercase}
.nb-ground-tip-sub{margin-left:auto;font:400 10px/1 var(--f-ui);color:var(--txt-3);letter-spacing:.02em;text-transform:none}
.nb-ground-tip-body{font:400 11px/1.5 var(--f-ui);color:var(--txt-2)}
.nb-ground-seg{margin-top:2px}
.ns-spin.dark{border-color:rgba(26,18,5,.35);border-top-color:var(--ink-on-accent)}
/* the card Generate button is a neutral secondary now: its spinner uses the text colour */
.sheet-gen-btn .ns-spin.dark{border-color:var(--line-3);border-top-color:var(--txt-0)}

/* Nano Banana key bar */
.nb-keybar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--bg-2);border:1px solid var(--neg-line);
  border-radius:var(--r-m);padding:10px 13px;margin-bottom:16px}
.nb-keybar svg{color:var(--neg-ink);flex:0 0 auto}
.nb-keybar.set{border-color:var(--pos-line)}
.nb-keybar.set svg{color:var(--pos-ink)}
.nb-key-lab{font-size:12px;color:var(--txt-1)}
.nb-key-help{display:flex;flex-direction:column;gap:2px;flex:1 1 200px;min-width:0}
.nb-key-note{font-size:10.5px;color:var(--txt-2);line-height:1.3}
.nb-keybar.set .nb-key-note{font-size:11px;color:var(--txt-2)}
.nb-keybar.warn{border-color:var(--neg)}
.nb-keybar.warn .nb-key-note{color:var(--neg-ink)}
.nb-key-input{flex:1;min-width:160px;height:32px;background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-m);
  padding:0 11px;color:var(--txt-0);font-family:var(--f-mono);font-size:12px;outline:none}
.nb-key-input:focus{border-color:var(--line-3)}
.nb-key-save{height:32px;padding:0 14px;border-radius:var(--r-m);border:0;background:var(--accent);color:var(--ink-on-accent);
  font-family:var(--f-ui);font-size:12px;font-weight:600;cursor:pointer}
.nb-key-save:disabled{opacity:.5;cursor:default}
.nb-key-link{margin-left:auto;background:transparent;border:0;color:var(--txt-2);font-family:var(--f-ui);font-size:11.5px;
  font-weight:600;cursor:pointer;text-decoration:underline}
.nb-key-link:hover{color:var(--txt-0)}
/* Nano Banana model + aspect controls */
.nb-controls{display:flex;flex-wrap:wrap;gap:18px;margin:-6px 0 16px;padding:0 2px}
/* ---- fixed ENGINE DOCK — Model / Aspect / Resolution always in reach.
   A slim 54px column (the MUSE bubble's width), right edge, vertically centered,
   floating ABOVE the layout (high z-index, no content clearance). Collapsed it
   shows three summary chips; clicking opens a flyout panel to the left, styled
   to the homepage system (Paper surface, hairlines, mono slate labels, ink-pill
   active states). The dock stays floating at every viewport; its flyout narrows
   on small screens instead of becoming a large in-flow panel. */
.art-scroll .nb-controls{display:none}
.nb-dock{display:block;position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:72}
/* the writing-engine dock sits ABOVE the image dock on the same edge */
.write-dock{top:50%;transform:translateY(calc(-50% - 118px))}
/* Writers' Room: the dock keeps its right-edge spot when the Scene / Character panel opens
   and floats above it (z-index 72 — above the panel/drawer (60), below every dialog; the panel makes
   no stacking context). Owner decision
   2026-09-28: it used to step left of the panel and then covered script buttons such as
   "Keep this draft". */
.write-dock-panel{width:min(280px,calc(100vw - 92px));padding:10px}
.write-dock-title{font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);margin:0 0 8px}
.write-dock-panel .nb-ctl{margin:0 0 9px}
.write-dock-panel .nb-seg{flex-wrap:wrap;gap:4px}
/* engine buttons pair up two-per-row; a provider with one model spans the row. Before
   this the layout depended purely on label width, so "Claude Opus 5"/"Claude Fable 5"
   wrapped onto separate rows while the shorter Kimi pair sat side by side. */
.write-dock-panel .nb-seg-btn{flex:1 1 calc(50% - 4px);min-width:0;text-align:center;
  overflow:hidden;text-overflow:ellipsis}
.write-seg-rec{margin-left:4px;color:var(--pos-ink);font-size:9px;vertical-align:top}
.write-dock-note{display:block;font-size:10.5px;color:var(--txt-3);margin-top:4px;line-height:1.35}
.write-dock-note.sel{border-top:1px solid var(--line);padding-top:6px;color:var(--txt-2)}
.write-dock-foot{font-size:9.5px;color:var(--txt-3);margin-top:4px;line-height:1.4}
.nb-dock-toggle{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:5px;width:54px;box-sizing:border-box;
  padding:7px 6px;cursor:pointer;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:999px;box-shadow:0 8px 28px rgba(15,16,18,.14);transition:.15s}
.nb-dock-toggle:hover{border-color:var(--line-3);transform:translateY(-1px)}
/* open (selected) keeps the HOVER look — same 1px border weight/colour and the soft
   raised pill — instead of the heavier near-black ring it used to switch to */
.nb-dock.open .nb-dock-toggle{border-color:var(--line-3);transform:translateY(-1px)}
/* dock label + chips one step smaller (owner, 2026-09-27) */
.nb-dock-label{display:block;font:700 6.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  text-align:center;color:var(--txt-3);white-space:nowrap}
.nb-dock-chip{display:block;font-family:var(--f-mono);font-size:7.5px;font-weight:600;
  letter-spacing:.03em;text-align:center;color:var(--txt-2);background:var(--bg-3);
  border:1px solid var(--line);border-radius:999px;padding:5px 0;white-space:nowrap}
.nb-dock-chip.model{background:var(--txt-0);color:var(--bg-2);border-color:var(--txt-0)}
.nb-dock-panel{position:absolute;right:64px;top:50%;transform:translateY(-50%);width:min(236px,calc(100vw - 92px));
  max-height:calc(100vh - 24px);overflow:auto;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-l);
  padding:14px 14px 16px;box-shadow:var(--shadow-pop)}
.nb-dock .nb-controls{display:block;margin:0;padding:0}
.nb-dock .nb-ctl-mtoggle{display:none}
.nb-dock .nb-ctl-body{display:flex;position:static;flex-direction:column;align-items:stretch;gap:14px;
  padding:0;border:0;box-shadow:none;background:transparent}
.nb-dock .nb-ctl{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.nb-dock .nb-ctl-row{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.nb-dock .nb-ctl:first-child .nb-seg{flex-direction:column;align-items:stretch}
.nb-dock .nb-seg{flex-wrap:wrap}
.nb-dock .nb-seg-btn{flex:1 1 auto;text-align:center;padding:6px 8px}
.nb-dock .nb-ctl-lab{color:var(--txt-2)}
.nb-dock .nb-seg-btn.on{background:var(--txt-0);color:var(--bg-1);box-shadow:none}
@media (max-width:640px){
  .nb-dock{right:12px}
  .nb-dock-panel{right:60px}
}
.nb-ctl-body{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
/* mobile: collapse Model/Aspect/Resolution into a dropdown */
.nb-ctl-mtoggle{display:none}
@media (max-width:640px){
  .nb-controls{position:relative;display:block}
  .nb-ctl-mtoggle{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;
    background:var(--bg-3);border:1px solid var(--line);border-radius:9px;padding:9px 11px;cursor:pointer;color:var(--txt-1)}
  .nb-ctl-mtoggle .nb-ctl-msum{flex:1;min-width:0;text-align:left;font:600 12px var(--f-ui);color:var(--txt-0);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nb-ctl-mtoggle svg:last-child{flex:0 0 auto;color:var(--txt-3)}
  .nb-ctl-body{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;
    flex-direction:column;align-items:stretch;gap:14px;background:var(--bg-1);border:1px solid var(--line-2);
    border-radius:var(--r-l);padding:14px;box-shadow:0 18px 50px rgba(0,0,0,.5)}
  .nb-controls.mopen .nb-ctl-body{display:flex}
  .nb-ctl{flex-direction:column;align-items:flex-start;gap:6px}
}
.nb-ctl{display:flex;align-items:center;gap:9px}
.nb-ctl-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
.nb-seg{display:flex;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-m);padding:3px;gap:2px}
.nb-seg-btn:disabled{opacity:.35;cursor:not-allowed}
.nb-seg-btn{border:0;background:transparent;color:var(--txt-2);font-family:var(--f-ui);font-size:11.5px;font-weight:600;
  padding:4px 11px;border-radius:var(--r-s);cursor:pointer;transition:.12s;white-space:nowrap}
.nb-seg-btn:hover{color:var(--txt-1)}
.nb-seg-btn.on{background:var(--bg-5);color:var(--txt-0);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.nb-aspect-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:62px;padding:5px 8px}
.nb-aspect-btn .sdbar-ratio-ico{margin:0;color:currentColor;flex:0 0 auto}
.nb-aspect-btn span:last-child{font-size:11px;line-height:1}
.nb-dock .nb-aspect-btn{min-width:0}
image-slot[id^="charref-"], image-slot[id^="propref-"], image-slot[id^="locref-"], image-slot[id^="locvar-"], image-slot[id^="shot-"], image-slot[id^="lookref-"]{width:100%;aspect-ratio:16/9;height:auto;display:block;color:var(--txt-1);
  border:1.5px dashed var(--line-3);border-radius:var(--r-l);background:var(--bg-2);transition:border-color .12s}
image-slot[id^="charref-"]:hover, image-slot[id^="propref-"]:hover, image-slot[id^="locref-"]:hover, image-slot[id^="locvar-"]:hover, image-slot[id^="shot-"]:hover, image-slot[id^="lookref-"]:hover{border-color:var(--pos-line)}
image-slot[id^="charref-"][data-filled], image-slot[id^="propref-"][data-filled], image-slot[id^="locref-"][data-filled], image-slot[id^="locvar-"][data-filled], image-slot[id^="shot-"][data-filled], image-slot[id^="lookref-"][data-filled]{border:1px solid var(--line)}
image-slot[id^="charref-"]::part(frame), image-slot[id^="propref-"]::part(frame), image-slot[id^="locref-"]::part(frame), image-slot[id^="locvar-"]::part(frame), image-slot[id^="shot-"]::part(frame), image-slot[id^="lookref-"]::part(frame){background:transparent}
.sheet-frame-cap{display:flex;align-items:center;gap:7px;margin-top:10px;font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--txt-3)}
/* lock caption colours — parent hover states must not override */
.sheet-frame-cap,.sheet-frame:hover .sheet-frame-cap,
.sheet-genwrap:hover~.sheet-frame-cap{ color:var(--txt-3) }
.sheet-frame-meta,.sheet-frame:hover .sheet-frame-meta{ color:var(--txt-2) }
.sheet-meta-dot,.sheet-frame:hover .sheet-meta-dot{ color:var(--txt-3) }
.sheet-frame-cap-label,.sheet-frame:hover .sheet-frame-cap-label{ color:var(--txt-2) }

/* 3-dot options menu */
.sheet-tools-menu{position:relative}
.sheet-tools-dropdown{position:absolute;top:calc(100% + 6px);right:0;min-width:130px;
  background:var(--bg-2);border:1px solid var(--line-3);border-radius:var(--r-l);box-shadow:var(--shadow-pop);padding:6px;z-index:40}
.sheet-tools-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;
  border:0;background:transparent;color:var(--txt-1);font:500 12px/1 var(--f-ui);
  cursor:pointer;border-radius:var(--r-s);text-align:left;white-space:nowrap}
.sheet-tools-item:hover:not(:disabled){background:var(--bg-5);color:var(--txt-0)}
.sheet-tools-item:disabled{opacity:.45;cursor:default}
.sheet-tools-item.on{color:var(--pos-ink)}
.sheet-tools-item.danger{color:var(--alert)}
.sheet-tools-item.danger:hover{background:var(--alert-soft);color:var(--alert)}
.sheet-tools-divider{border:0;border-top:1px solid var(--line);margin:3px 4px}
.sheet-av{width:20px;height:20px;border-radius:5px;flex:0 0 20px;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:600;font-size:9px;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.sheet-body{flex:1;min-width:0;padding:14px 15px;display:flex;flex-direction:column;gap:11px}
/* quiet inline status while the cast is auto-drafted from the script */
.char-drafting-strip{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--r-m);
  background:var(--bg-3);border:1px solid var(--line);color:var(--txt-1);
  font:500 11px/1 var(--f-ui);letter-spacing:.01em}
.char-drafting-strip .ns-spin{width:12px;height:12px;border-width:2px;
  border-color:var(--line-3);border-top-color:var(--pos)}
.char-drafting-strip.warn{background:var(--alert-soft);border-color:color-mix(in srgb,var(--alert) 42%,var(--line));color:var(--alert)}
/* tappable attention strip: it IS the shortcut to the section it names */
.char-drafting-strip.warn.tappable{cursor:pointer;user-select:none;transition:filter .12s}
.char-drafting-strip.warn.tappable:hover{filter:brightness(1.12)}
.char-drafting-strip.warn.tappable:focus-visible{outline:2px solid var(--alert);outline-offset:2px}
/* fold-flash: brief ring on a CardFold after a banner jumps the user to it */
.sheet-fold.fold-flash{animation:foldFlash 1.9s ease}
@keyframes foldFlash{0%,55%{box-shadow:0 0 0 2px var(--alert);border-radius:var(--r-m)}100%{box-shadow:0 0 0 0 transparent}}
.sheet-head{display:flex;flex-direction:column;gap:11px}
/* name on its own line, the Cast/Voice/Draft actions stacked BELOW it — long names
   (e.g. hyphenated surnames) no longer squeeze the buttons into a wrapping column */
.sheet-head-top{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.sheet-head-top .sheet-name{flex:0 0 auto;min-width:0}
.sheet-head-top .sheet-head-acts{flex-wrap:wrap}
.sheet-role-block{display:flex;flex-direction:column;width:100%}
/* collapsible role summary: compact one-liner when closed, full fields when open */
.role-toggle{display:flex;align-items:center;gap:6px;width:100%;background:transparent;border:none;
  padding:3px 0;cursor:pointer;color:var(--txt-3);text-align:left;min-width:0}
.role-toggle:hover{color:var(--txt-1)}
.role-toggle svg{flex:0 0 auto}
.role-toggle-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2)}
.role-summary{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--f-ui);font-size:12px;color:var(--txt-1)}
.role-fields{display:flex;flex-direction:column}
.identity-role-fields{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.identity-role-fields .role-line{grid-template-columns:90px 1fr}
.identity-role-fields .role-add-row{padding-left:98px}
.character-scenes{margin-top:0}
.sheet-name{font-family:var(--f-display);font-size:16px;font-weight:600;color:var(--txt-0)}
.prop-name-row{position:relative;display:flex;align-items:center;gap:7px;min-width:0}
.prop-name-row .sheet-name{flex:1;min-width:0}
.prop-name-row .infotip{position:static;flex:0 0 auto}
.prop-name-row .infotip-pop{left:0;right:auto;width:100%;max-width:none;box-sizing:border-box}
.sheet-role{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--txt-1);margin-top:2px}
/* labelled role lines: Role / Archetype / Identity, each with a small caps label */
.role-line{display:grid;grid-template-columns:64px 1fr;align-items:baseline;gap:8px;margin-top:5px}
.role-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-3);padding-top:3px}
.role-line .sheet-role{margin-top:0}
.role-line .sheet-role-desc{margin-top:0}
/* empty role fields stay quiet — placeholder hint only appears once you click in */
.role-line .edit-in:not(:focus)::placeholder{color:transparent}
.role-add-row{display:flex;gap:6px;margin-top:6px;padding-left:72px}
.role-add{display:inline-flex;align-items:center;gap:4px;background:transparent;border:1px dashed var(--line-3);
  color:var(--txt-3);font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;cursor:pointer;transition:.1s}
.role-add:hover{background:var(--bg-2);color:var(--txt-1);border-color:var(--line-2)}
/* driven-scene chips under the character role */
.sheet-scenes{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:7px}
.sheet-scenes-lab{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);margin-right:1px;width:64px}
.sheet-scene-chip{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:19px;padding:0 6px;
  font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.02em;
  background:var(--bg-2);color:var(--txt-1);border:1px solid var(--line-3);border-radius:5px}
.sheet-scenes-none{font-size:10.5px;color:var(--txt-3);font-style:italic}
.sheet-role .edit-in{min-height:0;padding:2px 5px;line-height:1.45;text-transform:uppercase}
.sheet-role textarea.edit-in{min-height:0;text-transform:uppercase}
/* second role line — the "who they are" description, readable sentence case */
.sheet-role-desc{margin-top:3px;font-family:var(--f-ui);font-size:12px;color:var(--txt-1);line-height:1.45}
.sheet-role-desc .edit-in{min-height:0;padding:2px 5px;line-height:1.45}
.sheet-field .obj-lab{margin-bottom:3px}
/* SECTION LABEL — the Art Room’s card sections (Identity, Wardrobe, The Space…) use the same quiet mono
   label as the Writers’ Room inspector (.eyebrow, --txt-2): amber is kept for primary actions, the
   selection state and the positive charge — it no longer also means "section" (2026-09-29) */
.sheet-sec{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2);
  margin-top:6px;padding-top:9px;border-top:1px solid var(--line)}
/* collapsible card sections */
.sheet-fold{border-top:1px solid var(--line)}
.sheet-fold-head{display:flex;align-items:center;gap:8px;width:100%;background:transparent;border:0;cursor:pointer;
  padding:10px 6px;margin:0;border-radius:var(--r-m);text-align:left;transition:background .12s}
.sheet-fold-head:hover{background:var(--bg-2)}
.sheet-fold-ic{display:flex;color:var(--txt-3)}
.sheet-fold-count{margin-left:auto;font-family:var(--f-mono);font-size:9px;color:var(--txt-3)}
.sheet-fold-body{display:flex;flex-direction:column;gap:11px;padding:0 0 12px}
.sheet-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pal-row{display:flex;gap:8px;flex-wrap:wrap;padding-top:2px}
.pal-chip{display:flex;align-items:center;gap:6px;background:var(--bg-3);border:1px solid var(--line);
  border-radius:20px;padding:3px 9px 3px 3px}
.pal-sw{width:16px;height:16px;border-radius:50%;flex:0 0 16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.pal-name{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.04em;color:var(--txt-1)}
.art-draftall{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-radius:var(--r-m);
  border:0;background:var(--accent);color:var(--ink-on-accent);font-family:var(--f-ui);font-size:12.5px;font-weight:600;cursor:pointer;transition:.12s}
.art-draftall:hover:not(:disabled){filter:brightness(1.08)}
.art-draftall:disabled{opacity:.6;cursor:default}
.art-draftall.ghost{background:var(--bg-4);color:var(--txt-1);border:1px solid var(--line-2)}
.art-draftall.ghost:hover:not(:disabled){background:var(--bg-5);color:var(--txt-0);filter:none}

/* props */
.prop-kind-badge{display:inline-block;padding:1px 7px;border-radius:4px;font-family:var(--f-mono);
  font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.prop-binding-badge{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;min-height:18px;
  padding:1px 10px 1px 7px;line-height:1;border-style:solid;cursor:help;appearance:none}
.prop-binding-label{white-space:nowrap}
.prop-binding-owner-icon{position:absolute;top:-5px;right:-5px;display:flex;align-items:center;justify-content:center;
  width:13px;height:13px;border-radius:50%;background:var(--bg-0);border:1px solid currentColor;
  color:inherit;box-shadow:0 0 0 2px var(--bg-1)}
.prop-binding-pop{position:absolute;z-index:25;left:0;top:calc(100% + 7px);display:none;min-width:150px;
  padding:7px 9px;border-radius:var(--r-m);background:var(--bg-0);border:1px solid var(--line-2);box-shadow:var(--shadow-2);
  color:var(--txt-1);font-family:var(--f-ui);font-size:11px;font-weight:500;letter-spacing:0;text-align:left;
  text-transform:none;white-space:nowrap;pointer-events:none}
.prop-binding-pop b{display:block;margin-bottom:2px;font-family:var(--f-mono);font-size:9px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3)}
.prop-binding-badge:hover .prop-binding-pop,
.prop-binding-badge:focus-visible .prop-binding-pop,
.prop-binding-badge.open .prop-binding-pop{display:block}
.prop-binding-badge:focus-visible{outline:2px solid var(--pos);outline-offset:2px}
.prop-kind-badge.worn{background:oklch(0.62 0.12 285 / .18);color:oklch(0.78 0.1 285);border:1px solid oklch(0.62 0.12 285 / .35)}
.prop-kind-badge.carried{background:oklch(0.62 0.16 35 / .16);color:oklch(0.74 0.14 38);border:1px solid oklch(0.62 0.16 35 / .35)}
.prop-kind-badge.dressing{background:oklch(0.6 0.11 150 / .16);color:oklch(0.72 0.1 150);border:1px solid oklch(0.6 0.11 150 / .35)}
[data-theme="light"] .prop-kind-badge.dressing{color:oklch(0.45 0.1 150)}
/* status pills under a prop's name: evidence (not in screenplay) + reference-image tier */
.prop-status-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.prop-status-pill{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:4px;cursor:help;
  font-family:var(--f-mono);font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  background:var(--bg-3);color:var(--txt-2);border:1px dashed var(--line-2)}
.prop-status-pill.unverified{background:oklch(0.75 0.14 80 / .12);color:oklch(0.78 0.12 80);border-color:oklch(0.75 0.14 80 / .45)}
[data-theme="light"] .prop-status-pill.unverified{color:oklch(0.5 0.12 70)}
/* locations */
.loc-workspace-sheet{display:flex;flex-direction:column;min-width:0;flex:1}
.loc-workspace-nav{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.loc-workspace-root{flex:1;min-width:0;border:0;background:transparent;color:var(--txt-1);padding:3px 0;
  text-align:left;font:600 12px/1.35 var(--f-ui);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loc-workspace-root:hover{color:var(--pos-ink)}
.loc-workspace-root:focus-visible{outline:2px solid var(--pos);outline-offset:3px;border-radius:3px}
.loc-workspace-nav .prop-select{width:48%;min-width:0;max-width:190px}
.loc-room-links{display:flex;flex-direction:column;gap:6px}
.loc-room-link{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  text-align:left;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-2);color:var(--txt-1);cursor:pointer}
.loc-room-link:hover,.loc-room-link:focus-visible{border-color:var(--pos);background:var(--pos-soft)}
.loc-room-link span{min-width:0}.loc-room-link b{display:block;font:600 11px/1.4 var(--f-ui)}
.loc-room-link small{display:block;color:var(--txt-3);font:400 10px/1.4 var(--f-ui);margin-top:2px}
.loc-room-link svg{flex-shrink:0;color:var(--txt-3)}
.loc-evidence{display:flex;flex-direction:column;gap:7px}
.loc-evidence-source,.loc-nested-section{border:1px solid var(--line);border-radius:var(--r-m);padding:8px 10px;background:var(--bg-2)}
.loc-evidence-source summary,.loc-nested-section>summary{cursor:pointer;color:var(--txt-2);font:600 11px/1.5 var(--f-ui)}
.loc-evidence-source summary small{margin-left:6px;color:var(--txt-3);font-weight:400;white-space:nowrap}
.loc-evidence-source[open]>summary,.loc-nested-section[open]>summary{margin-bottom:10px;color:var(--txt-1)}
.loc-evidence-source pre{white-space:pre-wrap;overflow-wrap:anywhere;font:400 11px/1.6 var(--f-ui);color:var(--txt-2);margin:8px 0 12px}
.loc-nested-section>.loc-variant{margin-top:10px}
.loc-layer-note{margin:0}
.loc-intext-badge{display:inline-block;padding:1px 7px;border-radius:4px;font-family:var(--f-mono);
  font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.loc-name-row{display:flex;align-items:center;gap:8px}
.loc-parent-breadcrumb{margin-top:2px;color:var(--txt-3);font:500 9px/1.35 var(--f-mono);
  letter-spacing:.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loc-parent-breadcrumb b{color:var(--txt-2);font-weight:650}
.loc-section-help{display:flex;align-items:center;justify-content:flex-end;min-height:19px;margin-bottom:-2px}
.loc-section-help.has-summary{justify-content:flex-start;gap:8px;padding:6px 8px;border:1px solid var(--line);
  border-radius:var(--r-m);background:var(--bg-2);color:var(--txt-2)}
.loc-section-help-summary{min-width:0;font:500 10.5px/1.4 var(--f-ui)}
.loc-section-help.has-summary .infotip{margin-left:auto;flex:0 0 auto}
.loc-section-help .infotip-pop{left:auto;right:0}
.loc-inheritance-note{display:flex;align-items:flex-start;gap:7px;padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--r-m);
  background:var(--bg-2);font-size:10.5px;line-height:1.45;color:var(--txt-2)}
.loc-inheritance-note svg{flex:0 0 auto;margin-top:1px;color:var(--txt-3)}
.loc-anchor-field{display:flex;flex-direction:column;gap:5px}
.loc-anchor-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.loc-field-label{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-width:0}
.loc-prov-select{max-width:92px;height:21px;padding:0 18px 0 6px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--bg-2);color:var(--txt-2);font:700 9px/1 var(--f-mono);letter-spacing:.06em;cursor:pointer;outline:none}
.loc-prov-select:focus{border-color:var(--pos-line);color:var(--txt-1)}
.loc-anchor-lock{border:1px solid var(--line-2);border-radius:999px;background:var(--bg-2);color:var(--txt-2);padding:3px 7px;
  font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.loc-anchor-lock.locked{border-color:var(--pos-line);background:var(--pos-soft);color:var(--pos-ink)}
.loc-anchor-field>.edit-in{min-height:54px}
/* resolved world-scale badge (Auto derivation made visible; hidden at human scale) */
.loc-scale-badge{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:4px;
  font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.05em;
  border:1px solid var(--pos-line);background:var(--pos-soft);color:var(--pos-ink);cursor:help}
.loc-name-row .loc-intext-badge{flex:0 0 auto}
.loc-name-row .edit-in{flex:1;min-width:0}
.loc-intext-badge.int{background:oklch(0.6 0.08 250 / .18);color:oklch(0.8 0.08 250);border:1px solid oklch(0.6 0.08 250 / .35)}
.loc-intext-badge.ext{background:oklch(0.6 0.12 150 / .16);color:oklch(0.78 0.12 150);border:1px solid oklch(0.6 0.12 150 / .35)}
[data-theme="light"] .loc-intext-badge.int{color:oklch(0.42 0.08 250)}
[data-theme="light"] .loc-intext-badge.ext{color:oklch(0.4 0.12 150)}
[data-theme="light"] .prop-kind-badge.worn{color:oklch(0.44 0.12 285)}
[data-theme="light"] .prop-kind-badge.carried{color:oklch(0.46 0.15 38)}
.loc-style-chip{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:1px 8px 1px 6px;border-radius:20px;
  background:var(--bg-2);border:1px solid var(--line-2);font-size:10.5px;color:var(--txt-2);vertical-align:middle}
.loc-style-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.loc-style-chip.lead{margin-left:0}
.loc-areas{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:5px}
.loc-areas-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.loc-area-chip{padding:1px 7px;border-radius:4px;background:var(--bg-2);border:1px solid var(--line-3);font-size:10.5px;color:var(--txt-2)}
.loc-style-note{display:flex;align-items:flex-start;gap:7px;margin-bottom:9px;padding:8px 10px;border-radius:var(--r-m);
  background:var(--bg-2);border:1px solid var(--line-2);font-size:11.5px;color:var(--txt-2);line-height:1.45}
.loc-style-note svg{flex:0 0 auto;margin-top:2px;color:var(--txt-3)}
.loc-style-inherit{display:flex;align-items:center;gap:7px;margin-bottom:9px;font:500 11px/1.5 var(--f-ui);color:var(--txt-2)}
.loc-style-inherit input{margin:0;accent-color:var(--accent)}
.loc-spatial-plan{margin-bottom:12px;padding:12px;scroll-margin-top:12px}
.loc-spatial-plan summary{display:flex;align-items:center;gap:8px;min-height:28px;list-style:none}
.loc-spatial-plan summary::-webkit-details-marker{display:none}
.loc-spatial-plan summary::before{content:"›";display:inline-block;flex-shrink:0;color:var(--txt-3)}
.loc-spatial-plan[open]>summary::before,.loc-spatial-anchor[open]>summary::before{transform:rotate(90deg)}
.loc-spatial-status{margin-left:auto;padding:3px 7px;border-radius:5px;background:var(--accent-soft);color:var(--txt-2);font-size:10px;white-space:nowrap}
.loc-spatial-status.ready{background:var(--bg-4)}
.loc-spatial-review{padding:12px;border:1px solid var(--accent-line);border-radius:var(--r-m);background:var(--bg-1);display:flex;flex-direction:column;gap:10px}
.loc-spatial-review strong{font:600 13px/1.5 var(--f-ui);color:var(--txt-1)}
.loc-spatial-review p{margin:0;font:400 12px/1.5 var(--f-ui);color:var(--txt-2)}
.loc-spatial-review small{font:400 11px/1.5 var(--f-ui);color:var(--txt-2)}
.loc-spatial-steps{list-style:none;display:flex;flex-wrap:wrap;gap:8px 12px;margin:0 0 2px;padding:0}
.loc-spatial-steps li{display:flex;align-items:center;gap:5px;font:500 10px/1.4 var(--f-ui);color:var(--txt-2)}
.loc-spatial-steps li>span{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--bg-4)}
.loc-spatial-steps li[aria-current]>span{background:var(--accent);color:var(--ink-on-accent)}
.loc-spatial-plan .loc-spatial-confirm{justify-content:center;width:100%;min-height:44px;height:auto;padding:10px;font-size:12px}
.loc-spatial-plan .loc-spatial-owner{margin:12px 0;color:var(--txt-2)}
.loc-spatial-assist{padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-1);margin-bottom:16px}
.loc-spatial-assist>summary{font:500 12px/1.5 var(--f-ui);color:var(--txt-2);cursor:pointer}
.loc-spatial-assist>summary small{margin-left:auto;font-size:10px;color:var(--txt-3)}
.loc-spatial-assist[open]>summary::before{transform:rotate(90deg)}
.loc-spatial-assist .loc-layer-note{margin:8px 0 10px}
.loc-spatial-heading{margin:16px 0 5px;font:600 12px/1.5 var(--f-ui);color:var(--txt-1)}
.loc-spatial-plan fieldset{border:0;padding:0;margin:0;min-width:0}
.loc-spatial-field{display:flex;flex-direction:column;gap:5px;margin:12px 0;font:500 11px/1.5 var(--f-ui);color:var(--txt-2)}
.loc-spatial-field textarea{width:100%;min-height:54px;resize:vertical;white-space:pre-wrap;box-sizing:border-box;font:400 12px/1.5 var(--f-ui)}
.loc-spatial-anchor{margin:10px 0;padding:10px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-1)}
.loc-spatial-anchor>summary{font:500 12px/1.5 var(--f-ui);cursor:pointer}
.loc-spatial-anchor-summary{min-width:0;overflow-wrap:anywhere}
.loc-spatial-placement{display:block;margin-top:5px;font-weight:400;font-size:11px;color:var(--txt-2);white-space:pre-wrap}
.loc-spatial-anchor[open] .loc-spatial-placement{display:none}
.loc-spatial-anchor>summary small{font-weight:400;color:var(--txt-3)}
.loc-spatial-anchor[open]>.loc-spatial-anchor-head{margin-top:8px}
.loc-spatial-anchor-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.loc-spatial-anchor-head code{font-size:10px;overflow-wrap:anywhere}
.loc-spatial-footer{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line-2);margin-top:14px;padding-top:14px}
.loc-spatial-error{font-size:12px;color:var(--accent-ink)}
.loc-spatial-plan :is(button,summary,textarea,select):focus-visible,.sheet-gen-btn.needs-review:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:600px){
  .loc-spatial-plan{padding:10px}
  .loc-spatial-plan summary{min-height:36px}
  .loc-spatial-plan .art-draftall{min-height:44px;height:auto;white-space:normal}
  .loc-spatial-field :is(textarea,select){font-size:16px}
}
/* time-of-day variants */
.loc-variants{display:flex;flex-direction:column;gap:10px}
.loc-variants-empty{font-size:12px;color:var(--txt-3);font-style:italic}
.loc-variant{border:1px solid var(--line-2);border-radius:9px;padding:9px;background:var(--bg-1)}
.loc-variant-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.loc-variant-head .edit-in{flex:1;font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.loc-shared-state-note{margin:-1px 0 9px;color:var(--txt-3);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.045em;text-transform:uppercase}
.loc-coverage-sheet{background:color-mix(in oklab,var(--bg-1),var(--accent) 4%)}
.loc-coverage-sheet .loc-variant-head{justify-content:space-between;align-items:flex-start;gap:10px}
.loc-coverage-title{display:flex;align-items:center;gap:8px;min-width:0}
.loc-coverage-title b{font-size:12.5px;color:var(--txt-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loc-coverage-source{flex:0 0 auto;font-family:var(--f-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--txt-3)}
.loc-coverage-summary{margin:-2px 0 9px;line-height:1.45}
.loc-variant-x{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border:none;border-radius:var(--r-s);
  background:transparent;color:var(--txt-3);cursor:pointer}
.loc-variant-x:hover{background:oklch(0.55 0.18 25 / .18);color:oklch(0.8 0.16 25)}
.loc-variant-add{align-self:flex-start}
.loc-layer-note{font-size:11px;line-height:1.45;color:var(--txt-3);padding:0 2px 2px}
.loc-space-provenance{display:flex;align-items:center;gap:4px;margin:-2px 0 8px;
  font:600 9.5px var(--f-mono);letter-spacing:.045em;text-transform:uppercase;color:var(--txt-3)}
.loc-space-provenance.derived-establishing,.loc-space-provenance.derived-inline,
.loc-space-provenance.derived-action{color:var(--pos-ink)}
.loc-space-provenance.mixed{color:var(--txt-2)}
.loc-coverage-views{display:flex;flex-direction:column;gap:10px}
.loc-camera-view{background:color-mix(in oklab,var(--bg-1),var(--pos) 3%)}
.loc-camera-view-title{display:flex;align-items:center;gap:7px;min-width:0;flex:1}
.loc-camera-view-title .edit-in{min-width:0;flex:1;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.04em;text-transform:uppercase}
.loc-primary-badge,.loc-scene-badge{flex:0 0 auto;border:1px solid var(--pos-line);background:var(--pos-soft);
  color:var(--pos-ink);border-radius:999px;padding:2px 7px;font:700 9px var(--f-mono);letter-spacing:.05em;text-transform:uppercase}
.loc-camera-view-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.loc-scene-setup{background:color-mix(in oklab,var(--bg-1),var(--accent) 3%)}
.loc-setup-source{margin:0 0 8px;color:var(--txt-3);font-size:10.5px}
.loc-setup-source summary{cursor:pointer;font-family:var(--f-mono);letter-spacing:.04em;text-transform:uppercase}
.loc-setup-source pre{max-height:150px;overflow:auto;white-space:pre-wrap;margin:7px 0 0;padding:8px;
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-2);font:10px/1.5 var(--f-mono);color:var(--txt-2)}
@media(max-width:640px){.loc-camera-view-fields{grid-template-columns:1fr}}

/* ============ STYLE BIBLE VIEWER ============ */
.sb-panel{position:relative;width:min(1180px,94vw);max-height:92vh;display:flex;flex-direction:column;
  background:var(--bg-0);border:1px solid var(--line-2);border-radius:var(--r-l);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.sb-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line-2)}
.sb-panel-title{font-family:var(--f-ui);font-size:18px;font-weight:600;color:var(--txt-0)}
.sb-panel-sub{font-size:11.5px;color:var(--txt-3);margin-top:3px}
.sb-panel-body{overflow:auto;padding:18px 20px 24px}
/* film strip */
.sb-strip-wrap{margin-bottom:22px}
.sb-strip-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.sb-strip-title{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
.sb-strip-warn{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:oklch(0.78 0.13 70)}
.sb-strip{display:flex;gap:3px;align-items:stretch}
.sb-strip-cell{flex:1 1 0;min-width:0;height:34px;border-radius:4px;display:grid;place-items:center;position:relative;
  box-shadow:0 0 0 1px rgba(255,255,255,.07) inset;transition:transform .1s}
.sb-strip-cell:hover{transform:translateY(-2px)}
.sb-strip-cell.none{background:repeating-linear-gradient(45deg,var(--bg-2),var(--bg-2) 4px,var(--bg-1) 4px,var(--bg-1) 8px)}
.sb-strip-no{font-family:var(--f-mono);font-size:9px;color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.sb-strip-cell.none .sb-strip-no{color:var(--txt-3);text-shadow:none}
/* legend — colour key mapping each preset to its scenes */
.sb-strip-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:11px}
.sb-legend-item{display:inline-flex;align-items:center;gap:7px}
.sb-legend-sw{width:22px;height:12px;border-radius:3px;border:1px solid var(--line-2);flex:0 0 auto}
.sb-legend-nm{font-size:12px;color:var(--txt-1)}
.sb-legend-ct{font-family:var(--f-mono);font-size:10px;color:var(--txt-2);background:var(--bg-3);border-radius:var(--r-l);padding:1px 7px}
.sb-strip-hint{font-size:10.5px;color:var(--txt-3);font-style:italic;text-transform:none;letter-spacing:0}
.sb-strip-count{color:var(--txt-2);text-transform:none;letter-spacing:.02em}
/* uploaded reference images (palette sampled client-side) */
.sb-refimgs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.sb-refimg{position:relative;width:56px;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line-2);background:var(--bg-3)}
.sb-refimg img{display:block;width:56px;height:42px;object-fit:cover}
.sb-refimg-sw{display:flex;height:8px}
.sb-refimg-sw span{flex:1}
.sb-refimg-x{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;border:0;
  background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;opacity:0;transition:opacity .12s}
.sb-refimg:hover .sb-refimg-x{opacity:1}
.sb-refimg-add{display:inline-flex;align-items:center;gap:7px;height:50px;padding:0 13px;border-radius:var(--r-m);
  border:1px dashed var(--line-3);background:transparent;color:var(--txt-2);cursor:pointer;
  font-size:12px;font-family:var(--f-ui);transition:.12s}
.sb-refimg-add:hover{color:var(--txt-0);border-color:var(--txt-3);background:var(--bg-3)}
/* unified reference bar: one bordered shell wrapping the input + Image / Save / Assign */
.sb-refbar{display:flex;align-items:stretch;border:1px solid var(--line-2);
  border-radius:var(--r-l);background:var(--bg-1);overflow:hidden;transition:border-color .12s}
.sb-refbar:focus-within{border-color:var(--line-3)}
.sb-refbar > input{flex:1;min-width:0;border:0;background:transparent;outline:none;
  color:var(--txt-1, #ececec);font-size:13px;font-family:var(--f-body, inherit);padding:10px 13px}
.sb-refbar > textarea{flex:1;min-width:0;border:0;background:transparent;outline:none;resize:vertical;
  color:var(--txt-1, #ececec);font-size:13px;line-height:1.55;font-family:var(--f-body, inherit);
  padding:10px 13px;min-height:64px}
.sb-refbar-btn{flex:0 0 auto;display:flex;align-items:center;gap:7px;border:0;border-left:1px solid var(--line);
  background:transparent;color:var(--txt-1);font-family:var(--f-ui);font-size:12.5px;font-weight:500;
  padding:0 14px;cursor:pointer;transition:.12s;white-space:nowrap}
.sb-refbar-btn:hover:not(:disabled){background:var(--bg-4);color:var(--txt-0)}
.sb-refbar-btn:disabled{opacity:.5;cursor:default}
.sb-refbar-btn.on{color:var(--pos-ink)}
.sb-refbar-btn.secondary{background:var(--bg-4);color:var(--txt-0);font-weight:600}
.sb-refbar-btn.secondary:hover:not(:disabled){background:var(--bg-5);color:var(--txt-0)}
.sb-refbar-btn.secondary.on{color:var(--pos-ink)}
.sb-refbar-btn.assign{background:var(--accent);color:var(--ink-on-accent);font-weight:600;border-left-color:transparent}
.sb-refbar-btn.assign:hover:not(:disabled){background:var(--accent);filter:brightness(1.07);color:var(--ink-on-accent)}
.sb-refbar-btn.assign:disabled{opacity:.55}
.sb-strip-cell.editable{cursor:pointer}
.sb-strip-cell.picking{box-shadow:0 0 0 2px var(--pos) inset, 0 0 0 1px rgba(255,255,255,.07) inset;z-index:61}
/* per-scene preset picker popover */
.sb-pick{position:absolute;top:calc(100% + 5px);left:0;z-index:62;width:212px;max-width:62vw;cursor:default;
  background:var(--bg-2);border:1px solid var(--line-3);border-radius:var(--r-m);box-shadow:var(--shadow-pop);
  padding:5px;animation:menupop .14s ease;text-align:left}
.sb-pick.right{left:auto;right:0}
.sb-pick-h{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-2);
  padding:6px 7px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-pick-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:transparent;
  border-radius:var(--r-m);padding:7px 8px;cursor:pointer;color:var(--txt-1);font-size:12.5px;transition:.1s}
.sb-pick-item:hover{background:var(--bg-4)}
.sb-pick-item.on{background:var(--bg-3)}
.sb-pick-item .sb-pick-nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-pick-item svg{color:var(--pos-ink);flex:0 0 auto}
.sb-pick-sw{width:22px;height:14px;border-radius:3px;border:1px solid var(--line-2);flex:0 0 auto}
.sb-pick-sw.none{background:repeating-linear-gradient(45deg,var(--bg-2),var(--bg-2) 3px,var(--bg-1) 3px,var(--bg-1) 6px)}
/* info tooltip — "i" icon that reveals help text on hover / tap */
.infotip{position:relative;display:inline-flex;vertical-align:middle}
.infotip-btn{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;padding:0;
  border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-3);cursor:pointer;transition:.12s}
.infotip-btn:hover,.infotip-btn.on{color:var(--txt-0);border-color:var(--line-3);background:var(--bg-4)}
.infotip-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:70;width:330px;max-width:78vw;
  background:var(--bg-2);border:1px solid var(--line-3);border-radius:var(--r-m);box-shadow:var(--shadow-pop);
  padding:11px 13px;animation:menupop .14s ease;white-space:pre-line;
  font-family:var(--f-ui);font-size:12.5px;font-weight:400;line-height:1.55;letter-spacing:0;
  text-transform:none;color:var(--txt-1)}
/* preset grid */
.sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.sb-card{border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--bg-1);padding:13px;display:flex;flex-direction:column;gap:11px}
.sb-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sb-card-title{display:flex;align-items:center;gap:8px;font-family:var(--f-ui);font-size:14px;font-weight:600;color:var(--txt-0)}
.sb-card-dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.15) inset}
.sb-card-count{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-2);
  padding:2px 8px;border-radius:20px;background:var(--bg-2);border:1px solid var(--line-3)}
.sb-card-count.zero{color:var(--txt-3)}
/* before/after stills */
.sb-beforeafter{display:flex;align-items:center;gap:8px}
.sb-arrow{flex:0 0 auto;color:var(--txt-3)}
.sb-still{position:relative;flex:1 1 0;aspect-ratio:16/9;border-radius:var(--r-m);overflow:hidden;background:#15171b;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset}
.sb-still-base{position:absolute;inset:0}
/* neutral cinematic reference comp (grayscale, depth) */
.sb-sky{position:absolute;inset:0;background:linear-gradient(180deg,#d7d7d7 0%,#9a9a9a 38%,#5c5c5c 64%,#343434 100%)}
.sb-glow{position:absolute;left:62%;top:10%;width:46%;height:46%;border-radius:50%;
  background:radial-gradient(circle,#f3f3f3 0%,rgba(243,243,243,.5) 36%,transparent 70%)}
.sb-floor{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,#4a4a4a,#2a2a2a)}
.sb-window{position:absolute;left:8%;top:16%;width:26%;height:40%;background:linear-gradient(160deg,#ededed,#b4b4b4);
  box-shadow:0 0 0 3px #3a3a3a, 0 0 22px 4px rgba(255,255,255,.35)}
.sb-figure{position:absolute;left:52%;bottom:18%;width:11%;height:46%;border-radius:42% 42% 8% 8%;
  background:linear-gradient(180deg,#2c2c2c,#161616)}
.sb-furn{position:absolute;left:22%;bottom:16%;width:20%;height:18%;border-radius:4px;background:linear-gradient(180deg,#3a3a3a,#222)}
.sb-vig{position:absolute;inset:0;box-shadow:inset 0 0 70px 18px rgba(0,0,0,.55);pointer-events:none}
.sb-grade{position:absolute;inset:0;mix-blend-mode:color;pointer-events:none}
.sb-grade-mult{position:absolute;inset:0;mix-blend-mode:multiply;opacity:.32;pointer-events:none}
.sb-still-tag{position:absolute;left:6px;bottom:5px;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.04em;
  color:rgba(255,255,255,.92);background:rgba(0,0,0,.5);padding:1px 6px;border-radius:4px;text-shadow:0 1px 2px rgba(0,0,0,.7);
  max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* palette 60/30/10 */
.sb-pal{display:flex;flex-direction:column;gap:7px}
.sb-pal-bar{display:flex;height:14px;border-radius:5px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
.sb-pal-seg{height:100%}
.sb-pal-keys{display:flex;flex-direction:column;gap:3px}
.sb-pal-key{display:flex;align-items:center;gap:7px;font-size:11px}
.sb-pal-sw{width:11px;height:11px;border-radius:3px;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.sb-pal-pct{font-family:var(--f-mono);font-size:10px;color:var(--txt-1);width:30px}
.sb-pal-lab{color:var(--txt-2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-pal-hex{font-family:var(--f-mono);font-size:9.5px;color:var(--txt-3)}
/* under the hood */
.sb-meta{display:flex;flex-direction:column;gap:4px;padding-top:3px;border-top:1px solid var(--line-3)}
.sb-meta-row{display:flex;gap:8px;font-size:11px;line-height:1.4}
.sb-meta-k{flex:0 0 58px;font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);padding-top:1px}
.sb-meta-v{flex:1;color:var(--txt-1)}
.sb-scenes{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding-top:3px}
.sb-scenes-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3)}
.sb-scene-chip{font-family:var(--f-mono);font-size:10px;padding:1px 6px;border-radius:4px;background:var(--bg-2);
  border:1px solid var(--line-3);color:var(--txt-2)}

/* ============ DEPTH-GRID STAGING ============ */
.stage-wrap{display:flex;flex-direction:column;gap:9px}
.stage-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.stage-meta-fields{display:flex;gap:10px;flex:1;flex-wrap:wrap}
.stage-meta-field{display:flex;flex-direction:column;gap:3px;flex:1;min-width:130px}
.stage-meta-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-3)}
.stage-meta-field .edit-in{min-height:0;padding:5px 7px;font-size:12px}
.stage-map-title{font:600 11px/1.4 var(--f-ui);color:var(--txt-2)}
.stage-composition{padding:10px;border:1px solid var(--line-2);border-radius:var(--r-m);
  background:linear-gradient(180deg,color-mix(in oklab,var(--bg-1),var(--pos) 5%),var(--bg-1));min-width:0}
.stage-map-direction{margin:0 0 12px 36px;text-align:center;font:600 9px/1.4 var(--f-mono);
  letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);overflow-wrap:anywhere}
.stage-map-columns,.stage-map-row{display:grid;grid-template-columns:32px repeat(3,minmax(0,1fr));gap:6px}
.stage-map-columns{margin-bottom:6px;font:500 9px var(--f-ui);color:var(--txt-3);text-align:center}
.stage-map-zones{position:relative;display:flex;flex-direction:column;gap:8px}
.stage-map-cone{position:absolute;left:38px;top:0;width:calc(100% - 38px);height:100%;pointer-events:none}
.stage-map-cone-fill{fill:var(--pos-soft);stroke:var(--pos-line);stroke-width:1;stroke-dasharray:4 4}
.stage-map-axis{fill:none;stroke:var(--pos);stroke-width:1.4;stroke-dasharray:4 5;opacity:.65}
.stage-map-row{position:relative}
.stage-map-depth{align-self:center;color:var(--txt-2);font:600 9px/1.3 var(--f-ui)}
.stage-zone{min-width:0;min-height:76px;padding:6px;border:1px dashed var(--line-2);border-radius:var(--r-m);
  background:color-mix(in oklab,var(--bg-1),transparent 28%);color:var(--txt-3);cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:4px;transition:border-color .12s,background .12s}
.stage-zone.filled{border-style:solid;background:var(--bg-2);color:var(--txt-2)}
.stage-zone.selected{border-color:var(--pos);background:color-mix(in oklab,var(--bg-2),var(--pos) 10%);box-shadow:inset 0 0 0 1px var(--pos)}
.stage-zone:hover,.stage-map-floor:hover{border-color:var(--pos)}
.stage-zone:focus-visible,.stage-map-floor:focus-visible{outline:2px solid var(--pos);outline-offset:2px}
.stage-zone-mark{font:600 13px/1 var(--f-ui);color:var(--txt-3)}
.stage-zone.selected .stage-zone-mark{color:var(--pos-ink)}
.stage-zone-text{font:500 10px/1.35 var(--f-ui);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
.stage-map-camera{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--pos-ink);font:600 10px var(--f-ui)}
.stage-map-camera>span{font-size:17px;line-height:1}
.stage-map-camera-caption{display:flex;flex-direction:column;gap:3px;text-align:center;margin:8px 0 10px 38px;
  font:500 10px/1.4 var(--f-ui);color:var(--txt-2);overflow-wrap:anywhere}
.stage-map-camera-caption small{font-size:10px;color:var(--txt-3)}
.stage-map-floor{display:flex;align-items:center;gap:7px;width:100%;min-width:0;padding:8px;
  border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--bg-2);color:var(--txt-2);cursor:pointer;
  text-align:left;font:10px/1.4 var(--f-ui)}
.stage-map-floor svg,.stage-map-floor b{flex-shrink:0}
.stage-map-floor>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt-3)}
.stage-map-floor.selected{border-color:var(--pos);box-shadow:inset 0 0 0 1px var(--pos)}
.stage-map-disclaimer{margin:0;text-align:center;color:var(--txt-3);font:10px/1.4 var(--f-ui)}
.stage-zone-editor{border:1px solid var(--pos-line);border-radius:var(--r-m);padding:10px;background:var(--bg-2);min-width:0}
.stage-zone-editor-head{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:8px;font:11px var(--f-ui)}
.stage-zone-editor-head b{color:var(--pos-ink)}
.stage-zone-editor-head>span{font-size:9px;color:var(--txt-3)}
.stage-zone-editor>label{display:flex;flex-direction:column;gap:4px}
.stage-editor-label{font:500 10px var(--f-ui);color:var(--txt-3)}
.stage-zone-editor .edit-in{min-height:64px;padding:5px 0;font-size:12px;line-height:1.5}
.stage-view-details .loc-camera-view-fields{grid-template-columns:1fr}
.stage-view-details .stage-meta-fields{margin-top:10px}
.prop-select{width:100%;box-sizing:border-box;background:var(--bg-2);border:1px solid var(--line-3);
  border-radius:var(--r-s);color:var(--txt-0);font:13px var(--f-ui);padding:7px 9px;outline:none;cursor:pointer}
.prop-select:focus{border-color:var(--pos)}
/* scene chips on a prop card */
.prop-scenes{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:7px}
.prop-scenes-lab{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);margin-right:1px}
.location-scenes{margin-top:0}
.prop-scene-chip{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:20px;padding:0 6px;
  font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.02em;
  background:var(--bg-2);color:var(--txt-1);border:1px solid var(--line-3);border-radius:5px;cursor:pointer;transition:.1s}
.prop-scene-chip:hover{background:var(--bg-3);color:var(--txt-0);border-color:var(--pos)}
.prop-scenes-none{font-size:10.5px;color:var(--txt-3);font-style:italic}
/* scene focus bar */
/* search + scene-focus share one row, sitting side by side */
.prop-toolbar{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin:0 0 18px}
.prop-toolbar > .prop-searchbar{flex:1 1 260px;margin:0}
.prop-toolbar > .prop-scenebar{flex:0 1 auto;margin:0;height:42px;padding-top:0;padding-bottom:0;flex-wrap:nowrap}
/* in a toolbar row, the "Style · all" / read-only "World scale" controls match the 42px search & scene-focus height */
.prop-toolbar > .char-style-all{height:42px}

/* free-text prop search */
.prop-searchbar{display:flex;align-items:center;gap:9px;margin:0 0 14px;padding:0 13px;height:42px;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-m);color:var(--txt-3)}
.prop-searchbar:focus-within{border-color:var(--line-3);color:var(--txt-2)}
.prop-searchbar > svg{flex:0 0 auto}
.prop-search-input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:none;
  font-family:var(--f-ui);font-size:13.5px;color:var(--txt-0)}
.prop-search-input::placeholder{color:var(--txt-3)}
.prop-search-count{flex:0 0 auto;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--txt-3)}
.prop-search-clear{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r-s);
  cursor:pointer;border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-2);transition:.12s}
.prop-search-clear:hover{background:var(--bg-4);color:var(--txt-0)}
/* COLLAPSIBLE search — icon-only until clicked, then a compact (not full-width) input */
.prop-toolbar > .prop-searchbar.collapsible{flex:0 0 auto}
.prop-searchbar.collapsible{width:42px;justify-content:center;gap:0;padding:0;cursor:pointer;overflow:hidden;
  transition:width .18s ease,padding .18s ease}
.prop-searchbar.collapsible:hover{border-color:var(--line-3);color:var(--txt-1)}
.prop-searchbar.collapsible .prop-search-input{width:0;flex:0 0 0;padding:0;opacity:0}
.prop-searchbar.collapsible.open{width:230px;justify-content:flex-start;gap:9px;padding:0 13px;cursor:text}
.prop-searchbar.collapsible.open .prop-search-input{width:auto;flex:1;opacity:1}

.prop-scenebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px;padding:11px 13px;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-l)}
.prop-scenebar-lab{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--txt-2);flex:0 0 auto}
.prop-scenebar-select{width:auto;min-width:260px;flex:0 1 auto}
.prop-scenebar-msg{font-size:12px;color:var(--txt-2)}
/* tab-wide batch status / choice strip (under the toolbar) */
.art-batchbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px;padding:11px 13px;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-l)}
.art-batchbar.flash{animation:batchbar-flash 1.1s ease-out}
@keyframes batchbar-flash{
  0%{box-shadow:0 0 0 0 oklch(0.62 0.16 45 / .55);border-color:oklch(0.62 0.16 45 / .8)}
  60%{box-shadow:0 0 0 6px oklch(0.62 0.16 45 / 0);border-color:oklch(0.62 0.16 45 / .8)}
  100%{box-shadow:0 0 0 0 oklch(0.62 0.16 45 / 0)}}

/* ── Storyboard (2×2 scene pages) ──────────────────────────────────────── */
.sb-scene{margin:0 0 26px}
.sb-scene-summary{margin-bottom:16px}
.sb-scene-summary .shot-scene-ctx{border-bottom-left-radius:12px;border-bottom-right-radius:12px}
.sb-scene-head{display:flex;align-items:center;gap:11px;margin:0 0 12px;padding:9px 13px;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-l)}
.sb-scene-no{font-family:var(--f-display);font-weight:700;font-size:16px;color:var(--txt-0);
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-m);padding:2px 9px;flex:0 0 auto;font-variant-numeric:tabular-nums}
.sb-scene-title{font-family:var(--f-display);font-weight:600;font-size:14px;color:var(--txt-0);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-scene-loc{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-mono);font-size:10px;color:var(--txt-3);flex:0 0 auto}
.sb-scene-count{margin-left:auto;font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--txt-3);flex:0 0 auto}

/* ---- storyboard SHEET: header bar + 4-column grid of per-panel frames ---- */
.sb-sheet{margin:0 0 26px;background:#000;border:1px solid var(--line-2);border-radius:var(--r-l);overflow:hidden;padding:16px 18px 18px}
.sb-sheet-head{display:flex;gap:24px;flex-wrap:wrap;align-items:baseline;font-family:"Caveat",var(--f-ui);font-size:20px;
  color:#fff;padding:2px 2px 12px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:14px}
.sb-sheet-hi{white-space:nowrap}
.sb-sheet-hi b{color:rgba(255,255,255,.5);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.09em;font-family:var(--f-mono);margin-right:5px}
.sb-sheet-hi.page{margin-left:auto}
.sb-sheet-hi.clip-over{color:oklch(0.7 0.19 25);cursor:help}
/* Storyboard board-mode toggle (Scenes / Clips) */
.sb-mode{display:inline-flex;align-items:center;padding:3px;gap:2px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-3);flex:0 0 auto}
.sb-mode-btn{padding:5px 11px;border:0;border-radius:var(--r-s);background:transparent;color:var(--txt-2);font-family:var(--f-ui);font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;cursor:pointer;transition:.13s}
.sb-mode-btn:hover{color:var(--txt-1)}
.sb-mode-btn.on{background:var(--bg-5);color:var(--txt-0);box-shadow:0 1px 2px rgba(0,0,0,.3)}
.sb-sheet-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 18px}
.sb-tpanel{display:flex;flex-direction:column;min-width:0}
.sb-tpanel-frame{position:relative;aspect-ratio:16/9;background:#0b0b0c;border:1px solid rgba(255,255,255,.14);border-radius:4px;overflow:hidden}
.sb-tpanel-img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.sb-tpanel-no{position:absolute;top:5px;left:5px;z-index:2;font-family:var(--f-mono);font-size:10px;font-weight:600;color:#fff;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);border-radius:4px;padding:1px 6px}
.sb-tpanel-empty{position:absolute;inset:0;width:100%;height:100%;border:0;display:grid;place-items:center;cursor:pointer;color:var(--txt-3);
  background:repeating-linear-gradient(135deg,#0b0b0c,#0b0b0c 8px,rgba(255,255,255,.018) 8px,rgba(255,255,255,.018) 16px);transition:.12s}
.sb-tpanel-empty:hover:not(:disabled){color:var(--pos-ink);background:#151517}
.sb-tpanel-spin{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45)}
.sb-tpanel-err{position:absolute;bottom:5px;right:5px;color:var(--alert);background:rgba(0,0,0,.6);border-radius:50%;width:21px;height:21px;display:grid;place-items:center}
/* sheet-level generation/compose failure: the real error message + recovery actions,
   laid over the bottom of the dark sheet (replaces the old hover-only alert icon) */
.sb-sheet-err{position:absolute;left:10px;right:10px;bottom:10px;z-index:4;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:9px 12px;border-radius:var(--r-m);background:rgba(24,9,9,.94);border:1px solid oklch(0.5 0.17 27 / .6);
  color:oklch(0.84 0.1 25);font:500 11.5px/1.45 var(--f-ui)}
.sb-sheet-err > svg{flex:0 0 auto;color:oklch(0.68 0.18 27)}
.sb-sheet-err-msg{flex:1 1 260px;min-width:0}
.sb-sheet-err-acts{display:flex;gap:6px;flex-wrap:wrap}
.sb-sheet-err-btn{font:500 10.5px/1 var(--f-ui);letter-spacing:.04em;color:#eee;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);border-radius:var(--r-s);padding:6px 10px;cursor:pointer;transition:.12s;white-space:nowrap}
.sb-sheet-err-btn:hover{background:rgba(255,255,255,.16);color:#fff}
.sb-sheet-err-btn.primary{color:var(--ink-on-accent);background:var(--accent);border-color:transparent;font-weight:600}
.sb-sheet-err-btn.primary:hover{filter:brightness(1.08)}
/* "Built from" ingredients strip — the reference images recorded for the sheet */
.sb-ingredients{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 10px 8px;padding:0 2px;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-3)}
.sb-ingredients-lab{flex:0 0 auto}
.sb-ingredient-chip{padding:3px 8px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.04);
  color:var(--txt-2);text-transform:none;letter-spacing:0;font-size:10.5px;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
/* edit-panel reference picker chips (characters in the scene + the location plate) */
.sb-editrefs{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:8px 0 2px}
.sb-editrefs-lab{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3)}
.sb-editref-chip{padding:4px 10px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:transparent;
  color:var(--txt-2);font:500 11px var(--f-ui);cursor:pointer;transition:.12s;white-space:nowrap}
.sb-editref-chip:hover{color:var(--txt-0);background:rgba(255,255,255,.08)}
.sb-editref-chip.on{color:var(--ink-on-accent);background:var(--accent);border-color:transparent;font-weight:600}

/* saved sheet HALVES — the Stage's video-gen hand-off, managed under the sheet */
.sb-halves{margin:0 10px 10px;padding:4px 11px 9px;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-m);background:rgba(255,255,255,.03)}
.sb-halves-head{display:flex;gap:6px;align-items:center;flex-wrap:wrap;width:100%;border:0;background:transparent;cursor:pointer;
  padding:6px 0;text-align:left;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);transition:color .12s}
.sb-halves-head:hover{color:var(--txt-1)}
.sb-halves-chev{display:inline-flex;transition:transform .15s}
.sb-halves-chev.open{transform:rotate(90deg)}
.sb-halves-stale{color:oklch(0.78 0.13 64)}
.sb-halves-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:5px}
.sb-half{flex:0 1 400px;min-width:220px;max-width:460px}
.sb-half img{width:100%;display:block;border-radius:5px;border:1px solid rgba(255,255,255,.14);cursor:zoom-in}
.sb-half-meta{display:flex;align-items:center;gap:8px;margin-top:5px;font-family:var(--f-mono);font-size:10px;color:var(--txt-3)}
.sb-half-tag{color:var(--txt-1);font-weight:700;letter-spacing:.06em}
.sb-half-meta .sb-half-btn:first-of-type{margin-left:auto}
.sb-half-btn{font:500 10px/1 var(--f-ui);letter-spacing:.03em;color:var(--txt-2);background:transparent;
  border:1px solid rgba(255,255,255,.18);border-radius:5px;padding:4px 9px;cursor:pointer;transition:.12s}
.sb-half-btn:hover{color:var(--txt-0);background:rgba(255,255,255,.08)}
.sb-half-btn.danger{color:oklch(0.74 0.12 25);border-color:oklch(0.6 0.14 25 / .4)}
.sb-half-btn.danger:hover{background:oklch(0.6 0.14 25 / .14);color:oklch(0.8 0.12 25)}
.sb-halves-err{display:flex;gap:7px;align-items:center;margin-top:8px;font:500 11px/1.4 var(--f-ui);color:oklch(0.78 0.12 25)}
.sb-tpanel-menu{position:absolute;top:4px;right:4px;z-index:3}
.sb-tpanel-opts{width:24px;height:24px;border-radius:5px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.5);color:#fff;
  display:grid;place-items:center;cursor:pointer;padding:0;opacity:0;transition:.12s}
.sb-tpanel-frame:hover .sb-tpanel-opts,.sb-comp-frame:hover .sb-tpanel-opts,.sb-tpanel-opts.on{opacity:1}
/* on the big composite sheet the menu is easy to miss — keep it visible at rest so users know it's there */
.sb-comp-frame .sb-tpanel-opts{opacity:.92;background:rgba(0,0,0,.6)}
.sb-tpanel-opts:hover{background:rgba(0,0,0,.78)}
.sb-tpanel-cap{display:flex;align-items:flex-start;gap:8px;margin-top:7px;min-height:38px}
.sb-tpanel-captext{flex:1;min-width:0;font-family:"Caveat",var(--f-ui);font-size:16px;line-height:1.18;color:#e9e9e9;text-transform:uppercase;letter-spacing:.005em}
.sb-tpanel-arrow{flex:0 0 auto;color:rgba(255,255,255,.45);margin-top:2px}

/* Panels ⇄ Single-sheet toggle */
.sb-sheet-bar{display:flex;align-items:center;margin:-4px 0 14px}
.sb-modeseg{display:inline-flex;gap:2px;padding:2px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-m);background:rgba(255,255,255,.03)}
.sb-modeseg-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:rgba(255,255,255,.55);cursor:pointer;
  font-family:var(--f-mono);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:5px 11px;border-radius:var(--r-s);transition:.12s}
.sb-modeseg-btn:hover{color:#fff}
.sb-modeseg-btn.on{background:rgba(255,255,255,.12);color:#fff}

/* the whole sheet as ONE composite image */
.sb-comp{display:flex;flex-direction:column}
.sb-comp-frame{position:relative;aspect-ratio:16/9;background:#0b0b0c;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-s);overflow:hidden}
.sb-comp-img{width:100%;height:100%;object-fit:contain;display:block;cursor:zoom-in;background:#000}
.sb-comp-empty{position:absolute;inset:0;width:100%;height:100%;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;color:var(--txt-3);
  background:repeating-linear-gradient(135deg,#0b0b0c,#0b0b0c 10px,rgba(255,255,255,.018) 10px,rgba(255,255,255,.018) 20px);transition:.12s}
.sb-comp-empty:hover:not(:disabled){color:var(--pos-ink);background:#151517}
.sb-comp-empty span{font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.sb-comp-empty-sub{font-size:10.5px!important;font-weight:500!important;color:var(--txt-3);text-transform:none!important;letter-spacing:0!important}
.sb-tpanel.batch-on .sb-tpanel-frame{border-color:var(--pos);box-shadow:0 0 0 1px var(--pos) inset}
.sb-tpanel .sheet-edit-panel{margin-top:8px}

/* one scene page = one composite 3×3 image (or its labelled-guide placeholder) */
.sb-page{width:100%;margin:0 0 16px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-l);overflow:hidden}
.sb-page.batch-on{border-color:var(--accent,#d8a657);box-shadow:0 0 0 1px var(--accent,#d8a657) inset}
.sb-page-head{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line-2)}
.sb-page-lab{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--txt-1)}
.sb-page-range{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-3)}
.sb-page-acts{margin-left:auto;display:flex;gap:6px;flex:0 0 auto}
.sb-mini{display:inline-flex;align-items:center;gap:5px;cursor:pointer;border:1px solid var(--line-2);background:var(--bg-3);
  color:var(--txt-2);border-radius:var(--r-m);padding:4px 9px;font-family:var(--f-ui);font-size:10.5px;font-weight:600;transition:.12s}
.sb-mini:hover:not(:disabled){background:var(--bg-4);color:var(--txt-0)}
.sb-mini:disabled{opacity:.55;cursor:default}
.sb-mini.accent{background:var(--accent-soft,rgba(216,166,87,.15));border-color:var(--accent,#d8a657);color:var(--accent-ink)}
.sb-mini.accent:hover:not(:disabled){filter:brightness(1.1)}
.sb-mini.danger:hover{color:oklch(0.68 0.19 25);border-color:oklch(0.62 0.2 25 / .4)}
.sb-page-err{display:flex;align-items:center;gap:7px;padding:7px 12px;font-size:11.5px;color:oklch(0.7 0.19 25);
  background:oklch(0.62 0.2 25 / .07);border-bottom:1px solid oklch(0.62 0.2 25 / .2)}
.sb-page-frame{position:relative;background:var(--bg-1);overflow:hidden}
.sb-page-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;cursor:zoom-in;display:block}
/* clean reserved canvas shown until the scene storyboard is generated */
.sb-page-empty{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:24px;text-align:center;
  background:repeating-linear-gradient(135deg,var(--bg-1),var(--bg-1) 10px,rgba(255,255,255,.012) 10px,rgba(255,255,255,.012) 20px);
  color:var(--txt-3);transition:.14s}
.sb-page-empty:hover:not(:disabled){color:var(--txt-1);background:var(--bg-2)}
.sb-page-empty:disabled{cursor:default}
.sb-page-empty-t{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-2)}
.sb-page-empty-d{font-size:12px;color:var(--txt-3);max-width:420px;line-height:1.5}
.sb-panels{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:6px;padding:8px}
.sb-panel{position:relative;display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;overflow:hidden;
  width:100%;height:100%;min-width:0;min-height:0;box-sizing:border-box;
  border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-3);padding:8px 9px 7px;transition:.12s;font-family:inherit}
.sb-panel:hover{background:var(--bg-4);border-color:var(--line-3)}
.sb-panel.empty{cursor:default;background:repeating-linear-gradient(135deg,var(--bg-2),var(--bg-2) 7px,var(--bg-3) 7px,var(--bg-3) 14px);
  border-style:dashed;opacity:.5}
.sb-panel-no{font-family:var(--f-mono);font-size:11px;font-weight:700;color:var(--txt-0);font-variant-numeric:tabular-nums}
.sb-panel-no.dim{color:var(--txt-3)}
.sb-panel-gram{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.02em;color:var(--txt-2);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-panel-who{font-family:var(--f-mono);font-size:8px;letter-spacing:.02em;color:var(--accent-ink);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-panel-act{font-size:10.5px;line-height:1.3;color:var(--txt-1);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb-panel-comp{font-size:9.5px;line-height:1.28;color:var(--txt-3);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.sb-panel-dlg{font-size:10px;line-height:1.3;color:var(--pos-ink);font-style:italic;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* per-page "Beat & shot briefs" — full Shot List + Writers' Room detail */
.sb-page .sheet-fold{margin:0;border-top:1px solid var(--line-2)}
.sb-page .sheet-fold-head{padding:9px 12px}
.sb-page .sheet-fold-body{padding:2px 12px 12px}
.sb-brief-scene{padding:4px 2px 10px;border-bottom:1px dashed var(--line-2);margin-bottom:10px}
.sb-brief-pair{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:4px}
.sb-brief-line{font-size:11.5px;line-height:1.45;color:var(--txt-1);margin:2px 0}
.sb-brief-line b,.sb-brief-pair b{color:var(--txt-3);font-weight:600;font-size:10px;letter-spacing:.03em;text-transform:uppercase}
.sb-brief-line.dlg{color:var(--pos-ink);font-style:italic}
.sb-brief{padding:9px 0;border-top:1px solid var(--line-2)}
.sb-brief:first-of-type{border-top:0}
.sb-brief-head{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.sb-brief-no{font-family:var(--f-mono);font-size:11px;font-weight:700;color:var(--txt-0);font-variant-numeric:tabular-nums}
.sb-brief-gram{flex:1;min-width:0;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.03em;color:var(--txt-2);font-weight:600}
.sb-brief-jump{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;cursor:pointer;border:1px solid var(--line-2);
  background:var(--bg-3);color:var(--txt-2);border-radius:var(--r-s);padding:3px 7px;font-family:var(--f-ui);font-size:10px;font-weight:600}
.sb-brief-jump:hover{background:var(--bg-4);color:var(--txt-0)}
.sb-page-spin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;
  background:rgba(0,0,0,.5);color:#fff;font-family:var(--f-mono);font-size:12px;letter-spacing:.03em;backdrop-filter:blur(2px)}
/* flash a shot card when jumped to from the storyboard */
.sb-flash{animation:sbFlash 1.2s ease}
@keyframes sbFlash{0%,100%{box-shadow:0 0 0 0 transparent}25%{box-shadow:0 0 0 2px var(--pos)}}

/* ── Shot List ─────────────────────────────────────────────────────────── */
.shot-scene-group{margin:0 0 28px}
.shot-scene-head{display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:10px 14px;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-l)}
.shot-scene-group.collapsed .shot-scene-head{margin-bottom:0}
/* MERGED scene card (2026-07-19): navigator + head + context share ONE box */
.shot-scene-card{border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--bg-1);margin:0 0 16px;overflow:visible}
.shot-scene-card .shot-scene-head{margin:0;border:0;background:transparent;border-bottom:1px solid var(--line);border-radius:0}
.shot-scene-card .shot-scene-ctx{margin:0;border:0;background:transparent;border-radius:0}
.shot-scene-head .scene-pager-arrow{flex:0 0 auto}
.shot-scene-meta .scene-pager-no{position:relative;display:inline-flex;align-items:center;gap:4px;cursor:pointer;margin-bottom:2px}
.shot-scene-meta .scene-pager-no:hover{color:var(--txt-1)}
.shot-scene-fold{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-m);cursor:pointer;
  border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-2);transition:.12s}
.shot-scene-fold:hover{color:var(--txt-0);background:var(--bg-4)}
.shot-scene-group:not(.collapsed) .shot-scene-fold svg{transform:rotate(90deg)}
.shot-scene-no{font-family:var(--f-display);font-weight:700;font-size:20px;color:var(--txt-0);
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-m);padding:4px 11px;flex:0 0 auto;font-variant-numeric:tabular-nums}
.shot-scene-meta{flex:1;min-width:0}
.shot-scene-title{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--txt-0);line-height:1.2}
.shot-scene-style-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px}
.shot-style-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:23px;border-radius:999px;
  border:1px solid var(--accent-line,rgba(216,126,0,.35));background:var(--accent-soft,rgba(216,126,0,.10));
  color:var(--accent-ink);font:700 10.5px var(--f-ui);padding:0 8px;cursor:help}
.shot-style-chip.empty{border-color:var(--line-2);background:var(--bg-3);color:var(--txt-3);
  /* the generic .empty (the Script view's empty state: a centred flex column, flex:1, 40px padding) also
   matched this chip, so "No style preset" stretched into a full-width bar over the scene progress */
  display:inline-flex;flex:0 1 auto;flex-direction:row;justify-content:flex-start;gap:6px;padding:0 8px;text-align:left}
.shot-style-chip svg{flex:0 0 auto}
.shot-style-chip-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot-style-swatches{display:inline-flex;gap:2px;flex:0 0 auto}
.shot-style-swatch{width:11px;height:11px;border-radius:3px;border:1px solid rgba(0,0,0,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.shot-scene-sub{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.02em;color:var(--txt-3);margin-top:3px}
.shot-scene-acts{display:flex;gap:7px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
/* scene-level context block under a Shot List scene header */
.shot-scene-ctx{margin:-6px 0 16px;padding:12px 14px;background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-l)}
.ssx-desc{font-size:12.5px;line-height:1.5;color:var(--txt-1);margin-bottom:11px}
.ssx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 18px}
.ssx-item{min-width:0}
.ssx-k{font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);margin-bottom:2px}
.ssx-v{font-size:12px;line-height:1.4;color:var(--txt-1)}
.ssx-conf{display:flex;align-items:center;gap:8px}
.ssx-conf-lab{font-size:12px;color:var(--txt-1)}
.ssx-pips{display:flex;gap:3px}
.ssx-pip{width:14px;height:5px;border-radius:3px;background:var(--bg-4);border:1px solid var(--line-2)}
.ssx-pip.on{background:var(--accent,#d8a657);border-color:var(--accent,#d8a657)}

/* clip-sequence strip: a scene's shots grouped into ≤15s clips (the Stage's render unit) */
.clip-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-6px 0 16px;
  padding:9px 12px;background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-l)}
.clip-bar-lab{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:9.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--txt-3);flex:0 0 auto;cursor:help}
.clip-bar-lab svg{color:var(--txt-3)}
.clip-bar-sub{font-weight:500;text-transform:none;letter-spacing:.02em;color:var(--txt-3)}
.clip-bar-strip{display:flex;align-items:center;gap:2px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.clip-seg{display:inline-flex;align-items:center;gap:2px;padding:3px 7px;border-radius:var(--r-m);
  background:var(--bg-3);border:1px solid var(--line-2)}
.clip-seg.over{border-color:oklch(0.62 0.2 25 / .55);background:oklch(0.62 0.2 25 / .08)}
.clip-seg-lab{font-family:var(--f-mono);font-size:9px;font-weight:600;letter-spacing:.05em;color:var(--txt-2);
  margin-right:5px;cursor:help;white-space:nowrap}
.clip-seg.over .clip-seg-lab{color:oklch(0.7 0.19 25)}
.clip-cell{font-family:var(--f-mono);font-size:10px;color:var(--txt-1);font-variant-numeric:tabular-nums;
  min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-4);border-radius:5px;padding:0 3px;cursor:default}
.clip-joint{display:inline-flex;align-items:center;justify-content:center;width:14px;height:18px;cursor:pointer;
  border:0;background:transparent;color:var(--txt-3);font-family:var(--f-mono);font-size:11px;line-height:1;
  border-radius:5px;transition:.1s;padding:0}
.clip-joint:hover{color:var(--accent-ink);background:var(--accent-soft,rgba(216,166,87,.14))}
.clip-joint.break{color:var(--accent-ink);font-size:9px}
.clip-auto{flex:0 0 auto;cursor:pointer;border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-2);
  border-radius:var(--r-m);padding:4px 9px;font-family:var(--f-ui);font-size:10.5px;font-weight:600;transition:.12s}
.clip-auto:hover{background:var(--bg-4);color:var(--txt-0)}
.shot-beat-tag.clip{color:var(--accent-ink);border-color:var(--accent-line,rgba(216,166,87,.4));cursor:help}

.shot-card .shot-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.shot-head-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.shot-card .shot-head-right{flex:1 1 auto;min-width:0;flex-wrap:wrap}
.shot-head-right :is(.shot-anchor-btn,.shot-lock-btn){
  box-sizing:border-box;height:24px;min-height:24px;padding:0 8px;border-width:1px;border-style:solid;
  border-radius:var(--r-m);line-height:1;white-space:nowrap}
.shot-anchor-btn{display:inline-flex;align-items:center;gap:4px;cursor:pointer;border:1px solid var(--line-2);
  background:var(--bg-3);color:var(--txt-3);border-radius:20px;padding:3px 8px;font-family:var(--f-mono);
  font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;transition:.12s}
.shot-anchor-btn:hover{color:var(--txt-1);background:var(--bg-4)}
.shot-anchor-btn.on{color:var(--accent-ink);border-color:var(--accent,#d8a657);background:var(--accent-soft,rgba(216,166,87,.12))}
.shot-anchor-btn svg{flex:0 0 auto}
.shot-grammar-line{font-family:var(--f-mono);font-size:11px;letter-spacing:.03em;color:var(--txt-1);font-weight:600}
.shot-beat-tag{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:20px;padding:2px 9px;flex:0 0 auto}
.shot-grammar-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.shot-gsel{display:flex;flex-direction:column;gap:4px}
.shot-gsel-head{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.shot-gsel-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-3)}
.shot-camera-auto{flex:0 0 auto;border:1px solid var(--accent-line,rgba(216,166,87,.4));border-radius:999px;
  background:var(--accent-soft,rgba(216,166,87,.12));color:var(--accent-ink);padding:1px 5px;
  font:700 9px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.shot-camera-panel{display:flex;flex-direction:column;gap:10px}
.shot-camera-head{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:24px}
.shot-camera-head>.infotip{margin-left:auto}
.shot-camera-head .infotip-pop{left:auto;right:0}
.shot-camera-reset{flex:0 0 auto;border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-2);
  border-radius:var(--r-m);padding:4px 9px;font:700 10.5px var(--f-ui);cursor:pointer}
.shot-camera-reset:hover{background:var(--bg-4);color:var(--txt-0)}
.shot-camera-reset.on{color:var(--accent-ink);border-color:var(--accent,#d8a657);
  background:var(--accent-soft,rgba(216,166,87,.12))}
.shot-camera-reset:disabled{opacity:1;cursor:default}
.shot-camera-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.shot-camera-preview{font:11px/1.45 var(--f-mono);color:var(--txt-2);background:var(--bg-3);
  border:1px solid var(--line-2);border-radius:var(--r-m);padding:8px 10px}
.shot-frame-row{display:flex;flex-direction:column;gap:6px;margin-bottom:9px}
.shot-frame-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-3)}
/* read-only "in frame" — auto-derived from the action text (no manual toggles) */
.shot-inframe-auto{display:flex;flex-direction:column;gap:7px;margin-bottom:9px}
.shot-inframe-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.shot-inframe-row .shot-frame-lab{flex:0 0 64px}
.shot-inframe-chip{padding:2px 9px;border-radius:999px;background:var(--bg-4);border:1px solid var(--line);
  color:var(--txt-1);font:500 11px var(--f-ui)}
.shot-inframe-chip.prop{background:transparent;color:var(--txt-2)}
.shot-inframe-none{font:italic 11px var(--f-ui);color:var(--txt-3)}
.shot-inframe-hint{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--txt-3);opacity:.85;margin-top:1px}
.shot-chips{display:flex;flex-wrap:wrap;gap:6px}
.shot-chip{display:inline-flex;align-items:center;gap:5px;height:25px;padding:0 10px;border-radius:20px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-2);font-family:var(--f-ui);font-size:11px;transition:.1s}
.shot-chip:hover{color:var(--txt-0);border-color:var(--line)}
.shot-chip.on{background:var(--accent);border-color:transparent;color:var(--ink-on-accent);font-weight:600}
.shot-chip.on svg{color:var(--ink-on-accent)}
.shot-frame-empty{font-size:11px;color:var(--txt-3);font-style:italic;padding:2px 0}
.shot-loc-note{display:flex;gap:7px;align-items:flex-start;margin-top:9px;padding:7px 10px;border-radius:var(--r-m);
  background:var(--bg-3);border:1px solid var(--line-2);font-size:11px;line-height:1.4;color:var(--txt-2)}
.shot-loc-note svg{flex:0 0 auto;color:var(--txt-3);margin-top:1px}
@media (max-width:560px){ .shot-grammar-grid,.shot-camera-grid{grid-template-columns:1fr} }
/* 9-up sheet pagination */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;margin:22px 0 4px}
.pager-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--bg-2);color:var(--txt-1);border-radius:999px;transition:.12s}
.pager-btn:hover:not(:disabled){background:var(--bg-4);color:var(--txt-0)}
.pager-btn:disabled{opacity:.4;cursor:default}
.pager-num{min-width:30px;height:30px;padding:0 6px;cursor:pointer;border:1px solid transparent;background:transparent;
  color:var(--txt-2);border-radius:999px;font:600 12px var(--f-ui);font-variant-numeric:tabular-nums;transition:.12s}
.pager-num:hover{color:var(--txt-0);background:var(--bg-3)}
.pager-num.on{background:var(--txt-0);color:var(--bg-1);border-color:var(--txt-0)}
.pager-count{font-family:var(--f-mono);font-size:11px;color:var(--txt-2);padding:0 4px;font-variant-numeric:tabular-nums}
.pager-note{margin-left:10px;font-family:var(--f-mono);font-size:10px;letter-spacing:.05em;color:var(--txt-3)}

/* batch confirm choice bar */
.batch-choice{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1 1 100%;
  margin-top:2px;padding:9px 11px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-m)}
.batch-choice-q{font-size:12.5px;color:var(--txt-1);flex:1 1 auto;min-width:200px;line-height:1.4}
/* a card currently in the batch-generate queue */
.sheet-card.batch-on{outline:2px solid var(--pos);outline-offset:2px;border-radius:var(--r-l)}
.prop-delete{display:inline-flex;align-items:center;gap:6px;margin-top:4px;align-self:flex-start;
  background:transparent;border:0;color:var(--txt-3);font:500 11px var(--f-ui);cursor:pointer;padding:4px 2px}
.prop-delete:hover{color:var(--alert)}
.prop-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:54px 24px;color:var(--txt-2)}
.prop-empty .art-soon-ic{margin-bottom:6px}

/* appearance states (continuity) */
.state-actions{display:flex;gap:8px;margin:2px 0 10px}
.state-suggest-btn,.state-add-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;
  border-radius:var(--r-m);font:600 11.5px var(--f-ui);cursor:pointer;transition:.12s}
.state-suggest-btn{background:var(--accent);color:var(--ink-on-accent);border:0}
.state-suggest-btn:hover:not(:disabled){filter:brightness(1.08)}
.state-suggest-btn:disabled{opacity:.65;cursor:default}
.state-add-btn{background:var(--bg-4);color:var(--txt-1);border:1px solid var(--line-2)}
.state-add-btn:hover{background:var(--bg-5);color:var(--txt-0)}
.state-list{display:flex;flex-direction:column;gap:10px}
.state-row{display:flex;flex-direction:column;gap:8px;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:9px;padding:10px 11px}
.state-row.state-base{flex-direction:row;align-items:center;gap:9px;background:transparent;
  border-style:dashed;padding:8px 11px}
.state-base-lab{font-size:11.5px;color:var(--txt-2)}
.state-row-head{display:flex;align-items:center;gap:8px}
.state-vtag{flex:0 0 auto;font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.04em;
  color:var(--pos-ink);background:oklch(0.78 0.15 62 / .14);border:1px solid oklch(0.78 0.15 62 / .32);
  border-radius:4px;padding:2px 6px}
.state-vtag.base{color:var(--txt-2);background:var(--bg-4);border-color:var(--line-2)}
.state-label{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--txt-0)}
.state-ai-chip{flex:0 0 auto;font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.08em;
  color:oklch(0.78 0.11 230);background:oklch(0.6 0.13 230 / .14);border:1px solid oklch(0.6 0.13 230 / .35);
  border-radius:3px;padding:2px 5px}
.state-del{flex:0 0 auto;display:inline-flex;background:transparent;border:0;color:var(--txt-3);cursor:pointer;padding:3px}
.state-del:hover{color:var(--alert)}
.state-empty{font-size:11.5px;line-height:1.5;color:var(--txt-3);padding:2px 2px 4px;text-wrap:pretty}
.state-hint{display:flex;gap:6px;align-items:flex-start;font-size:10.5px;line-height:1.4;color:var(--txt-3);
  padding:1px 2px;text-wrap:pretty}
.state-hint svg{flex:0 0 auto;color:var(--neg-ink);margin-top:1px}

/* scene continuity panel (inspector) */
.cont-list{display:flex;flex-direction:column;gap:7px}
.cont-row{display:flex;align-items:center;gap:9px}
.cont-av{flex:0 0 auto;width:26px;height:26px;border-radius:var(--r-s);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:9.5px;font-weight:700;color:#fff;letter-spacing:.02em}
.cont-info{flex:1;min-width:0}
.cont-name{font-size:11.5px;font-weight:600;color:var(--txt-0);line-height:1.2}
.cont-state{font-size:10.5px;color:var(--txt-2);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cont-vtag{flex:0 0 auto;font-family:var(--f-mono);font-size:9.5px;font-weight:700;letter-spacing:.04em;
  color:var(--pos-ink);background:oklch(0.78 0.15 62 / .14);border:1px solid oklch(0.78 0.15 62 / .32);
  border-radius:4px;padding:2px 6px}
.cont-vtag.base{color:var(--txt-3);background:var(--bg-4);border-color:var(--line-2)}
.cont-warn{flex:0 0 auto;display:inline-flex;color:oklch(0.82 0.14 55);cursor:default}
.sheet-undrafted{display:flex;gap:8px;align-items:flex-start;background:var(--neg-soft);border:1px solid var(--neg-line);
  border-radius:9px;padding:9px 11px;font-size:11.5px;line-height:1.45;color:var(--txt-1);margin-top:2px}
.sheet-undrafted svg{flex:0 0 auto;color:var(--neg-ink);margin-top:1px}
.sheet-undrafted b{color:var(--txt-0)}
.sheet-gen-gate{display:flex;gap:7px;align-items:flex-start;margin-top:7px;padding:7px 10px;border-radius:var(--r-m);
  background:var(--bg-3);border:1px solid var(--line-2);font-size:11px;line-height:1.4;color:var(--txt-2)}
.sheet-gen-gate svg{flex:0 0 auto;color:var(--txt-3);margin-top:1px}
/* duplicate-prop warning bar */
/* duplicate-prop notice — neutral surface + a small amber accent (theme-aware, premium),
   the saturated-orange fill it used to have washed out in light mode */
.prop-dup-warn{display:flex;flex-direction:column;gap:9px;margin-top:8px;padding:11px 12px;border-radius:var(--r-l);
  background:var(--bg-3);border:1px solid var(--line-2);border-left:2px solid var(--pos)}
.prop-dup-head{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;line-height:1.45;color:var(--txt-1)}
.prop-dup-head > svg{flex:0 0 auto;margin-top:1px;color:var(--pos-ink)}
.prop-dup-head b{color:var(--txt-0);font-weight:600}
.prop-dup-cards{display:flex;gap:8px;flex-wrap:wrap}
.prop-dup-card{display:flex;flex-direction:column;gap:4px;width:88px}
.prop-dup-card img{width:88px;height:50px;object-fit:cover;border-radius:var(--r-s);border:1px solid var(--line-2);cursor:zoom-in;background:var(--bg-2)}
.prop-dup-noimg{width:88px;height:50px;border-radius:var(--r-s);border:1px dashed var(--line-3);display:grid;place-items:center;color:var(--txt-3);background:var(--bg-2)}
.prop-dup-name{font-size:10px;line-height:1.25;color:var(--txt-2);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.prop-dup-acts{display:flex;gap:8px;flex-wrap:wrap}
.prop-extract-review{margin:0 0 24px;padding:20px;border:1px solid var(--pos-line);border-radius:var(--r-l);background:var(--bg-2);color:var(--txt-1)}
.prop-extract-heading,.prop-review-actions,.prop-review-item-head{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
.prop-extract-heading>div{flex:1;min-width:220px}
.prop-extract-review h3{margin:0;font-size:18px;color:var(--txt-0)}
.prop-extract-review p{font-size:12px;line-height:1.55;margin:8px 0}
.prop-review-actions{position:sticky;top:0;z-index:2;padding:12px;margin:12px 0;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-l);font-size:12px}
.prop-review-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr));gap:12px}
.prop-review-item{min-width:0;padding:14px;border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--bg-1)}
.prop-review-item.skipped{border-style:dashed}
.prop-review-item-head>input{width:100%;min-width:0;border:0;border-bottom:1px solid var(--line-2);padding:8px 0;background:transparent;color:var(--txt-0);font:600 14px var(--f-ui)}
.prop-review-item-head select{width:100%;max-width:100%}
.prop-review-item summary,.prop-content-fields summary{cursor:pointer;padding:8px 0;font-size:12px;color:var(--txt-1)}
.prop-review-item blockquote,.prop-evidence blockquote{margin:8px 0;padding:8px 10px;border-left:2px solid var(--pos-line);font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.prop-review-item label{display:grid;gap:6px;font-size:11px}
.prop-review-item .prop-review-event-toggle{display:flex;align-items:center;gap:8px}
.prop-review-warning{font-size:12px;line-height:1.5;color:var(--pos-ink);padding:8px 0;overflow-wrap:anywhere}
.prop-extract-review input:focus-visible,.prop-extract-review select:focus-visible,.prop-extract-review summary:focus-visible{outline:2px solid var(--pos);outline-offset:3px}
@media(max-width:600px){.prop-extract-review{padding:12px}.prop-review-actions .art-draftall{width:100%}.prop-review-list{grid-template-columns:1fr}}
.prop-evidence{margin:2px 0 10px;padding:9px 10px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-2)}
.prop-evidence-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:600 9.5px var(--f-mono);letter-spacing:.07em;color:var(--txt-3)}
.prop-evidence-flag{flex-basis:100%;display:flex}
.prop-evidence-head svg{color:var(--pos-ink)}
.prop-evidence-summary{margin-left:auto;color:var(--txt-2);letter-spacing:0}
.prop-evidence-list{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.prop-evidence-row{display:grid;grid-template-columns:minmax(92px,auto) 1fr;gap:9px;align-items:start}
.prop-evidence-place{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.prop-evidence-loc{border:0;background:transparent;padding:1px 0;color:var(--pos-ink);font:600 10px var(--f-mono);text-align:left;cursor:pointer;white-space:nowrap}
.prop-evidence-loc:hover{text-decoration:underline}
.prop-evidence-kind{padding:1px 5px;border:1px solid var(--line-2);border-radius:var(--r-m);font:600 9px var(--f-mono);color:var(--txt-3);white-space:nowrap}
.prop-evidence-kind.exact{border-color:var(--pos-line);color:var(--pos-ink)}
.prop-evidence-quote{min-width:0;font-size:11px;line-height:1.4;color:var(--txt-1);font-style:normal}
.prop-evidence-more,.prop-evidence-none{margin-top:7px;font-size:10.5px;line-height:1.4;color:var(--txt-3)}
.prop-evidence details{margin-top:7px;border-top:1px solid var(--line);padding-top:6px}
.prop-evidence details > summary{color:var(--txt-2);font:600 9.5px var(--f-mono);cursor:pointer;
  list-style-position:inside}
.prop-evidence details[open] > summary{margin-bottom:6px;color:var(--txt-1)}
.prop-evidence mark{background:color-mix(in srgb,var(--pos) 18%,transparent);color:var(--txt-0);
  border-radius:3px;padding:0 2px}
.prop-evidence button{font-family:var(--f-ui)}
.prop-evidence details button{border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--bg-3);
  color:var(--txt-2);font-size:10px;padding:4px 7px;cursor:pointer}
.prop-evidence details button:hover{border-color:var(--line-3);color:var(--txt-0)}
.prop-origin-label{display:inline-flex;align-items:center;max-width:100%;padding:2px 6px;border:1px solid var(--line-2);
  border-radius:999px;background:var(--bg-3);color:var(--txt-3);font:700 9px/1.2 var(--f-mono);
  letter-spacing:.05em;text-transform:uppercase}
.prop-evidence-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.prop-evidence-jump{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;padding:2px 0;
  color:var(--pos-ink);font:600 10px var(--f-mono);cursor:pointer}
.prop-evidence-jump:hover{text-decoration:underline}
.prop-evidence-jump:focus-visible{outline:2px solid var(--pos);outline-offset:2px;border-radius:3px}
.prop-evidence-caution{display:flex;align-items:flex-start;gap:5px;margin-top:6px;color:var(--txt-2);
  font-size:10px;line-height:1.4}
.prop-evidence-caution svg{flex:0 0 auto;color:var(--pos-ink);margin-top:1px}
@media (max-width:520px){.prop-evidence-row{grid-template-columns:1fr;gap:2px}.prop-evidence-loc{white-space:normal}}
.prop-dup-merge{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:var(--r-m);cursor:pointer;
  border:1px solid transparent;background:var(--accent);color:var(--ink-on-accent);font-family:var(--f-ui);font-size:11.5px;font-weight:600;transition:.12s}
.prop-dup-merge:hover{filter:brightness(1.06)}
.prop-dup-merge svg{color:inherit}
.char-style-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 12px;padding:8px 11px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-3)}
.char-style-lab{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3)}
.char-style-lab svg{color:var(--pos-ink)}
/* render-style + pronoun dropdowns: a subtle bordered control like .prop-select,
   not the browser's default near-black select border */
.char-style-select,.char-pronoun-sel{box-sizing:border-box;background:var(--bg-2);border:1px solid var(--line-3);
  border-radius:var(--r-s);color:var(--txt-0);font:13px var(--f-ui);padding:0 9px;outline:none;cursor:pointer}
.char-style-select:focus,.char-pronoun-sel:focus{border-color:var(--pos)}
.char-style-select{flex:0 1 200px;height:30px;min-width:0}
/* keep the render-style dropdown + counter on the SAME line */
.char-style-pick{display:flex;align-items:center;gap:8px;flex:0 0 auto}
/* custom render-style dropdown (RenderStylePicker) — fixed-width trigger so the row never reflows;
   menu is portaled (position:fixed, set inline) to escape the card's overflow:hidden */
.rs-picker{position:relative;display:inline-flex;flex:0 0 auto}
.rs-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:200px;height:30px;padding:0 11px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-1);color:var(--txt-1);font-family:var(--f-ui);font-size:12.5px;cursor:pointer}
.rs-trigger:hover:not(:disabled){border-color:var(--line-3)}
.rs-picker.open .rs-trigger{border-color:var(--accent2,oklch(0.62 0.18 295))}
.rs-trigger:disabled{opacity:.6;cursor:default}
.rs-trigger-lab{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-caret{flex:0 0 auto;font-size:9px;color:var(--txt-3)}
/* Shrink-wraps to content (no empty space); the group ACCORDION keeps the height
   near-constant, and content past the cap scrolls on a thin scrollbar */
.rs-menu{min-width:220px;max-width:340px;max-height:min(380px,62vh);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--bg-2);border:1px solid var(--line-3);border-radius:var(--r-l);box-shadow:var(--shadow-pop);padding:6px;scrollbar-width:thin;scrollbar-color:var(--line-3) transparent}
.rs-menu::-webkit-scrollbar{width:6px}
.rs-menu::-webkit-scrollbar-track{background:transparent}
.rs-menu::-webkit-scrollbar-thumb{background:var(--line-3);border-radius:3px}
.rs-menu::-webkit-scrollbar-thumb:hover{background:var(--txt-3)}
.rs-group{border-radius:var(--r-m)}
.rs-group+.rs-group{margin-top:2px}
.rs-group-head{width:100%;display:flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--txt-3);
  border-radius:var(--r-m);padding:7px 8px;cursor:pointer;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;text-align:left}
.rs-group-head:hover{background:var(--bg-3);color:var(--txt-1)}
.rs-group.has-sel>.rs-group-head{color:var(--pos-ink)}
.rs-group-caret{width:10px;flex:0 0 auto;font-size:10px;line-height:1}
.rs-group-lab{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-group-count{flex:0 0 auto;font-size:9px;color:var(--txt-3);border:1px solid var(--line-2);border-radius:999px;padding:1px 5px;letter-spacing:0}
.rs-group-body{display:flex;flex-direction:column;gap:1px;margin:0 0 4px 0}
.rs-opt{display:flex;align-items:center;gap:8px;padding:5px 9px 5px 22px;border-radius:var(--r-s);cursor:pointer;font-size:11.5px;color:var(--txt-1);font-family:var(--f-ui)}
.rs-opt:hover{background:var(--bg-3)}
.rs-opt.sel{background:var(--bg-3);font-weight:600}
.rs-opt-lab{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-opt-del{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;color:var(--txt-3);border-radius:var(--r-s);cursor:pointer}
.rs-opt-del:hover{background:oklch(0.62 0.21 25 / .14);color:oklch(0.62 0.21 25)}
.camera-profile-picker{width:100%;display:flex}
.camera-profile-picker .rs-trigger{width:100%;height:34px;background:var(--bg-2);border-color:var(--line-3);border-radius:var(--r-m);font-size:12px}
.camera-profile-picker .rs-trigger-lab{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camera-profile-menu{max-height:min(420px,66vh)}
.camera-profile-menu .rs-opt{padding-left:12px;font-size:11.25px}
/* inline delete button — appears next to the trigger when a deletable style is selected */
.rs-sel-del{display:inline-flex;align-items:center;justify-content:center;width:26px;height:30px;border:1px solid var(--line-2);background:transparent;color:var(--txt-3);border-radius:var(--r-m);cursor:pointer;flex:0 0 auto}
.rs-sel-del:hover{background:oklch(0.62 0.21 25 / .12);border-color:oklch(0.62 0.21 25 / .5);color:oklch(0.62 0.21 25)}
.char-pronoun-sel{height:28px;flex:0 1 140px;font-family:var(--f-body);font-size:12.5px}
.char-style-busy{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--txt-2)}
.char-style-name{font-size:11px;color:var(--accent2,oklch(0.62 0.18 295));cursor:pointer;font-family:var(--f-ui)}
.char-style-name:hover{filter:brightness(1.1);text-decoration:underline}
/* lock a liked "Surprise me" style as a reusable named style */
.char-style-lock{font-size:11px;font-family:var(--f-ui);color:var(--txt-1);background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-m);padding:3px 8px;cursor:pointer;line-height:1;display:inline-flex;align-items:center;gap:4px}
.char-style-lock:hover{border-color:var(--accent2,oklch(0.62 0.18 295));color:var(--accent2,oklch(0.62 0.18 295))}
.char-style-locked{color:var(--txt-2)}
/* per-card global render-style counter (N/global cap) next to the render-style dropdown */
.char-style-count{font-size:10.5px;font-family:var(--f-mono);color:var(--txt-3);letter-spacing:.02em;padding:2px 0;white-space:nowrap;cursor:default}
/* "full" stays quiet grey — the count is information, not an alarm */
.char-style-count.full{color:var(--txt-3)}
.char-style-all{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 11px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-3)}
.char-style-all-lab{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);white-space:nowrap}
.char-style-all .char-style-select{flex:0 0 auto;width:172px;height:28px}
/* global toast — surfaces AI/provider errors (depleted credits, missing key, transport) */
#turn-toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:99999;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;max-width:min(560px,92vw)}
.turn-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:9px;padding:11px 12px 11px 13px;border-radius:var(--r-l);background:#2a2622;color:#f4efe9;box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.08);font-size:13px;line-height:1.4;animation:turn-toast-in .18s ease-out}
.turn-toast.err{background:#3a2420;color:#ffd9cf;box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 0 1px rgba(220,90,60,.4)}
.turn-toast.ok{background:#1f2e24;color:#cfeede}
.turn-toast.out{opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
.turn-toast-ic{flex:0 0 auto;opacity:.9}
.turn-toast-msg{flex:1;min-width:0;word-break:break-word}
.turn-toast-x{flex:0 0 auto;appearance:none;border:0;background:transparent;color:inherit;opacity:.6;cursor:pointer;font-size:12px;padding:0 2px}
.turn-toast-x:hover{opacity:1}
@keyframes turn-toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* model badges — the agent panel header + the New Story window (Writers' Room = Claude) */
.ag-runner-name{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
/* the model chip reads the same in New Story (a picker) and in an agent run (a label): an outlined
   amber-tinted pill — it was a solid amber fill in one and an outline in the other (2026-09-29) */
.ag-runner-model,.ns-model-badge{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt-1);background:color-mix(in oklab,var(--bg-3),var(--accent) 10%);border:1px solid var(--accent-line);
  padding:3px 10px;border-radius:999px;white-space:nowrap}
.ns-model-badge{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  transition:filter .12s,box-shadow .12s}
.ns-model-badge:hover{border-color:var(--accent);color:var(--txt-0)}
.ns-model-badge:focus-within{box-shadow:0 0 0 2px var(--bg-2),0 0 0 4px var(--pos-line,var(--pos))}
.beat-build-btn{display:inline-flex;align-items:center;gap:6px;margin:0 0 12px;padding:6px 11px;border-radius:var(--r-m);
  border:1px solid var(--line-3);background:transparent;color:var(--txt-2);font-family:var(--f-ui);font-size:11.5px;font-weight:500;cursor:pointer;transition:.12s}
.beat-build-btn:hover:not(:disabled){background:var(--bg-3);color:var(--txt-1)}
.beat-build-btn:disabled{opacity:.55;cursor:default}
/* the tab's PRIMARY action ("Rebuild from script") — same chip language as the
   inspector's other action buttons (char-draft-btn), no more camouflage */
.beat-build-btn.primary{border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-1);font-weight:600}
.beat-build-btn.primary svg{color:var(--pos-ink)}
.beat-build-btn.primary:hover:not(:disabled){background:var(--bg-4);color:var(--txt-0)}
.brief-modal{max-width:760px}
.brief-pre{white-space:pre-wrap;word-break:break-word;font-family:var(--f-body);font-size:13.5px;line-height:1.6;color:var(--txt-1)}
.brief-empty{padding:18px 20px;color:var(--txt-2);font-size:13.5px;line-height:1.6}
.brief-empty-lab{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);margin-bottom:4px}
.brief-empty-log{color:var(--txt-1);font-size:15px;line-height:1.5;margin:0 0 14px}
.brief-empty-note{color:var(--txt-3);font-size:12.5px}
.char-phys{display:flex;flex-direction:column;margin:0 0 4px}
.phys-row{display:flex;align-items:flex-start;gap:10px;padding:5px 0;border-bottom:1px solid var(--line)}
.phys-row:last-child{border-bottom:0}
.phys-lab{flex:0 0 116px;padding-top:4px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3)}
.phys-row .edit-in{flex:1;min-width:0;font-size:12.5px;color:var(--txt-1);line-height:1.45;
  background:transparent;border:1px solid transparent;border-radius:var(--r-s);padding:3px 6px;margin:-3px -6px;font-family:var(--f-body);transition:.12s}
.phys-row textarea.edit-in{resize:none;overflow:hidden;display:block}
.phys-row .edit-in:hover{background:var(--bg-3)}
.phys-row .edit-in:focus{background:var(--bg-4);border-color:var(--line-3);outline:none}
.sheet-rationale{display:flex;gap:7px;align-items:flex-start;font-size:11px;line-height:1.45;color:var(--txt-2);
  font-style:italic;padding:2px 2px 0}
.sheet-rationale svg{flex:0 0 auto;color:var(--pos-ink);margin-top:2px}
.sheet-props-note{display:flex;gap:7px;align-items:flex-start;font-size:11px;line-height:1.45;
  color:var(--txt-3);padding:0 2px 4px}
.sheet-props-note svg{flex:0 0 auto;color:var(--txt-3);margin-top:2px}

.copybox{border:1px solid var(--line);border-radius:9px;background:var(--bg-2);overflow:hidden;margin-top:2px}
.copybox-head{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-bottom:1px solid var(--line)}
.copybox-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3)}
.copybox-btn{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--pos-ink);
  font-family:var(--f-ui);font-size:11px;font-weight:600;cursor:pointer;padding:2px 4px;border-radius:5px}
.copybox-btn:hover{background:var(--pos-soft)}
.copybox-actions{display:inline-flex;align-items:center;gap:2px}
.copybox-text{padding:9px 11px;font-family:var(--f-mono);font-size:11px;line-height:1.55;color:var(--txt-1);
  white-space:pre-wrap;max-height:130px;overflow-y:auto;cursor:zoom-in}
/* full-prompt preview modal (opens from the copybox Preview button or clicking the text) */
.copybox-modal{width:min(760px,94vw);max-height:86vh;display:flex;flex-direction:column;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-l);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.copybox-modal-head{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)}
.copybox-modal-lab{font-family:var(--f-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-2);flex:1;min-width:0}
.copybox-modal-count{font-family:var(--f-mono);font-size:10px;color:var(--txt-3);white-space:nowrap}
.copybox-modal-x{display:inline-flex;border:0;background:transparent;color:var(--txt-3);cursor:pointer;padding:3px;border-radius:var(--r-s)}
.copybox-modal-x:hover{background:var(--bg-3);color:var(--txt-1)}
.copybox-modal-body{padding:16px 18px;overflow-y:auto;white-space:pre-wrap;
  font-family:var(--f-mono);font-size:12.5px;line-height:1.62;color:var(--txt-1)}

.art-soon{flex:1;min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  text-align:center;padding:40px}
.art-soon-ic{width:64px;height:64px;border-radius:var(--r-l);display:grid;place-items:center;background:var(--bg-2);
  border:1px solid var(--line);color:var(--txt-2)}
.art-soon-t{font-family:var(--f-serif);font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--txt-0)}
.art-soon-d{font-size:13px;line-height:1.6;color:var(--txt-2);max-width:440px}
.art-soon-tag{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--pos-ink);
  border:1px solid var(--pos-line);border-radius:20px;padding:4px 11px;margin-top:4px}

@media (max-width:640px){
  .room-btn-t{display:none}
  .sheet-grid{grid-template-columns:1fr}
  .sheet-card{flex-direction:column}
  /* The compact ROW layout is ONLY for the empty REFERENCE state (a 120px slot
     with the Generate button beside it). Once a sheet is GENERATED the frame
     MUST stay a column — otherwise the 16:9 image, the Regenerate button and the
     caption are flexed into horizontal slivers and Regenerate becomes untappable
     (this is the "can't regenerate props on mobile" bug). Gate on :has(genwrap). */
  .sheet-frame{border-right:0;border-bottom:1px solid var(--line)}
  /* …and ONLY for the small 120px character/prop reference slots — every OTHER
     empty frame keeps a full-width 16:9 slot (location plates & time-of-day
     variants, appearance states, lookbook refs), so forcing those into a row
     crushed slot + Generate + Upload into one line with the absolutely-positioned
     \u22ef menu overlapping them (the mobile location-variant bug). Gate the row
     POSITIVELY on the two slots it was designed for. */
  .sheet-frame:has(image-slot[id^="charref-"]):not(:has(.sheet-genwrap)):not(:has(.sheet-dropzone)),
  .sheet-frame:has(image-slot[id^="propref-"]):not(:has(.sheet-genwrap)):not(:has(.sheet-dropzone)){flex:0 0 auto;flex-direction:row;align-items:center}
  image-slot[id^="charref-"], image-slot[id^="propref-"]{height:120px;width:120px;flex:0 0 120px;aspect-ratio:auto}
  .sheet-frame:has(image-slot[id^="charref-"]):not(:has(.sheet-genwrap)):not(:has(.sheet-dropzone)) .sheet-frame-cap,
  .sheet-frame:has(image-slot[id^="propref-"]):not(:has(.sheet-genwrap)):not(:has(.sheet-dropzone)) .sheet-frame-cap{margin-top:0;margin-left:12px}
  /* …and in that compact ROW layout the ⋮ options button leaves its absolute perch
     (frame top-right = on top of the caption text) and joins the row's flex flow at
     the far right — its dropdown still anchors to the button itself. */
  .sheet-frame:has(image-slot[id^="charref-"]):not(:has(.sheet-genwrap)):not(:has(.sheet-dropzone)) .sheet-gen-tools,
  .sheet-frame:has(image-slot[id^="propref-"]):not(:has(.sheet-genwrap)):not(:has(.sheet-dropzone)) .sheet-gen-tools{
    position:static;order:9;margin-left:auto;flex:0 0 auto}
  .beat-card-grid{grid-template-columns:1fr}
  /* Shots tab scene header: title/meta keep the full first row, the action
     buttons wrap onto their own full-width row (they were crushing the meta) */
  .shot-scene-head{flex-wrap:wrap;gap:10px}
  .shot-scene-meta{flex:1 1 0;min-width:0}
  /* order keeps the merged navigator's ‹ › arrows flanking the meta on row 1;
     the action buttons drop to their own full-width row below */
  .shot-scene-acts{flex:1 1 100%;order:3}
  .shot-scene-acts>*{flex:1 1 auto;justify-content:center}
  .art-scroll{padding:18px 14px 50px}
}

/* density variants */
.dens-compact{--pad:11px;--rail-w:348px;--insp-w:348px}
.dens-comfy{--pad:20px;--rail-w:410px;--insp-w:410px}

/* ============================================================
   RESPONSIVE — tablet & mobile
   rail (and on mobile, inspector) become slide-in overlay drawers.
   ============================================================ */
.scrim{position:fixed;inset:52px 0 0 0;background:rgba(0,0,0,.55);z-index:55;animation:scrimIn .2s ease}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
@keyframes agslide{from{transform:translateY(6px)}to{transform:none}}
@keyframes drawerL{from{transform:translateX(-100%)}to{transform:none}}
@keyframes drawerR{from{transform:translateX(100%)}to{transform:none}}

/* rail as a drawer on mobile only — on tablet it docks in-flow (pushes the
   canvas, sits below the view-nav) exactly like the inspector, so it never
   overlays the hero nav. */
.app.vp-mobile .rail{
  position:fixed;top:52px;left:0;bottom:0;z-index:60;width:min(92vw,400px);
  box-shadow:var(--shadow-pop);animation:drawerL .22s cubic-bezier(.2,.8,.2,1);
}
/* inspector as a drawer on mobile only */
.app.vp-mobile .inspector{
  position:fixed;top:52px;right:0;bottom:0;z-index:60;width:min(92vw,400px);
  box-shadow:var(--shadow-pop);animation:drawerR .22s cubic-bezier(.2,.8,.2,1);
}

/* ---- bottom nav + overflow + context: defaults (desktop, hidden/idle) ---- */
.overflow-wrap{position:relative;display:none}
/* ⋯ entries for top-bar buttons a phone hides (Story brief, Team): the Art Room shows this
   menu at every width, beside those buttons, so they show only at ≤700px (2026-09-28) */
.export-menu .export-item.ovf-phone{display:none}
.bottom-nav{display:none}
.context-group{display:flex;align-items:center;gap:14px;min-width:0}
/* zones must never let their CHILDREN spill into the centred nav, but their
   dropdown menus (room/project switchers) MUST be able to escape downward —
   so clip the inner text, never the zone itself (overflow:hidden on tb-left
   would clip the absolutely-positioned menus and make the switchers look dead). */
.tb-left{overflow:visible;min-width:0}
.tb-right{overflow:visible}
.room-btn,.proj-btn{min-width:0}
.room-btn-name,.room-btn-phase{overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   MEDIUM / LAPTOP (1100–1360px) — the bar is too tight for full
   labels but panels are still docked, so we compact the bar
   IN PLACE (icons, no subtitle) rather than dropping a bottom
   bar. This is the band that was overlapping before.
   ============================================================ */
@media (max-width:1360px){
  .topbar{gap:10px}
  .tb-left{gap:10px}
  .tb-right{gap:10px}
  .room-btn-phase{display:none}                 /* drop the DEVELOPMENT subtitle */
  .room-btn{height:32px}
  .seg{gap:0;padding:6px 9px}                    /* view nav → icons only */
  .seg .seg-lab{display:none}
  .seg svg{opacity:.9}
  .tb-btn:not(.accent){font-size:0;gap:0;padding:0 11px}   /* Export → icon */
  .tb-btn:not(.accent) svg{opacity:1}
  .proj-btn .proj-name{max-width:128px}
}

/* tighter still (1100–1220px) — accent CTA sheds its label too */
@media (max-width:1220px){
  .tb-btn.accent{font-size:0;gap:0;padding:0 12px}
  .tb-btn.accent svg{opacity:1}
  .proj-btn .proj-name{max-width:104px}
}

/* ============================================================
   COMPACT MODE (<=1100px) — panels are drawers, the view-nav
   moves to a fixed bottom bar, actions shed their labels. This
   is the band that was crowded before; now the bar truly fits.
   ============================================================ */
@media (max-width:1100px){
  .proj-meta{display:none}
  .legend{gap:10px}
  .legend-item{font-size:9.5px}

  .topbar{gap:10px;padding:0 14px}
  .tb-left{gap:10px;min-width:0}
  .tb-right{gap:10px}
  .room-btn-phase{display:none}                  /* trim context to one line */
  .room-btn{height:32px}
  .proj-btn .proj-name{max-width:104px}
  .tb-btn{font-size:0;gap:0;padding:0 11px}       /* New Story / Export / Writers' Room: icons only */
  .tb-btn svg{opacity:1}

  /* view nav now rides in a top bar (.viewnav) — no fixed bottom bar to clear */
  .canvas-scroll,.rail-scroll,.script-scroll,.sheet-scroll{padding-bottom:24px}
}

/* ---- condensed chrome (<=900px) ---- */
@media (max-width:900px){
  .topbar{gap:8px;padding:0 12px}
  .topbar-divider{display:none}
  /* the mark alone from here down (the phone rule already did this ≤700): the Kinolot lockup is
     wider than the old wordmark, and at 701–900 it pushed the film + room chips under Appearance
     and Team. The Home button keeps its aria-label "Kinolot — Home" (review 2026-09-29). */
  .topbar .brand-name{display:none}
  .canvas-head{padding:12px 16px 0}
  /* the colour key hides, but the film's estimated total runtime (the one legend item with
     no swatch) stays on tablets and phones (2026-09-28) */
  .legend-item:has(> .legend-swatch){display:none}
  .canvas-scroll{padding:8px 14px 24px}
}

/* tablet top bar (701–900): the right-hand buttons keep their size and the film chip yields —
   its title ellipsizes — so the room chip can't slide under Appearance / Team at 701–770px
   (the two zones were equal halves, but there is no centre group left to balance) */
@media (min-width:701px) and (max-width:900px){
  .tb-right{flex:0 0 auto}
  .tb-left .proj-wrap{display:flex;min-width:0}
}

/* ---- mobile (<=700px, matches the vp hook) — true phone compaction ---- */
@media (max-width:700px){
  .topbar{height:50px;flex:0 0 50px;padding:0 8px;gap:6px}
  .scrim{inset:50px 0 0 0}
  .app.vp-mobile .rail{top:50px}
  .app.vp-mobile .inspector{top:50px}
  .topbar .brand-name{display:none}               /* glyph only — the TOP BAR's; the welcome card keeps its wordmark */
  .tb-btn:not(.accent){display:none}              /* New Story, Export, Brief, Team → overflow kebab */
  .overflow-wrap{display:block}
  .export-menu .export-item.ovf-phone{display:flex}
  /* the Story panel drawer covers the MUSE bubble's corner too (2026-09-28) */
  .app.vp-mobile .rail-scroll{padding-bottom:var(--muse-clear)}
  .avatar{display:none}

  /* merged context control: room + film read as one pill.
     NOTE: overflow MUST stay visible — the room switcher's dropdown is an
     absolutely-positioned child and overflow:hidden here clips it off-screen,
     making "switch screens" look broken on mobile. Round the children instead. */
  .room-btn-t{display:none}                        /* room: icon only */
  .context-group{gap:0;background:var(--bg-3);border:1px solid var(--line-2);border-radius:9px;overflow:visible}
  .context-group .room-switch{display:flex;border-left:1px solid var(--line-2)}
  .context-group .room-btn{border:0;border-radius:0 9px 9px 0;background:none;height:30px;padding:0 8px}
  .context-group .proj-wrap{min-width:0;flex:0 0 auto}
  /* film switcher: icon only on mobile (match the room switcher) — hide the
     film NAME to stay compact, but KEEP the chevron. Without it the switcher
     was a bare glyph with no dropdown affordance and users couldn't tell it
     was the project switcher at all. */
  .context-group .proj-btn{border:0;border-radius:9px 0 0 9px;background:none;height:30px;padding:0 7px;gap:3px;max-width:none;min-width:0}
  .context-group .proj-btn .proj-name{display:none}
  .context-group .proj-btn>svg:last-child{display:block;opacity:.65}
  /* keep the dropdown on-screen: anchor near the left edge, cap to viewport width */
  /* …pinned to the viewport like the film menu below, at the desktop width (304px): anchored to the
     mid-bar switcher it could only be ~220px wide, and "The Art Room" / "The Stage" stacked on three
     lines beside a "Needs a story" chip (review 2026-09-29) */
  .context-group .room-menu{position:fixed;top:54px;left:8px;right:auto;
    min-width:0;width:min(304px,calc(100vw - 16px));max-width:calc(100vw - 16px)}
  /* the film switcher's menu had min-width:250 and NO width cap, so it ran off
     the right edge and the user couldn't see it. The switcher sits mid-bar, so
     a 250–280px menu can't fit a phone if anchored to it — pin the menu to the
     viewport (fixed, just under the topbar) and cap it to the screen. */
  .context-group .proj-menu{position:fixed;top:54px;left:8px;right:auto;
    min-width:0;width:min(300px,calc(100vw - 16px));max-width:calc(100vw - 16px)}
}

/* ---- mobile content reflow (<=640px) ---- */
@media (max-width:640px){
  /* SCRIPT: the page grid really stacks — the old rule set flex-direction on
     .sp-seg, but .sp-seg is display:contents (the columns live on .script-body's
     grid), so the script column stayed squeezed to half a phone. One column now:
     each beat's gutter renders as a header strip above its script text. */
  .script-body{grid-template-columns:1fr}

  /* ART ROOM toolbars: rows wrap, selects never run off the right edge */
  .art-intro{margin-bottom:16px}
  .art-intro-row{flex-wrap:wrap;gap:10px}
  .art-intro-t{font-size:20px;line-height:1.2;margin-bottom:4px}
  .art-intro-actions{
    display:grid;
    /* one full-width button per row: two columns broke the labels onto two lines ("Extract screenplay / props") */
    grid-template-columns:minmax(0,1fr);
    width:100%;
    gap:8px;
    align-items:stretch;
    justify-content:stretch;
  }
  .art-intro-actions > button,
  .art-intro-actions > .art-draftall{
    min-width:0;
    width:100%;
    height:38px;
    padding-inline:10px;
    justify-content:center;
  }
  .art-intro-actions > .rd-compact{
    justify-self:start;
    align-self:center;
  }
  /* World Scale is read-only. Its label and value get their own row so its
     select never squeezes the primary location actions off a phone. */
  .art-intro-actions > .char-style-all{
    grid-column:1 / -1;
    width:100%;
    max-width:none;
    min-width:0;
    min-height:38px;
    height:38px;
    flex-wrap:nowrap;
    padding:4px 9px;
  }
  .art-intro-actions > .char-style-all .char-style-select{
    flex:1 1 auto;
    width:auto;
    min-width:0;
    max-width:100%;
  }
  .prop-toolbar{flex-wrap:wrap}
  .prop-scenebar{flex-wrap:wrap}
  .prop-scenebar-select{flex:1 1 100%;min-width:0;max-width:100%}
  .char-style-all{max-width:100%;flex-wrap:wrap;height:auto;min-height:36px;padding:6px 11px}
  /* SPECIFICITY FIX: the desktop toolbar pins these rows to ONE 42px line via
     .prop-toolbar > … (0-2-0), which silently beat the un-nested wrap overrides
     above — so the "Focus a scene" row (label + select + Generate-all button)
     could never wrap and forced the whole Art Room wider than a phone screen;
     the page then panned/zoomed out with every row clipped at both edges.
     Match the specificity and let the toolbar rows wrap and grow. */
  .prop-toolbar > .prop-scenebar{flex-wrap:wrap;height:auto;min-height:42px;padding:8px 13px}
  .prop-toolbar > .prop-scenebar .art-draftall{max-width:100%;min-width:0}
  .prop-toolbar > .char-style-all{height:auto;min-height:42px;flex-wrap:wrap;padding:6px 11px}
  .prop-toolbar > .char-style-all .char-style-select{flex:1 1 auto;width:auto;min-width:0;max-width:100%}
  /* belt & braces: whatever else grows, the room must never pan sideways */
  .artroom{overflow-x:hidden}

  /* the floating model dock (GPT · 16:9 · 2K) sat mid-screen over card
     actions on a phone — drop it to the lower right, clear of the MUSE fab */
  .nb-dock{top:auto;bottom:150px;transform:none;right:10px}
  .write-dock{top:auto;bottom:252px;transform:none;right:10px}

  .canvas-head{padding:12px 14px 0}
  .canvas-head-copy{flex:1 1 auto}
  .canvas-title{font-size:20px}
  .canvas-sub{font-size:10px;white-space:normal;overflow-wrap:anywhere}
  .canvas-scroll{padding:8px 12px 80px}

  .audit-tablewrap{display:none}
  .audit-mobile-list{display:grid;gap:8px}
  .audit-mobile-card{
    width:100%;text-align:left;border:1px solid var(--line);border-radius:var(--r-m);
    background:var(--bg-2);padding:12px;display:grid;gap:8px;cursor:pointer;
  }
  .audit-mobile-card.sel{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--pos-line)}
  .audit-mobile-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .audit-mobile-no{
    font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--txt-3)
  }
  .audit-mobile-title{
    font-family:var(--f-display);font-size:14px;font-weight:600;line-height:1.2;color:var(--txt-0)
  }
  .audit-mobile-meta{
    font-family:var(--f-mono);font-size:9.5px;line-height:1.35;letter-spacing:.04em;color:var(--txt-3)
  }
  .audit-mobile-charge{display:flex;align-items:center;gap:6px}
  .audit-mobile-arrow{display:flex;color:var(--txt-3)}
  .audit-mobile-shift{font-size:12px;line-height:1.35;color:var(--txt-1)}

  /* WRITERS' ROOM editors reflow: the Beats tab's drive/react two-column grid
     stacks on a phone. The opening/closing charge boxes stay SIDE BY SIDE like
     desktop (user ruling 2026-07-19) — the cells flex-shrink instead. */
  .beat-edit-cols{grid-template-columns:1fr}
  .beat-labels{grid-template-columns:1fr}

  /* MUSE + tweaks as bottom sheets */
  .ai-fab{right:12px}
  .ai-panel{right:8px;left:8px;width:auto;bottom:8px;max-height:74vh}

  /* script view fluid */
  .script-head{flex-direction:column;align-items:stretch;gap:10px;padding:14px 14px 0}
  /* toolbar groups stack as TWO centered lines on phones, each keeping the exact
     desktop look (housed strip / Redraft + pager); group A scrolls if ever wider.
     "Redraft N out-of-date" (.st-group.r), when shown, is a third line between them. */
  .script-tools{flex-direction:column;align-items:center;gap:8px}
  .st-group{max-width:100%}
  /* on phones the Redraft button GLUES to the pager in one housed strip, and the
     pager arrows stay smaller than their 32px container (user ruling 2026-07-19) */
  .st-group.b{gap:0;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-3);overflow:hidden;align-items:stretch}
  .st-group.b>*{height:32px;border:0;border-radius:0}
  .st-group.b>*+*{border-left:1px solid var(--line-2)}
  .st-group.b .script-scenestep{border:0;border-radius:0;background:transparent}
  .st-group.b .script-scenestep .panel-collapse{width:22px;height:22px;min-width:22px;min-height:22px;align-self:center}
  .script-scroll{padding:0 12px 30px}
  /* story-state ledger: label centered on its own row, cells share ONE line */
  .sp-carry{justify-content:center}
  .sp-carry .clab2{justify-content:center}
  .sp-carry .cell{flex:1 1 0;min-width:0}
  .sp-seg{flex-direction:column}
  .sp-gut{width:auto;flex:0 0 auto;flex-direction:row;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line);border-right:0}
  .sp-gut .bsub{margin-left:auto}
  .sp-page{padding:16px 14px}
  .cont-report,.cont-inline,.polish-note,.tier-seg{max-width:100%}
  .script-body{margin:0}

  /* board: columns stack-scroll comfortably */
  .scard{user-select:none}
}

/* coarse-pointer niceties (touch) */
@media (pointer:coarse){
  .step-btn,.bx,.ver-btn,.ai-x,.panel-collapse{min-width:32px;min-height:32px}
  .seg{min-height:34px}
}

/* ============================================================
   PREMIUM POLISH  (gated on .app.premium — toggleable tweak)
   Depth & light · motion · refined surfaces. Additive only.
   ============================================================ */
.app.premium{
  --spring:cubic-bezier(.34,1.3,.5,1);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* deeper, atmospheric canvas — a faint center-vignette + dot wash */
.app.premium .canvas,
.app.premium .artroom{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.025), transparent 60%),
    radial-gradient(100% 100% at 50% 120%, oklch(0.72 0.10 232 / .05), transparent 55%),
    var(--bg-0);
}
.app.premium .canvas::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px, transparent .5px);
  background-size:26px 26px;opacity:.025;
  -webkit-mask-image:radial-gradient(110% 80% at 50% 40%, #000 30%, transparent 75%);
          mask-image:radial-gradient(110% 80% at 50% 40%, #000 30%, transparent 75%);
}

/* raised surfaces get a top rim-light + softer, longer shadow */
.app.premium .topbar{
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -16px rgba(0,0,0,.8);
}
.app.premium .rail,
.app.premium .inspector{
  background:linear-gradient(180deg, color-mix(in oklab, var(--bg-1), #fff 1.5%), var(--bg-1));
}
.app.premium .rail{box-shadow:1px 0 0 rgba(255,255,255,.03) inset}
.app.premium .inspector{box-shadow:-1px 0 0 rgba(255,255,255,.03) inset}

/* card surfaces — rim light up top, gradient hairline border, soft float */
.app.premium .scard,
.app.premium .idea-card,
.app.premium .sheet-card,
.app.premium .ag-card,
.app.premium .char-arc-card,
.app.premium .copybox,
.app.premium .beatgrid,
.app.premium .verdict{
  background-image:linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 10px 30px -18px rgba(0,0,0,.7);
}

/* floating menus / modals — richer elevation + crisp top rim */
.app.premium .export-menu,
.app.premium .room-menu,
.app.premium .ag-panel,
.app.premium .ai-panel,
.app.premium .agent-undo{
  background-image:linear-gradient(180deg, rgba(255,255,255,.045), transparent 30%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 24px 60px -20px rgba(0,0,0,.82),
    0 2px 10px rgba(0,0,0,.5);
}

/* spring-y, lifting interactions */
.app.premium .scard,
.app.premium .ag-card,
.app.premium .char-scene-row,
.app.premium .tb-btn,
.app.premium .ia-btn,
.app.premium .room-item,
.app.premium .export-item{
  transition:transform .22s var(--spring), background .15s var(--ease),
             border-color .15s var(--ease), box-shadow .22s var(--ease);
}
.app.premium .ag-card:hover{transform:translateY(-2px)}
/* room-menu rows are list items in a dropdown — a hover lift reads as a jump there,
   so they keep only the background/border transitions */
.app.premium .tb-btn:hover,
.app.premium .ia-btn:hover:not(:disabled){transform:translateY(-1px)}

/* primary accent button — subtle gloss + glow so it reads as the one hero action */
.app.premium .tb-btn.accent,
.app.premium .ag-run:not(.ghost):not(.stop),
.app.premium .ag-btn.primary,
.app.premium .draft-btn:not(.ghost){
  background-image:linear-gradient(180deg, rgba(255,255,255,.18), transparent);
  box-shadow:0 2px 12px -2px var(--pos-line), 0 1px 0 rgba(255,255,255,.25) inset;
}
.app.premium .tb-btn.accent:hover{box-shadow:0 4px 18px -2px var(--pos-line), 0 1px 0 rgba(255,255,255,.3) inset}

/* selected scene card — luminous edge instead of flat ring */
.app.premium .scard.sel{
  box-shadow:
    0 0 0 1px var(--pos-line) inset,
    0 0 22px -6px var(--pos-line),
    0 10px 30px -18px rgba(0,0,0,.7);
}
/* Board cards are fully rounded with no square top to cap, so the selection is a
   solid 2px ring that hugs every corner (keeping the premium glow + lift). */
.app.premium .board-pan .scard.sel{
  box-shadow:
    0 0 0 2px var(--pos) inset,
    0 0 22px -6px var(--pos-line),
    0 10px 30px -18px rgba(0,0,0,.7);
}

/* the hero value-charge graph — soft bloom on the spine line + nodes */
.app.premium .graph-svg .spine-line{ filter:url(#spineGlow); }
.app.premium .graph-svg .spine-node{ filter:drop-shadow(0 0 5px var(--pos-line)); }

/* refined focus ring */
.app.premium .edit-in:focus,
.app.premium .insp-select:focus,
.app.premium .ai-input input:focus,
.app.premium .ag-input:focus{
  box-shadow:0 0 0 3px oklch(0.78 0.15 62 / .14);
  border-color:var(--pos-line);
}

/* segmented control — inset well + glossy active pill */
.app.premium .segmented,
.app.premium .theme-seg,
.app.premium .tier-seg{
  box-shadow:0 1px 2px rgba(0,0,0,.35) inset;
}
.app.premium .seg.on{
  background-image:linear-gradient(180deg, rgba(255,255,255,.08), transparent);
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.08) inset;
}

/* gentle settle-in for the score graph + cards on first paint */
@media (prefers-reduced-motion: no-preference){
  .app.premium .filmstrip .scard{ animation:premiumRise .5s var(--spring) both; }
  .app.premium .filmstrip .scard:nth-child(2){animation-delay:.03s}
  .app.premium .filmstrip .scard:nth-child(3){animation-delay:.06s}
  .app.premium .filmstrip .scard:nth-child(4){animation-delay:.09s}
}
@keyframes premiumRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===================== Commercial landing page (signed-out) =====================
   A paper editorial page: near-black ink, a hairline-framed content column, light
   rounded cards, and the app's own controls (9px-radius buttons, amber primary).
   Always paper, whatever the app theme — it is the front door, not a room. */

/* ---- WEBSITE PALETTE — "Paper & Ink" + the Kinolot amber (identity pass 2026-09-29) ----
   ONE token set for the three website surfaces: the landing, the paper sign-in panel
   (.auth-panel.light) and Home (.hd-root, which re-points it at the dark app tokens in the
   dark theme). The only colour is the amber of the mark's middle bay — the app's --accent —
   used as a FILL with dark ink (the app's primary button), never as small text on paper,
   where it is too light: text uses --lpw-amber-ink (AA) or, at display sizes, --lpw-amber-display.
   The hero spine wears the app's value-charge grade: amber rises, teal falls. */
.landing, .auth-panel.light, .hd-root{
  --lpw-bg:#FCFCFB;            /* Paper — the page */
  --lpw-glass:rgba(252,252,251,.86);  /* Paper, frosted — sticky nav / top bar */
  --lpw-surface:#FFFFFF;       /* White — secondary buttons, inputs, plan cards */
  --lpw-card:#F6F6F4;          /* Bone — card fill */
  --lpw-card-2:#F1F1EE;        /* Bone, pressed — hovers */
  --lpw-line:#E8E8E5;          /* Hairline — page grid & rules */
  --lpw-line-2:#E1E1DD;        /* Hairline, firm — control borders */
  --lpw-line-3:#D6D6D1;        /* Hairline, hover */
  --lpw-ink:#0F1012;           /* Ink — headlines & primary text */
  --lpw-ink-2:#3C3F44;         /* Ink, soft — list/body text on white */
  --lpw-sub:#5D6066;           /* Slate — secondary text (6.1:1 on paper) */
  --lpw-black:#0E0F12;         /* Carbon — the app icon's tile: the spine frame, the featured plan */
  --lpw-amber:#F29A43;         /* the mark's amber = the app's --accent — fills only */
  --lpw-amber-hover:#E88A33;
  --lpw-on-amber:#2C2722;      /* ink on the amber fill = the app's --ink-on-accent (6.7:1) */
  --lpw-amber-soft:rgba(242,154,67,.14);
  --lpw-amber-line:rgba(242,154,67,.5);
  --lpw-amber-ink:#9E5410;     /* amber as small text / icons on paper (5.2:1 on Bone) */
  --lpw-amber-display:#C56C0C; /* amber as display text, 24px and up (3.7:1 on paper) */
  --lpw-rise:#F29A43;          /* value charge on Carbon — the app's amber (+) */
  --lpw-fall:#5DB0D8;          /* …and its teal (−), oklch(0.72 0.10 232) */
}
.landing{position:fixed;inset:0;overflow-y:auto;z-index:40;scroll-behavior:smooth;
  background:var(--lpw-bg);color:var(--lpw-ink);font-family:var(--f-ui)}
.landing{overflow-x:hidden}
.landing::-webkit-scrollbar{width:10px}
.landing::-webkit-scrollbar-thumb{background:#dededa;border-radius:8px}

/* full-height grid rails at the column edges — run through hero, sections and
   footer; every full-width horizontal rule crosses them in a "+" intersection */
.lp-page{position:relative}
.lp-rails{position:absolute;inset:0;pointer-events:none}
.lp-rails::before,.lp-rails::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--lpw-line)}
.lp-rails::before{left:max(0px,calc((100% - 1280px)/2))}
.lp-rails::after{right:max(0px,calc((100% - 1280px)/2))}

.lp-nav{position:sticky;top:0;z-index:5;background:var(--lpw-glass);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--lpw-line)}
/* rail segments INSIDE the sticky nav, at the same x as .lp-rails — so the
   vertical lines visibly cross the header and meet its bottom rule in a "+" */
.lp-nav::before,.lp-nav::after{content:"";position:absolute;top:0;bottom:0;width:1px;
  background:var(--lpw-line);z-index:-1}
.lp-nav::before{left:max(0px,calc((100% - 1280px)/2))}
.lp-nav::after{right:max(0px,calc((100% - 1280px)/2))}
/* nav content aligns with the page column — SAME max-width AND inner padding as the
   hero, so the logo sits exactly on the headline's left edge */
.lp-nav-in{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:13px clamp(20px,4vw,48px)}
.lp-brand{display:flex;align-items:baseline;gap:12px;line-height:1.1}
/* the Kinolot lockup on the website surfaces (landing nav + footer, Home footer, boot splash): the mark
   sits on the wordmark's baseline (a flex item with no baseline aligns by its bottom edge) */
.lp-logo{display:inline-flex;align-items:baseline;gap:9px;font-family:"Spectral",Georgia,serif;font-weight:600;font-size:23px;
  line-height:1;letter-spacing:-.01em;color:var(--lpw-ink)}
.lp-logo .brand-mark{width:31px;height:17px;color:inherit}
.lp-logo.sm{font-size:17px;gap:7px}
.lp-logo.sm .brand-mark{width:23px;height:13px}
.lp-nav-cta{display:flex;align-items:center;gap:10px}
/* hamburger — hidden on desktop, shown below 560px */
.lp-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;
  padding:0 9px;border:1px solid var(--lpw-line-2);border-radius:var(--r-m);background:var(--lpw-surface);cursor:pointer}
.lp-burger span{display:block;height:1.5px;width:100%;background:var(--lpw-ink);border-radius:2px;transition:.2s}
.lp-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.lp-burger.open span:nth-child(2){opacity:0}
.lp-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.lp-menu{display:none}

/* buttons — the app's own: a 9px radius (--r-m), Hanken 600, the amber primary with dark ink
   (as .auth-submit, the plan CTAs and the top bar's primary), white secondary with a hairline.
   38px in the nav and cards (the app's large size); .big = 46px for the hero and closing CTAs.
   The same spec drives Home (.hd-btn / .hd-tbtn) and the paper sign-in panel (.auth-submit). */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  height:38px;padding:0 16px;font-family:var(--f-ui);font-size:13.5px;font-weight:600;line-height:1;
  border-radius:var(--r-m);border:1px solid var(--lpw-line-2);background:var(--lpw-surface);color:var(--lpw-ink);
  transition:background-color .14s,border-color .14s,color .14s;white-space:nowrap}
.lp-btn.ghost:hover{background:var(--lpw-card-2);border-color:var(--lpw-line-3)}
.lp-btn.primary{background:var(--lpw-amber);border-color:var(--lpw-amber);color:var(--lpw-on-amber)}
.lp-btn.primary:hover{background:var(--lpw-amber-hover);border-color:var(--lpw-amber-hover)}
.lp-btn:focus-visible,.lp-burger:focus-visible,.lp-menu-item:focus-visible,.lp-foot-link:focus-visible{outline:2px solid var(--lpw-ink);outline-offset:2px}
.lp-btn.big{height:46px;padding:0 22px;font-size:15px}

/* the content column (features onward) — verticals come from the full-height
   .lp-rails; horizontal dividers span the full viewport via section ::after */
.lp-frame{max-width:1280px;margin:0 auto}

.lp-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,72px);align-items:end;
  max-width:1280px;margin:0 auto;
  padding:clamp(48px,7vw,104px) clamp(20px,4vw,48px) clamp(28px,3.5vw,48px)}
/* hero title in Spectral — the same serif as the section headings and the
   Kinolot wordmark, so logo + headlines read as one system */
.lp-h1{font-family:"Spectral",Georgia,serif;font-weight:600;font-size:clamp(34px,5.4vw,72px);line-height:1.04;
  letter-spacing:-.01em;color:var(--lpw-ink);margin:0 0 30px}
/* the rotating hero word — re-mounted each tick, so the entrance replays.
   Kinolot amber (its display-size shade on paper) + Spectral italic: a serif
   title-card word inside the headline, the page's one warm accent. */
.lp-rotate{display:inline-block;white-space:nowrap;color:var(--lpw-amber-display);
  font-style:italic;font-weight:600;letter-spacing:-.01em;
  animation:lp-word-in .38s cubic-bezier(.2,.7,.3,1)}
@keyframes lp-word-in{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ .lp-rotate{animation:none} }
.lp-lede{font-size:clamp(16px,1.5vw,18px);line-height:1.65;color:var(--lpw-sub);max-width:30em;margin:0}
.lp-hero-aside{padding-bottom:8px}
.lp-hero-cta{display:flex;flex-wrap:wrap;gap:12px}

/* hero media — the 21:9 short-film placeholder, a full-width rule closes the hero */
.lp-hero-media{position:relative;max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px) clamp(40px,5vw,72px)}
.lp-hero-media::after,.lp-section::after{content:"";position:absolute;left:50%;bottom:0;
  transform:translateX(-50%);width:100vw;height:1px;background:var(--lpw-line)}
/* a cinema frame on Carbon: centered play, film tag bottom-left, ratio badge top-right.
   When the film exists, drop a <video> in here (same frame, object-fit:cover). */
.lp-video{position:relative;aspect-ratio:21/9;border-radius:var(--r-l);overflow:hidden;
  background:var(--lpw-black);border:1px solid var(--lpw-line);
  display:flex;align-items:center;justify-content:center}
.lp-video-play{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;cursor:pointer;
  background:#fff;color:var(--lpw-black);border:0;transition:.16s}
.lp-video-play svg{margin-left:3px}
.lp-video-play:hover{transform:scale(1.06)}
.lp-video-badge{position:absolute;right:18px;top:14px;color:rgba(255,255,255,.6);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em}
/* viewfinder dressing: corner brackets + a live 24fps timecode */
.lp-video-corners{position:absolute;inset:14px;pointer-events:none}
.lp-video-corners::before,.lp-video-corners::after{content:"";position:absolute;width:16px;height:16px;
  border:0 solid rgba(255,255,255,.4)}
.lp-video-corners::before{left:0;top:0;border-top-width:1.5px;border-left-width:1.5px}
.lp-video-corners::after{right:0;bottom:0;border-bottom-width:1.5px;border-right-width:1.5px}
.lp-video-corners.b::before{left:auto;right:0;border-left-width:0;border-right-width:1.5px}
.lp-video-corners.b::after{right:auto;left:0;border-right-width:0;border-left-width:1.5px}
.lp-video-tc{position:absolute;left:18px;top:14px;color:rgba(255,255,255,.6);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;font-variant-numeric:tabular-nums}

.lp-section{position:relative;padding:clamp(48px,6vw,88px) clamp(20px,4vw,48px)}
.lp-sec-head{text-align:center;margin-bottom:clamp(30px,4vw,52px)}
/* act labels — the page reads like a screenplay's structure. The app's eyebrow (.eyebrow):
   Space Mono 10.5px, +.16em, uppercase */
.lp-act{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lpw-sub);margin-bottom:14px}
/* section titles use Spectral — the Kinolot wordmark's serif, paired with the
   grotesk UI type (geometric grotesk + editorial serif, the classic display pairing) */
.lp-h2{font-family:"Spectral",Georgia,serif;font-weight:600;font-size:clamp(28px,3.5vw,46px);
  letter-spacing:-.01em;color:var(--lpw-ink);margin:0 0 12px}
.lp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
/* cards — the app's card radius (--r-l) */
.lp-card{background:var(--lpw-card);border:1px solid transparent;border-radius:var(--r-l);padding:26px 24px;
  display:flex;flex-direction:column;gap:12px;transition:.15s}
.lp-card:hover{background:var(--lpw-card-2)}
.lp-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
/* card / step numbers: one mono index style (was a 1.9:1 grey) */
.lp-card-no,.lp-step-n{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--lpw-sub)}
.lp-card-ic{width:40px;height:40px;border-radius:var(--r-m);display:grid;place-items:center;
  background:var(--lpw-surface);color:var(--lpw-ink);border:1px solid var(--lpw-line)}
/* card, step and plan titles share one size: Space Grotesk 600 17px */
.lp-card-t{font-family:var(--f-display);font-weight:600;font-size:17px;color:var(--lpw-ink)}
.lp-card-b{font-size:14.5px;line-height:1.6;color:var(--lpw-sub)}
.lp-room-card{gap:12px}
/* "Available now" — an amber status chip (it was the landing's own green) */
.lp-room-status{align-self:flex-start;margin-top:-8px;margin-bottom:1px;padding:4px 9px;border-radius:999px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--lpw-amber-ink);
  background:var(--lpw-amber-soft);border:1px solid var(--lpw-amber-line)}
.lp-room-cta{margin-top:auto}

.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.lp-step{padding:6px 28px 6px;border-left:1px solid var(--lpw-line)}
.lp-step:first-child{padding-left:0;border-left:0}
.lp-step-n{margin-bottom:12px}
.lp-step-t{font-family:var(--f-display);font-weight:600;font-size:17px;color:var(--lpw-ink);margin-bottom:8px}
.lp-step-d{font-size:14.5px;line-height:1.6;color:var(--lpw-sub)}

/* closing band — heading left, actions right */
.lp-final{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:clamp(40px,5vw,64px) clamp(20px,4vw,48px)}
.lp-final .lp-h2{margin:0}
.lp-final-cta{display:flex;gap:12px;flex-wrap:wrap}

.lp-foot{border-top:1px solid var(--lpw-line);color:var(--lpw-sub)}
/* fixed band height (not padding) so the MUSE bubble's vertical centering below is exact */
.lp-foot-in{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;height:76px;padding:0 clamp(20px,4vw,48px)}
.lp-foot-links{display:flex;align-items:center;gap:26px}
.lp-foot-link{font-size:12.5px;color:var(--lpw-sub);text-decoration:none;transition:.12s}
.lp-foot-link:hover{color:var(--lpw-ink)}
/* "Kinolot by Infinite Studio AI" — the product name, then the company, linking to its site */
.lp-foot-brand{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
/* the endorsement — "by Infinite Studio AI" in Space Mono, small and muted, wherever the company is shown */
.lp-foot-by{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.02em;color:var(--lpw-sub)}
.lp-foot-by .lp-foot-link{font-size:inherit}

/* MUSE bubble on the landing — center it inside the bottom-right grid CELL (the
   square the right rail and the footer rule carve out), so it belongs to the grid.
   Math: the right gutter is (100vw − scrollbar − 1280px)/2 wide (the .landing
   scrollbar is styled at 10px, so it takes real space); the bubble is 54px, the
   footer band 76px. Center: right = 10px + gutter/2 − 27px, bottom = (76−54)/2.
   Applied only when the gutter is wide enough to hold the bubble with breathing
   room (≥1430px viewports) — below that it keeps its default floating spot. */
@media (min-width:1430px){
  .landing ~ .muse-dock-wrap{right:calc((100vw - 1290px)/4 - 17px);bottom:11px}
}
/* …below that the bubble floats at its default spot (right 22px, bottom 22px, 54px) — over the
   footer's right end, where it covered "Terms". Keep the one-row footer's links clear of it
   (22 + 54 + 16px air); the stacked phone footer (≤560px) has its links on the left. */
@media (min-width:561px) and (max-width:1429.98px){
  .lp-foot-in{padding-right:92px}
}

@media (max-width:880px){
  .lp-rails,.lp-nav::before,.lp-nav::after{display:none}
  .lp-hero{grid-template-columns:1fr;align-items:start;gap:24px}
  .lp-hero-aside{padding-bottom:0}
  .lp-grid{grid-template-columns:1fr 1fr;gap:12px}
  .lp-steps{grid-template-columns:1fr;gap:22px}
  .lp-step{border-left:0;padding:0}
  .lp-final{flex-direction:column;align-items:flex-start;gap:20px}
}
@media (max-width:560px){
  .lp-grid{grid-template-columns:1fr}
  /* nav: logo + hamburger; the inline CTAs move into the dropdown menu */
  /* the nav shares the sections' 20px phone gutter, so the logo sits on the headline's edge */
  .lp-nav-in{padding:11px 20px}
  .lp-nav-cta .lp-btn{display:none}
  .lp-burger{display:flex}
  .lp-menu{display:flex;flex-direction:column;gap:8px;padding:12px 20px 16px;border-top:1px solid var(--lpw-line);
    background:var(--lpw-glass);backdrop-filter:blur(10px);animation:lp-word-in .22s ease}
  /* menu items = .lp-btn.big (the same 9px-radius buttons, amber primary) */
  .lp-menu-item{width:100%;height:46px;text-align:center;cursor:pointer;border:1px solid var(--lpw-line-2);background:var(--lpw-surface);
    color:var(--lpw-ink);border-radius:var(--r-m);padding:0 18px;font:600 14.5px var(--f-ui)}
  .lp-menu-item.primary{background:var(--lpw-amber);border-color:var(--lpw-amber);color:var(--lpw-on-amber)}
  .lp-btn{padding:0 14px;font-size:13px}
  .lp-btn.big{height:44px;padding:0 18px;font-size:14.5px}
  /* a touch smaller play button on phones */
  .lp-video-play{width:54px;height:54px}
  .lp-video-play svg{width:18px;height:18px}
  /* hero: tighter top; CTAs stay SIDE BY SIDE (inline) even on phones */
  .lp-hero{padding-top:36px;padding-bottom:22px}
  .lp-hero-cta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
  .lp-hero-cta .lp-btn{width:auto;flex:1 1 0;white-space:nowrap}
  .lp-lede{font-size:15.5px}
  /* sections: a touch less air, comfortable card padding */
  .lp-section{padding:44px 20px}
  .lp-act{margin-bottom:11px}
  .lp-card{padding:22px 20px}
  /* pricing + footer stack cleanly */
  .lp-tier{padding:24px 20px}
  /* height:auto — the desktop bar is a fixed 76px, and a fixed-height wrapping column put the links in a
     second column beside the brand (off-screen at 320–360px once the lockup gained its mark) */
  .lp-foot-in{flex-direction:column;align-items:flex-start;gap:14px;padding:24px 20px;height:auto}
  .lp-foot-links{gap:22px}
}

.lp-splash{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;background:#fcfcfb;color:#0f1012}
.lp-splash .lp-logo{font-size:30px;gap:12px;opacity:.9;color:#0f1012}
.lp-splash .lp-logo .brand-mark{width:40px;height:22px}
.lp-splash-dot{width:8px;height:8px;border-radius:50%;background:#F29A43;animation:muse-orbpulse 1s ease-in-out infinite}   /* the mark's amber (was the landing's green) */

/* Landing — pricing tiers (white hairline cards; the featured plan inverts to Carbon, the app's dark).
   Its CTA and "Most popular" tag are the in-app Plans window's: amber fill, dark ink. */
.lp-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch;max-width:1020px;margin:0 auto}
.lp-tier{position:relative;background:var(--lpw-surface);border:1px solid var(--lpw-line);border-radius:var(--r-l);
  padding:28px 24px;display:flex;flex-direction:column;gap:14px}
.lp-tier.featured{background:var(--lpw-black);border-color:var(--lpw-black);color:#fff;box-shadow:0 18px 44px rgba(15,16,18,.18)}
.lp-tier-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lpw-on-amber);
  background:var(--lpw-amber);border:1px solid var(--lpw-amber);padding:4px 12px;border-radius:999px}
.lp-tier-name{font-family:var(--f-display);font-weight:600;font-size:17px;color:var(--lpw-ink)}
.lp-tier-price{display:flex;align-items:baseline;gap:6px}
.lp-tier-amt{font-family:var(--f-display);font-weight:600;font-size:36px;letter-spacing:-.02em;color:var(--lpw-ink)}
.lp-tier-per{font-size:12px;color:var(--lpw-sub)}
.lp-tier-blurb{font-size:14.5px;color:var(--lpw-sub)}
.lp-tier-feats{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.lp-tier-feats li{display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:1.5;color:var(--lpw-ink-2)}
.lp-tier-feats li svg{flex:none;margin-top:2px;color:var(--lpw-amber-ink)}
.lp-tier.featured .lp-tier-name,.lp-tier.featured .lp-tier-amt{color:#fff}
.lp-tier.featured .lp-tier-per,.lp-tier.featured .lp-tier-blurb{color:rgba(255,255,255,.62)}
.lp-tier.featured .lp-tier-feats li{color:rgba(255,255,255,.84)}
.lp-tier.featured .lp-tier-feats li svg{color:var(--lpw-amber)}
.lp-btn.full{width:100%;justify-content:center;margin-top:4px}
@media (max-width:880px){ .lp-tiers{grid-template-columns:1fr;max-width:420px} }

/* auth modal — chosen-plan badge (from landing pricing CTA). nowrap + wrap: on a phone the note
   drops to its own line instead of the plan name breaking inside the chip */
.auth-plan{display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px 6px;margin:8px 0 2px;padding:5px 11px;border-radius:var(--r-l);
  font-family:var(--f-ui);font-size:11.5px;font-weight:600;color:var(--pos-ink);white-space:nowrap;
  background:color-mix(in srgb,var(--pos) 12%,transparent);border:1px solid var(--pos-line)}
.auth-plan-note,.auth-plan-sep{font-weight:400;color:var(--txt-2);font-size:11px}
.auth-plan-sep{margin-right:-3px}
/* on a phone the note always takes its own line, lined up under the plan name, and the separator
   dot goes (it used to start the second line, outside the indent — review 2026-09-29) */
@media (max-width:440px){
  .auth-plan-sep{display:none}
  .auth-plan-note{flex-basis:100%;padding-left:17px}
}

/* Screenplay preview modal (in-app, before download) */
.sp-prev-overlay{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(0,0,0,.66);backdrop-filter:blur(3px)}
.sp-prev-panel{display:flex;flex-direction:column;width:min(920px,100%);height:min(92vh,1100px);
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-l);overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.sp-prev-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.sp-prev-titlewrap{flex:1;min-width:0}
.sp-prev-t{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--txt-0)}
.sp-prev-sub{font-size:11.5px;color:var(--txt-2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-prev-x{flex:none;width:30px;height:30px;border-radius:var(--r-m);border:none;background:transparent;color:var(--txt-2);
  font-size:16px;cursor:pointer;display:grid;place-items:center;transition:.12s}
.sp-prev-x:hover{background:var(--bg-4);color:var(--txt-0)}
.sp-prev-frame{flex:1;width:100%;border:none;background:#fff}
.sp-prev-foot{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);background:var(--bg-2)}
.sp-prev-hint{flex:1;font-size:11.5px;color:var(--txt-2)}
.sp-prev-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:var(--f-ui);font-size:12.5px;
  font-weight:600;border-radius:var(--r-m);padding:9px 16px;border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-0);transition:.12s}
.sp-prev-btn.ghost:hover{background:var(--bg-4)}
.sp-prev-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--ink-on-accent)}
.sp-prev-btn.primary:hover{filter:brightness(1.07)}
@media (max-width:560px){ .sp-prev-foot{flex-wrap:wrap} .sp-prev-hint{flex-basis:100%} }

/* ---- character follow lens (Spine view) ---- */
.follow-strip{padding:10px 22px 0;flex:0 0 auto;display:flex;flex-direction:column;gap:8px}
.follow-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.follow-chip{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:var(--f-ui);
  font-size:12px;font-weight:500;color:var(--txt-1);background:var(--bg-2);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px 4px 5px;transition:.13s}
.follow-chip:hover{background:var(--bg-3);color:var(--txt-0)}
.follow-chip.on{background:var(--bg-3);color:var(--txt-0);font-weight:600}
.follow-av{width:18px;height:18px;border-radius:50%;flex:none}
.follow-n{font-family:var(--f-mono);font-size:10px;color:var(--txt-3)}
.follow-chip.on .follow-n{color:var(--txt-2)}
.follow-insight{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txt-1);
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-m);padding:7px 12px}
.follow-insight.warn{color:var(--txt-0);border-color:color-mix(in oklab, var(--alert) 45%, var(--line))}
.follow-insight.warn svg{color:var(--alert)}
.follow-insight:not(.warn) svg{color:var(--pos-ink)}
.follow-key{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);
  font-size:10px;letter-spacing:.05em;color:var(--txt-3);text-transform:uppercase;white-space:nowrap}
.follow-key-dot{width:11px;height:11px;border-radius:50%;border:1.5px solid;flex:none;margin-left:6px}
.follow-key-dot.dash{border-style:dashed}
.scard.dim{opacity:.32;filter:saturate(.35)}
.scard.dim:hover{opacity:.75;filter:none}
@media (max-width:560px){ .follow-strip{padding:10px 14px 0} .follow-key{display:none} }

/* ---- "argues" segmented control (controlling-idea audit, Inspector) ---- */
.argues-auto{margin-left:auto;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt-3);border:1px solid var(--line);border-radius:5px;padding:2px 6px}
.argues-seg{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.argues-btn{flex:1;cursor:pointer;font-family:var(--f-ui);font-size:12px;font-weight:500;color:var(--txt-2);
  background:var(--bg-2);border:none;padding:7px 4px;transition:.13s}
.argues-btn+.argues-btn{border-left:1px solid var(--line)}
.argues-btn:hover{background:var(--bg-3);color:var(--txt-0)}
.argues-btn.on{background:var(--bg-3);color:var(--txt-0);font-weight:600;box-shadow:inset 0 -2px 0 var(--pos)}
.argues-btn.on:nth-child(2){box-shadow:inset 0 -2px 0 var(--neg)}
.argues-btn.on:nth-child(3){box-shadow:inset 0 -2px 0 var(--txt-3)}
.argues-hint{margin-top:7px;font-size:11px;line-height:1.45;color:var(--txt-3)}

/* ---- runtime / pacing readout (Spine view) ---- */
.act-min{font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;color:var(--txt-2);
  margin-left:auto;white-space:nowrap}
.act-band .act-min + .pct{margin-left:8px}
.scard-rt{font-family:var(--f-mono);font-size:10px;color:var(--txt-3);white-space:nowrap}
.scard-rt.hot{color:var(--alert);font-weight:600}
.scard-rt + .scard-dur{margin-left:6px}

/* ---- voice check report (Table-Read) ---- */
.vc-fp{display:flex;align-items:baseline;gap:9px;padding:4px 0}
.vc-fp-name{flex:none;font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--txt-1)}
.vc-fp-voice{font-size:12px;line-height:1.45;color:var(--txt-2)}
.vc-could{color:var(--alert);font-style:normal;font-weight:600}

/* ---- shooting-script scene numbers flanking the slugline ---- */
.spb-scene.numbered{display:flex;align-items:baseline;gap:14px}
.spb-scene.numbered .spb-scnum{flex:none;font-weight:700;color:#6b675c;font-size:11.5px}
.spb-scene.numbered .spb-sctext{flex:1;min-width:0}

/* ---- storyboard: compose-from-frames choices (empty sheet) ---- */
.sb-comp-choices{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#101013}
.sb-comp-choice{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;color:var(--txt-3);
  background:#16161a;border:1px solid var(--line-2);border-radius:var(--r-l);padding:14px 26px;min-width:300px;transition:.13s}
.sb-comp-choice span{font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.sb-comp-choice:hover:not(:disabled){color:var(--pos-ink);border-color:var(--pos-line);background:#191920}
.sb-comp-choice.primary{color:var(--txt-1);border-color:var(--line-2)}
.sb-comp-choice:disabled{opacity:.45;cursor:default}
@media (max-width:700px){ .sb-comp-choice{min-width:0;padding:10px 16px} }

/* ---- storyboard: per-panel edit ---- */
.sb-panel-edit{flex-direction:column;align-items:stretch;gap:8px}
.sb-panel-chips{display:flex;gap:6px;flex-wrap:wrap}
.sb-panel-chip{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:var(--f-mono);
  font-size:11px;font-weight:700;color:var(--txt-2);background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-m);padding:5px 10px;transition:.12s}
.sb-panel-chip:hover{color:var(--txt-0);background:var(--bg-3)}
.sb-panel-chip.on{color:var(--txt-0);background:var(--bg-3);border-color:var(--pos-line)}
.sb-panel-chip-sub{font-size:9.5px;font-weight:500;color:var(--txt-3);text-transform:uppercase;letter-spacing:.04em}
.sb-panel-err{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--alert)}

/* ---- storyboard: visible progress over dark sheets ---- */
.sb-tpanel-spin{flex-direction:column;display:flex;align-items:center;justify-content:center;gap:12px;
  background:rgba(8,8,10,.72);backdrop-filter:blur(2px);z-index:3}
.sb-tpanel-spin .ns-spin,
.sb-comp-empty .ns-spin{width:22px;height:22px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.22);border-top-color:#fff}   /* light spinner — the default is dark-on-amber */
.sb-spin-lab{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em;color:#eee;
  text-shadow:0 1px 6px rgba(0,0,0,.8);max-width:80%;text-align:center;line-height:1.5}

/* The TopBar brand mark is a button (app/chrome.jsx) — reset the browser's button chrome so the
   lockup sits on the bar itself (it was drawn on a grey ButtonFace box), with a focus ring. */
.brand-btn{cursor:pointer;background:none;border:0;padding:4px 6px;margin:0 -6px;border-radius:var(--r-m);color:inherit}
.brand-btn:hover{background:var(--bg-3)}
.brand-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ===================================================== RECENTLY DELETED (restore bin)
   Per-tab restore panel for soft-deleted characters / props / locations (app/artroom.jsx) */
.recently-deleted{margin:10px 0 4px;border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--bg-2);overflow:hidden}
.rd-head{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;background:none;border:0;
  cursor:pointer;color:var(--txt-2);font-family:var(--f-ui);font-size:12.5px;font-weight:600;text-align:left}
.rd-head:hover{background:var(--bg-3);color:var(--txt-1)}
.rd-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--bg-4);color:var(--txt-1);font-family:var(--f-mono);font-size:11px}
.rd-chev{margin-left:auto;display:inline-flex;color:var(--txt-3)}
.rd-list{display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.rd-row{display:flex;align-items:center;gap:10px;padding:8px 12px}
.rd-row+.rd-row{border-top:1px solid var(--line)}
.rd-name{flex:1;min-width:0;font-size:13px;color:var(--txt-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-when{font-family:var(--f-mono);font-size:11px;color:var(--txt-3);flex:0 0 auto}
.rd-restore{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;font-size:12px;font-weight:600;
  padding:5px 10px;border-radius:var(--r-m);border:1px solid var(--pos-line,var(--line-2));background:var(--bg-1);
  color:var(--pos-ink);cursor:pointer}
.rd-restore:hover{background:var(--pos-soft,var(--bg-3))}
.rd-purge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;
  border-radius:var(--r-m);border:1px solid var(--line-2);background:var(--bg-1);color:var(--txt-3);cursor:pointer}
.rd-purge:hover{color:var(--neg-ink);border-color:var(--neg);background:var(--bg-2)}
.recently-deleted.rd-compact{position:relative;margin:0;border:0;border-radius:0;background:none;overflow:visible}
.rd-trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  padding:0;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-1);color:var(--txt-2);cursor:pointer}
.rd-trigger:hover,.rd-compact.open .rd-trigger{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.rd-trigger .rd-count{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;
  border:2px solid var(--bg-0);border-radius:9px;background:var(--accent);color:var(--ink-on-accent);font-size:9px;line-height:1}
.rd-popover{position:absolute;z-index:40;top:calc(100% + 8px);right:0;width:min(360px,calc(100vw - 32px));
  border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-1);box-shadow:0 14px 34px rgba(0,0,0,.18);overflow:hidden}
.rd-popover-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line-2);
  color:var(--txt-0);font-size:12.5px;font-weight:700}
.rd-popover-head .rd-count{margin-left:auto}
.rd-popover .rd-list{max-height:320px;overflow-y:auto;border-top:0}

/* ============================ SHOT "BUILT FROM" reference thumbnails (app/shots-ui.jsx)
   The reference images locked into a shot's frame — scene key frame, location plate,
   in-frame character & prop sheets — as small thumbs; click opens the image lightbox. */
.shot-refs{margin:2px 0 4px}
.shot-refs-lab{display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--txt-3);margin-bottom:7px}
.shot-refs-row{display:flex;flex-wrap:wrap;gap:7px}
.shot-location-picker{position:relative;display:flex;align-items:center;gap:6px;width:100%;min-width:0;margin:0 0 7px;font-size:9px;color:var(--txt-2)}
.shot-location-picker-label{font-family:var(--f-mono);font-size:9px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--txt-3);margin-right:2px}
.shot-location-picker-menu{position:static;flex:1 1 auto;min-width:0}
/* The chooser is native <details> content inside the SheetFrame's reference
   slot.  A closed card keeps its paint containment/rounded clipping for image
   performance; an open chooser deliberately promotes only its owning card and
   releases that clip.  This is important in the multi-column beat grid, where
   a neighbouring card otherwise paints over the absolute panel.  Keep the
   local layer modest so application dialogs remain above it. */
.sheet-card:has(.shot-location-picker-menu[open]){
  position:relative;z-index:2;overflow:visible;content-visibility:visible;
}
.bc-shot-expand:has(.shot-location-picker-menu[open]){
  position:relative;z-index:2;overflow:visible;
}
.shot-location-picker-menu summary{list-style:none;cursor:pointer}
.shot-location-picker-menu summary::-webkit-details-marker{display:none}
.shot-location-picker-summary{display:flex;align-items:center;gap:7px;width:100%;min-height:25px;max-width:100%;padding:3px 8px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-3);color:var(--txt-1);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.02em}
.shot-location-picker-summary:after{content:"+";margin-left:auto;flex:0 0 auto;font-size:14px;color:var(--txt-3);line-height:1}
.shot-location-picker-menu[open] .shot-location-picker-summary{border-color:var(--pos-line);color:var(--txt-0)}
.shot-location-picker-menu[open] .shot-location-picker-summary:after{content:"−"}
.shot-location-picker-summary>span{flex:0 0 auto;white-space:nowrap}
.shot-location-picker-summary small{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt-3);font-family:var(--f-ui);font-size:10px;letter-spacing:0}
.shot-location-picker-panel{position:absolute;z-index:35;top:calc(100% + 5px);right:0;left:auto;transform:none;width:min(330px,calc(100% - 20px),calc(100vw - 32px));max-width:calc(100% - 20px);max-height:330px;overflow:auto;padding:7px;background:var(--bg-2);border:1px solid var(--line-3);border-radius:9px;box-shadow:var(--shadow-pop)}
.shot-location-picker-section{padding:7px 4px 5px;border-top:1px solid var(--line)}
.shot-location-picker-section:first-of-type{border-top:0}
.shot-location-picker-section>b{display:block;margin-bottom:4px;color:var(--txt-2);font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.shot-location-check{display:grid;grid-template-columns:15px minmax(0,1fr) auto;align-items:start;gap:7px;padding:6px 5px;border-radius:var(--r-s);cursor:pointer}
.shot-location-check:hover{background:var(--bg-3)}.shot-location-check.on{background:var(--pos-soft)}.shot-location-check.unavailable{cursor:not-allowed;opacity:.58}
.shot-location-check input{margin:3px 0 0;accent-color:var(--pos)}
.shot-location-check-copy{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.shot-location-check-copy strong{font-size:11px;font-weight:600;color:var(--txt-1)}.shot-location-check-copy small{margin-top:2px;font-size:9.5px;color:var(--txt-3)}
.shot-location-check i{font-family:var(--f-mono);font-size:9px;font-style:normal;color:var(--pos-ink);letter-spacing:.04em;text-transform:uppercase}
.shot-location-picker-empty,.shot-location-picker-note{padding:4px 5px;color:var(--txt-3);font-size:10.5px;line-height:1.35}
.shot-location-picker-error{margin:5px 4px 1px;padding:5px 6px;border-radius:5px;background:var(--alert-soft);color:var(--alert);font-size:10.5px;line-height:1.35}
.shot-location-choice{border:1px solid var(--line-2);border-radius:999px;padding:3px 7px;
  background:var(--bg-3);color:var(--txt-2);font-size:9px;line-height:1.1;cursor:pointer}
.shot-location-choice:hover{border-color:var(--line-3);color:var(--txt-1)}
.shot-location-choice.on{border-color:var(--accent,#d8a657);background:var(--accent-soft,rgba(216,166,87,.12));color:var(--txt-1)}
.shot-location-choice:disabled{opacity:.5;cursor:not-allowed}
.shot-location-picker-panel .shot-location-choice.auto{width:100%;margin:1px 0 3px;text-align:left;border-radius:var(--r-s)}
.shot-ref-missing{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--danger-ink);font-family:var(--f-mono);font-size:9px;background:var(--alert-soft)}
@media(max-width:640px){.shot-location-picker{align-items:flex-start}.shot-location-picker-panel{max-height:55dvh}}
.shot-ref-thumb{position:relative;width:54px;height:40px;padding:0;border-radius:var(--r-m);overflow:hidden;
  border:1px solid var(--line-2);background:var(--bg-3);cursor:zoom-in;flex:0 0 auto;
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.shot-ref-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.shot-ref-preview{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;
  color:inherit;cursor:zoom-in}
.shot-ref-preview:focus-visible{outline:2px solid var(--accent,#d8a657);outline-offset:-2px}
.shot-ref-preview-mark{position:absolute;left:3px;bottom:3px;width:15px;height:15px;border-radius:5px;
  display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.56);opacity:0;transition:opacity .12s}
.shot-ref-thumb:hover .shot-ref-preview-mark,.shot-ref-preview:focus-visible .shot-ref-preview-mark{opacity:1}
.shot-ref-kind{position:absolute;left:3px;top:3px;z-index:2;padding:1px 3px;border-radius:4px;
  color:#fff;background:rgba(0,0,0,.62);font:700 9px/1.25 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;
  pointer-events:none}
.shot-ref-thumb.no-preview{cursor:default}
.shot-ref-pending{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:2px;background:var(--bg-2);color:var(--txt-2);font-size:9px;
  line-height:1.1;text-align:center}
.shot-ref-pending.retained-unverified{background:var(--warn-soft,rgba(216,166,87,.08));color:var(--warn,#d8a657)}
.shot-ref-thumb:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.25);border-color:var(--txt-3)}
/* a thin kind-coded edge so it's clear what each reference is */
.shot-ref-thumb.anchor{border-color:var(--alert)}
.shot-ref-thumb.location{border-color:var(--pos)}
.shot-ref-thumb.script{border-color:var(--accent2)}
.shot-ref-thumb.character{border-color:#7a6cae}
.shot-ref-thumb.prop{border-color:#b08b4f}
.shot-ref-thumb.missing{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  cursor:default;border-style:dashed;color:var(--txt-3);background:var(--bg-2);padding:3px}
.shot-ref-thumb.missing:hover{transform:none;box-shadow:none}
.coverage-refs{margin:9px 0 3px}
.coverage-refs-row{align-items:center;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:2px 0}
.coverage-refs-row::-webkit-scrollbar{display:none}
.coverage-refs-row .shot-ref-thumb{flex:0 0 auto}
/* refstrip: one-line scroller around a thumb row — edge fades signal hidden thumbs;
   arrows only render on the side that can actually scroll */
.refstrip{position:relative;min-width:0}
.refstrip::before,.refstrip::after{content:"";position:absolute;top:0;bottom:0;width:20px;pointer-events:none;z-index:1;opacity:0;transition:opacity .15s}
.refstrip::before{left:0;background:linear-gradient(90deg,var(--bg-2),transparent)}
.refstrip::after{right:0;background:linear-gradient(270deg,var(--bg-2),transparent)}
.refstrip.can-left::before{opacity:1}
.refstrip.can-right::after{opacity:1}
.refstrip-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:22px;height:22px;padding:0;
  display:none;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line-2);
  background:var(--bg-1);color:var(--txt-2);font-size:15px;line-height:1;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.22)}
.refstrip-arrow.left{left:-7px}
.refstrip-arrow.right{right:-7px}
.refstrip.can-left .refstrip-arrow.left{display:flex}
.refstrip.can-right .refstrip-arrow.right{display:flex}
.refstrip-arrow:hover{color:var(--txt-1);border-color:var(--line-3);background:var(--bg-3)}
/* touch screens: swipe the row directly — no arrows */
@media (hover:none) and (pointer:coarse){ .refstrip .refstrip-arrow{display:none} }
.sheet-used-refs{padding-inline:2px}
.sheet-ref-used{pointer-events:none}
.coverage-ref-req{position:absolute;left:2px;top:2px;border-radius:5px;padding:1px 3px;
  background:rgba(0,0,0,.58);color:#fff;font-family:var(--f-mono);font-size:9px;line-height:1;text-transform:uppercase}
.coverage-ref-missing{font-family:var(--f-mono);font-size:9px;text-transform:uppercase;color:var(--txt-2)}
.coverage-ref-cap{max-width:48px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;line-height:1.05;text-align:center}
/* the rolling SEED (previous shot's frame) — a brighter edge; approval remains
   available in the tooltip and provisional frames retain their dashed edge */
.shot-ref-thumb.seed{border-color:var(--accent,#d8a657);box-shadow:0 0 0 1px var(--accent-soft,rgba(216,166,87,.18))}
.shot-ref-thumb.seed-pending{border-color:var(--warn,#d8a657);border-style:dashed;
  box-shadow:0 0 0 1px var(--warn-soft,rgba(216,166,87,.16))}
.shot-ref-thumb.seed.provisional{border-style:dashed}
/* tickable sheet + seed refs — the corner tick attaches/excludes the image for generation */
.shot-ref-tick{position:absolute;bottom:2px;right:2px;width:15px;height:15px;line-height:13px;padding:0;
  z-index:3;display:grid;place-items:center;border-radius:5px;font-size:10px;font-weight:700;cursor:pointer;
  color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.3)}
.shot-ref-tick.on{background:var(--accent);border-color:transparent;color:var(--ink-on-accent)}
.shot-ref-tick:hover{filter:brightness(1.2)}
.shot-ref-tick:disabled{opacity:.5;cursor:not-allowed;filter:none}
/* Permanent source-version deletion is deliberately separate from the inclusion
   checkbox and only appears on rolling seed thumbnails. */
.shot-ref-delete{position:absolute;bottom:2px;left:2px;width:15px;height:15px;line-height:13px;padding:0;
  display:grid;place-items:center;border-radius:5px;font-size:9px;cursor:pointer;
  color:#fff;background:rgba(104,28,35,.9);border:1px solid rgba(255,190,190,.65)}
.shot-ref-delete:hover{filter:brightness(1.2)}
.shot-ref-delete:disabled{opacity:.5;cursor:not-allowed;filter:none}
.shot-ref-thumb.off img{opacity:.32;filter:grayscale(.85)}
.shot-ref-thumb.off{border-style:dashed;border-color:var(--line-2)}

/* approve / lock a frame as the seed the next shot chains from */
.shot-lock-btn{display:inline-flex;align-items:center;gap:4px;cursor:pointer;border:1px solid var(--line-2);
  background:var(--bg-3);color:var(--txt-2);font-size:10.5px;border-radius:var(--r-m);padding:3px 8px;
  transition:color .12s ease,background .12s ease,border-color .12s ease}
.shot-lock-btn:hover{color:var(--txt-1);background:var(--bg-4)}
.shot-lock-btn.on{color:var(--pos,#5aa469);border-color:var(--pos,#5aa469);background:rgba(90,164,105,.12)}
.shot-lock-btn svg{flex:0 0 auto}
.shot-source-badge{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;
  padding:3px 7px;font:700 9px/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--txt-2)}
.shot-source-badge.current{color:var(--pos-ink);border-color:var(--pos)}
.shot-source-badge.stale{color:var(--danger-ink);border-color:var(--danger);background:rgba(216,107,97,.1)}
/* compact continuity repair / deliberate unapproved-seed exception */
.shot-seed-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 6px;font-size:10.5px;
  letter-spacing:.03em;color:var(--ink-3,#8b8f99);padding:2px 0 0;font-variant-numeric:tabular-nums}
.shot-seed-line.stale{color:var(--txt-2)}
.shot-seed-refresh{color:var(--accent-ink);font-weight:600}
.shot-seed-exception{color:var(--txt-2);font-weight:600}
/* scene chain-health strip: approved / unrendered / continuity and source-refresh counts */
.ssx-chain-strip{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.ssx-chain-chip{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;
  padding:1px 8px;font-size:10px;letter-spacing:.04em;color:var(--ink-3,#8b8f99);font-variant-numeric:tabular-nums}
.ssx-chain-chip.ok{color:var(--pos-ink);border-color:var(--pos)}
.ssx-chain-chip.warn{color:var(--danger-ink);border-color:var(--danger);background:var(--danger-soft)}
/* storyboard: sheet health strip + the approved-frame edit warning */
.sb-health{margin:8px 2px 0}
.sb-panel-note{font-size:11px;line-height:1.5;color:var(--danger);padding:6px 2px 2px}
/* the chain status bar */
.shot-chain-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:0 0 16px;padding:11px 14px;border-radius:var(--r-l);border:1px solid var(--accent,#d8a657);
  background:var(--accent-soft,rgba(216,166,87,.1))}
.shot-chain-bar.running{border-color:var(--line-2);background:var(--bg-3)}
.shot-chain-msg{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--txt-1)}
.shot-chain-msg svg{flex:0 0 auto;color:var(--accent-ink)}
.shot-chain-acts{display:flex;align-items:center;gap:8px;flex:0 0 auto}

/* "Design all shots" progress bar */
.shot-design-bar{margin:0 0 16px;padding:11px 14px;border-radius:var(--r-l);border:1px solid var(--line-2);background:var(--bg-3)}
.shot-design-row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--txt-1);margin-bottom:9px}
.shot-design-lab{font-weight:600}
.shot-design-track{height:6px;border-radius:99px;background:var(--bg-1);border:1px solid var(--line-2);overflow:hidden}
.shot-design-fill{height:100%;border-radius:99px;background:var(--accent,#d8a657);transition:width .3s ease}

/* small centered popup — out-of-order "generate the earlier shot first" notice */
.shot-notice-scrim{position:fixed;inset:0;z-index:9991;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(0,0,0,.32);backdrop-filter:blur(1.5px);animation:appconfirm-fade .12s ease}
.shot-notice{display:flex;align-items:center;gap:11px;width:min(360px,92vw);
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-l,14px);
  box-shadow:0 24px 80px rgba(0,0,0,.45);padding:16px 18px;
  animation:appconfirm-pop .14s cubic-bezier(.2,.8,.3,1)}
.shot-notice-ic{flex:0 0 auto;color:var(--accent-ink);display:flex}
.shot-notice-msg{flex:1;min-width:0;font-size:13px;color:var(--txt-1);line-height:1.5}
.shot-notice-x{flex:0 0 auto;align-self:flex-start;width:25px;height:25px;margin:-5px -7px -5px 0;padding:0;
  display:grid;place-items:center;border:0;border-radius:var(--r-m);background:transparent;color:var(--txt-3);
  font:500 20px/1 var(--f-ui);cursor:pointer;transition:background .12s,color .12s}
.shot-notice-x:hover{background:var(--bg-3);color:var(--txt-1)}
.shot-notice-x:focus-visible{outline:2px solid var(--accent,#d8a657);outline-offset:1px}

/* add-a-reference control + picker on a shot card (app/shots-ui.jsx) */
.shot-ref-thumb.added{border-color:#4ca596}
.shot-ref-thumb.wrap{position:relative;cursor:default}
.shot-ref-open{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.shot-ref-open img{width:100%;height:100%;object-fit:cover;display:block}
.shot-ref-rm{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;z-index:2;padding:0;
  display:grid;place-items:center;border:1px solid var(--line-2);background:var(--bg-1);color:var(--txt-2);
  cursor:pointer;opacity:0;transition:opacity .12s}
.shot-ref-thumb.wrap:hover .shot-ref-rm{opacity:1}
.shot-ref-rm:hover{background:var(--neg);border-color:var(--neg);color:#fff}
.shot-ref-add{width:54px;height:40px;border-radius:var(--r-m);border:1px dashed var(--line-3);flex:0 0 auto;
  background:var(--bg-2);color:var(--txt-2);cursor:pointer;display:grid;place-items:center;transition:.12s}
.shot-ref-add:hover{border-color:var(--pos);color:var(--pos-ink);background:var(--bg-3)}
.shot-ref-picker{margin-top:9px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-2);
  padding:10px;display:flex;flex-direction:column;gap:8px}
.shot-ref-pick-up{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-size:12.5px;font-weight:600;
  padding:7px 12px;border-radius:var(--r-m);border:1px solid var(--line-2);background:var(--bg-1);color:var(--txt-0);cursor:pointer}
.shot-ref-pick-up:hover{border-color:var(--pos);color:var(--pos-ink)}
.shot-ref-pick-lab{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--txt-3)}
.shot-ref-pick-list{display:flex;flex-direction:column;gap:3px;max-height:184px;overflow-y:auto}
.shot-ref-pick-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;font:inherit;
  padding:6px 8px;border-radius:var(--r-s);border:0;background:none;color:var(--txt-1);cursor:pointer}
.shot-ref-pick-item:hover{background:var(--bg-3);color:var(--txt-0)}
.shot-ref-pick-kind{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;
  padding:2px 6px;border-radius:5px;flex:0 0 auto;border:1px solid var(--line-2);color:var(--txt-3)}
.shot-ref-pick-kind.character{color:#7a6cae;border-color:#7a6cae55}
.shot-ref-pick-kind.prop{color:#b08b4f;border-color:#b08b4f55}
.shot-ref-pick-kind.location{color:var(--pos-ink)}
.shot-ref-pick-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot-ref-pick-none{font-size:12px;color:var(--txt-3);padding:4px}
.shot-ref-thumb.added.missing{border-style:dashed;border-color:var(--line-3);background:var(--bg-2)}
.shot-ref-ph{display:grid;place-items:center;width:100%;height:100%;padding:2px 4px;font-size:9px;line-height:1.15;
  text-align:center;color:var(--txt-3);font-family:var(--f-mono);overflow:hidden}

/* per-panel edit picker on a location plate (app/locations-ui.jsx) */
.loc-panel-edit .loc-panel-pick{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.loc-panel-btn{display:flex;flex-direction:column;gap:1px;align-items:flex-start;text-align:left;padding:6px 9px;
  border-radius:var(--r-m);border:1px solid var(--line-2);background:var(--bg-1);cursor:pointer;font:inherit}
.loc-panel-btn:hover{border-color:var(--txt-3)}
.loc-panel-btn.on{border-color:var(--pos);background:var(--pos-soft,var(--bg-3))}
.loc-panel-btn-pos{font-size:12px;font-weight:600;color:var(--txt-0)}
.loc-panel-btn-hint{font-size:10px;color:var(--txt-3);font-family:var(--f-mono)}
.sb-mode-btn.ghost{opacity:.6;border-style:dashed}
.sb-mode-btn.ghost:hover{opacity:1}

/* worn-prop note — worn items render on the owner's character sheet, not a separate one */
.prop-worn-note{display:flex;align-items:center;gap:6px;margin-top:7px;padding:5px 8px;border-radius:var(--r-m);
  background:var(--pos-soft,var(--bg-2));border:1px solid var(--pos-line,var(--line-2));
  font-size:11px;color:var(--txt-2);line-height:1.3}
.prop-worn-note b{color:var(--txt-1);font-weight:600}

/* character card: driven scenes stand out from appears-only (Characters tab) */
.sheet-scene-chip.driven{background:var(--accent);color:var(--ink-on-accent);border-color:var(--pos)}
.sheet-scenes-lab{white-space:nowrap}

/* "Voice" control on the character card (teal — distinct from Cameo's purple). app/artroom.jsx */
.char-voice-btn{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-m);
  border:1px solid oklch(0.66 0.11 195 / .4);background:oklch(0.66 0.11 195 / .1);color:oklch(0.8 0.1 195);
  font-family:var(--f-ui);font-size:11px;font-weight:600;cursor:pointer;transition:.12s;white-space:nowrap}
.char-voice-btn:hover{background:oklch(0.66 0.11 195 / .2);color:oklch(0.86 0.09 195)}
.char-voice-btn.on{background:oklch(0.66 0.11 195 / .22);border-color:oklch(0.66 0.11 195 / .6)}
.char-voice-btn.open{box-shadow:0 0 0 2px oklch(0.66 0.11 195 / .2)}
html[data-theme="light"] .char-voice-btn{border-color:oklch(0.52 0.1 195 / .5);background:oklch(0.56 0.11 195 / .1);color:oklch(0.4 0.09 195)}
html[data-theme="light"] .char-voice-btn:hover{background:oklch(0.56 0.11 195 / .18);color:oklch(0.32 0.09 195)}
html[data-theme="light"] .char-voice-btn.on{background:oklch(0.56 0.11 195 / .16);border-color:oklch(0.52 0.1 195 / .6);color:oklch(0.34 0.09 195)}

/* Each Voice window belongs to its own character card. The card-only scrim keeps
   neighbouring cast cards live, so several Voice cards can remain open independently. */
.voice-card-overlay{position:absolute;inset:0;z-index:35;min-width:0;min-height:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(14,15,16,.72)}
.dt-panel.voice-modal{position:relative;width:100%;min-width:0;min-height:0;max-height:100%;z-index:1;outline:0;
  border-color:oklch(0.66 0.11 195 / .55);box-shadow:0 18px 50px rgba(0,0,0,.48)}
.voice-modal-x{position:absolute;top:10px;right:10px;z-index:2}
.voice-modal-x:focus-visible{outline:2px solid oklch(0.66 0.11 195);outline-offset:2px}
.voice-modal-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px}
.voice-modal .vc-card{border:0;background:transparent;box-shadow:none;padding:0;margin:0}
.voice-modal .vc-head{padding-right:34px}
.voice-modal .vc-actions{flex-wrap:wrap}
.voice-modal .vc-master-head>div:first-child{min-width:0}

@media (max-width:760px){
  .voice-card-overlay{padding:10px}
}

/* ====================== THE STAGE — Seedance 2.0 director console ============== */
.stage2-root{flex:1;min-width:0;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
.stage2-main{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.stage2-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg)}
.stage2-head-left{min-width:0}
.stage2-head-title{font-family:var(--f-display);font-size:16px;font-weight:650;color:var(--txt-0)}
.stage2-head-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:3px;font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--txt-3)}
.stage2-head-meta span{white-space:nowrap}
.stage2-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.stage2-nav{display:flex;justify-content:center;gap:4px;padding:3px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-2);flex:0 0 auto}
.stage2-navbtn{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--txt-2);
  font-family:var(--f-ui);font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:var(--r-m);cursor:pointer;transition:.12s}
.stage2-navbtn:hover{background:var(--bg-3);color:var(--txt-0)}
.stage2-navbtn.on{background:var(--bg-3);color:var(--accent-ink)}
.stage2-navbtn.on svg{color:var(--accent-ink)}
.stage2-voiceall{display:flex;align-items:center;gap:8px}
.stage2-voiceprog{font-family:var(--f-mono);font-size:11px;color:var(--txt-2)}
/* 3-pane: rail | console(center+right) */
.stage2-body{flex:1;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);overflow:hidden}
.stage2-rail{width:var(--rail-w);flex:0 0 var(--rail-w);border-right:1px solid var(--line);overflow:auto;padding:12px 10px}
.stage2-rail-head{display:flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-2);padding:2px 6px 10px}
.stage2-rail-head .panel-collapse{margin-left:auto}
/* collapsed rail/settings strips inside the Stage's grid columns (shared .strip visuals) */
.stage2-body > .strip{height:100%}
.stage2-act-head{cursor:default}
.stage2-act-head:hover{background:transparent}
.stage2-act-scenes{padding-left:4px;margin-left:11px}
.stage2-scene-list{display:flex;flex-direction:column;gap:5px}
.stage2-scene-block{padding:2px 0 8px;border-bottom:1px solid var(--line)}
.stage2-scene-block:last-child{border-bottom:0}
.stage2-scene-headrow{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;color:inherit;cursor:pointer;
  padding:7px 8px 5px;border-radius:var(--r-m);text-align:left;transition:.1s}
.stage2-scene-headrow:hover,.stage2-scene-headrow.on{background:var(--bg-2)}
.stage2-scene-pick{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;cursor:pointer;
  padding:7px 8px;border-radius:var(--r-m);text-align:left;transition:.1s;position:relative;color:inherit}
.stage2-scene-pick:hover{background:var(--bg-2)}
.stage2-scene-pick.on{background:var(--bg-3)}
.stage2-scene-pick.on::before{content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);width:2px;height:17px;background:var(--brand);border-radius:2px}
.stage2-scene-pick.on .stage2-scene-ttl{color:var(--txt-0)}
.stage2-scene-meta{font-family:var(--f-mono);font-size:10px;color:var(--txt-3);flex:0 0 auto}
/* per-scene render rollup — rendered/total clips in the header + a thin fill bar
   beneath. Done state matches the chip ✓ styling (var(--pos)). */
.stage2-scene-prog{font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--txt-2);flex:0 0 auto;white-space:nowrap}
.stage2-scene-prog.done{color:var(--pos-ink)}
.stage2-scene-bar{height:2px;margin:1px 8px 4px 32px;border-radius:2px;background:var(--bg-3);overflow:hidden}
.stage2-scene-bar-fill{height:100%;border-radius:2px;background:var(--brand);transition:width .25s ease}
.stage2-scene-bar.done .stage2-scene-bar-fill{background:var(--accent)}
/* per-clip chips under each scene row — label + visual-source glyph + readiness.
   Horizontal and compact (a checklist), not the old vertical per-beat list. */
.stage2-clip-chips{display:flex;flex-wrap:wrap;gap:4px;padding:2px 8px 4px 32px}
.stage2-clip-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line-2);border-radius:var(--r-s);
  background:var(--bg-2);color:var(--txt-2);font:700 9.5px var(--f-mono);padding:3px 6px;cursor:pointer}
.stage2-clip-chip:hover{border-color:var(--brand);color:var(--txt-0)}
.stage2-clip-chip.on{border-color:var(--brand);color:var(--accent-ink);background:var(--bg-1)}
.stage2-clip-chip.missing{border-style:dashed}
.stage2-clip-chip-name{max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:600 9.5px var(--f-ui);color:var(--txt-1)}
.stage2-clip-chip.on .stage2-clip-chip-name{color:var(--accent-ink)}
.stage2-clip-chip-glyph{font-size:9px;letter-spacing:-1px}
.stage2-clip-chip-st{min-width:7px;text-align:center}
/* beats with micro-beats nested inside (replaces the flat clip chips) */
.stage2-beat-list{display:flex;flex-direction:column;gap:3px;padding:2px 8px 6px 26px}
.stage2-beat-row{display:flex;align-items:center;gap:6px;width:100%;padding:4px 7px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--bg-1);color:var(--txt-1);font:600 10px var(--f-ui);cursor:pointer;text-align:left}
.stage2-beat-row b{font:700 9.5px var(--f-mono);color:var(--txt-2)}
.stage2-beat-row:hover{border-color:var(--brand);color:var(--txt-0)}
.stage2-beat-row.missing{border-style:dashed}
.stage2-beat-row.done b{color:var(--pos-ink)}
.stage2-beat.on .stage2-beat-row{border-color:var(--brand);color:var(--accent-ink)}
.stage2-beat.on .stage2-beat-row b{color:var(--accent-ink)}
.stage2-beat-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-gen-promptwrap.fill{width:100%}
.stage2-clip-chip.done .stage2-clip-chip-st{color:var(--pos-ink)}
.stage2-clip-chip.missing .stage2-clip-chip-st{color:var(--accent-ink)}
/* scene group within an act — slug header + its clips */
.stage2-scene-grp{margin:1px 0 5px}
.stage2-scene-row{display:flex;align-items:center;gap:8px;padding:5px 8px 3px}
.stage2-scene-ttl{font-size:12px;font-weight:500;color:var(--txt-0);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the clips of a scene — the selectable leaves, beat-named */
.stage2-cliplist{padding-left:8px;margin-left:9px;border-left:1px solid var(--line-2)}
.stage2-cliprow{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;cursor:pointer;
  padding:5px 8px;border-radius:var(--r-s);text-align:left;transition:.1s;position:relative}
.stage2-cliprow:hover{background:var(--bg-2)}
.stage2-cliprow.on{background:var(--bg-3)}
.stage2-cliprow.on::before{content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);width:2px;height:15px;background:var(--brand);border-radius:2px}
.stage2-clip-lab{font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--txt-3);flex:0 0 22px}
.stage2-cliprow.on .stage2-clip-lab{color:var(--accent-ink)}
.stage2-clip-beat{flex:1;min-width:0;font-size:12px;color:var(--txt-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-cliprow.on .stage2-clip-beat{color:var(--txt-0)}
.stage2-clip-dur{font-family:var(--f-mono);font-size:10px;color:var(--txt-3);flex:0 0 auto}
.stage2-clip-done{display:flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--brand);color:var(--ink-on-accent,#1a1206);flex:0 0 auto}

/* console = center (player/strip/prompt/assets) + the original right Seedance panel */
.stage2-console{display:grid;grid-template-columns:minmax(0,1fr) 332px;flex:1;min-height:0;overflow:hidden}
.stage2-center{overflow:auto;min-height:0;min-width:0;padding:20px 24px 40px}
.stage2-clip-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.stage2-clip-slug{font-family:var(--f-mono);font-size:12px;font-weight:700;color:var(--txt-0);letter-spacing:.03em;display:flex;align-items:baseline;gap:4px;min-width:0}
.stage2-clip-loc{color:var(--txt-1);font-weight:600}
.stage2-clip-name{color:var(--txt-2);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-ver{font-size:11px;color:var(--txt-2);background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-s);padding:3px 9px;flex:0 0 auto}
.stage2-sourcebar{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);background:var(--bg-2);border-radius:var(--r-m);padding:9px 10px;margin:0 0 12px}
.stage2-source-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.stage2-source-k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.stage2-source-v{font-size:12px;color:var(--txt-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-source-toggle{flex:0 0 auto;display:flex;background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-m);padding:2px}
.stage2-source-btn{border:0;background:transparent;color:var(--txt-2);font-family:var(--f-ui);font-size:11.5px;font-weight:700;padding:6px 9px;border-radius:5px;cursor:pointer}
.stage2-source-btn.on{background:var(--brand);color:var(--ink-on-accent,#1a1206)}

.stage2-player{position:relative;width:100%;aspect-ratio:var(--stage-aspect,16 / 9);background:#05060a;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line)}
.stage2-player video{width:100%;height:100%;object-fit:contain;background:#05060a}
.stage2-player-poster{position:absolute;inset:0}
.stage2-player-poster img{width:100%;height:100%;object-fit:cover;opacity:.9}
.stage2-noframe{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--txt-2);font-size:12px;text-align:center;padding:20px}
.stage2-player-badge{position:absolute;left:14px;bottom:12px;font-size:11px;color:#e9e7e1;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);padding:4px 10px;border-radius:var(--r-s)}
/* unrendered video-player placeholder — a clean player surface, never a still/sheet */
.stage2-player-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:20px;
  background:radial-gradient(120% 120% at 50% 40%, #16181f 0%, #05060a 78%)}
.stage2-player-playring{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,255,255,.22);color:rgba(255,255,255,.72);margin-bottom:4px}
.stage2-player-playring svg{margin-left:3px}
.stage2-player-playring.busy{animation:pulse 1.2s ease-in-out infinite;border-color:var(--brand);color:var(--accent-ink)}
.stage2-player-msg{font-size:13px;font-weight:600;color:#e9e7e1;line-height:1.4}
.stage2-player-sub{font-size:11.5px;color:rgba(233,231,225,.5);line-height:1.4}
.stage2-player-bar{width:200px;max-width:60%;height:4px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;margin:3px 0}
.stage2-player-bar-fill{height:100%;border-radius:999px;background:var(--brand);transition:width .9s ease}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.92)}}
.stage2-ruler{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:8px;height:16px}
.stage2-ruler-track{position:relative;height:3px;border-radius:2px;background:var(--bg-4,var(--bg-3));overflow:hidden;min-width:0}
.stage2-ruler-fill{height:100%;border-radius:2px;background:var(--brand);width:0}
.stage2-ruler.empty .stage2-ruler-fill{width:0!important}
.stage2-ruler-dur{white-space:nowrap;font-family:var(--f-mono);font-size:11px;color:var(--txt-2);line-height:1}

.stage2-strip-cap{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--txt-3);margin:14px 0 6px;text-transform:uppercase}
.stage2-strip{display:flex;gap:8px;margin:0 0 16px;overflow-x:auto;padding-bottom:4px}
.stage2-strip-cell{flex:0 0 auto;width:128px;border:1px solid var(--line);background:var(--bg-2);border-radius:var(--r-m);overflow:hidden;cursor:pointer;padding:0;transition:.12s}
.stage2-strip-cell:hover{border-color:var(--line-2)}
.stage2-strip-cell.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.stage2-strip-thumb{position:relative;width:100%;aspect-ratio:var(--stage-aspect,16 / 9);background:#0a0b0f}
.stage2-strip-thumb img{width:100%;height:100%;object-fit:cover}
.stage2-strip-blank{width:100%;height:100%}
.stage2-strip-no{position:absolute;left:5px;top:5px;min-width:16px;height:16px;padding:0 4px;border-radius:4px;background:rgba(0,0,0,.6);color:#fff;font-family:var(--f-mono);font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.stage2-strip-cell.on .stage2-strip-no{background:var(--brand);color:var(--ink-on-accent,#1a1206)}
.stage2-strip-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 8px}
.stage2-strip-lab{font-size:10.5px;color:var(--txt-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-strip-dur{font-family:var(--f-mono);font-size:10px;color:var(--txt-2);flex:0 0 auto}
.stage2-take-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:0 0 16px}
.stage2-take-card{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:10px;border:1px solid var(--line);
  background:var(--bg-2);border-radius:9px;padding:7px;text-align:left;color:inherit;cursor:pointer;transition:.12s}
.stage2-take-card:hover{border-color:var(--line-2);background:var(--bg-3)}
.stage2-take-card.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.stage2-take-thumb{position:relative;aspect-ratio:16 / 9;border-radius:var(--r-s);overflow:hidden;background:#05060a}
.stage2-take-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.stage2-take-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;background:rgba(0,0,0,.58);color:#fff}
.stage2-take-play svg{margin-left:2px}
.stage2-take-meta{min-width:0;display:flex;flex-direction:column;gap:3px}
.stage2-take-title{font-size:12px;font-weight:700;color:var(--txt-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-take-sub{font-family:var(--f-mono);font-size:10px;color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-take-empty{display:flex;align-items:center;gap:9px;border:1px dashed var(--line-2);background:var(--bg-2);border-radius:9px;
  padding:14px 15px;margin:0 0 16px;color:var(--txt-2)}
.stage2-take-empty span{font-size:12px;font-weight:650;color:var(--txt-1)}
.stage2-take-empty small{margin-left:auto;font-size:11px;color:var(--txt-3)}

.stage2-chipbox{margin-top:11px;border-top:1px solid var(--line);padding-top:10px}
.stage2-chipbox-lab{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-bottom:7px}
.stage2-chips{display:flex;flex-wrap:wrap;gap:6px}
.stage2-chip{display:inline-flex;align-items:flex-start;gap:5px;max-width:min(100%,420px);font-family:var(--f-ui);font-size:11px;color:var(--txt-2);background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-s);padding:4px 8px;cursor:pointer;text-align:left;transition:.12s;white-space:normal;line-height:1.25}
.stage2-chip:hover{border-color:var(--line-2);background:var(--bg-2);color:var(--txt-1)}
.stage2-chip b{color:var(--txt-1);font-weight:700;flex:0 0 auto}
.stage2-chip span{min-width:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.stage2-chip.subject{border-color:color-mix(in oklab,var(--brand),transparent 62%)}
.stage2-chip.action{border-color:color-mix(in oklab,var(--pos),transparent 65%)}
.stage2-chip.camera{border-color:color-mix(in oklab,#8fb6ff,transparent 58%)}
.stage2-warn{display:flex;align-items:flex-start;gap:6px;margin-top:9px;font-size:11.5px;line-height:1.35;color:var(--danger)}

.stage2-assets-lab{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--txt-2);margin-bottom:9px}
.stage2-assets-lab span{font-size:9.5px;letter-spacing:.04em;color:var(--txt-3);text-align:right}
.stage2-assets-row{display:flex;gap:10px;flex-wrap:wrap}
.stage2-asset{width:96px;border:0;background:transparent;cursor:pointer;padding:0;text-align:left;opacity:.72;transition:.12s}
.stage2-asset.on{opacity:1}
.stage2-asset.excluded{opacity:.5}
.stage2-asset.missing{opacity:.38;cursor:not-allowed}
.stage2-asset.required{cursor:default}
.stage2-asset.add{cursor:default;opacity:.6}
.stage2-asset-vis{position:relative;width:96px;height:72px;border-radius:var(--r-m);border:1px solid var(--line-2);background:var(--bg-3);overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--txt-2)}
.stage2-asset.on .stage2-asset-vis{border-color:var(--brand)}
.stage2-asset.required .stage2-asset-vis{border-color:color-mix(in oklab,var(--pos),transparent 58%)}
.stage2-asset.excluded .stage2-asset-vis{filter:saturate(.55) brightness(.72)}
.stage2-asset.missing .stage2-asset-vis{border-style:dashed}
.stage2-asset-vis img{width:100%;height:100%;object-fit:cover}
.stage2-asset.add .stage2-asset-vis{border-style:dashed}
.stage2-asset-T{font-family:var(--f-mono);font-size:22px;color:var(--txt-1)}
.stage2-asset-tick{position:absolute;left:5px;top:5px;width:16px;height:16px;border-radius:50%;background:var(--brand);color:var(--ink-on-accent,#1a1206);display:flex;align-items:center;justify-content:center}
.stage2-asset.required .stage2-asset-tick{background:var(--accent);color:#07130d}
.stage2-asset-vid{position:absolute;right:5px;bottom:5px;width:18px;height:18px;border-radius:4px;background:rgba(0,0,0,.6);color:#fff;display:flex;align-items:center;justify-content:center}
/* maximise button on a reference tile — tap to open the lightbox */
.stage2-asset-max{position:absolute;right:5px;top:5px;width:20px;height:20px;border-radius:5px;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s;cursor:zoom-in;backdrop-filter:blur(2px)}
.stage2-asset-vis:hover .stage2-asset-max,.stage2-asset-max:focus{opacity:1}
.stage2-asset-max:hover{background:rgba(0,0,0,.78)}
@media (hover:none){ .stage2-asset-max{opacity:.9} }
/* the maximised reference viewer (lightbox) */
.stage2-lightbox{position:fixed;inset:0;z-index:9995;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:rgba(6,7,10,.86);backdrop-filter:blur(6px);padding:40px;cursor:zoom-out;animation:appconfirm-fade .14s ease}
.stage2-lightbox-media{max-width:min(1100px,92vw);max-height:82vh;object-fit:contain;border-radius:var(--r-m);box-shadow:0 24px 80px rgba(0,0,0,.5);background:#05060a}
.stage2-lightbox-cap{font-size:12.5px;color:#e9e7e1;background:rgba(0,0,0,.5);padding:5px 12px;border-radius:var(--r-m);max-width:80vw;text-align:center}
.stage2-lightbox-x{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.45);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.12s}
.stage2-lightbox-x:hover{background:rgba(0,0,0,.75)}
.stage2-asset-lab{font-size:10.5px;color:var(--txt-1);margin-top:5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-asset-foot{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:2px}
.stage2-asset-tag{font-family:var(--f-mono);font-size:9.5px;color:var(--txt-2)}
.stage2-asset-state{font-family:var(--f-mono);font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--txt-3)}
.stage2-asset.included .stage2-asset-state{color:var(--accent-ink)}
.stage2-asset.required .stage2-asset-state{color:var(--pos-ink)}
.stage2-asset.excluded .stage2-asset-state{color:var(--txt-3)}
.stage2-asset.missing .stage2-asset-state{color:var(--danger)}
.stage2-budget{margin-top:11px;border:1px solid var(--line);background:var(--bg-2);border-radius:var(--r-m);padding:9px 10px}
.stage2-budget-top{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:10px;color:var(--txt-2)}
.stage2-budget-top span{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.08em}
.stage2-budget-top b{color:var(--txt-0);font-size:11px}
.stage2-budget-top em{font-style:normal;color:var(--txt-3);white-space:nowrap}
.stage2-budget-bar{height:5px;margin-top:7px;border-radius:999px;background:var(--bg-4,var(--bg-3));overflow:hidden}
.stage2-budget-bar i{display:block;height:100%;border-radius:999px;background:var(--brand);transition:width .16s ease,background .16s ease}
.stage2-budget.near .stage2-budget-bar i,.stage2-budget.full .stage2-budget-bar i{background:var(--accent,#d8a657)}
.stage2-budget.over{border-color:var(--danger-line);background:var(--danger-soft)}
.stage2-budget.over .stage2-budget-bar i{background:var(--danger)}
.stage2-budget.over .stage2-budget-top b,.stage2-budget.over .stage2-budget-top em{color:var(--danger)}
.stage2-budget-panel{margin-top:-4px}

/* right panel */
.stage2-panel{border-left:1px solid var(--line);overflow:auto;padding:16px 16px 26px;display:flex;flex-direction:column;gap:14px}
.stage2-panel-card{border:1px solid var(--line);background:var(--bg-2);border-radius:var(--r-m);padding:14px}
.stage2-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.stage2-panel-t{font-family:var(--f-display);font-size:16px;font-weight:600;color:var(--txt-0)}
.stage2-panel-v{font-family:var(--f-mono);font-size:10px;color:var(--txt-2);border:1px solid var(--line-2);border-radius:4px;padding:2px 6px}
.stage2-context-list{display:flex;flex-direction:column;gap:8px}
.stage2-context-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12px}
.stage2-context-row span{font-family:var(--f-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-3)}
.stage2-context-row b{font-weight:650;color:var(--txt-0);text-align:right;min-width:0}
.stage2-context-copy{display:flex;flex-direction:column;gap:6px}
.stage2-context-copy label{font-family:var(--f-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--txt-3)}
.stage2-context-copy p{margin:0 0 6px;font-size:12.5px;line-height:1.45;color:var(--txt-1)}
.stage2-midcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.stage2-midcard{border:1px solid var(--line);background:var(--bg-2);border-radius:var(--r-m);padding:13px;min-width:0}
.stage2-midcard.wide{grid-column:1 / -1}
.stage2-midcard-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.stage2-midcard-head span{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.stage2-midcard-head b{font-family:var(--f-mono);font-size:10px;color:var(--txt-2);border:1px solid var(--line-2);border-radius:5px;padding:2px 6px;white-space:nowrap}
.stage2-context-list.compact{gap:6px}
.stage2-context-list.compact .stage2-context-row{font-size:11.5px}
.stage2-ref-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.stage2-ref-tag{font-size:11px;font-weight:650;color:var(--txt-1);background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-s);padding:4px 7px}
.stage2-ref-tag.cast{border-color:color-mix(in oklab,var(--brand),transparent 60%)}
.stage2-ref-tag.loc{border-color:color-mix(in oklab,#8fb6ff,transparent 58%)}
.stage2-ref-tag.prop{border-color:color-mix(in oklab,var(--pos),transparent 62%)}
.stage2-ref-empty{font-size:12px;color:var(--txt-3)}
.stage2-caps{display:flex;flex-direction:column;gap:9px}
.stage2-cap{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--txt-1)}
.stage2-cap-d{width:6px;height:6px;border-radius:1.5px;transform:rotate(45deg);background:var(--brand);flex:0 0 auto}
.stage2-modes{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.stage2-mode{border:1px solid var(--line-2);background:var(--bg-2);color:var(--txt-1);font-family:var(--f-ui);font-size:12px;font-weight:600;padding:9px 8px;border-radius:var(--r-m);cursor:pointer;transition:.12s;text-align:center}
.stage2-mode:hover{background:var(--bg-3)}
.stage2-mode.on{background:var(--brand);border-color:var(--brand);color:var(--ink-on-accent,#1a1206)}
.stage2-sec-lab{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--txt-2);margin-top:2px}
.stage2-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stage2-sum{border:1px solid var(--line);background:var(--bg-2);border-radius:var(--r-m);padding:10px 6px;text-align:center}
.stage2-sum-k{font-size:10.5px;color:var(--txt-2);margin-bottom:4px}
.stage2-sum-n{font-family:var(--f-mono);font-size:18px;font-weight:700;color:var(--accent-ink)}
.stage2-ctrls{display:flex;flex-direction:column;gap:9px}
.stage2-ctrl{display:flex;align-items:center;gap:10px}
.stage2-ctrl-l{flex:0 0 96px;font-size:11.5px;color:var(--txt-2)}
.stage2-inp{flex:1;min-width:0;background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-m);color:var(--txt-0);font-family:var(--f-ui);font-size:12px;padding:7px 9px;outline:0}
.stage2-inp:focus{border-color:var(--brand)}
.stage2-lockval{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-m);color:var(--txt-0);font-family:var(--f-mono);font-size:12px;padding:7px 9px}
.stage2-lockval span{font-family:var(--f-ui);font-size:11px;color:var(--pos-ink)}
.stage2-lockval.warn{border-color:var(--danger-line);background:var(--danger-soft);color:var(--danger-ink)}
.stage2-lockval.warn span{color:var(--danger-ink)}
.stage2-toggle{flex:1;display:flex;background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-m);padding:2px}
.stage2-tg{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:0;background:transparent;color:var(--txt-2);font-family:var(--f-ui);font-size:11.5px;font-weight:600;padding:6px;border-radius:5px;cursor:pointer}
.stage2-tg.on{background:var(--brand);color:var(--ink-on-accent,#1a1206)}
.stage2-generate{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;background:var(--brand);color:var(--ink-on-accent,#1a1206);
  font-family:var(--f-ui);font-size:13.5px;font-weight:700;padding:13px;border-radius:9px;cursor:pointer;transition:.12s}
.stage2-generate:hover:not(:disabled){filter:brightness(1.06)}
.stage2-generate:disabled{opacity:.45;cursor:default}
.stage2-generate.small{width:auto;padding:9px 12px;border-radius:var(--r-m);font-size:12px;flex:0 0 auto}
.stage2-extend{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;border:1px solid var(--line-2);background:var(--bg-2);
  color:var(--txt-0);font-family:var(--f-ui);font-size:12.5px;font-weight:600;padding:11px;border-radius:9px;cursor:pointer;transition:.12s}
.stage2-extend:hover:not(:disabled){background:var(--bg-3)}
.stage2-extend:disabled{opacity:.4;cursor:default}
.stage2-credit{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;color:var(--txt-2)}
.stage2-err{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;color:var(--danger-ink);background:var(--danger-soft);border:1px solid var(--danger-line);border-radius:var(--r-m);padding:9px 11px;line-height:1.45}
.stage2-gen-busy{display:flex;flex-direction:column;gap:9px}
.stage2-gen-prog{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--txt-1);font-family:var(--f-mono)}
.stage2-gen-prog .orb{width:14px;height:14px;border-radius:50%;background:var(--brand);animation:pulse 1.1s ease-in-out infinite}

/* Stage right panel — compact video-generator module */
.stage2-panel.video-gen{padding:0;border-left:1px solid var(--line);background:var(--bg-0);overflow:auto}
.sd-gen-panel{min-height:100%;padding:12px;display:flex;flex-direction:column;gap:14px;background:var(--bg-0);color:var(--txt-0)}
.sd-gen-hero{display:flex;align-items:stretch;justify-content:space-between;gap:10px;background:linear-gradient(135deg,var(--accent-soft,rgba(216,126,0,.16)),var(--bg-2));border:1px solid var(--accent,#d67e00);border-radius:var(--r-l);padding:10px 8px 10px 10px}
.sd-gen-titleblock{min-width:0;display:flex;flex-direction:column;gap:6px}
.sd-gen-tools{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;border:0;background:transparent;color:var(--txt-2);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;padding:0;cursor:pointer}
.sd-gen-tools:hover{color:var(--txt-0)}
.sd-gen-title{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-size:15px;font-weight:700;color:var(--txt-0);line-height:1.15}
.sd-gen-info{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--line-3);background:var(--bg-1);color:var(--txt-2);padding:0;cursor:pointer}
.sd-gen-info:hover{color:var(--txt-0);border-color:var(--accent,#d67e00)}
.sd-gen-template{width:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-2);color:var(--txt-1);font-family:var(--f-mono);font-size:9.5px;font-weight:700;cursor:pointer}
.sd-gen-template:hover{border-color:var(--accent,#d67e00);background:var(--bg-3)}
.sd-gen-label{font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-bottom:-6px}
.sd-gen-selectwrap{height:32px;display:flex;align-items:center;gap:9px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-2);color:var(--txt-0);padding:0 10px}
.sd-gen-select{flex:1;min-width:0;border:0;appearance:none;background:transparent;color:var(--txt-0);font:700 13px var(--f-ui);outline:0}
.sd-gen-select option{background:var(--bg-2);color:var(--txt-0)}
.sd-gen-refgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sd-gen-ref{position:relative;height:64px;border:1px dashed var(--line-3);border-radius:var(--r-m);background:var(--bg-2);color:var(--txt-0);overflow:hidden;text-align:left;padding:10px 12px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;cursor:pointer}
.sd-gen-ref:hover{border-color:var(--accent,#d67e00);background:var(--bg-3)}
.sd-gen-ref img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.sd-gen-ref-ic,.sd-gen-ref span{position:relative;z-index:1}
.sd-gen-ref-ic{color:var(--txt-2)}
.sd-gen-ref span{font-size:12px;font-weight:650}
.sd-gen-addmedia{min-height:50px;border:1px dashed var(--line-3);border-radius:var(--r-m);background:var(--bg-2);color:var(--txt-1);display:flex;align-items:center;gap:13px;padding:9px 12px}
.sd-gen-media-icons{display:flex;align-items:center;gap:5px;color:var(--txt-2)}
.sd-gen-media-icons span{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--bg-1)}
.sd-gen-media-icons .sd-gen-plus{border-style:dashed}
.sd-gen-addmedia b{font-size:12px;font-weight:650}
.sd-gen-shotrow{display:flex;align-items:center;gap:8px;margin-bottom:-4px}
.sd-gen-shotrow .sd-gen-label{margin:0}
.sd-gen-shot-plus{width:24px;height:24px;border-radius:50%;border:1px solid var(--line-3);background:var(--bg-1);color:var(--txt-1);display:grid;place-items:center;cursor:pointer}
.sd-gen-shot-plus:hover{border-color:var(--accent,#d67e00);color:var(--accent-ink)}
.sd-gen-promptbox{border:1px solid var(--accent,#d67e00);border-radius:var(--r-l);background:var(--bg-1);box-shadow:0 0 0 1px color-mix(in oklab,var(--accent,#d67e00),transparent 72%)}
.sd-gen-promptbox:focus-within{border-color:var(--accent,#d67e00);box-shadow:0 0 0 2px color-mix(in oklab,var(--accent,#d67e00),transparent 72%)}
.sd-gen-prompt{width:100%;min-height:112px;border:0;resize:vertical;background:transparent;color:var(--txt-0);font:500 14px/1.55 var(--f-ui);outline:0;padding:14px}
.sd-gen-prompt::placeholder{color:var(--txt-3)}
.sd-gen-prompt-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 10px 10px}
.sd-gen-prompt-foot span{font-family:var(--f-mono);font-size:11px;color:var(--txt-3)}
.sd-gen-prompt-actions{display:flex;align-items:center;gap:8px}
.sd-gen-prompt-actions button{width:24px;height:24px;border:0;background:transparent;color:var(--txt-2);display:grid;place-items:center;border-radius:5px;cursor:pointer}
.sd-gen-prompt-actions button:hover{background:var(--bg-3);color:var(--accent-ink)}
.sd-gen-pills{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sd-gen-pills button,.sd-gen-quality button,.sd-gen-voice,.sd-gen-cancel{border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-2);color:var(--txt-0);font:800 12px var(--f-ui);display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 10px;cursor:pointer}
.sd-gen-pills button{min-height:32px}
.sd-gen-quality{display:flex;gap:8px;margin-top:-3px}
.sd-gen-quality button{flex:1;opacity:.72}
.sd-gen-quality button.on{opacity:1;background:var(--bg-1);border-color:var(--accent,#d67e00);color:var(--accent-ink)}
.sd-gen-voice{width:100%;background:var(--accent-soft,rgba(216,126,0,.12));border-color:var(--accent,#d67e00);color:var(--accent-ink)}
.sd-gen-submit{height:40px;border:0;border-radius:var(--r-m);background:var(--accent,#d67e00);color:var(--ink-on-accent,#1a1206);font:800 13px var(--f-ui);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px;cursor:pointer;margin-top:2px}
.sd-gen-submit:hover:not(:disabled){filter:brightness(1.05)}
.sd-gen-submit:disabled{opacity:.48;cursor:default}
.sd-gen-cancel{width:100%;background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger-ink)}
.sd-gen-busy{border:1px solid var(--line-2);border-radius:var(--r-m);padding:10px;background:var(--bg-2)}
.sd-gen-err{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger-ink)}
.sd-gen-credit{color:var(--txt-3)}
.sd-gen-credit.empty{color:var(--danger)}

/* model picker — data-driven from SEEDANCE_MODELS (app/stage.jsx); a disabled "soon"
   model reuses the same washed-out treatment as the room switcher's "Soon" rooms. */
.sd-gen-modelrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:-2px}
.sd-gen-model{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-2);color:var(--txt-1);font:700 11.5px var(--f-ui);padding:7px 10px;cursor:pointer}
.sd-gen-model:hover:not(:disabled){border-color:var(--accent,#d67e00);color:var(--txt-0)}
.sd-gen-model.on{background:var(--bg-1);border-color:var(--accent,#d67e00);color:var(--accent-ink)}
.sd-gen-model:disabled{opacity:.55;cursor:default}
.sd-gen-model-soon{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);border:1px solid var(--line-2);border-radius:4px;padding:1px 4px}
/* plan-locked model/resolution — visible + clickable (opens the plans modal), never hidden */
.sd-gen-model.plan-locked{opacity:.62}
.sd-gen-model-soon.plan{color:var(--pos-ink);border-color:var(--pos-line)}
.stage2-respill.plan-locked{opacity:.62;border-style:dashed}
.stage2-respill.plan-locked:hover{opacity:1;border-color:var(--pos);color:var(--pos-ink)}
.respill-lock{margin-left:3px;color:var(--pos-ink);font-weight:800}

/* resolution pills — Standard tier unlocks 1080p; Fast caps at 720p (disabled, not hidden,
   so the ceiling is visible rather than silently missing). */
.stage2-respills{display:flex;gap:5px;width:100%}
.stage2-respill{flex:1;border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg-3);color:var(--txt-1);font:650 10.5px var(--f-ui);padding:7px 4px;cursor:pointer}
.stage2-respill:hover:not(:disabled){border-color:var(--brand)}
.stage2-respill.on{background:var(--brand);border-color:var(--brand);color:var(--ink-on-accent,#1a1206)}
.stage2-respill:disabled{opacity:.4;cursor:default}

/* seed — optional manual value + reuse-last/clear, for reproducible re-renders */
.stage2-seedrow{display:flex;align-items:center;gap:6px;width:100%}
.stage2-seed-input{flex:1;min-width:0;height:32px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg-3);color:var(--txt-0);font:650 11.5px var(--f-mono);padding:0 9px;outline:0}
.stage2-seed-input:focus{border-color:var(--brand)}
.stage2-seed-btn{flex:0 0 auto;width:28px;height:28px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg-3);color:var(--txt-2);cursor:pointer;font-size:12px;line-height:1}
.stage2-seed-btn:hover{border-color:var(--brand);color:var(--accent-ink)}

/* (the prompt recipe picker died with the tab row — one derived prompt, 2026-08-02) */

/* Render-settings panel — docked on the RIGHT like the Writers' Room inspector.
   Open: a fixed-width scrolling column with its own header + collapse button.
   Closed: the shared vertical CollapsedStrip (chrome.jsx) reopens it. */
.stage2-settings-drawer{width:var(--insp-w);flex:0 0 var(--insp-w);min-width:0;display:flex;flex-direction:column;min-height:0;
  border-left:1px solid var(--line);background:var(--bg-1);overflow:auto}
.stage2-settings-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 2px;flex:0 0 auto}
/* the panel's tabs — the Writers' Room INSPECTOR underline strip, reused verbatim */
.stage2-settings-tabs{flex:0 0 auto;padding-top:4px}
.stage2-settings-drawer .sd-gen-panel{padding:12px 14px 26px}

/* ---- unified RENDER card — every cost-bearing choice (model · tier · resolution ·
   duration) + the live credit cost + capability chips, in one glanceable card above
   the settings tabs. ---- */
.stage2-rc-wrap{flex:0 0 auto;padding:10px 14px 2px}
.stage2-rendercard{display:flex;flex-direction:column;gap:10px;padding:12px 13px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:0 10px 30px rgba(39,35,29,.05)}
.stage2-rc-head{display:flex;align-items:center;justify-content:space-between}
.stage2-rc-cost{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:11.5px;font-weight:700;
  color:var(--accent-ink);background:var(--pos-soft);border:1px solid var(--pos-line);border-radius:20px;padding:3px 10px}
.stage2-rc-cost.empty{color:var(--alert);background:var(--alert-soft);border-color:var(--alert)}
.stage2-rc-math{font-family:var(--f-mono);font-size:10px;letter-spacing:.02em;color:var(--txt-2);
  padding:7px 9px;background:var(--bg-1);border:1px dashed var(--line-2);border-radius:var(--r-m)}
.stage2-rc-caps{display:flex;flex-wrap:wrap;gap:5px}
.stage2-rc-cap{font-family:var(--f-mono);font-size:9px;letter-spacing:.03em;text-transform:uppercase;color:var(--txt-2);
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:20px;padding:2px 8px;white-space:nowrap;cursor:default}
.stage2-rc-cap:hover{color:var(--txt-1);border-color:var(--line-3)}
/* batch-takes advanced row (settings tab) */
.stage2-batchrow{justify-content:flex-start}
.stage2-batchrow-n{font-family:var(--f-mono);font-size:11.5px;color:var(--txt-1);min-width:44px;text-align:center}
@media (max-width:900px){
  /* stacked fallback: panel rides below the console content, strip hidden */
  .stage2-console-composer > .strip{display:none}
  .stage2-settings-drawer{width:auto;border-left:0;border-top:1px solid var(--line)}
}

/* Stage v2.5 — light production desk matching the Seedance mockup */
.stage2-root{background:var(--bg-1)}
.stage2-rail{background:var(--bg-1)}
/* (the Stage's view tabs now reuse the shared .viewnav/.segmented chrome — chrome.jsx) */
.stage2-console{grid-template-columns:minmax(0,1fr) 306px;background:var(--bg-1)}
.stage2-center{padding:18px 24px 42px}
.stage2-player{border-radius:var(--r-m);box-shadow:0 16px 40px rgba(39,35,29,.10)}
.stage2-take-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.stage2-take-card{grid-template-columns:1fr;padding:0;gap:0;border-radius:var(--r-m);background:var(--bg-2);overflow:hidden}
.stage2-take-thumb{border-radius:0}
.stage2-take-meta{padding:6px 7px}
/* overflow:visible (not hidden) so the @-mention dropdown can escape the box;
   the chips row carries the bottom rounding instead */
.stage2-director-prompt{margin:18px 0 16px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-2);box-shadow:0 12px 36px rgba(39,35,29,.06);overflow:visible}
.stage2-director-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 4px}
.stage2-director-title{display:flex;align-items:center;gap:8px;min-width:0}
.stage2-director-title b{font-size:14px;color:var(--txt-0)}
.stage2-director-badge{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;color:var(--txt-2);border:1px solid var(--line-2);border-radius:4px;padding:2px 5px;background:var(--bg-3)}
.stage2-prompt-library{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--accent-ink);font:700 11px var(--f-ui);cursor:pointer}
.stage2-prompt-library:hover{text-decoration:underline}
.stage2-director-text{width:100%;height:94px;border:0;resize:none;background:transparent;color:var(--txt-0);font:500 13px/1.55 var(--f-ui);outline:0;padding:8px 14px 12px}
.stage2-director-text::placeholder{color:var(--txt-3)}
.stage2-director-chips{display:flex;flex-wrap:nowrap;gap:7px;padding:10px 14px 13px;border-top:1px solid var(--line);border-radius:0 0 9px 9px;background:var(--bg-3);max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.stage2-director-chips::-webkit-scrollbar{height:5px}
.stage2-director-chips::-webkit-scrollbar-thumb{background:var(--line-3);border-radius:999px}
.stage2-director-chips button{flex:0 0 auto}
.stage2-director-chips button{display:inline-flex;align-items:center;gap:5px;max-width:100%;border:1px solid var(--line);background:var(--bg-3);color:var(--txt-1);border-radius:var(--r-s);padding:5px 8px;font-size:10.5px;cursor:pointer}
.stage2-director-chips button:hover{border-color:var(--brand)}
.stage2-director-chips b{font-family:var(--f-mono);font-size:9px;text-transform:lowercase;color:var(--txt-3);font-weight:700}
.stage2-director-chips span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.stage2-assets-lab{margin:18px 0 8px}
.stage2-assets-lab span{text-align:left;letter-spacing:.12em}
.stage2-assets-lab b{font-family:var(--f-mono);font-size:10px;color:var(--txt-3);font-weight:600}
.stage2-assets-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:7px}
.stage2-asset{position:relative;width:88px;flex:0 0 88px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-m);padding:6px;opacity:1}
.stage2-asset:hover{border-color:var(--line-2)}
.stage2-asset.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.stage2-asset.required{border-color:color-mix(in oklab,var(--brand),transparent 28%)}
.stage2-asset.excluded{opacity:.5}
.stage2-asset.missing{opacity:.45;border-style:dashed}
.stage2-asset.add{background:transparent;border-style:dashed;display:flex;flex-direction:column;justify-content:center}
.stage2-asset-vis{width:100%;height:48px;border:0;border-radius:5px;background:var(--bg-3)}
.stage2-asset.on .stage2-asset-vis,.stage2-asset.required .stage2-asset-vis{border:0}
.stage2-asset-check{position:absolute;left:5px;top:5px;width:16px;height:16px;border-radius:50%;background:var(--brand);color:var(--ink-on-accent,#1a1206);display:grid;place-items:center;z-index:2}
.stage2-asset:not(.on) .stage2-asset-check{display:none}
.stage2-asset-textic{font-family:var(--f-mono);font-size:22px;color:var(--txt-1)}
.stage2-asset-name{display:block;margin-top:5px;font-size:10.5px;color:var(--txt-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-asset small{display:block;margin-top:2px;font-family:var(--f-mono);font-size:9px;color:var(--txt-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:lowercase}
.stage2-asset.on small,.stage2-asset.required small{color:var(--accent-ink)}
.stage2-assets-warnings{display:grid;gap:7px;margin-top:8px}
.stage2-assets-warnings .stage2-warn{margin-top:0;border:1px solid var(--danger-line);border-radius:var(--r-m);background:var(--danger-soft);padding:6px 9px;align-items:center;font-size:11px}
.stage2-midcards{margin-top:18px}
.stage2-panel.video-gen{background:var(--bg-1);padding:14px;border-left:1px solid var(--line-2)}
.sd-gen-panel{padding:0;background:transparent;gap:12px}
.sd-gen-hero,.sd-gen-capability{background:var(--bg-2);border:1px solid var(--line);border-radius:9px;box-shadow:0 10px 30px rgba(39,35,29,.04)}
.sd-gen-hero{padding:12px}
.sd-gen-template{background:var(--bg-3);border-color:var(--line);width:72px}
.sd-gen-capability{padding:13px 14px;display:flex;flex-direction:column;gap:8px}
.sd-gen-cap-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.sd-gen-cap-head b{font-size:14px;color:var(--txt-0)}
.sd-gen-cap-head span{font-family:var(--f-mono);font-size:9px;border:1px solid var(--line);border-radius:4px;padding:2px 5px;color:var(--txt-2)}
.sd-gen-cap-row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--txt-1)}
.sd-gen-cap-row svg{color:var(--accent-ink)}
.sd-gen-modegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;padding:5px}
.sd-gen-mode{min-height:38px;border:0;border-radius:var(--r-s);background:transparent;color:var(--txt-1);font:750 10.5px/1.15 var(--f-ui);cursor:pointer}
.sd-gen-mode:hover{background:var(--bg-3)}
.sd-gen-mode.on{background:var(--brand);color:var(--ink-on-accent,#1a1206)}
.sd-gen-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.sd-gen-summary-card{display:flex;flex-direction:column;align-items:center;gap:5px;border:1px solid var(--line);background:var(--bg-2);border-radius:var(--r-m);padding:10px 4px}
.sd-gen-summary-card span{font-size:10px;color:var(--txt-2)}
.sd-gen-summary-card b{display:flex;align-items:center;gap:4px;color:var(--accent-ink);font-family:var(--f-mono);font-size:16px}
/* labelled tray-openers in the Render settings panel (References / Elements) */
.sd-gen-refbtns{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.sd-gen-refbtns button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--bg-3);color:var(--txt-1);font:700 11px var(--f-ui);padding:8px 6px;cursor:pointer;white-space:nowrap}
.sd-gen-refbtns button:hover{border-color:var(--brand);color:var(--txt-0)}
.sd-gen-refbtns button.on{border-color:var(--brand);color:var(--accent-ink);background:var(--accent-soft,rgba(214,126,0,.08))}
.stage2-ctrl{display:grid;grid-template-columns:88px minmax(0,1fr);gap:8px;align-items:center}
.stage2-ctrl-l{flex:initial;font-size:10.5px}
/* long option labels ellipsize instead of running under the native dropdown arrow */
.stage2-ctrl select{min-width:0;width:100%;border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg-3);color:var(--txt-0);font:650 11.5px var(--f-ui);padding:8px 26px 8px 9px;outline:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-ctrl select:focus{border-color:var(--brand)}
.sd-gen-pills{display:none}
.sd-gen-quality{margin-top:0;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-m);padding:4px}
.sd-gen-quality button{border:0;background:transparent}
.sd-gen-quality button.on{background:var(--brand);border-color:var(--brand);color:var(--ink-on-accent,#1a1206)}
.sd-gen-submit{height:44px;border-radius:var(--r-m);justify-content:center;background:var(--brand);font-size:13px;margin-top:6px}
.sd-gen-credit{font-size:10.5px}

/* Stage v3 — closer to the supplied production-console reference */
.stage2-root{background:var(--bg-1);color:var(--txt-0)}
.stage2-body{background:var(--bg-1)}
.stage2-main{background:var(--bg-1)}
.stage2-rail{padding:14px 12px;background:var(--bg-1);border-right:1px solid var(--line-2)}
.stage2-rail-head{padding:1px 4px 12px;font-size:9.5px;color:var(--txt-2)}
.stage2-scene-list{gap:10px}
.stage2-scene-block{padding:0 0 10px;border-bottom:1px solid var(--line-2)}
.stage2-scene-headrow{padding:8px 8px;border-radius:var(--r-m)}
.stage2-scene-headrow.on{background:var(--bg-2)}
.stage2-console{grid-template-columns:minmax(0,1fr) 294px;background:var(--bg-1)}
.stage2-center{padding:18px 24px 34px}
.stage2-center > .stage2-clip-head,
.stage2-center > .stage2-player,
.stage2-center > .stage2-ruler,
.stage2-center > .stage2-timeline,
.stage2-center > .stage2-director-prompt,
.stage2-center > .stage2-assets-lab,
.stage2-center > .stage2-assets-row,
.stage2-center > .stage2-assets-warnings{max-width:860px;margin-left:auto;margin-right:auto}
.stage2-clip-head{margin-bottom:12px}
.stage2-clip-slug{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-0)}
.stage2-clip-loc{font-weight:800;color:var(--txt-0)}
.stage2-clip-name{font-weight:700;color:var(--txt-0)}
/* clip-packing switcher on the player head: per-clip vs whole-scene shooting */
.stage2-iconbtn{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-3);color:var(--txt-2);cursor:pointer}
.stage2-iconbtn:hover{border-color:var(--line-3);color:var(--txt-0)}
.stage2-player{border-radius:var(--r-m);border:1px solid var(--line-3);background:#05060a;box-shadow:0 14px 34px rgba(39,35,29,.12)}
.stage2-ruler{height:16px;margin-top:8px;margin-bottom:10px}
.stage2-ruler-track{background:var(--line-3)}
.stage2-ruler-dur{font-size:10.5px}
.stage2-timeline{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;align-items:center;gap:8px;margin:12px auto 16px}
.stage2-time-arrow{width:30px;height:30px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-3);color:var(--txt-2);display:grid;place-items:center;cursor:pointer}
.stage2-time-arrow:hover{border-color:var(--line-3);color:var(--accent-ink)}
.stage2-time-track{min-width:0}
.stage2-time-scene-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 5px;color:var(--txt-2);font:700 9px var(--f-mono);letter-spacing:.03em;text-transform:uppercase}
.stage2-time-scene-head span:last-child{flex:0 0 auto;color:var(--txt-2)}
.stage2-time-ruler{display:grid;grid-template-columns:repeat(5,1fr);font:700 9px var(--f-mono);color:var(--txt-2);margin:0 2px 5px}
.stage2-time-ruler span{text-align:center}
.stage2-time-ruler span:first-child{text-align:left}
.stage2-time-ruler span:last-child{text-align:right}
.stage2-time-ruler span.on{color:var(--accent-ink)}
.stage2-time-cards{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:7px;padding-bottom:4px}
.stage2-time-cards::-webkit-scrollbar{height:6px}
.stage2-time-cards::-webkit-scrollbar-thumb{background:var(--line-3);border-radius:999px}
.stage2-time-card{flex:0 0 150px;min-width:0;border:1px solid var(--line-2);background:var(--bg-2);border-radius:var(--r-m);padding:0;text-align:left;color:inherit;cursor:pointer;overflow:hidden}
.stage2-time-card.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.stage2-time-card:hover{border-color:var(--line-3)}
.stage2-time-card.missing{border-style:dashed;background:var(--bg-1)}
.stage2-time-card.stale{border-color:var(--accent-line);background:var(--accent-soft)}
.stage2-time-thumb{position:relative;height:58px;background:#111;overflow:hidden}
.stage2-time-thumb img,.stage2-time-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.stage2-time-card.missing .stage2-time-thumb img{filter:saturate(.55);opacity:.62}
.stage2-time-blank{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--bg-3),var(--bg-4))}
.stage2-time-play{position:absolute;right:5px;bottom:5px;width:20px;height:20px;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;display:grid;place-items:center}
.stage2-time-merge{position:absolute;left:5px;top:5px;height:16px;padding:0 5px;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;font:800 9px var(--f-mono);display:grid;place-items:center}
.stage2-time-state{position:absolute;right:5px;top:5px;max-width:calc(100% - 10px);height:17px;padding:0 6px;border:1px solid rgba(255,255,255,.36);border-radius:5px;background:rgba(31,29,25,.78);color:#fff;font:800 9px var(--f-mono);display:grid;place-items:center;text-transform:uppercase;letter-spacing:.03em}
.stage2-time-state.approved{background:rgba(45,104,65,.88)}
.stage2-time-state.missing{background:rgba(80,76,69,.78)}
.stage2-time-state.stale{background:rgba(158,91,0,.9)}
.stage2-time-meta{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0;padding:5px 6px 6px}
.stage2-time-meta b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;color:var(--txt-0)}
.stage2-time-meta span{flex:0 0 auto;font:700 9px var(--f-mono);color:var(--txt-2)}
.stage2-time-empty{flex:1 1 auto;border:1px dashed var(--line-2);border-radius:var(--r-m);background:var(--bg-2);color:var(--txt-2);font-size:11px;display:flex;align-items:center;justify-content:center;min-height:86px;padding:0 14px;text-align:center}
.stage2-director-prompt{margin-top:18px;margin-bottom:16px;border-color:var(--line-2);border-radius:var(--r-m);box-shadow:0 12px 32px rgba(39,35,29,.06)}
.stage2-director-text{height:86px;font-size:12.5px;line-height:1.5}
.stage2-director-chips{background:var(--bg-1)}
.stage2-assets-lab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;margin-bottom:8px}
.stage2-assets-row{gap:8px}
.stage2-asset{width:80px;flex-basis:80px;border-color:var(--line-2);box-shadow:none}
.stage2-asset.on{border-color:var(--line-2);box-shadow:none}
.stage2-asset.required{border-color:var(--line-2)}
.stage2-asset-check{background:var(--bg-3);color:var(--accent-ink);border:1px solid var(--line-2)}
.stage2-asset.on .stage2-asset-check{background:var(--brand);color:var(--ink-on-accent);border-color:var(--brand)}
.stage2-asset-vis{height:45px}
.stage2-panel.video-gen{padding:16px 15px 22px;background:var(--bg-1);border-left:1px solid var(--line-2)}
.sd-gen-panel{gap:14px}
.sd-gen-capability{border-color:var(--line-2);border-radius:var(--r-m);box-shadow:0 10px 26px rgba(39,35,29,.04)}
.sd-gen-cap-head b{font-size:14px}
.sd-gen-cap-row{font-size:11px}
.sd-gen-modegrid{border-color:var(--line-2)}
.sd-gen-summary-card{border-color:var(--line-2)}
.stage2-ctrl{grid-template-columns:86px minmax(0,1fr)}
.stage2-ctrl-l{font-size:10px;color:var(--txt-2)}
.stage2-ctrl select{height:32px;border-color:var(--line-2);background:var(--bg-3);font-size:10.5px;padding-right:26px}
.sd-gen-submit{height:42px;margin-top:8px}

/* secondary tabs */
.stage2-board-scroll{flex:1;min-height:0;overflow:auto;padding:18px 20px 36px}
.stage2-board-scene{margin-bottom:24px}
.stage2-board-scene-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.stage2-board-scene-k{font-family:var(--f-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-3)}
.stage2-board-scene-t{font-family:var(--f-display);font-size:15px;font-weight:650;color:var(--txt-0);margin-top:2px}
.stage2-board-progress{font-family:var(--f-mono);font-size:11px;color:var(--txt-2);white-space:nowrap}
.stage2-board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.stage2-sheets{flex:1;min-height:0;overflow:auto;padding:20px 24px 40px}
.stage2-sheets-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.stage2-sheets-title{font-family:var(--f-display);font-size:20px;font-weight:700;color:var(--txt-0);margin-top:3px}
.stage2-sheets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.stage2-sheet-card{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);background:var(--bg-2);border-radius:var(--r-m);
  overflow:hidden;cursor:pointer;text-align:left;padding:0;color:inherit;transition:.14s}
.stage2-sheet-card:hover{border-color:var(--line-2);transform:translateY(-1px)}
.stage2-sheet-card:disabled{cursor:default;transform:none;opacity:.92}
.stage2-sheet-card.missing{border-style:dashed;background:var(--bg)}
.stage2-sheet-thumb{position:relative;aspect-ratio:var(--stage-aspect,16 / 9);background:#08090d;overflow:hidden}
.stage2-sheet-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.stage2-sheet-missing{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--txt-3);font-family:var(--f-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}
.stage2-sheet-meta{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:10px 11px}
.stage2-sheet-label{font-family:var(--f-mono);font-size:11px;font-weight:700;color:var(--txt-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-sheet-clip{font-size:11px;color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.stage2-card{border:1px solid var(--line);background:var(--bg-2);border-radius:var(--r-m);overflow:hidden;cursor:pointer;text-align:left;padding:0;transition:.14s;color:inherit}
.stage2-card:hover{border-color:var(--line-2);transform:translateY(-1px)}
.stage2-card.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.stage2-card.done{background:var(--bg-3)}
.stage2-card-thumb{position:relative;aspect-ratio:var(--stage-aspect,16 / 9);background:#08090d;overflow:hidden}
.stage2-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.stage2-card-blank{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--txt-3);font-family:var(--f-mono);font-size:10px}
.stage2-card-play{position:absolute;right:8px;bottom:8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:var(--ink-on-accent,#1a1206)}
.stage2-card-body{padding:10px 11px 11px}
.stage2-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stage2-card-lab{font-family:var(--f-mono);font-size:11px;font-weight:700;color:var(--txt-0)}
.stage2-card-dur{font-family:var(--f-mono);font-size:10.5px;color:var(--txt-2)}
.stage2-card-beat{font-size:12.5px;color:var(--txt-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.stage2-card-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
.stage2-status{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--line);border-radius:5px;padding:2px 5px;color:var(--txt-2);background:var(--bg)}
.stage2-status.ready{color:var(--pos-ink);border-color:color-mix(in oklab,var(--pos),transparent 58%);background:color-mix(in oklab,var(--pos),transparent 90%)}
.stage2-status.partial{color:var(--accent-ink);border-color:color-mix(in oklab,var(--brand),transparent 55%);background:color-mix(in oklab,var(--brand),transparent 90%)}
.stage2-status.missing{color:var(--txt-3)}
.stage2-status.silent{color:var(--txt-3);border-style:dashed}
.stage2-link{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--txt-0);font-family:var(--f-ui);font-size:12px;font-weight:600;padding:7px 12px;border-radius:var(--r-m);cursor:pointer}
.stage2-link:hover{background:var(--bg-3)}
.stage2-link.primary{background:var(--brand);border-color:var(--brand);color:var(--ink-on-accent,#1a1206)}
.stage2-link.primary:hover{filter:brightness(1.05)}
@media (max-width:1180px){
  .stage2-console{grid-template-columns:minmax(0,1fr) 300px}
  .stage2-center{padding:18px 18px 34px}
  .stage2-panel{padding:14px 14px 24px}
  .stage2-panel.video-gen{padding:14px}
  .stage2-midcards{grid-template-columns:1fr 1fr}
  .stage2-midcard.wide{grid-column:1 / -1}
  .stage2-board-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  .stage2-summary{gap:6px}
}
@media (max-width:1040px){
  .stage2-console{display:block;overflow:auto}
  .stage2-center{overflow:visible;padding:18px 20px 18px}
  .stage2-panel{overflow:visible;border-left:0;border-top:1px solid var(--line);padding:16px 20px 28px}
  .stage2-panel.video-gen{border-left:0;border-top:1px solid var(--line);padding:16px 20px 24px;background:var(--bg-1)}
  .sd-gen-panel{min-height:auto;padding:0}
  .stage2-panel-card{padding:12px}
  .stage2-modes{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stage2-ctrls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px}
  .stage2-ctrl{align-items:stretch;flex-direction:column;gap:5px}
  .stage2-ctrl-l{flex:0 0 auto}
  .stage2-summary{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stage2-budget-panel{margin-top:0}
}
@media (max-width:860px){
  .stage2-body{display:flex;flex-direction:column}
  .stage2-rail{width:auto;flex:0 0 auto;border-right:0;border-bottom:1px solid var(--line);max-height:154px;padding:10px 12px;overflow:auto}
  /* the rail's collapsed strip becomes a slim horizontal bar in the stacked layout */
  .stage2-body > .strip{width:100%;height:auto;flex:0 0 auto;flex-direction:row;justify-content:flex-start;
    padding:8px 12px;gap:10px;border-right:0;border-bottom:1px solid var(--line)}
  .stage2-body > .strip .strip-label{writing-mode:horizontal-tb;transform:none;margin-top:0}
  .stage2-head{align-items:flex-start;flex-direction:column}
  .stage2-head-actions{justify-content:flex-start;width:100%}
  .stage2-main{flex:1}
  .stage2-board-scroll{padding:14px 14px 28px}
  .stage2-board-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
  .stage2-scene-list{display:flex;flex-direction:column;gap:6px;overflow:visible;padding-bottom:3px}
  .stage2-scene-pick{width:auto;min-width:178px;flex:0 0 auto;border:1px solid var(--line);background:var(--bg-2)}
  .stage2-scene-pick.on::before{left:0;top:auto;bottom:-1px;transform:none;width:100%;height:2px}
  .stage2-cliplist{display:flex;gap:7px;margin-left:0;padding:4px 0 8px;border-left:0;overflow-x:auto}
  .stage2-cliprow{width:auto;min-width:156px;flex:0 0 auto;border:1px solid var(--line);background:var(--bg-2)}
  .stage2-cliprow.on::before{left:0;top:auto;bottom:-1px;transform:none;width:100%;height:2px}
  .stage2-scene-row{padding-left:2px}
  .stage2-scene-ttl{max-width:100%}
  .stage2-rail-head{padding-left:2px}
}
@media (max-width:640px){
  .stage2-root{overflow:auto}
  .stage2-body{min-height:auto;overflow:visible}
  .stage2-main{overflow:visible}
  .stage2-head{padding:11px 12px;gap:10px}
  .stage2-head-meta{gap:7px;font-size:9.5px}
  .stage2-head-actions{gap:8px}
  .stage2-nav{width:100%}
  .stage2-navbtn{flex:1;justify-content:center;padding:7px 10px}
  .stage2-voiceall,.stage2-voiceall .stage2-link{width:100%}
  .stage2-voiceall .stage2-link{justify-content:center}
  .stage2-rail{max-height:138px}
  .stage2-console{overflow:visible}
  .stage2-center{padding:14px 12px 16px}
  .stage2-panel{padding:14px 12px 24px}
  .stage2-panel.video-gen{padding:12px}
  .sd-gen-panel{padding:0}
  .stage2-midcards{grid-template-columns:1fr}
  .stage2-clip-head{align-items:flex-start;flex-direction:column;gap:7px}
  .stage2-clip-slug{width:100%;flex-wrap:wrap;line-height:1.35}
  .stage2-clip-name{white-space:normal}
  .stage2-player{border-radius:var(--r-m)}
  .stage2-player-badge{left:9px;right:9px;bottom:9px;text-align:center}
  .stage2-strip-cell{width:112px}
  .sd-prompt{padding:12px}
  .stage2-assets-lab{align-items:flex-start;flex-direction:column;gap:4px}
  .stage2-assets-lab span{text-align:left}
  .stage2-assets-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .stage2-asset{width:100%;min-width:0}
  .stage2-asset-vis{width:100%;height:auto;aspect-ratio:4/3}
  .stage2-asset-lab{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.5em}
  .stage2-asset-foot{align-items:flex-start;flex-direction:column;gap:1px}
  .stage2-budget-top{align-items:flex-start;flex-wrap:wrap}
  .stage2-modes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage2-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage2-ctrls{grid-template-columns:1fr}
  .stage2-lockval{align-items:flex-start;flex-direction:column}
  .stage2-board-scroll{padding:12px}
  .stage2-board-scene-head{align-items:flex-start;flex-direction:column;gap:4px}
  .stage2-board-grid{grid-template-columns:1fr}
}

/* ---- Seedance director controls (the redesigned generation area) ---- */
.sd-prompt{margin:18px 0 12px;border:1px solid var(--line-2);background:var(--bg-2);border-radius:var(--r-l);padding:14px 16px 10px;transition:.12s}
.sd-prompt:focus-within{border-color:var(--brand)}
.stage2-prompt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.stage2-prompt-head>div{display:flex;align-items:center;gap:8px;min-width:0}
.sd-recipes{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.sd-recipes-lab{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-right:2px}
.sd-recipe{border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-1);font-family:var(--f-ui);font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;cursor:pointer;transition:.12s}
.sd-recipe:hover{color:var(--txt-0);border-color:var(--txt-3)}
.sd-recipe.on{background:var(--brand);border-color:var(--brand);color:var(--ink-on-accent,#1a1206)}
.sd-prompt-ta{width:100%;border:0;background:transparent;resize:vertical;color:var(--txt-0);font-family:var(--f-ui);font-size:14px;line-height:1.55;outline:0;min-height:62px}
.sd-prompt-ta::placeholder{color:var(--txt-3)}
.sd-prompt-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.sd-prompt-helper{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--txt-1);font-family:var(--f-ui);font-size:12px;font-weight:600;cursor:pointer;padding:4px 6px;border-radius:var(--r-s)}
.sd-prompt-helper:hover{background:var(--bg-3);color:var(--accent-ink)}
.sd-prompt-count{font-family:var(--f-mono);font-size:11px;color:var(--txt-3)}

/* Stage v4 — compact Seedance composer, TURN's normal light "production desk" surface
   and brand (amber) accent — no bespoke dark/neon theme of its own. */
/* two columns: the production desk + the docked render-settings panel (or its
   collapsed strip) — mirroring the Writers' Room canvas + inspector split. */
.stage2-console.stage2-console-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;overflow:hidden;background:var(--bg-1)}
/* the center column scrolls; its direct children are already width-capped + centered
   by the Stage v3 rules above, so the desk stays centered beside the docked panel */
.stage2-console.stage2-console-composer .stage2-center{overflow:auto;max-width:none;margin:0;padding-bottom:52px}
@media (max-width:900px){
  .stage2-console.stage2-console-composer{display:block;overflow:auto}
  .stage2-console.stage2-console-composer .stage2-center{overflow:visible}
}
.stage2-compose-mode>.stage2-director-prompt,
.stage2-compose-mode>.stage2-assets-lab,
.stage2-compose-mode>.stage2-assets-row,
.stage2-compose-mode>.stage2-assets-warnings{display:none!important}
.stage2-gen-composer{margin:18px auto 18px;max-width:860px;border-radius:var(--r-m);background:var(--bg-2);color:var(--txt-0);
  border:1px solid var(--line);box-shadow:0 12px 36px rgba(39,35,29,.06);padding:13px 14px 12px}
.stage2-gen-reference-row{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:7px;margin:0 0 11px;min-width:0}
.stage2-gen-assets{min-height:38px;display:flex;align-items:center;gap:7px;margin:0;min-width:0;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.stage2-gen-assets::-webkit-scrollbar{height:6px}
.stage2-gen-assets::-webkit-scrollbar-thumb{background:var(--line-3);border-radius:999px}
/* the strip wrapper anchors the "Add references" picker OUTSIDE the horizontal
   scroller (an absolutely positioned popover inside overflow-x:auto gets clipped) */
.stage2-gen-strip{position:relative;min-width:0}
/* "Add references" — first tile of the strip, same 72×48 rectangle as the thumbnails:
   three round image / video / audio icons over the label, on the same paper card
   surface (--bg-2 / --line-2) as the text and thumbnail tiles beside it */
.stage2-gen-add{position:relative;width:72px;height:48px;flex:0 0 72px;border:1px solid var(--line-2);border-radius:9px;padding:0;margin:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--bg-2,#faf9f5);color:var(--txt-1);cursor:pointer;overflow:hidden}
.stage2-gen-add:hover,.stage2-gen-add.open{border-color:var(--brand,#d67e00)}
.stage2-gen-add.open{background:var(--bg-3,#f6f6f4)}
.stage2-gen-add:focus-visible{outline:2px solid var(--brand,#d67e00);outline-offset:2px}
.stage2-gen-add-icons{display:flex;align-items:center;justify-content:center;gap:2px}
.stage2-gen-add-ico{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;background:var(--bg-3,#f6f6f4);color:var(--txt-1);box-shadow:0 0 0 1px var(--line-2)}
.stage2-gen-add-ico svg{display:block}
.stage2-gen-add-label{font:750 7.5px/1 var(--f-ui);letter-spacing:.01em;color:var(--txt-1);white-space:nowrap}
.stage2-gen-add-sub{font:600 6px/1 var(--f-ui);letter-spacing:0;color:var(--txt-2);white-space:nowrap}
/* the picker is position:fixed — placed from the card's rect at open time (below it,
   or above when the viewport has more room there) and capped to the visible height,
   so neither the strip's scroller nor the scrolling centre column can clip it.
   Rows: heading · scope · list (the only row that scrolls) · upload box. */
.stage2-gen-strip .stage2-gen-add-pop{position:fixed;right:auto;min-width:0;box-sizing:border-box;overflow:hidden;
  grid-template-rows:auto auto minmax(0,1fr) auto}
.stage2-gen-strip .stage2-gen-add-pop .sdbar-mention-list{max-height:none;min-height:0}
.stage2-character-choices{display:grid;gap:6px;margin:0 0 12px}
.stage2-character-choice{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line,var(--line-2));border-radius:var(--r-m);font-size:11px}
.stage2-character-choice>span{min-width:0;flex:1 1 160px;overflow-wrap:anywhere}
.stage2-character-choice b,.stage2-character-choice small{display:block}
.stage2-character-choice small{margin-top:3px;color:var(--txt-2);font-size:10px}
.stage2-character-choice button{border:1px solid var(--line,var(--line-2));border-radius:var(--r-s);padding:6px 9px;background:var(--bg-2);color:var(--txt-0);font:inherit;cursor:pointer}
.stage2-character-choice button:hover:not(:disabled){border-color:var(--brand,#d67e00)}
.stage2-character-choice button:focus-visible{outline:2px solid var(--brand,#d67e00);outline-offset:2px}
.stage2-character-choice button:disabled{opacity:.55;cursor:not-allowed}
.stage2-gen-asset.off{opacity:.42}
.stage2-gen-asset.off:hover{opacity:.75}
.stage2-gen-asset.missing,.stage2-gen-asset.missing:hover{opacity:1;border-style:dashed;cursor:default}
.stage2-gen-asset.retryable{cursor:pointer;border-style:dashed}
.stage2-gen-asset.retryable:hover{opacity:1;cursor:pointer;border-color:var(--brand,#d67e00)}
.stage2-gen-asset{position:relative;width:72px;height:48px;flex:0 0 72px;border:1px solid var(--line-2);border-radius:9px;padding:0;
  background:var(--bg-2,#faf9f5);color:var(--txt-1);overflow:hidden;cursor:pointer}
.stage2-gen-asset:hover{border-color:var(--brand,#d67e00)}
.stage2-gen-asset img,.stage2-gen-asset video{width:100%;height:100%;object-fit:cover;display:block}
.stage2-gen-asset-text,.stage2-gen-asset-icon{position:absolute;inset:0;display:grid;place-items:center;font:800 21px var(--f-mono);color:var(--txt-2)}
.stage2-gen-asset-check{position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand,#d67e00);color:var(--ink-on-accent,#2c2722);box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.stage2-gen-asset-max{position:absolute;right:3px;bottom:3px;width:16px;height:16px;border-radius:4px;background:rgba(0,0,0,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s;cursor:zoom-in}
.stage2-gen-asset:hover .stage2-gen-asset-max,.stage2-gen-asset-max:focus{opacity:1}
.stage2-gen-asset-max:hover{background:rgba(0,0,0,.78)}
@media (hover:none){ .stage2-gen-asset-max{opacity:.85} }
/* the asset's @mention handle — connects each chip to the prompt grammar (@Img2 = @Image2) */
.stage2-gen-asset-tag{position:absolute;left:2px;bottom:2px;padding:1px 3px;border-radius:3px;background:rgba(0,0,0,.6);color:#fff;
  font:700 7.5px var(--f-mono);letter-spacing:.02em;pointer-events:none}
/* URL-less or failed-to-load ref tile: kind icon + the asset's own name, so a missing
   sheet reads as "wedding ring — nothing to send yet", never a broken-picture glyph */
.stage2-gen-asset-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--txt-3);padding:2px}
.stage2-gen-asset-ph small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;
   font:500 8px/1.2 var(--f-ui);letter-spacing:.01em;text-align:center;word-break:break-word;color:var(--txt-2)}
.stage2-gen-asset-ph strong{font:650 9px/1.2 var(--f-ui);color:var(--txt-1)}
.stage2-gen-asset[data-thumbnail-state="loading"] .stage2-gen-asset-ph strong{color:var(--accent-ink)}
.stage2-gen-asset[data-thumbnail-state="error"] .stage2-gen-asset-ph strong{color:var(--danger)}
/* "Reset to script" — appears on the prompt box only once the text diverges from
   the derived screenplay + Art Room assembly */
.stage2-prompt-reset{position:absolute;top:7px;right:7px;z-index:2;border:1px solid var(--line-2);border-radius:999px;background:var(--bg-3);color:var(--txt-2);font:650 9.5px var(--f-ui);padding:3px 9px;cursor:pointer;opacity:.9}
.stage2-prompt-reset:hover{color:var(--accent-ink);border-color:var(--brand);opacity:1}
/* auto reference-role preview — appended to the prompt at render, shown read-only here */
.stage2-gen-refs{display:grid;gap:3px;margin-top:10px;border:1px dashed var(--line-2);border-radius:var(--r-m);padding:9px 11px;background:var(--bg-2,#faf9f5)}
.stage2-gen-refs b{font:700 9px var(--f-mono);letter-spacing:.1em;color:var(--txt-3)}
.stage2-gen-refs span{font:500 11px/1.45 var(--f-ui);color:var(--txt-1)}
/* soft guidance (not an error) — e.g. native audio on with no sound direction in the prompt */
.stage2-hint{display:flex;align-items:flex-start;gap:7px;border:1px solid var(--accent-line,rgba(214,126,0,.35));background:var(--accent-soft,rgba(214,126,0,.08));
  color:var(--txt-1);border-radius:var(--r-m);padding:8px 10px;font-size:11.5px;line-height:1.45}
.stage2-hint svg{flex:0 0 auto;margin-top:1px;color:var(--accent-ink)}
.stage2-dialogue-assign-wrap{display:grid;gap:7px}
.stage2-dialogue-assign-hint{align-items:center}
.stage2-dialogue-assign-copy{flex:1;min-width:0}
.stage2-hint-act{flex:0 0 auto;border:1px solid var(--brand,#d67e00);border-radius:var(--r-m);background:var(--bg-3);color:var(--accent-ink);
  font:750 10.5px var(--f-ui);padding:5px 10px;cursor:pointer;white-space:nowrap}
.stage2-hint-act:hover:not(:disabled){background:var(--accent-soft,rgba(214,126,0,.08))}
.stage2-hint-act:disabled{opacity:.5;cursor:default}
.stage2-dialogue-assign-panel{display:grid;gap:8px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-1,#fff);padding:10px;box-shadow:0 8px 24px rgba(40,32,24,.08)}
.stage2-dialogue-assign-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.stage2-dialogue-assign-head>div{display:grid;gap:2px}
.stage2-dialogue-assign-head b{font:750 11.5px var(--f-ui);color:var(--txt-0)}
.stage2-dialogue-assign-head small{font:500 10.5px/1.35 var(--f-ui);color:var(--txt-2)}
.stage2-dialogue-assign-head>span{font:700 9px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);white-space:nowrap}
.stage2-dialogue-assign-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.72fr);align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:8px}
.stage2-dialogue-line{display:grid;gap:2px;min-width:0}
.stage2-dialogue-line b{font:700 9px var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--txt-2)}
.stage2-dialogue-line span{font:500 11.5px/1.35 var(--f-ui);color:var(--txt-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage2-dialogue-assign-row select{width:100%;min-width:0;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-3);color:var(--txt-0);font:600 10.5px var(--f-ui);padding:6px 26px 6px 8px}
.stage2-dialogue-assign-cap,.stage2-dialogue-assign-error{display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:var(--r-m);padding:7px 8px;font:600 10.5px/1.35 var(--f-ui)}
.stage2-dialogue-assign-cap{border:1px solid var(--accent-line,rgba(214,126,0,.35));background:var(--accent-soft,rgba(214,126,0,.08));color:var(--txt-1)}
.stage2-dialogue-assign-cap button{border:0;background:transparent;color:var(--accent-ink);font:750 10.5px var(--f-ui);cursor:pointer;text-decoration:underline}
.stage2-dialogue-assign-error{border:1px solid var(--danger-line);background:var(--danger-soft);color:var(--danger-ink)}
.stage2-dialogue-assign-foot{display:flex;justify-content:flex-end;gap:7px;border-top:1px solid var(--line);padding-top:8px}
.stage2-dialogue-assign-foot button{border-radius:var(--r-m);font:750 10.5px var(--f-ui);padding:6px 10px;cursor:pointer}
.stage2-dialogue-cancel{border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-1)}
.stage2-dialogue-save{border:1px solid var(--brand);background:var(--brand);color:var(--ink-on-accent,#2c2722)}
.stage2-dialogue-save:disabled{opacity:.45;cursor:default}
@media(max-width:760px){
  .stage2-dialogue-assign-hint{align-items:flex-start;flex-wrap:wrap}
  .stage2-hint-act{margin-left:19px}
  .stage2-dialogue-assign-row{grid-template-columns:1fr}
}

/* the PRIMARY blocker — the one thing stopping Generate. Prominent + actionable in
   place (deliberately not a modal: persistent state, not an event). Clicking the
   blocked Generate button shakes it and scrolls it into view. */
.stage2-blocker{display:flex;align-items:center;gap:8px;border:1.5px solid var(--brand,#d67e00);background:var(--accent-soft,rgba(214,126,0,.1));
  color:var(--txt-0);border-radius:var(--r-m);padding:8px 11px;font:600 11.5px/1.4 var(--f-ui);box-shadow:0 4px 14px rgba(214,126,0,.12)}
.stage2-blocker svg{flex:0 0 auto;color:var(--accent-ink)}
.stage2-blocker-text{flex:1;min-width:0}
.stage2-blocker-act{flex:0 0 auto;border:0;border-radius:var(--r-m);background:var(--brand,#d67e00);color:var(--ink-on-accent,#2c2722);
  font:800 11px var(--f-ui);padding:7px 11px;cursor:pointer;white-space:nowrap}
.stage2-blocker-act:hover:not(:disabled){filter:brightness(1.06)}
.stage2-blocker-act:disabled{opacity:.6;cursor:default}
.stage2-blocker.pulse{animation:stage2BlockerPulse .8s ease}
@keyframes stage2BlockerPulse{
  0%{transform:translateX(0);box-shadow:0 0 0 0 rgba(214,126,0,.5)}
  18%{transform:translateX(-5px)} 36%{transform:translateX(5px)} 54%{transform:translateX(-3px)} 72%{transform:translateX(3px)}
  100%{transform:translateX(0);box-shadow:0 0 0 16px rgba(214,126,0,0)}
}
/* Generate stays clickable while blocked (so it can explain itself) but looks disabled */
.stage2-gen-submit-neon.blocked,.sd-gen-submit.blocked{opacity:.45;filter:saturate(.55);cursor:not-allowed}
.stage2-gen-submit-neon.blocked:hover,.sd-gen-submit.blocked:hover{filter:saturate(.55)}
.stage2-gen-extra{height:30px;min-width:30px;padding:0 9px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-2,#faf9f5);color:var(--txt-2);font:800 11px var(--f-mono);border:1px solid var(--line-2)}
.stage2-gen-box{position:relative;border-radius:var(--r-m);background:var(--bg-2,#faf9f5);box-shadow:inset 0 0 0 1px var(--line-2);padding:14px 14px 12px}
.stage2-gen-promptwrap{position:relative;width:100%}
.stage2-gen-promptwrap .stage2-gen-prompt{width:100%}
.stage2-mention-box{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-m);box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:6;max-height:min(360px,52vh);overflow-y:auto}
.stage2-mention-item{display:flex;align-items:center;gap:9px;width:100%;padding:6px 10px;border:0;background:transparent;color:var(--txt-1);font:600 11px var(--f-ui);cursor:pointer;text-align:left}
.stage2-mention-thumb{width:30px;height:30px;border-radius:var(--r-s);object-fit:cover;flex:0 0 auto;background:#000;border:1px solid var(--line-2)}
.stage2-mention-thumb.tile{display:inline-flex;align-items:center;justify-content:center;color:var(--txt-2)}
.stage2-mention-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.stage2-mention-main b{font:700 11px var(--f-mono);color:var(--txt-0)}
.stage2-mention-label{font:600 10px var(--f-ui);color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-mention-kind{flex:0 0 auto;font:700 9px var(--f-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--txt-2);border:1px solid var(--line-2);border-radius:99px;padding:2px 7px;background:var(--bg-2)}
.stage2-mention-item.hi,.stage2-mention-item:hover{background:var(--bg-2)}
.stage2-mention-warn{margin-top:6px;font:600 10.5px var(--f-ui);color:var(--accent-ink);line-height:1.4}
.stage2-gen-prompt{width:100%;height:auto;min-height:150px;max-height:none;resize:none;border:0;outline:0;background:transparent;
  color:var(--txt-0);font:500 15px/1.45 var(--f-ui);padding:0 0 9px;overflow:visible}
.stage2-gen-prompt::placeholder{color:var(--txt-3)}
/* the Seedance-style chip editor — a contentEditable div wearing the textarea's clothes */
.stage2-gen-prompt-shell{position:relative;width:100%}
.stage2-gen-prompt-rich{width:100%;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text;overflow:visible}
.stage2-gen-prompt-rich:empty::before{content:attr(data-placeholder);color:var(--txt-3);pointer-events:none}
.stage2-chip{display:inline-flex;align-items:center;gap:5px;vertical-align:-4px;margin:0 2px;padding:2px 5px 2px 3px;
  border:1px solid var(--line-2);border-radius:99px;background:var(--bg-3);
  font:700 11px/1.3 var(--f-mono);color:var(--txt-0);user-select:none;white-space:nowrap}
.stage2-chip img{width:18px;height:18px;border-radius:50%;object-fit:cover;border:1px solid var(--line-2);background:#000;display:block}
.stage2-chip-tile{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-4);color:var(--txt-2);font-size:10px}
.stage2-chip-caret{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:5px;
  color:var(--txt-2);cursor:pointer;font-size:9px;transition:.1s}
.stage2-chip-caret:hover{background:var(--bg-5);color:var(--txt-0)}
.sdbar{position:relative;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;overflow:visible}
.sdbar-left{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap;overflow:visible;padding-bottom:1px}
.sdbar-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.sdbar-anchor{position:relative;flex:0 0 auto}
.sdbar-pill{height:34px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line-2);
  border-radius:var(--r-m);background:var(--bg-3);color:var(--txt-0);font:750 12px var(--f-ui);padding:0 11px;white-space:nowrap;cursor:pointer}
.sdbar-pill svg{color:inherit}
.sdbar-pill.model svg:last-child,.sdbar-muted+svg,.sdbar-grid button svg{color:var(--accent-ink)}
.sdbar-pill:hover,.sdbar-anchor.open .sdbar-pill{border-color:var(--brand,#d67e00);background:var(--bg-2);color:var(--txt-0)}
.sdbar-muted{color:var(--txt-2);font-weight:800}
.sdbar-chevron{color:var(--txt-3);font-size:11px;margin-left:1px}
.sdbar-pop{position:absolute;left:0;bottom:calc(100% + 8px);z-index:9991;min-width:230px;padding:8px;
  background:var(--bg-2);border:1px solid var(--line-3);border-radius:var(--r-l);box-shadow:var(--shadow-pop);display:grid;gap:4px}
.sdbar-pop-narrow{min-width:190px}
.sdbar-pop-wide{min-width:292px}
.sdbar-pop-format{min-width:340px;gap:10px}
.sdbar-pop-duration{min-width:360px;left:auto;right:0;gap:10px}
.sdbar-pop-mention{min-width:292px;left:auto;right:0;gap:10px}
.sdbar-pop label{font:650 11px var(--f-ui);letter-spacing:0;color:var(--txt-3);padding:0 4px}
.sdbar-option{width:100%;border:0;border-radius:var(--r-m);background:transparent;color:var(--txt-1);text-align:left;padding:8px 9px;cursor:pointer}
.sdbar-option:hover:not(:disabled){background:var(--bg-3);color:var(--txt-0)}
.sdbar-option.on{background:var(--bg-2);color:var(--txt-0)}
.sdbar-option.disabled,.sdbar-option:disabled{opacity:.48;cursor:default}
.sdbar-option-main{display:flex;align-items:center;gap:8px}
.sdbar-option-main b{flex:1;min-width:0;font:750 12px var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdbar-option-check{font:900 12px var(--f-ui);color:var(--txt-0)}
.sdbar-beta,.sdbar-option-note{display:inline-flex;align-items:center;border:1px solid var(--accent-line,rgba(214,126,0,.3));border-radius:5px;
  background:var(--accent-soft,rgba(214,126,0,.08));color:var(--accent-ink);font:800 9px var(--f-ui);padding:1px 4px}
.sdbar-option-desc{display:block;margin-top:4px;font:500 10.5px/1.35 var(--f-ui);color:var(--txt-2)}
.sdbar-option-note{margin-top:5px;color:var(--txt-3);background:var(--bg-2);border-color:var(--line-2)}
.sdbar-grid{display:grid;gap:4px;background:var(--bg-2);border-radius:var(--r-l);padding:6px}
.sdbar-grid.six{grid-template-columns:repeat(6,minmax(0,1fr))}
.sdbar-grid.three{grid-template-columns:repeat(4,minmax(0,1fr))}
.sdbar-grid button{height:40px;border:0;border-radius:9px;background:transparent;color:var(--txt-1);font:750 10.5px var(--f-ui);cursor:pointer}
.sdbar-grid button:hover:not(:disabled){background:var(--bg-2)}
.sdbar-grid button.on{background:var(--bg-2);color:var(--txt-0);box-shadow:0 1px 4px rgba(39,35,29,.12)}
.sdbar-grid button:disabled{opacity:.45;cursor:default}
.sdbar-grid button.plan-locked{color:var(--accent-ink)}
.sdbar-ratio-ico{display:block;width:18px;height:10px;border:1.8px solid currentColor;border-radius:3px;margin:0 auto 4px;box-sizing:border-box}
.sdbar-ratio-ico.ratio-21x9{width:21px;height:9px}
.sdbar-ratio-ico.ratio-16x9{width:18px;height:10px}
.sdbar-ratio-ico.ratio-4x3{width:16px;height:12px}
.sdbar-ratio-ico.ratio-1x1{width:14px;height:14px}
.sdbar-ratio-ico.ratio-3x4{width:12px;height:16px}
.sdbar-ratio-ico.ratio-9x16{width:10px;height:18px}
.sdbar-pop-duration input[type=range]{width:100%;accent-color:var(--brand,#d67e00)}
.sdbar-duration-row{display:flex;justify-content:space-between;color:var(--txt-3);font:700 10px var(--f-mono)}
.sdbar-pop-duration b{justify-self:end;font:800 12px var(--f-ui);color:var(--txt-0)}
.sdbar-duration-min{display:block;color:var(--txt-2);font:500 10.5px/1.4 var(--f-ui)}
/* one decision per character across every affected shot — same persisted per-shot
   override as the row buttons, written for each listed shot on one click */
.stage2-character-bulk{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--brand,#d67e00);border-radius:var(--r-m);background:color-mix(in srgb,var(--brand,#d67e00) 7%,var(--bg-2));font-size:11px}
.stage2-character-bulk>span{min-width:0;flex:1 1 200px;overflow-wrap:anywhere}
.stage2-character-bulk b,.stage2-character-bulk small{display:block}
.stage2-character-bulk small{margin-top:3px;color:var(--txt-2);font-size:10px}
.stage2-character-bulk button{border:1px solid var(--brand,#d67e00);border-radius:var(--r-s);padding:6px 9px;background:var(--brand,#d67e00);color:var(--ink-on-accent,#2c2722);font:inherit;font-weight:700;cursor:pointer}
.stage2-character-bulk button:hover:not(:disabled){filter:brightness(1.06)}
.stage2-character-bulk button:focus-visible{outline:2px solid var(--brand,#d67e00);outline-offset:2px}
.stage2-character-bulk button:disabled{opacity:.55;cursor:not-allowed}
.sdbar-mention-list{display:grid;gap:4px;max-height:min(440px,58vh);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
.sdbar-mention-list button{display:flex;align-items:center;gap:8px;border:0;border-radius:9px;background:transparent;text-align:left;color:var(--txt-1);padding:6px;cursor:pointer}
.sdbar-mention-list button:hover{background:var(--bg-2);color:var(--txt-0)}
.sdbar-mention-list img,.sdbar-mention-list .tile{width:30px;height:30px;border-radius:var(--r-m);object-fit:cover;background:#0d0e12;color:#fff;display:grid;place-items:center;flex:0 0 auto}
.sdbar-mention-list button>span{display:grid;gap:1px;flex:1;min-width:0}
.sdbar-mention-list b{font:800 11px var(--f-mono)}
.sdbar-mention-list small{font:600 10px var(--f-ui);color:var(--txt-2);display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdbar-mention-group{margin-left:auto;flex:0 0 auto;border:1px solid var(--line-2);border-radius:99px;padding:2px 6px;
  color:var(--txt-3);background:var(--bg-2);font:750 9px var(--f-ui);font-style:normal;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.sdbar-empty{font:600 12px var(--f-ui);color:var(--txt-2);padding:18px 10px;text-align:center}
.sdbar-mention-scope{display:flex;flex-direction:column;gap:2px;padding:4px 4px 8px;border-bottom:1px solid var(--line,var(--line-2));margin-bottom:6px}
.sdbar-mention-scope b{font:650 11px var(--f-ui);color:var(--txt-1)}
.sdbar-mention-scope span{font:500 10.5px var(--f-ui);color:var(--txt-3)}
.sdbar-addbox{display:grid;gap:5px;padding:6px;border-radius:var(--r-l);background:var(--bg-2)}
.sdbar-addbox button{height:32px;border:0;border-radius:var(--r-m);background:var(--bg-3);color:var(--txt-0);font:650 12px var(--f-ui);cursor:pointer}
.sdbar-addbox button:hover{box-shadow:0 1px 5px rgba(39,35,29,.12)}
.sdbar-cost{display:inline-flex;align-items:center;gap:5px;color:var(--txt-1);font:850 12px var(--f-ui);white-space:nowrap}
.sdbar-cost svg{color:var(--txt-2)}
.sdbar-send{width:38px;height:38px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--brand,#d67e00);
  color:var(--ink-on-accent,#2c2722);font:900 18px/1 var(--f-ui);cursor:pointer;box-shadow:0 8px 20px rgba(214,126,0,.24)}
.sdbar-send:hover:not(:disabled){filter:brightness(1.05)}
.sdbar-send:disabled{opacity:.52;cursor:default;filter:saturate(.6)}
.sdbar-send.blocked{opacity:.48;cursor:not-allowed}
.sdbar-send.working{font-size:16px}

/* ==== Shoot composer — Create Video | Edit Video | Motion Control ==============
   One paper card per mode (Higgsfield's layout, this app's light surfaces): a
   header card naming the model, the reference strip or dropzones, the prompt box
   with "@ Elements" / "Sound" chips, then stacked option rows and one full-width
   Generate button that carries the price. */
.sdbar-chip{height:30px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-3);
  color:var(--txt-1);font:750 12px var(--f-ui);padding:0 12px 0 10px;white-space:nowrap;cursor:pointer}
.sdbar-chip:hover:not(:disabled),.sdbar-anchor.open .sdbar-chip{border-color:var(--brand,#d67e00);color:var(--txt-0);background:var(--bg-3)}
.sdbar-chip:disabled{opacity:.55;cursor:default}
.sdbar-chip.sound{color:var(--txt-2)}
.sdbar-chip.sound.on{border-color:var(--brand,#d67e00);color:var(--accent-ink)}
.sdbar-chip .sdbar-chevron{margin-left:-1px}
.sdbar-chip-at{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--txt-0);color:var(--bg-1);font:900 10px/1 var(--f-ui)}
.sdbar-count{font:700 11px var(--f-mono);color:var(--txt-3);white-space:nowrap}
/* stacked option rows (Model / Bitrate / Quality…) + the 3-up cell grid */
/* composer bar — one line of inline chips at the card's foot, Generate at the right
   end standing taller than the chips (the chips bottom-align with it); chips and
   Generate share the same rounded-rectangle shape */
.sdbar.inline{margin-top:10px;padding-top:0;border-top:0;align-items:stretch;gap:12px}
.sdbar.inline.divided{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
/* the chips behave like inline blocks: one line when the card is wide enough, wrapping
   onto a second line in a narrower column — either way they pack to the foot of the
   bar and Generate keeps the right end */
.sdbar.inline .sdbar-left{flex:1 1 auto;gap:6px;align-content:flex-end}
.sdbar.inline .sdbar-pill{height:30px;border-radius:var(--r-m);padding:0 11px 0 10px;background:var(--bg-3);font:750 12px var(--f-ui);gap:6px}
.sdbar.inline .sdbar-chip.sound,.sdbar.inline .sdbar-chip.sound.on{border-color:var(--line-2);color:var(--txt-0);opacity:1}
.sdbar.inline .sdbar-pill span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sdbar.inline .sdbar-pill:disabled{cursor:default;opacity:1;color:var(--txt-2)}
.sdbar.inline .sdbar-pill:disabled:hover{border-color:var(--line-2);background:var(--bg-3)}
.sdbar.inline .sdbar-pill:disabled .sdbar-chevron{display:none}
.sdrow-label{font:650 12px var(--f-ui);color:var(--txt-2)}
.sdrow-badge{display:inline-flex;align-items:center;gap:4px;height:19px;padding:0 8px;border-radius:5px;background:var(--bg-3,#f0ede6);color:var(--txt-1);font:800 10.5px var(--f-mono);letter-spacing:.02em}
.sdbar.inline .sdbar-right{flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:6px}
.sdbar.inline .stage2-generate{flex:1 1 auto;width:auto;min-width:140px;height:auto;min-height:56px;margin:0;padding:0 18px;border-radius:var(--r-m)}
/* the right-most chips open their menus flush with the right edge so nothing spills out of the card */
.sdbar.inline .sdbar-left>.sdbar-anchor:nth-last-child(-n+2) .sdbar-pop{left:auto;right:0}
.stage2-opts{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.stage2-gen-box .stage2-opts{margin-top:0}
.stage2-opt-grid{display:grid;gap:8px}
.stage2-opt-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.stage2-opt-grid.dz{align-items:stretch}
/* header card — kicker + model name over the shot's start frame, with a Change action */
.stage2-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:74px;padding:14px 16px;margin-bottom:10px;
  border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-2,#faf9f5);color:var(--txt-0)}
.stage2-hero.has-bg{color:#fff;border-color:transparent}
/* the still is clipped in its own layer (not by the card) so the Change menu can drop below the card */
.stage2-hero-media{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.stage2-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.9);transform:scale(1.04)}
.stage2-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,20,16,.78) 0%,rgba(24,20,16,.55) 55%,rgba(24,20,16,.30) 100%)}
.stage2-hero-text{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0}
.stage2-hero-kicker{font:800 9.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;opacity:.72}
.stage2-hero-title{font:800 16px/1.2 var(--f-ui);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-hero-sub{font:500 11.5px/1.4 var(--f-ui);opacity:.8}
.stage2-hero-action{position:relative;flex:0 0 auto}
.sdbar-pill.hero{height:30px;border-radius:var(--r-m);padding:0 12px;background:rgba(255,255,255,.92)}
.stage2-hero:not(.has-bg) .sdbar-pill.hero{background:var(--bg-3)}
.stage2-hero-help{height:30px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;border:1px solid rgba(255,255,255,.35);border-radius:var(--r-m);
  background:rgba(255,255,255,.14);color:inherit;font:750 12px var(--f-ui);cursor:pointer}
.stage2-hero:not(.has-bg) .stage2-hero-help{border-color:var(--line-2);background:var(--bg-3);color:var(--txt-1)}
.stage2-hero.has-bg .stage2-hero-help:hover,.stage2-hero.has-bg .stage2-hero-help.on{background:rgba(255,255,255,.28)}
.stage2-hero:not(.has-bg) .stage2-hero-help:hover,.stage2-hero:not(.has-bg) .stage2-hero-help.on{border-color:var(--brand,#d67e00);color:var(--txt-0);background:var(--bg-3)}
.stage2-hero-action .sdbar-pop{left:auto;right:0;bottom:auto;top:calc(100% + 6px)}
.stage2-howto{padding:12px 14px;margin-bottom:10px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-2);color:var(--txt-1);font:500 12.5px/1.5 var(--f-ui)}
.stage2-howto b{display:block;margin-bottom:4px;font:800 12.5px var(--f-ui);color:var(--txt-0)}
.stage2-howto p{margin:0 0 6px}
.stage2-howto p:last-child{margin-bottom:0}
/* segmented (References | Extend Video, Prompt | Draw, Video | Image) */
.stage2-seg{display:inline-flex;margin-bottom:10px;padding:3px;gap:2px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-3)}
.stage2-seg-btn{padding:5px 11px;border:0;border-radius:var(--r-s);background:transparent;color:var(--txt-2);font-family:var(--f-ui);font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;cursor:pointer;transition:.13s}
.stage2-seg-btn:hover:not(:disabled){color:var(--txt-1)}
.stage2-seg-btn.on{background:var(--bg-5);color:var(--txt-0);box-shadow:0 1px 2px rgba(0,0,0,.3)}
.stage2-seg-btn.off,.stage2-seg-btn:disabled{opacity:.45;cursor:not-allowed}
.stage2-opts .stage2-seg{margin-bottom:0;align-self:flex-start}
/* dropzones — one media input each (this clip's takes/images, or a device file) */
.stage2-dz{display:flex;flex-direction:column;gap:8px;padding:10px;margin-bottom:10px;min-width:0;
  border:1.5px dashed var(--line-2);border-radius:var(--r-m);background:var(--bg-2,#faf9f5)}
.stage2-dz.filled{border-style:solid;background:var(--bg-2)}
.stage2-dz.bad{border-color:var(--danger-line)}
.stage2-opt-grid .stage2-dz{margin-bottom:0}
.stage2-dz-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:92px;padding:10px;text-align:center;color:var(--txt-1)}
.stage2-dz-empty b{font:800 12.5px var(--f-ui);color:var(--txt-0)}
.stage2-dz-empty small{font:500 11px/1.4 var(--f-ui);color:var(--txt-2)}
.stage2-dz-ico{width:34px;height:34px;display:grid;place-items:center;margin-bottom:4px;border-radius:50%;background:var(--bg-3);border:1px solid var(--line-2);color:var(--accent-ink)}
.stage2-dz-preview{position:relative;display:flex;align-items:center;gap:10px;min-width:0}
.stage2-dz-media{width:112px;height:72px;flex:0 0 112px;object-fit:cover;border-radius:9px;background:#111;display:block}
.stage2-dz[data-kind="image"] .stage2-dz-media{width:72px;flex-basis:72px;height:72px}
.stage2-dz-meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.stage2-dz-meta b{font:800 12.5px var(--f-ui);color:var(--txt-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-dz-meta small{font:500 11px/1.4 var(--f-ui);color:var(--txt-2)}
.stage2-dz-x{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:50%;background:var(--bg-3);color:var(--txt-2);cursor:pointer}
.stage2-dz-x:hover{border-color:var(--danger);color:var(--danger)}
.stage2-dz-actions{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.sdbar-pill.dz{height:30px;border-radius:var(--r-m);padding:0 12px;font-size:11.5px}
.stage2-dz-btn{height:30px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-3);color:var(--txt-0);font:750 11.5px var(--f-ui);cursor:pointer;white-space:nowrap}
.stage2-dz-btn:hover:not(:disabled){border-color:var(--brand,#d67e00)}
.stage2-dz-btn:disabled{opacity:.55;cursor:default}
.stage2-dz-actions .sdbar-pop{bottom:auto;top:calc(100% + 6px);left:50%;transform:translateX(-50%);max-height:min(50vh,300px);overflow-y:auto}
.stage2-dz-err{display:flex;align-items:flex-start;gap:6px;font:600 11.5px/1.45 var(--f-ui);color:var(--danger)}
.stage2-dz-note{font:500 11px/1.45 var(--f-ui);color:var(--txt-2);text-align:center}
.stage2-dz-heading{display:flex;align-items:center;gap:6px;margin:2px 0 6px;font:800 11px var(--f-ui);letter-spacing:.02em;color:var(--txt-2)}
.sdbar-option-empty{padding:10px 8px;font:500 12px/1.45 var(--f-ui);color:var(--txt-2)}
/* switches (Scene control mode, Keep original sound) */
.stage2-switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-2,#faf9f5)}
.stage2-switch-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.stage2-switch-text b{font:800 12.5px var(--f-ui);color:var(--txt-0)}
.stage2-switch-text small{font:500 11px/1.4 var(--f-ui);color:var(--txt-2)}
.stage2-switch{position:relative;flex:0 0 auto;width:38px;height:22px;border:0;border-radius:999px;background:var(--line-3);cursor:pointer;padding:0;transition:background .15s}
.stage2-switch.on{background:var(--brand,#d67e00)}
.stage2-switch-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--bg-3);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .15s}
.stage2-switch.on .stage2-switch-knob{transform:translateX(16px)}
.stage2-switch:focus-visible{outline:2px solid var(--brand,#d67e00);outline-offset:2px}
.stage2-adv-toggle{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 4px;border:0;background:transparent;color:var(--txt-1);font:750 12px var(--f-ui);cursor:pointer}
.stage2-adv-toggle:hover{color:var(--txt-0)}
.stage2-adv{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-2)}
.stage2-motion-prompt{width:100%;min-height:64px;border:1px solid var(--line-2);border-radius:var(--r-m);padding:9px 11px;background:var(--bg-2,#faf9f5);color:var(--txt-0);font:500 12.5px/1.5 var(--f-ui);resize:vertical;outline:none}
.stage2-motion-prompt:focus{border-color:var(--brand,#d67e00);background:var(--bg-2)}
/* full-width Generate with its price */
.stage2-generate{width:100%;height:46px;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:var(--r-m);
  background:var(--brand,#d67e00);color:var(--ink-on-accent,#2c2722);font:850 13.5px var(--f-ui);cursor:pointer;box-shadow:0 8px 20px rgba(214,126,0,.22)}
.stage2-generate:hover:not(:disabled){filter:brightness(1.05)}
.stage2-generate:disabled{opacity:.5;cursor:default;filter:saturate(.6);box-shadow:none}
.stage2-generate.blocked{opacity:.55;cursor:not-allowed;box-shadow:none}
.stage2-generate.working{cursor:progress}
.stage2-generate-cost{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.55);color:var(--txt-0);font:850 11.5px var(--f-mono)}
.stage2-generate-cost svg{color:inherit}
.stage2-mode-err{margin-top:10px}
.stage2-mode-pending{display:flex;align-items:flex-start;gap:7px;margin-top:8px;font:500 11.5px/1.45 var(--f-ui);color:var(--txt-2)}
.stage2-mode-pending svg{flex:0 0 auto;margin-top:2px}
.stage2-file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
.sd-gen-hint{margin-top:8px;font-size:11.5px}
@media (max-width:560px){
  .stage2-opt-grid.two{grid-template-columns:1fr}
  /* the header keeps its row on phones — the model picker stays at the right, long titles wrap */
  .stage2-hero-title{white-space:normal}
  .stage2-hero-action .sdbar-pop{min-width:0;width:min(292px,calc(100vw - 48px))}
  /* phones: the chips keep their line(s); the count and a full-width Generate follow below */
  .sdbar.inline{flex-wrap:wrap}
  .sdbar.inline .sdbar-right{width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}
  .sdbar.inline .sdbar-count{width:100%;text-align:right}
  .sdbar.inline .stage2-generate{flex:1 1 100%;height:48px;min-height:48px}
  /* menus anchor to the whole bar (not the wrapped pill) so they can never leave the screen */
  .sdbar.inline .sdbar-anchor{position:static}
  .sdbar.inline .sdbar-pop,.sdbar.inline .sdbar-left>.sdbar-anchor:nth-last-child(-n+2) .sdbar-pop{left:0;right:0;width:auto;min-width:0;max-width:none}
}
.stage2-swap-box{max-height:260px;overflow-y:auto}
.stage2-swap-head{font:700 9px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);padding:7px 10px 5px}
.stage2-gen-controls{display:flex;align-items:center;gap:6px;width:calc(100% - 150px);min-width:0;overflow-x:auto;scrollbar-width:thin}
/* pill dropdowns — position:fixed so the row's horizontal scroll can't clip them */
.stage2-gen-pill.open{border-color:var(--brand,#d67e00);color:var(--txt-0)}
.stage2-pill-menu{position:fixed;z-index:9990;min-width:170px;max-width:280px;padding:6px;
  background:var(--bg-2);border:1px solid var(--line-3);border-radius:var(--r-l);box-shadow:var(--shadow-pop);display:flex;flex-direction:column;gap:1px}
.stage2-pill-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;border:0;border-radius:var(--r-m);
  background:transparent;color:var(--txt-1);font:650 12px var(--f-ui);padding:7px 9px;cursor:pointer}
.stage2-pill-opt:hover:not(:disabled){background:var(--bg-3,#f6f2eb);color:var(--txt-0)}
.stage2-pill-opt.on{color:var(--accent-ink);background:var(--accent-soft,rgba(214,126,0,.08))}
.stage2-pill-opt:disabled{opacity:.45;cursor:default}
.stage2-pill-opt small{font:700 9px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);border:1px solid var(--line-2);border-radius:4px;padding:1px 4px}
.stage2-pill-menu-h{font:700 9px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);padding:4px 9px 6px}
/* keyboard-highlighted option mirrors the hover style (after .on so it wins) */
.stage2-pill-opt.hi:not(:disabled){background:var(--bg-3,#f6f2eb);color:var(--txt-0)}
/* model menu footer — the selected model's prompt formula */
.stage2-pill-menu-foot{margin-top:4px;padding:7px 9px 6px;border-top:1px solid var(--line-2);font:500 9.5px var(--f-ui);line-height:1.45;color:var(--txt-2)}
.stage2-pill-menu-foot b{color:var(--txt-1)}
/* option internals: main label row + metadata badge chips + one-line description */
.stage2-pill-opt{flex-direction:column;align-items:stretch}
.stage2-pill-opt-main{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stage2-pill-opt-meta{display:flex;gap:5px;margin-top:4px}
.stage2-pill-opt-meta span{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--line-2);border-radius:4px;background:var(--bg-2,#faf9f5);
  color:var(--txt-2);font:700 9px var(--f-mono);padding:2px 5px}
.stage2-pill-opt-meta svg{opacity:.75}
.stage2-pill-opt-desc{margin-top:3px;font:500 10.5px/1.4 var(--f-ui);color:var(--txt-2)}
.stage2-pill-opt.on .stage2-pill-opt-desc{color:var(--txt-1)}

/* References / Elements tray — full derived-asset management from the composer */
.stage2-asset-tray{position:fixed;z-index:9990;width:330px;max-height:min(430px,60vh);overflow:auto;padding:8px;
  background:var(--bg-2);border:1px solid var(--line-3);border-radius:var(--r-l);box-shadow:var(--shadow-pop);display:flex;flex-direction:column;gap:2px}
.stage2-tray-h{font:700 9px var(--f-mono);letter-spacing:.1em;color:var(--txt-3);padding:3px 5px 7px}
.stage2-tray-row{display:flex;align-items:center;gap:4px}
.stage2-tray-main{flex:1;min-width:0;display:flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:var(--r-m);background:transparent;
  color:var(--txt-1);text-align:left;padding:5px 6px;cursor:pointer}
.stage2-tray-main:hover{background:var(--bg-3,#f6f2eb)}
.stage2-tray-row.on .stage2-tray-main{color:var(--txt-0)}
.stage2-tray-row.missing .stage2-tray-main{opacity:.55;cursor:default}
.stage2-tray-thumb{flex:0 0 34px;width:34px;height:34px;border-radius:var(--r-s);border:1px solid var(--line-2);background:var(--bg-2,#faf9f5);overflow:hidden;
  display:grid;place-items:center;font:800 14px var(--f-mono);color:var(--txt-2)}
.stage2-tray-thumb img,.stage2-tray-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.stage2-tray-name{flex:1;min-width:0;font:600 11.5px var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-tray-main small{flex:0 0 auto;font:700 9px var(--f-mono);color:var(--txt-3)}
.stage2-tray-state{flex:0 0 auto;font:700 9px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);
  border:1px solid var(--line-2);border-radius:4px;padding:1px 4px}
.stage2-tray-row.on .stage2-tray-state{color:var(--accent-ink);border-color:var(--accent-line,rgba(214,126,0,.4))}
.stage2-tray-max{flex:0 0 auto;width:24px;height:24px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--bg-2);color:var(--txt-2);
  display:grid;place-items:center;cursor:zoom-in}
.stage2-tray-max:hover{border-color:var(--brand,#d67e00);color:var(--accent-ink)}
.stage2-tray-empty{padding:10px 8px;font:500 11.5px/1.45 var(--f-ui);color:var(--txt-2)}
.stage2-tray-foot{margin-top:5px;padding:6px 5px 2px;border-top:1px solid var(--line);font:700 9px var(--f-mono);letter-spacing:.06em;color:var(--txt-3)}
.stage2-gen-tool,.stage2-gen-pill,.stage2-gen-batch{height:30px;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;
  border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-3);color:var(--txt-1);font:800 12px var(--f-ui);padding:0 11px;white-space:nowrap}
.stage2-gen-tool{width:30px;padding:0;color:var(--txt-2)}
.stage2-gen-tool:hover,.stage2-gen-pill:hover{border-color:var(--brand,#d67e00);color:var(--txt-0)}
.stage2-gen-tool.on,.stage2-gen-pill.on{background:var(--brand,#d67e00);border-color:var(--brand,#d67e00);color:var(--ink-on-accent,#2c2722)}
.stage2-gen-pill svg,.stage2-gen-tool svg{color:inherit}
.stage2-gen-batch{padding:0 4px;gap:2px}
.stage2-gen-batch button{width:24px;height:24px;border:0;border-radius:var(--r-s);background:transparent;color:inherit;font:900 15px var(--f-ui);cursor:pointer}
.stage2-gen-batch button:hover:not(:disabled){background:rgba(0,0,0,.08)}
.stage2-gen-batch button:disabled{opacity:.35;cursor:default}
.stage2-gen-batch span{min-width:34px;text-align:center}
.stage2-gen-submit-neon{position:absolute;right:13px;bottom:13px;width:122px;height:79px;border:0;border-radius:var(--r-m);
  background:var(--brand,#d67e00);color:var(--ink-on-accent,#2c2722);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font:900 11px/1.1 var(--f-ui);letter-spacing:.02em;box-shadow:0 8px 22px rgba(214,126,0,.28);cursor:pointer;text-transform:uppercase}
.stage2-gen-submit-neon small{font:800 12px var(--f-mono);letter-spacing:0;text-transform:none;color:var(--ink-on-accent,#2c2722);opacity:.72;max-width:104px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-gen-submit-neon:hover:not(:disabled){filter:brightness(1.05)}
.stage2-gen-submit-neon:active:not(:disabled){filter:brightness(.96)}
.stage2-gen-submit-neon:disabled{opacity:.45;cursor:default;filter:saturate(.55)}
.stage2-gen-notices{display:grid;gap:7px;margin-top:10px}
.stage2-gen-notices .stage2-warn{margin:0;border:1px solid var(--danger-line);background:var(--danger-soft);color:var(--danger-ink);border-radius:var(--r-m);padding:4px 8px;align-items:center;font-size:11px;line-height:1.25;min-height:0}
.stage2-gen-notices .stage2-warn>svg{flex:0 0 auto}
.stage2-text-only-note{margin:0}
.stage2-policy-details{margin:0;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-2,#faf9f5);color:var(--txt-2);font:500 10.5px/1.4 var(--f-ui);padding:5px 8px}
.stage2-policy-details summary{width:max-content;cursor:pointer;color:var(--txt-1);font-weight:700;user-select:none}
.stage2-policy-detail-copy{margin-top:6px;white-space:pre-wrap;overflow-wrap:anywhere}
.stage2-policy-details small{display:block;margin-top:4px;color:var(--txt-3)}
.stage2-policy-note{align-items:center}
.stage2-policy-note-copy{flex:1;min-width:0}
/* warning rows carry their own one-click fix (e.g. credits → plans/top-ups) */
.stage2-warn-text{flex:1;min-width:0}
.stage2-warn-act{flex:0 0 auto;margin-left:auto;border:1px solid currentColor;border-radius:var(--r-s);background:transparent;color:inherit;
  font:750 10.5px var(--f-ui);padding:4px 9px;cursor:pointer;white-space:nowrap}
.stage2-warn-act:hover:not(:disabled){filter:brightness(.93)}
.stage2-warn-act:disabled{opacity:.6;cursor:default}
.stage2-gen-composer.no-credits .stage2-gen-box{box-shadow:inset 0 0 0 1px var(--danger-line)}
@media (max-width:760px){
  .stage2-policy-note{align-items:flex-start;flex-wrap:wrap}
  .stage2-gen-promptwrap{width:100%}
  .stage2-gen-prompt{width:100%;padding-bottom:11px}
  .stage2-gen-controls{width:100%;padding-bottom:88px}
  .stage2-gen-submit-neon{left:14px;right:14px;bottom:13px;width:auto;height:68px}
}

/* ---- Stage: VERSIONS view (per-clip take browser) --------------------------- */
.stage2-versions{position:fixed;inset:0;z-index:9994;display:flex;align-items:center;justify-content:center;
  background:rgba(6,7,10,.6);backdrop-filter:blur(5px);padding:26px;animation:appconfirm-fade .14s ease}
.stage2-versions-panel{width:min(1240px,96vw);height:min(760px,90vh);display:flex;flex-direction:column;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-m);box-shadow:0 30px 90px rgba(0,0,0,.45);overflow:hidden}
.stage2-versions-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex:0 0 auto}
.stage2-versions-title{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--txt-0)}
.stage2-versions-sub{font-family:var(--f-ui);font-size:12px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--txt-2);
  max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-versions-count{margin-left:auto;font-family:var(--f-mono);font-size:10.5px;color:var(--txt-2)}
.stage2-versions-body{flex:1;display:grid;grid-template-columns:290px 1fr 240px;min-height:0}
/* left — cards */
.stage2-versions-list{overflow-y:auto;border-right:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:8px}
.stage2-vcard{display:flex;gap:9px;align-items:stretch;text-align:left;padding:8px;border-radius:var(--r-m);cursor:pointer;
  background:var(--bg-3);border:1px solid var(--line);transition:border-color .12s, background .12s}
.stage2-vcard:hover{border-color:var(--line-2)}
.stage2-vcard.sel{border-color:var(--brand);background:var(--accent-soft, var(--bg-3))}
.stage2-vcard-thumb{width:86px;height:48px;flex:0 0 auto;border-radius:var(--r-s);object-fit:cover;background:#05060a;pointer-events:none}
.stage2-vcard-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.stage2-vcard-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.stage2-vcard-vno{font-family:var(--f-mono);font-size:12px;font-weight:700;color:var(--txt-0)}
.stage2-vbadge{font-family:var(--f-mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 6px;border-radius:5px;border:1px solid var(--line-2);color:var(--txt-2)}
.stage2-vbadge.current{color:var(--accent-ink);border-color:var(--accent-line, var(--brand))}
.stage2-vbadge.approved{color:var(--pos-ink);border-color:var(--pos-line, var(--pos))}
.stage2-vbadge.stale{color:var(--danger);border-color:var(--danger)}
.stage2-vbadge.unverified{color:var(--warn,#c69242);border-color:var(--warn,#c69242)}
.stage2-vbadge.override{color:var(--warn,#c69242);border-color:var(--warn,#c69242);background:rgba(198,146,66,.08)}
.stage2-source-warning{margin-bottom:10px;padding:9px 10px;border:1px solid var(--line-2);border-radius:var(--r-m);
  font-size:11px;line-height:1.45;color:var(--txt-2)}
.stage2-source-warning.stale{border-color:var(--danger);background:rgba(216,107,97,.08)}
.stage2-source-warning.unverified{border-color:var(--warn,#c69242);background:rgba(198,146,66,.08)}
.stage2-source-warning.override{border-color:var(--warn,#c69242);background:rgba(198,146,66,.08)}
.stage2-vchip{font-family:var(--f-mono);font-size:9px;color:var(--txt-2);background:var(--bg-2);
  border:1px solid var(--line);border-radius:5px;padding:1.5px 5px}
.stage2-vcard-chips{display:flex;gap:4px;flex-wrap:wrap}
.stage2-vcard-note{font-size:10.5px;color:var(--txt-1);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-vcard-time{font-family:var(--f-mono);font-size:9px;color:var(--txt-3)}
.stage2-versions-empty{font-size:12px;color:var(--txt-2);padding:18px 8px;text-align:center}
/* center — player + details */
.stage2-versions-viewer{min-width:0;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.stage2-versions-video{width:100%;aspect-ratio:16/9;border-radius:var(--r-m);background:#05060a;object-fit:contain}
.stage2-versions-details{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--bg-3);padding:10px 12px}
.stage2-versions-dhead{font-family:var(--f-mono);font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--txt-2);margin-bottom:6px}
.stage2-versions-dhead.with-action{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.stage2-vcopy{height:24px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-2);border-radius:var(--r-m);
  background:var(--bg-2);color:var(--txt-2);font:700 10px var(--f-ui);cursor:pointer;padding:0 8px;text-transform:none;letter-spacing:0}
.stage2-vcopy:hover{border-color:var(--brand);color:var(--txt-0)}
.stage2-versions-dhead.filters{margin-top:14px}
.stage2-vdetail{display:flex;align-items:baseline;gap:12px;padding:4.5px 0;border-top:1px solid var(--line)}
.stage2-vdetail:first-of-type{border-top:none}
.stage2-vdetail-k{flex:0 0 92px;font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--txt-2)}
.stage2-vdetail-v{font-size:12px;color:var(--txt-0);min-width:0;overflow-wrap:anywhere}
.stage2-vprompt{margin:0 0 10px;padding:10px 12px;max-height:260px;overflow:auto;white-space:pre-wrap;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-m);color:var(--txt-0);
  font:500 11.5px/1.45 var(--f-mono)}
.stage2-vrefs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-bottom:2px}
.stage2-vref{min-width:0;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:9px;
  border:1px solid var(--line-2);border-radius:9px;background:var(--bg-2);color:var(--txt-1);
  padding:6px;text-align:left;cursor:default}
.stage2-vref img,.stage2-vref video{width:42px;height:32px;border-radius:var(--r-s);object-fit:cover;background:#05060a;display:block}
.stage2-vref-tile{width:42px;height:32px;border-radius:var(--r-s);display:grid;place-items:center;background:var(--bg-3);
  color:var(--txt-2);font:800 13px var(--f-mono)}
.stage2-vref-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.stage2-vref-copy b{font:750 10.5px var(--f-ui);color:var(--txt-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-vref-copy em{font:750 9px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);font-style:normal}
.stage2-vref-copy small{font:500 9.5px/1.3 var(--f-ui);color:var(--txt-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stage2-vrefs-empty{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-m);color:var(--txt-2);font:500 12px/1.45 var(--f-ui);background:var(--bg-2)}
.stage2-vnote-input{flex:1;min-width:0;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-m);
  padding:5px 8px;font-size:12px;color:var(--txt-0);font-family:var(--f-ui)}
.stage2-vnote-input:focus{outline:none;border-color:var(--brand)}
/* right — tools + filters */
.stage2-versions-tools{overflow-y:auto;border-left:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:7px}
.stage2-vtool{display:block;width:100%;text-align:center;padding:8px 10px;border-radius:9px;font-size:12px;font-weight:600;
  font-family:var(--f-ui);background:var(--bg-3);border:1px solid var(--line-2);color:var(--txt-0);cursor:pointer;
  transition:border-color .12s, background .12s;text-decoration:none}
.stage2-vtool:hover:not(:disabled){border-color:var(--brand)}
.stage2-vtool:disabled{opacity:.45;cursor:default}
.stage2-vtool.on{border-color:var(--pos-line, var(--pos));color:var(--pos-ink)}
.stage2-vtool.danger{color:var(--err, #d06552);border-color:var(--line-2)}
.stage2-vtool.danger:hover:not(:disabled){border-color:var(--err, #d06552)}
.stage2-vtool.link{color:var(--txt-1)}
.stage2-vfilter{display:flex;flex-direction:column;gap:4px;font-family:var(--f-mono);font-size:9.5px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--txt-2)}
.stage2-vfilter select{width:100%;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-m);
  padding:6px 26px 6px 8px;font-size:12px;color:var(--txt-0);font-family:var(--f-ui)}
@media (max-width: 1100px){ .stage2-versions-body{grid-template-columns:240px 1fr 200px} }

/* ---- per-image cost chip on Generate/Re-generate buttons (credits, not deducted yet) ---- */
.nb-cost{display:inline-flex;align-items:center;margin-left:7px;padding:1px 6px;border-radius:var(--r-s);
  font-family:var(--f-mono);font-size:9.5px;font-weight:700;letter-spacing:.02em;line-height:1.5;
  background:rgba(0,0,0,.12);color:inherit;flex:0 0 auto}
.sheet-tools-item .nb-cost,.art-draftall.ghost .nb-cost,.sheet-gen-btn .nb-cost{background:var(--bg-3);border:1px solid var(--line-2);opacity:.9}

/* the New Story header and the Story brief (Rebuild as a new film) keep a model PICKER —
   both builds start at once; agent panels only NAME the model (change it in the dock) */
.brief-model-sel{appearance:none;-webkit-appearance:none;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--txt-0);background-color:color-mix(in oklab,var(--bg-3),var(--accent) 10%);border:1px solid var(--accent-line);
  border-radius:999px;padding:4px 24px 4px 10px;cursor:pointer;max-width:100%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='6'><path d='M1 1l3 3 3-3' stroke='%2374787E' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center}
.brief-model-sel:hover{border-color:var(--pos)}
.brief-model-sel:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}
span.ag-runner-model{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:default;
  color:var(--txt-1);background:color-mix(in oklab,var(--bg-3),var(--accent) 10%);border:1px solid var(--accent-line);padding:3px 10px;border-radius:999px}
.ns-model-sel{appearance:none;-webkit-appearance:none;border:none;background:transparent;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:0 15px 0 0;outline:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='6'><path d='M1 1l3 3 3-3' stroke='%238a8780' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right center}
.ns-model-sel:disabled{opacity:.7;cursor:default}

/* New Story: auto-picked shape note + the writer's own logline marker */
.ns-autoshape{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:8px 12px;border-radius:9px;
  background:var(--accent-soft, var(--bg-3));border:1px solid var(--accent-line, var(--line-2));
  font-size:12px;color:var(--txt-1);line-height:1.4}
.ns-autoshape b{color:var(--txt-0);font-weight:600}
.ns-autoshape .ns-btn.link{margin-left:auto;flex:0 0 auto}
.ns-cand-mine{flex:0 0 auto;margin-left:8px;font-family:var(--f-mono);font-size:9px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--pos-ink);border:1px solid var(--pos-line, var(--pos));border-radius:5px;padding:1.5px 6px}

/* ---- Stage ▸ VERSIONS tab (the modal promoted to an in-room view) ---- */
.stage2-vers{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.stage2-vers .stage2-versions-body{grid-template-columns:300px 1fr 260px}
/* the active-engine capability card (mockup's top-right) */
.stage2-vers-model{border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-3);
  padding:11px 12px;margin-bottom:12px}
.stage2-vers-model-t{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:650;color:var(--txt-0);margin-bottom:8px}
.stage2-vers-model-badge{margin-left:auto;font-family:var(--f-mono);font-size:9px;color:var(--txt-2);
  border:1px solid var(--line);border-radius:5px;padding:1.5px 6px}
.stage2-vers-model-caps{display:flex;flex-direction:column;gap:5px}
.stage2-vers-cap{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;color:var(--txt-1);line-height:1.35}
.stage2-vers-cap-dot{flex:0 0 auto;width:6px;height:6px;border-radius:2px;background:var(--brand);
  transform:rotate(45deg);margin-top:4px}
@media (max-width: 1200px){ .stage2-vers .stage2-versions-body{grid-template-columns:250px 1fr 220px} }
@media (max-width: 700px){
  /* Takes becomes one internally scrolling review column. The desktop capability
     sidebar is informational, so it yields on phones; the real take actions remain
     visible below the player/details instead of sitting in clipped grid columns. */
  .stage2-vers{width:100%;max-width:100%;min-width:0}
  .stage2-vers .stage2-versions-head{min-width:0;padding:10px;gap:8px}
  .stage2-vers .stage2-versions-title{min-width:0}
  .stage2-vers .stage2-versions-sub{display:none}
  .stage2-vers .stage2-versions-count{white-space:nowrap}
  .stage2-vers .stage2-versions-body{display:flex;flex-direction:column;min-width:0;overflow-x:hidden;overflow-y:auto}
  .stage2-vers .stage2-versions-list{width:100%;min-width:0;flex:0 0 auto;flex-direction:row;
    overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--line);padding:8px}
  .stage2-vers .stage2-vcard{width:min(270px,calc(100vw - 44px));min-width:230px;flex:0 0 auto}
  .stage2-vers .stage2-versions-viewer{width:100%;min-width:0;flex:0 0 auto;overflow:visible;padding:10px}
  .stage2-vers .stage2-vrefs{grid-template-columns:minmax(0,1fr)}
  .stage2-vers .stage2-vdetail{gap:8px}
  .stage2-vers .stage2-vdetail-k{flex-basis:82px}
  .stage2-vers .stage2-versions-tools{width:100%;min-width:0;flex:0 0 auto;overflow:visible;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;border-left:0;
    border-top:1px solid var(--line);padding:10px}
  .stage2-vers .stage2-vers-model{display:none}
  .stage2-vers .stage2-versions-tools>.stage2-versions-dhead,
  .stage2-vers .stage2-versions-tools>.stage2-vfilter{grid-column:1/-1}
  .stage2-vers .stage2-versions-dhead.filters{margin-top:8px}
}

/* ---- Stage ▸ TIMELINE tab (film assembly) ---- */
.stage2-tl,.stage2-au{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:12px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden auto;padding-bottom:12px}
.stage2-tl-player{margin:0 14px;border-radius:var(--r-m);overflow:hidden;background:#05060a;aspect-ratio:16/9;max-height:52vh;
  display:flex;align-items:center;justify-content:center}
.stage2-tl-player video{width:100%;height:100%;object-fit:contain;background:#05060a}
.stage2-tl-empty{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--txt-2);font-size:13px;padding:30px}
.stage2-tl-strip{display:flex;gap:14px;overflow-x:auto;padding:2px 14px 6px}
.stage2-tl-scene{flex:0 0 auto}
.stage2-tl-scene-lab{font-family:var(--f-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--txt-2);margin:0 0 6px 2px;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.stage2-tl-clips{display:flex;gap:8px}
.stage2-tl-clip{position:relative;flex:0 0 auto;width:132px;border-radius:9px;overflow:hidden;cursor:pointer;
  border:2px solid var(--line);background:var(--bg-3);padding:0;text-align:left;transition:border-color .12s}
.stage2-tl-clip img{display:block;width:100%;height:74px;object-fit:cover}
.stage2-tl-clip-blank{display:block;width:100%;height:74px;background:var(--bg-4,var(--bg-3))}
.stage2-tl-clip.on{border-color:var(--brand)}
.stage2-tl-clip.missing{opacity:.55}
.stage2-tl-clip-lab{display:block;font-family:var(--f-mono);font-size:9px;color:var(--txt-1);padding:4px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-tl-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--txt-3)}
.stage2-tl-dot.ok{background:var(--accent)}

/* ---- Stage ▸ AUDIO tab (post-mix preview) ---- */
.stage2-au-player{margin:0 14px;border-radius:var(--r-m);overflow:hidden;background:#05060a;aspect-ratio:16/9;max-height:44vh;
  display:flex;align-items:center;justify-content:center}
.stage2-au-player video{width:100%;height:100%;object-fit:contain;background:#05060a}
.stage2-au-scene{margin-left:auto;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-m);
  padding:6px 26px 6px 9px;font-size:12px;color:var(--txt-0);max-width:280px}
.stage2-au-lanes{display:flex;flex-direction:column;gap:8px;margin:0 14px}
.stage2-au-lane{border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-3);padding:9px 12px}
.stage2-au-lane-h{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.stage2-au-lane-h b{font-size:12px;font-weight:650;color:var(--txt-0);flex:0 0 auto}
.stage2-au-lane-h input[type=range]{flex:0 0 130px;margin-left:auto;accent-color:var(--brand)}
.stage2-au-mute{border:1px solid var(--line-2);background:transparent;color:var(--txt-2);border-radius:var(--r-s);
  font-size:10px;padding:2px 7px;cursor:pointer}
.stage2-au-mute.on{color:var(--err,#d06552);border-color:var(--err,#d06552)}
.stage2-au-blocks{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.stage2-au-block{font-family:var(--f-mono);font-size:9.5px;color:var(--txt-1);background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--r-s);padding:3px 8px;white-space:nowrap}
.stage2-au-block.on{border-color:var(--brand);color:var(--txt-0)}
.stage2-au-block.line{border-color:var(--accent-line,var(--line-2))}
.stage2-au-block.bed{border-color:var(--pos-line,var(--pos));color:var(--txt-0)}
.stage2-au-block.missing{opacity:.5}
.stage2-au-note{font-size:11px;color:var(--txt-2)}
.stage2-au-note.foot{margin:0 14px;padding:9px 12px;border:1px dashed var(--line-2);border-radius:9px;line-height:1.45}
.stage2-au-import{font-family:var(--f-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--accent-ink);border:1px solid var(--accent-line,var(--brand));border-radius:var(--r-s);padding:3px 9px;cursor:pointer}

/* ── Undo/Redo change flash — the blocks a version swap actually changed pulse
      briefly so the writer sees WHAT the undo did (and mobile scrolls to it).
      Accent-tinted and fading to transparent, so it reads in both themes. ── */
.spb-flash{ animation: spbFlash 2.5s ease-out both; border-radius:4px; }
@keyframes spbFlash{
  0%   { background: color-mix(in oklab, var(--accent) 26%, transparent);
         box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 16%, transparent); }
  55%  { background: color-mix(in oklab, var(--accent) 18%, transparent);
         box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 10%, transparent); }
  100% { background: transparent; box-shadow: 0 0 0 5px transparent; }
}

/* prop-reference chips on the character card (worn = auto, pinned = removable) */
.char-refprops{display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-width:0}
.char-refprops .prop-scene-chip{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.char-refprops .prop-select{font-size:11px;padding:2px 6px}

/* "Update a prop" chips inside the sheet-edit panel */
.sheet-edit-props{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:6px}
.sheet-edit-props-lab{font-family:var(--f-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--txt-2)}
.sheet-edit-props .prop-scene-chip{cursor:pointer}
.sheet-edit-props .prop-scene-chip:disabled{opacity:.5;cursor:default}

/* "Update a prop" chips inside the sheet-edit panel */
.sheet-edit-props{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:6px}
.sheet-edit-props-lab{font-family:var(--f-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--txt-2)}
.sheet-edit-props .prop-scene-chip{cursor:pointer}
.sheet-edit-props .prop-scene-chip:disabled{opacity:.5;cursor:default}

/* beat-deletion undo chip — accent-tinted so it reads as the recovery action */
.beat-undo-btn{background:var(--accent-soft);border-color:var(--accent-line,var(--accent));color:var(--txt-0)}
.beat-undo-btn:hover{background:var(--accent-soft);filter:brightness(1.06)}

/* ── fullscreen viewer VERSION STRIP — filmstrip of the sheet's earlier versions,
      horizontally centered on its own row between the image and the download bar;
      no arrow buttons (thumb clicks + ←/→ keys navigate) ── */
.lb-strip{position:absolute;bottom:66px;left:0;right:0;z-index:3;display:flex;justify-content:center;padding:0 24px;pointer-events:none}
.lb-strip-row{display:flex;gap:6px;overflow-x:auto;max-width:min(92vw,100%);padding:6px;margin:0 auto;pointer-events:auto;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-l);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.lb-panel.has-strip .lb-imgwrap{padding-bottom:136px}
.lb-thumb{border:2px solid transparent;border-radius:var(--r-m);padding:0;background:var(--bg-4);cursor:pointer;
  width:64px;height:44px;flex-shrink:0;overflow:hidden;transition:.12s}
.lb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lb-thumb:hover{border-color:var(--line-2)}
.lb-thumb.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 25%, transparent)}

/* edit-panel IMAGE INPUTS — removable thumbs attached to the next Apply edit;
   the square "+" beside Undo opens the input-source menu (upload / prop sheets) */
.sheet-edit-refs{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:6px}
.sheet-edit-addwrap{position:relative;display:inline-flex}
.sheet-edit-addref{width:30px;height:30px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-4);color:var(--txt-1);
  font-size:16px;line-height:1;cursor:pointer;padding:0;transition:.12s}
.sheet-edit-addref:hover:not(:disabled),.sheet-edit-addref.on{background:var(--bg-5);color:var(--txt-0);border-color:var(--accent-line,var(--accent))}
.sheet-edit-addref:disabled{opacity:.5;cursor:default}
.sheet-edit-addmenu{z-index:60;min-width:220px;max-width:280px;
  background:var(--bg-2);border:1px solid var(--line-3);border-radius:var(--r-l);box-shadow:var(--shadow-pop);
  padding:6px;display:flex;flex-direction:column}
.sheet-edit-addnote{font-size:11px;color:var(--txt-2);padding:7px 9px;line-height:1.4}
.sheet-edit-refthumb{position:relative;width:52px;height:36px;border-radius:var(--r-s);overflow:hidden;
  border:1px solid var(--line-2);flex-shrink:0;background:var(--bg-4)}
.sheet-edit-refthumb img{width:100%;height:100%;object-fit:cover;display:block}
.sheet-edit-refx{position:absolute;top:0;right:0;width:15px;height:15px;line-height:13px;text-align:center;
  border:0;border-radius:0 0 0 6px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;cursor:pointer;padding:0}

/* "Appears in" chips — single-line pager: ‹ › step 4 chips at a time */
.sheet-scenes{flex-wrap:nowrap;overflow:hidden}
.sheet-scenes-nav{border:1px solid var(--line-2);background:var(--bg-4);color:var(--txt-1);border-radius:var(--r-s);
  width:18px;height:18px;line-height:1;font-size:12px;padding:0;cursor:pointer;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;transition:.12s}
.sheet-scenes-nav:hover:not(:disabled){background:var(--bg-5);color:var(--txt-0)}
.sheet-scenes-nav:disabled{opacity:.3;cursor:default}
.sheet-scenes-count{font-family:var(--f-mono);font-size:9px;color:var(--txt-2);letter-spacing:.03em;white-space:nowrap;flex-shrink:0}

/* props/locations scene rows share the single-line pager behavior */
.prop-scenes{flex-wrap:nowrap;overflow:hidden}

/* the "+" input-source menu — PORTALED to <body> (the card's paint containment traps
   fixed children), centered over a light backdrop, above everything */
.sheet-edit-addoverlay{position:fixed;inset:0;z-index:1000;background:transparent}
.sheet-edit-addtitle{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-2);padding:6px 9px 4px}

/* localized selection editor — opened from a generated image's … menu.
   Fullscreen like the normal image preview: the controls float over the image
   instead of shrinking the edit target into a small modal. */
.region-edit-overlay{position:fixed;inset:0;z-index:1250;background:rgba(8,8,10,.94);display:block;padding:0}
.region-edit-panel{position:fixed;inset:0;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:hidden;display:block}
.region-edit-head{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:3;min-width:190px;max-width:min(620px,68vw);
  height:34px;display:flex;align-items:center;justify-content:center;gap:14px;padding:0 44px 0 18px;border:1px solid rgba(255,255,255,.08);
  background:rgba(15,15,18,.86);border-radius:999px;box-shadow:0 10px 34px rgba(0,0,0,.42)}
.region-edit-head .ag-x{position:absolute;right:7px;top:5px;width:24px;height:24px;border-radius:50%;color:#d7d7dd;background:transparent;border:0}
.region-edit-head .ag-x:hover{background:rgba(255,255,255,.1);color:#fff}
.region-edit-title{font:750 12px/1.1 var(--f-ui);color:#fff;white-space:nowrap}
.region-edit-sub{display:inline;margin:0 0 0 6px;font:700 10px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:#aaa;max-width:32vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.region-edit-body{position:absolute;inset:0;display:block;min-height:0}
.region-edit-canvas{position:absolute;inset:58px 24px 24px;display:grid;place-items:center;overflow:hidden;background:transparent}
.region-edit-imagebox{position:relative;display:inline-block;max-width:96vw;max-height:calc(100vh - 96px);cursor:crosshair;touch-action:none}
.region-edit-imagebox img{max-width:96vw;max-height:calc(100vh - 96px);display:block;object-fit:contain;user-select:none;-webkit-user-drag:none;border-radius:var(--r-m);box-shadow:0 20px 70px rgba(0,0,0,.58)}
.region-edit-rect{position:absolute;border:2px solid var(--accent);background:color-mix(in oklab, var(--accent) 16%, transparent);
  box-shadow:0 0 0 9999px rgba(0,0,0,.36),0 0 0 1px rgba(255,255,255,.5) inset;border-radius:5px;pointer-events:none}
.region-edit-hint{position:absolute;left:14px;bottom:14px;padding:6px 9px;border-radius:var(--r-m);background:rgba(10,10,12,.74);color:#fff;
  font:650 11px/1 var(--f-ui);pointer-events:none}
.region-edit-side{position:fixed;z-index:4;right:26px;top:72px;width:330px;max-height:calc(100vh - 112px);
  border:1px solid var(--line-2);border-radius:var(--r-l);padding:14px;background:color-mix(in oklab, var(--bg-1) 92%, transparent);
  box-shadow:0 18px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:12px;overflow:auto}
.region-edit-dragbar{display:flex;align-items:center;gap:7px;margin:-3px -3px 0;padding:4px 3px 2px;color:var(--txt-2);
  font:700 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;cursor:grab;user-select:none;touch-action:none}
.region-edit-dragbar:active{cursor:grabbing;color:var(--txt-0)}
.region-edit-dragbar svg{opacity:.7}
.region-edit-field{display:flex;flex-direction:column;gap:7px}
.region-edit-field>span,.region-edit-refs-head{font:700 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2)}
.region-edit-field textarea{min-height:128px;resize:vertical;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-1);
  color:var(--txt-0);font:500 13px/1.45 var(--f-ui);padding:10px;outline:none}
.region-edit-field textarea:focus{border-color:var(--accent)}
.region-edit-coords{font:600 10.5px/1.4 var(--f-mono);color:var(--txt-2);padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-1)}
.region-edit-ref-actions{display:flex;gap:8px}
.region-action{justify-content:center;border:1px solid var(--line-2);background:var(--bg-1)}
.region-props{display:grid;grid-template-columns:1fr;gap:6px;max-height:190px;overflow:auto;padding-right:2px}
.region-prop{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:var(--bg-1);color:var(--txt-1);
  border-radius:var(--r-m);padding:6px 8px;font:650 11.5px/1.2 var(--f-ui);cursor:pointer;text-align:left;min-width:0}
.region-prop:hover{border-color:var(--accent-line,var(--accent));color:var(--txt-0);background:var(--bg-3)}
.region-prop.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.region-prop img{width:34px;height:26px;object-fit:cover;border-radius:5px;border:1px solid var(--line);flex:0 0 auto}
.region-prop span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.region-prop em{margin-left:auto;font:700 9px/1 var(--f-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);white-space:nowrap}
.region-ref-list{margin-top:0}
.region-edit-note{font:500 11px/1.45 var(--f-ui);color:var(--txt-2);border-top:1px solid var(--line);padding-top:10px}
.region-edit-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:auto}
.region-prop-select{width:100%;height:36px}
.region-text-input{width:100%;height:36px}
.prop-sheet-ref-panel .region-edit-body{display:grid;grid-template-columns:minmax(360px,1fr) 330px;gap:18px;padding:72px 26px 26px}
.prop-sheet-ref-panel .region-edit-canvas{position:relative;inset:auto;display:block;overflow:auto;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-l);padding:12px}
.prop-sheet-ref-panel .region-edit-side{position:relative;inset:auto;width:auto;max-height:none}
.prop-ref-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px}
.prop-ref-pick{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:10px;border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--bg-2);padding:7px;text-align:left;color:var(--txt-1);cursor:pointer;transition:.12s}
.prop-ref-pick:hover{border-color:var(--accent-line,var(--accent));background:var(--bg-3)}
.prop-ref-pick.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.prop-ref-pick img{width:58px;height:42px;border-radius:var(--r-m);object-fit:cover;background:var(--bg-4)}
.prop-ref-pick span{min-width:0;display:flex;flex-direction:column;gap:3px}
.prop-ref-pick b{font:700 12px/1.2 var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt-0)}
.prop-ref-pick em{font:700 9px/1 var(--f-mono);font-style:normal;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-3)}
.region-edit-empty{height:100%;min-height:260px;display:grid;place-items:center;text-align:center;color:var(--txt-3);font:600 12px/1.4 var(--f-ui)}
.region-edit-empty p{margin:8px 0 0}
@media (max-width:900px){
  .region-edit-head{max-width:78vw}
  .region-edit-canvas{inset:54px 10px 46vh}
  .region-edit-imagebox,.region-edit-imagebox img{max-width:96vw;max-height:calc(54vh - 64px)}
  .region-edit-side{left:10px;right:10px;top:auto;bottom:10px;width:auto;max-height:42vh;border-radius:var(--r-l)}
  .prop-sheet-ref-panel .region-edit-body{display:block;padding:56px 10px 10px}
  .prop-sheet-ref-panel .region-edit-canvas{height:42vh;margin-bottom:10px}
  .prop-sheet-ref-panel .region-edit-side{max-height:42vh;overflow:auto}
}

/* Render style row: label + dropdown INLINE on one line — the trigger flexes to the
   remaining width (smaller font, ellipsized label) instead of wrapping below */
.char-style-row{flex-wrap:nowrap}
.char-style-row .char-style-lab{flex-shrink:0}
.char-style-row .char-style-pick{flex:1;min-width:0}
.char-style-row .rs-picker{flex:1;min-width:0;display:flex}
.char-style-row .rs-trigger{width:100%;min-width:0;font-size:11.5px;height:28px}
.char-style-row .rs-trigger-lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.char-style-row .char-style-count{flex-shrink:0}

/* aspect picker on two rows (classics / new square+portrait+landscape) */
.nb-seg-rows{display:flex;flex-direction:column;gap:4px}
/* fullscreen viewer: Remaster button sits beside Download, accent-tinted */
.lb-remaster{background:var(--accent-soft);color:var(--txt-0);border:1px solid var(--accent-line,var(--accent))}
.lb-remaster:disabled{opacity:.5;cursor:default}

.prop-ref-pick.attached{background:color-mix(in srgb,var(--pos) 7%,var(--bg-2));border-color:color-mix(in srgb,var(--pos) 45%,var(--line-2))}
.sheet-edit-apply.danger{background:var(--neg);border-color:var(--neg);color:#fff}

/* per-card QA report modal (the card's "QA check" button) — neutral tokens
   only, so it holds up in both themes */
.qa-modal{width:min(600px,92vw);max-height:86vh;overflow:auto;background:var(--bg-1);border:1px solid var(--line-2);
  border-radius:var(--r-l);padding:0 0 16px;box-shadow:0 8px 24px rgba(0,0,0,.18), 0 32px 90px rgba(0,0,0,.5)}
.qa-modal>*:not(.qa-head){margin-left:20px;margin-right:20px}
/* header = its own soft band, verdict-tinted orb with a halo ring */
.qa-head{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:16px 20px;
  background:linear-gradient(180deg,var(--bg-2),transparent);border-bottom:1px solid var(--line-1,var(--line-2))}
.qa-head .ag-x{flex-shrink:0}
.qa-orb{width:38px;height:38px;border-radius:var(--r-l);display:grid;place-items:center;flex-shrink:0;
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--txt-1);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--line-2) 26%, transparent)}
.qa-orb.pass{background:var(--pos-soft);border-color:var(--pos-line);color:var(--pos-ink);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--pos) 12%, transparent)}
.qa-orb.major{background:var(--neg-soft);border-color:var(--neg-line);color:var(--neg-ink);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--neg) 12%, transparent)}
.qa-head-txt{flex:1;min-width:0}
.qa-title{font-family:var(--f-display);font-size:16px;font-weight:600;color:var(--txt-0);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qa-sub{font-size:11px;color:var(--txt-2);margin-top:2px}
.qa-badge{font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;flex-shrink:0;border:1px solid var(--line-2)}
.qa-badge.pass{background:var(--pos-soft);color:var(--pos-ink);border-color:var(--pos-line)}
.qa-badge.minor{background:var(--bg-3);color:var(--txt-1)}
.qa-badge.major{background:var(--neg-soft);color:var(--neg-ink);border-color:var(--neg-line)}
.qa-sec{margin:14px 0}
.qa-sec-lab{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-2);margin-bottom:8px}
/* each finding = its own soft row-card with a severity edge */
.qa-item{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-radius:var(--r-l);
  background:var(--bg-2);border:1px solid var(--line-1,var(--line-2));border-left:3px solid var(--line-2)}
.qa-item + .qa-item{margin-top:6px}
.qa-item:has(.qa-dot.major){border-left-color:var(--neg)}
.qa-item:has(.qa-dot.minor){border-left-color:var(--pos)}
.qa-item:has(.qa-dot.invent){border-left-style:dashed}
.qa-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:6px;background:var(--txt-2)}
.qa-dot.major{background:var(--neg);box-shadow:0 0 0 3px color-mix(in srgb, var(--neg) 15%, transparent)}
.qa-dot.minor{background:var(--accent);opacity:.75;box-shadow:0 0 0 3px color-mix(in srgb, var(--pos) 12%, transparent)}
.qa-dot.invent{background:transparent;border:1.5px dashed var(--txt-2);width:8px;height:8px}
.qa-item-body{flex:1;min-width:0}
.qa-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:5px}
.qa-where{font-family:var(--f-mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em;
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:5px;padding:2px 7px;color:var(--txt-1)}
.qa-what{font-size:12.5px;line-height:1.55;color:var(--txt-0)}
.qa-clean{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--pos-ink);
  background:var(--pos-soft);border:1px solid var(--pos-line);border-radius:var(--r-l);padding:12px 14px;margin:12px 0}
/* recommendation = the verdict banner, tinted by outcome */
.qa-rec{display:flex;align-items:baseline;gap:10px;border-radius:var(--r-l);padding:11px 14px;margin:16px 0 4px;
  background:var(--bg-2);border:1px solid var(--line-2)}
.qa-rec.regenerate{background:var(--neg-soft);border-color:var(--neg-line)}
.qa-rec.regenerate .qa-rec-verb{color:var(--neg-ink)}
.qa-rec.keep{background:var(--pos-soft);border-color:var(--pos-line)}
.qa-rec.keep .qa-rec-verb{color:var(--pos-ink)}
.qa-rec-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2);flex-shrink:0}
.qa-rec-verb{font-size:13px;font-weight:700;color:var(--txt-0)}
.qa-apply-btn{margin-top:8px;display:inline-flex;align-items:center;gap:6px}
.qa-apply-row .ns-btn{height:34px;padding:0 14px;border-radius:9px;margin-top:0}
/* beat lanes on the Shots tab — the beat is the dramatic unit, its shots are coverage */
.beat-lane{margin:0 0 18px;padding:10px 12px 2px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--bg-1)}
.beat-lane.turn{border-color:oklch(0.62 0.16 45 / .5)}
.beat-lane-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 10px}
.beat-lane-no{font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-1);
  padding:2px 8px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--bg-3)}
.beat-lane-verbs{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3)}
.beat-lane-turn{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-mono);font-size:9px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:oklch(0.7 0.14 45);border:1px solid oklch(0.62 0.16 45 / .45);border-radius:999px;padding:1px 8px}
[data-theme="light"] .beat-lane-turn{color:oklch(0.5 0.15 45)}
.beat-lane-chg{font-family:var(--f-mono);font-size:9.5px;font-weight:700;padding:1px 7px;border-radius:5px;border:1px solid var(--line-2);color:var(--txt-2)}
.beat-lane-chg.pos{color:oklch(0.62 0.13 150);border-color:oklch(0.62 0.13 150 / .4)}
.beat-lane-chg.neg{color:oklch(0.6 0.16 30);border-color:oklch(0.6 0.16 30 / .4)}
[data-theme="light"] .beat-lane-chg.pos{color:oklch(0.45 0.13 150)}
[data-theme="light"] .beat-lane-chg.neg{color:oklch(0.48 0.16 30)}
.beat-lane-count{font-family:var(--f-mono);font-size:9.5px;color:var(--txt-3)}
.beat-lane-acts{margin-left:auto;display:inline-flex;gap:6px}
.beat-lane-btn{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-m);border:1px solid var(--line-2);
  background:var(--bg-3);color:var(--txt-1);font-family:var(--f-ui);font-size:11px;font-weight:600;cursor:pointer}
.beat-lane-btn:hover{border-color:var(--pos);color:var(--pos-ink)}
.beat-lane-btn.ghost{background:transparent}
.beat-lane-btn:disabled{opacity:.5;cursor:default}
.beat-lane .sheet-grid{margin-bottom:8px}
/* the beat's shots as a horizontal strip — ‹ › arrows page one card at a time */
.beat-lane-strip{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:2px 2px 10px;-webkit-overflow-scrolling:touch}
.beat-shot-cell{flex:0 0 clamp(320px, 30vw, 430px);scroll-snap-align:start;min-width:0}
@media (max-width:700px){ .beat-shot-cell{flex-basis:86vw} }
.beat-lane{position:relative}
.beat-lane-side{position:absolute;top:calc(50% + 16px);transform:translateY(-50%);z-index:6;
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--bg-1);color:var(--txt-1);cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.10)}
.beat-lane-side:hover{border-color:var(--pos);color:var(--pos-ink)}
.beat-lane-side.prev{left:-6px}
.beat-lane-side.next{right:-6px}
/* beat pager rides the scene-pager base styles; only sizing differs */
/* (beat-pager bar removed 2026-07-19 — the lane's side arrows step beats now) */
.beat-lane-side:disabled{opacity:.35;cursor:default}
.beat-lane-side:disabled:hover{border-color:var(--line-2);color:var(--txt-2)}

/* MICRO-BEAT LAYER — protect line + numbered rail of the beat's discrete actions */
.beat-protect{display:flex;align-items:center;gap:6px;margin:2px 0 8px;font-size:11.5px;color:var(--txt-1);line-height:1.4}
.beat-protect svg{color:var(--pos-ink);flex:0 0 auto}
.beat-protect b{color:var(--pos-ink);font-weight:700}
/* QA check while the card has no image yet (Lookbook) — locked with a reason, not missing */
.char-draft-btn.qa-empty{opacity:.45;cursor:not-allowed}

/* QA modal: Apply-to-spec + Edit-current-image side by side */
.qa-apply-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.qa-apply-row .qa-apply-btn{margin-top:0}

/* REDRAFT IN PROGRESS — the whole canvas says so, not just the button */
.beat-grid-wrap{position:relative}
.beat-grid-wrap.drafting .beat-card-grid{opacity:.32;filter:saturate(.5);pointer-events:none;transition:opacity .25s}
.beat-redraft-note{position:sticky;top:12px;z-index:8;display:flex;align-items:center;gap:12px;
  margin:0 auto 14px;width:min(560px,94%);padding:13px 16px;border-radius:var(--r-l);
  background:var(--bg-1);border:1px solid var(--pos-line);
  box-shadow:0 12px 42px rgba(0,0,0,.28)}
.beat-redraft-note .ns-spin{flex:0 0 auto}
.brn-t{font-family:var(--f-display);font-size:13.5px;font-weight:600;color:var(--txt-0)}
.brn-d{font-size:11.5px;line-height:1.5;color:var(--txt-2);margin-top:2px}
/* SHARED ART-ROOM PROGRESS CARD — the same spinner + bold title + reassuring subtitle
   as the shots re-design note, so every tab-level "MUSE is working" state reads alike. */
.art-progress-card{display:flex;align-items:center;gap:12px;width:min(560px,100%);
  margin:2px 0 6px;padding:13px 16px;border-radius:var(--r-l);background:var(--bg-1);
  border:1px solid var(--pos-line);box-shadow:0 12px 42px rgba(0,0,0,.28)}
.art-progress-card .ns-spin{flex:0 0 auto}
.apc-txt{min-width:0}
.apc-t{font-family:var(--f-display);font-size:13.5px;font-weight:600;color:var(--txt-0)}
.apc-d{font-size:11.5px;line-height:1.5;color:var(--txt-2);margin-top:2px}
.apc-cancel{margin-left:auto;flex:0 0 auto}

/* ONE CARD PER BEAT: selected-shot viewport, Writers' Room beat logic, Protect,
   micro-beat checklist, compact shot rows expanding into the full editor */
.beat-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1100px){
  .beat-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.beat-card{border:1px solid var(--line);border-radius:var(--r-l);background:var(--bg-1);overflow:hidden;
  display:flex;flex-direction:column;align-self:start}
.beat-card.turn{border-color:var(--pos-line)}
.bc-preview{position:relative;isolation:isolate;background:var(--bg-3);border-bottom:1px solid var(--line)}
.beat-card-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--bg-3);cursor:zoom-in}
.beat-card-img.ph{display:grid;place-items:center;cursor:default;padding:0 34px;text-align:center;
  color:var(--txt-3);font-family:var(--f-mono);font-size:10.5px;line-height:1.6;border-bottom:1px dashed var(--line-2)}
.bc-preview-meta{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;display:flex;align-items:center;gap:7px;
  min-width:0;padding:7px 9px;border:1px solid rgba(255,255,255,.16);border-radius:var(--r-m);
  background:rgba(12,13,16,.82);color:#f5f5f2;box-shadow:0 4px 16px rgba(0,0,0,.24);backdrop-filter:blur(10px)}
.bc-preview-shot{font-family:var(--f-mono);font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.bc-preview-grammar{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-mono);font-size:9px;color:rgba(255,255,255,.68)}
.bc-preview-priority{font-family:var(--f-mono);font-size:9px;color:#f0a228;white-space:nowrap}
.bc-preview-status{margin-left:auto;flex:0 0 auto;padding:2px 7px;border:1px solid rgba(255,255,255,.22);border-radius:999px;
  font:700 9px var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.76);white-space:nowrap}
.bc-preview-status.approved{border-color:rgba(240,162,40,.7);color:#ffc05b;background:rgba(216,126,0,.16)}
.bc-preview-status.missing{color:rgba(255,255,255,.48)}
.beat-card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:11px}
.beat-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.beat-card-head .bc-add{margin-left:auto}
.bc-sec-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-bottom:5px}
/* the beat itself: driver action | reactor reaction (from the Writers' Room map) */
.bc-beat{border:1px solid var(--line-1,var(--line-2));border-radius:var(--r-l);background:var(--bg-2);padding:9px 11px}
.bc-beat-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.bc-beat-name{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3)}
.bc-beat-verb{font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-0);margin:2px 0 3px}
.bc-beat-d{font-size:11px;line-height:1.5;color:var(--txt-2)}
@media (max-width:420px){ .bc-beat-grid{grid-template-columns:1fr} }
.bc-micro-row{display:flex;align-items:baseline;gap:8px;padding:2.5px 0;font-size:11.5px;line-height:1.5;color:var(--txt-1)}
.bc-micro-t{flex:1;min-width:0}
.bc-micro-row.uncovered .bc-micro-t{color:var(--alert)}
.bc-micro-none{flex:0 0 auto;font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--alert);border:1px solid var(--alert);border-radius:var(--r-m);padding:1px 7px;cursor:help}
/* coverage NOT MAPPED (pre-micro-beat draft) — neutral, claims neither way */
.bc-micro-nomap-note{font-size:10.5px;line-height:1.5;color:var(--txt-3);margin:0 0 5px;cursor:help}
.bc-micro-unknown{flex:0 0 auto;font-family:var(--f-mono);font-size:10px;color:var(--txt-3);padding:1px 7px;cursor:help}
.bc-micro-shots{flex:0 0 auto;display:inline-flex;gap:4px}
.bc-micro-shotlink{border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-1);
  font-family:var(--f-mono);font-size:9.5px;font-weight:700;border-radius:var(--r-s);padding:1px 7px;cursor:pointer;transition:.12s}
.bc-micro-shotlink:hover{border-color:var(--pos);color:var(--pos-ink)}
/* story-covered but not described in any covering shot's action — frame would only imply it */
.bc-micro-implied{flex:0 0 auto;font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--warn,#c98a1b);border:1px dashed var(--warn,#c98a1b);
  border-radius:var(--r-s);padding:1px 6px;cursor:help;opacity:.85}
/* the side of a beat's verb pair that carries the beat's charge */
.beat-lane-verbs .bv.lead{font-weight:800;color:var(--txt-1)}
/* drift flag on the shot card: covered-micro-beat names missing from the action */
.shot-dropped{margin:2px 0 8px;padding:7px 10px;border:1px dashed var(--warn,#c98a1b);
  border-radius:9px;background:var(--warn-soft,rgba(201,138,27,.08));color:var(--txt-2);
  font-size:11.5px;line-height:1.5;cursor:help}
.shot-dropped b{color:var(--txt-1)}
/* scene header: shots-per-beat distribution strip */
.ssx-beat-strip{display:flex;gap:2px;margin-top:6px;max-width:340px}
.ssx-beat-seg{flex:1 1 0;min-width:10px;text-align:center;font-family:var(--f-mono);
  font-size:9px;line-height:1;padding:2px 0;color:var(--txt-3);background:var(--bg-3);
  border-radius:3px;cursor:help;overflow:hidden}
.ssx-beat-seg:hover{background:var(--pos-soft);color:var(--pos-ink)}
.bc-shots{display:flex;flex-direction:column;gap:6px}
.bc-shot-row{display:flex;align-items:center;gap:9px;padding:6px 9px;border:1px solid var(--line-2);
  border-radius:9px;background:var(--bg-2);cursor:pointer;transition:.12s;min-width:0}
.bc-shot-row:hover{border-color:var(--line-3);background:var(--bg-3)}
.bc-shot-row.selected:not(.on){border-color:var(--pos);background:var(--pos-soft)}
/* Open and collapsed selections use the same 1px stroke. The row and editor still
   read as one orange container, without visually enlarging the selected border. */
.bc-shot-row.on{border-width:1px;border-color:var(--pos);border-bottom-color:transparent;
  border-radius:9px 9px 0 0;padding:6px 9px}
/* "start here" guidance: the next frame in the rolling chain */
.bc-shot-row.next{border-color:var(--line-2);background:var(--bg-2)}
/* rendering RIGHT NOW in the chain — static accent only */
.bc-shot-row.live{border-color:var(--line-2);background:var(--bg-2)}
/* open + live/next: selected always wins; only unselected rows stay grey */
.bc-shot-row.on.live,.bc-shot-row.on.next{border-color:var(--pos);border-bottom-color:transparent;background:var(--pos-soft)}
.bc-next-chip{flex:0 0 auto;display:inline-flex;align-items:center;font-family:var(--f-mono);
  font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--pos-ink);border:1px solid var(--pos-line);border-radius:9px;padding:1px 7px;cursor:help;
  animation:bcNextPulse 2.4s ease-in-out infinite}
@keyframes bcNextPulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){ .bc-next-chip{animation:none} }
/* the unrendered scene's first card = the primary call-to-action */
.beat-card-img.ph.cta{display:grid;place-items:center;gap:10px;align-content:center;padding:22px 30px}
.bc-cta-t{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-2)}
.bc-cta-btn{height:36px;padding:0 16px;font-size:12.5px}
.bc-cta-d{font-size:11px;line-height:1.55;color:var(--txt-3);text-align:center;max-width:360px}
.bc-shot-thumb{width:53px;height:30px;border-radius:5px;object-fit:cover;flex:0 0 auto;background:var(--bg-4);display:block}
.bc-shot-thumb.ph{border:1px dashed var(--line-2)}
.bc-shot-letter{flex:0 0 auto;font-family:var(--f-mono);font-weight:700;font-size:10.5px;color:var(--txt-0)}
.bc-shot-pri{flex:0 0 auto;color:var(--pos-ink);font-size:11px;cursor:help}
.bc-shot-gram{flex:0 0 auto;font-family:var(--f-mono);font-size:9.5px;color:var(--txt-3);white-space:nowrap}
.bc-shot-act{flex:1;min-width:0;font-size:11px;color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-shot-covers{flex:0 0 auto;font-family:var(--f-mono);font-size:9px;color:var(--txt-3);white-space:nowrap}
.bc-shot-chev{flex:0 0 auto;color:var(--txt-3);display:grid;place-items:center}
.bc-shot-chev svg{transition:.15s}
.bc-shot-chev.open svg{transform:rotate(90deg)}
/* open editor continues that same 1px selected stroke. */
.bc-shot-expand{border:1px solid var(--pos);border-top:none;border-radius:0 0 9px 9px;background:var(--bg-2);padding:10px 9px 9px;margin-top:-7px}

.shot-ref-dialog-scrim{position:fixed;inset:0;z-index:9992;display:grid;place-items:center;padding:24px;
  background:rgba(0,0,0,.56);backdrop-filter:blur(2px)}
.shot-ref-dialog{width:min(680px,96vw);max-height:min(760px,90vh);display:flex;flex-direction:column;
  overflow:hidden;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:0 24px 80px rgba(0,0,0,.55)}
.shot-ref-dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:17px 18px 14px;border-bottom:1px solid var(--line)}
.shot-ref-dialog-head h3{margin:0;color:var(--txt-0);font-size:16px;line-height:1.25}
.shot-ref-dialog-head p{margin:4px 0 0;color:var(--txt-3);font-size:12px;line-height:1.45}
.shot-ref-dialog-body{padding:16px 18px;overflow:auto;display:flex;flex-direction:column;gap:18px}
.shot-ref-dialog-label{margin-bottom:8px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3)}
.shot-ref-choice-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.shot-ref-choice{min-width:0;min-height:54px;display:flex;align-items:center;gap:9px;padding:7px;text-align:left;
  border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-2);color:var(--txt-1);cursor:pointer}
.shot-ref-choice:hover:not(:disabled){border-color:var(--line-3);background:var(--bg-3)}
.shot-ref-choice.on{border-color:var(--pos);background:var(--pos-soft)}
.shot-ref-choice.unavailable{opacity:.56;cursor:not-allowed}
.shot-ref-choice img,.shot-ref-choice-ph{width:64px;height:38px;flex:0 0 auto;object-fit:cover;border-radius:5px;background:var(--bg-4)}
.shot-ref-choice-ph{display:grid;place-items:center;color:var(--txt-3);border:1px dashed var(--line-2)}
.shot-ref-choice-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.shot-ref-choice-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt-0);font-size:11.5px;font-weight:650}
.shot-ref-choice-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt-3);font-size:9.5px}
.shot-ref-choice-check{width:18px;height:18px;flex:0 0 auto;margin-left:auto;display:grid;place-items:center;
  border:1px solid var(--pos);border-radius:50%;color:var(--pos-ink)}
.shot-ref-choice-auto{border:1px solid var(--line-2);border-radius:var(--r-m);padding:6px 9px;
  margin:0 0 7px;background:var(--bg-3);color:var(--txt-2);font-size:10px;cursor:pointer}
.shot-ref-choice-auto.on{border-color:var(--accent,#d8a657);background:var(--accent-soft,rgba(216,166,87,.12));color:var(--txt-1)}
.shot-ref-dialog-empty{padding:11px 12px;border:1px dashed var(--line-2);border-radius:var(--r-m);color:var(--txt-3);font-size:11.5px;line-height:1.5}
.shot-ref-dialog-loading{font-family:var(--f-mono);font-size:9.5px;color:var(--txt-3)}
.shot-ref-dialog-help{font-size:10px;color:var(--warn,#d8a657);line-height:1.35;margin-top:7px}
.shot-ref-dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--line)}
.shot-ref-dialog-actions .appconfirm-btn{display:inline-flex;align-items:center;gap:6px}
.shot-ref-dialog-actions .appconfirm-btn:disabled{opacity:.5;cursor:not-allowed}
.shot-ref-quality-note{margin:0 0 9px;padding:7px 9px;border:1px dashed var(--warn,#c98a1b);border-radius:var(--r-m);
  background:var(--warn-soft,rgba(201,138,27,.08));color:var(--txt-2);font-size:10.5px;line-height:1.45}
@media(max-width:600px){.shot-ref-choice-list{grid-template-columns:1fr}.shot-ref-dialog-scrim{padding:10px}}
.bc-shot-expand .sheet-card{width:100%;border:none;border-radius:0;background:transparent;box-shadow:none}
.bc-shot-row.on:has(+ .bc-shot-expand .shot-card.gening){
  border-color:var(--pos);border-bottom-color:transparent;background:color-mix(in srgb,var(--pos) 12%,var(--bg-2))}
.bc-shot-expand:has(.shot-card.gening){
  border-color:var(--pos);border-top:none;background:color-mix(in srgb,var(--pos) 10%,var(--bg-1))}
.bc-shot-expand:has(.shot-card.gening) .sheet-frame,
.bc-shot-expand:has(.shot-card.gening) .sheet-body{
  background:transparent}
.bc-shot-expand:has(.shot-card.gening) .sheet-frame{
  border-bottom-color:color-mix(in srgb,var(--pos) 22%,var(--line))}
.bc-shot-expand .shot-card.gening,
.bc-shot-expand .shot-card.batch-on{
  outline:none;outline-offset:0;border:none;box-shadow:none;background:transparent}

/* This beat-card system is declared after the app's main responsive block, so its
   own narrow rule must live here as well or the desktop tracks win in cascade. */
@media (max-width:640px){
  .beat-card-grid{grid-template-columns:minmax(0,1fr)}
  .beat-card{min-width:0}
}

/* why the shot exists + which micro-beats it covers */
.shot-purpose{display:flex;align-items:baseline;gap:8px;margin:8px 0 0;font-size:11px;line-height:1.45;color:var(--txt-2)}
.shot-covers-chip{flex:0 0 auto;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.03em;color:var(--txt-3);
  border:1px solid var(--line-2);border-radius:var(--r-m);padding:1px 7px;cursor:help}
.shot-purpose-t{font-style:italic}
.shot-priority-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-m);
  border:1px solid var(--pos-line);background:var(--pos-soft);color:var(--pos-ink);
  font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:help}
.shot-beat-tag.sub{border-color:oklch(0.62 0.12 285 / .45);color:oklch(0.74 0.1 285)}
[data-theme="light"] .shot-beat-tag.sub{color:oklch(0.44 0.12 285)}
.char-argues-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.char-argues-row .insp-select{flex:0 0 auto;width:auto;min-width:150px}
.linked-prop-gen{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;margin-left:2px;
  padding:1px 5px;border-radius:5px;border:1px solid var(--line-2);background:var(--bg-2);
  color:var(--txt-1);font-family:var(--f-ui);font-size:9px;font-weight:600;cursor:pointer;white-space:nowrap}
.linked-prop-gen:hover{border-color:var(--pos);color:var(--pos-ink)}
.linked-prop-gen:disabled{opacity:.5;cursor:default}
.linked-prop-gen .ns-spin{width:8px;height:8px}
.card-qa-row{display:flex;justify-content:flex-start;margin:2px 0 6px}
.sb-qa-row{padding:0 2px;margin-top:6px}
.prompt-drift-note{margin-top:6px;padding:7px 10px;border-radius:var(--r-m);font-size:11px;line-height:1.45;
  background:oklch(0.62 0.13 60 / .12);border:1px solid oklch(0.6 0.13 60 / .35);color:oklch(0.72 0.11 60)}
[data-theme="light"] .prompt-drift-note{color:oklch(0.45 0.11 60)}
.prompt-drift-banner{display:flex;align-items:flex-start;gap:8px;margin:2px 0 10px;padding:9px 10px;
  border:1px solid color-mix(in srgb,var(--pos) 45%,var(--line-2));border-left:3px solid var(--pos);border-radius:var(--r-s);
  background:color-mix(in srgb,var(--pos) 10%,var(--bg-2));color:var(--txt-1);font-size:11px;line-height:1.45}
.prompt-drift-banner svg{flex:0 0 auto;margin-top:1px;color:var(--pos-ink)}
.prompt-drift-banner b{color:var(--pos-ink);font-weight:700}
.continuity-update-banner{align-items:center}
.prompt-drift-copy{min-width:0;flex:1}.prompt-drift-copy small{display:block;margin-top:2px;color:var(--txt-2)}
.continuity-update-action{flex:0 0 auto;border:1px solid var(--accent);border-radius:var(--r-s);background:var(--accent);color:var(--ink-on-accent);padding:5px 8px;font-size:10px;font-weight:700;cursor:pointer}
.continuity-update-action:disabled{opacity:.55;cursor:default}
.dt-continuity-list{display:flex;flex-direction:column;gap:6px;margin-top:7px}
.dt-continuity-row{display:flex;align-items:center;gap:10px;padding:7px 9px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-2);font-size:11px}
.dt-continuity-name{min-width:0;flex:1;color:var(--txt-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-continuity-mode{font-family:var(--f-mono);font-size:9px;text-transform:uppercase;color:var(--txt-3)}
.dt-writing-model{text-transform:none;letter-spacing:.01em}
.dt-continuity-mode.visual{color:oklch(0.7 0.14 150)}
/* Art Room master cards use the sheet body's gap as their single vertical-rhythm
   source. These rows used to add their own margins on top of that gap, producing
   irregular spacing around actions, warnings, Render Style, Scenes and references. */
.sheet-card[data-char-card] .prompt-drift-banner,
.sheet-card[data-char-card] .char-style-row,
.sheet-card[data-char-card] .sheet-scenes,
.sheet-card[data-prop-card] > .sheet-body > .prompt-drift-banner,
.sheet-card[data-prop-card] > .sheet-body > .char-style-row,
.sheet-card[data-prop-card] > .sheet-body > .prop-scenes,
.sheet-card[data-location-card] > .sheet-body > .prompt-drift-banner,
.sheet-card[data-location-card] > .sheet-body > .char-style-row,
.sheet-card[data-location-card] > .sheet-body > .location-scenes{margin-top:0;margin-bottom:0}
/* Expanded beat-shot cards follow the same direct-row rhythm, without changing
   the intentionally tighter spacing inside folds, camera controls or toolbars. */
.sheet-card[data-shot-card] > .sheet-body > .shot-refs,
.sheet-card[data-shot-card] > .sheet-body > .shot-ref-quality-note,
.sheet-card[data-shot-card] > .sheet-body > .shot-beat-script{margin-top:0;margin-bottom:0}
.qa-quote{font-size:12.5px;line-height:1.6;font-style:italic;background:var(--bg-2);border:1px solid var(--line-1,var(--line-2));
  border-left:3px solid var(--pos);border-radius:var(--r-l);padding:11px 13px;color:var(--txt-0)}
.qa-quote.edit{border-left-color:var(--pos)}
.qa-foot{display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-1,var(--line-2))}
.qa-foot-note{font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt-2);margin-right:auto}
.qa-foot .ns-btn{display:inline-flex;align-items:center;gap:6px}

/* ---- Unified popup/window close button — MUSE-dock ghost style. -------------
   One visual language for every modal/lightbox close: borderless, transparent,
   quiet text color, soft rounded hover fill (exactly .muse-dock-x). Positioning
   and size rules from each class's original block still apply — this only
   unifies the LOOK. (.plans-x/.voice-modal-x ride on .ag-x.) */
.ag-x,.bible-x,.cameo-x,.ai-x,.agent-undo .au-x,.sp-prev-x{
  background:none;border:none;color:var(--txt-2);border-radius:var(--r-m);
  display:grid;place-items:center;cursor:pointer;transition:.1s}
.ag-x:hover,.bible-x:hover,.cameo-x:hover,.ai-x:hover,.agent-undo .au-x:hover,.sp-prev-x:hover{
  color:var(--txt-0);background:var(--bg-4)}
/* Floating closes that sit ON TOP of fullscreen imagery keep a soft dark scrim
   (a fully transparent ghost disappears over a bright photo) but adopt the
   family's rounded-square shape and hover behavior. */
.dt-preview-x,.stage2-lightbox-x{
  border:none;border-radius:var(--r-m);background:rgba(15,15,18,.55);color:#fff;transition:.1s}
.dt-preview-x:hover,.stage2-lightbox-x:hover{background:rgba(15,15,18,.82);color:#fff}

/* ---- Hero spine — the value-charge wave inside the hero film frame. ---------
   The line (charge-gradient stroke + soft glow pass) draws itself on load
   (pathLength=1 trick), the tinted area fades up, nodes pop in staggered,
   captions fade last — then a playhead of light travels the spine on a loop.
   Reduced-motion users get it fully drawn and still. */
.lp-spine{position:absolute;inset:0;width:100%;height:100%;display:block}
.lp-spine-path{fill:none;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:lpSpineDraw 2.2s cubic-bezier(.55,0,.25,1) .25s forwards}
@keyframes lpSpineDraw{to{stroke-dashoffset:0}}
.lp-spine-area{opacity:0;animation:lpSpineFade 1.6s ease-out 1.5s forwards}
.lp-spine-node,.lp-spine-halo{opacity:0;animation:lpSpinePop .45s ease-out forwards}
.lp-spine-halo{animation-name:lpSpineHalo}
@keyframes lpSpinePop{from{opacity:0}to{opacity:1}}
@keyframes lpSpineHalo{from{opacity:0}to{opacity:.14}}
.lp-spine-lab{opacity:0;animation:lpSpineFade .9s ease-out forwards}
@keyframes lpSpineFade{from{opacity:0}to{opacity:1}}
/* the playhead: hidden unless the browser can run CSS motion paths */
.lp-spine-run{opacity:0}
@supports (offset-path: path("M0 0")){
  /* one read per structure: the hero redraws as the next structure every ~5.2s */
  .lp-spine-run{animation:lpSpineRun 2.3s linear 2.6s 1 both}
  @keyframes lpSpineRun{
    0%{offset-distance:0%;opacity:0}
    3%{opacity:1}
    97%{opacity:1}
    100%{offset-distance:100%;opacity:0}
  }
}
@media (prefers-reduced-motion:reduce){
  .lp-spine-path{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
  .lp-spine-area{animation:none;opacity:1}
  .lp-spine-node,.lp-spine-lab{animation:none;opacity:1}
  .lp-spine-halo{animation:none;opacity:.14}
  .lp-spine-run{animation:none;opacity:0}
}
/* small screens: the wave and nodes stay; microtype would be unreadable */
@media (max-width:640px){ .lp-spine-lab, .lp-spine text{display:none} }

/* ---- Admin plan-copy editor (PlansModal, admin only) ----------------------- */
.plans-edit-btn{margin-top:10px;display:inline-flex;align-items:center;gap:6px;font-size:12px;
  padding:5px 11px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg-2);
  color:var(--txt-1);cursor:pointer;transition:.12s}
.plans-edit-btn:hover{background:var(--bg-3);color:var(--txt-0)}
.plan-card.editing{gap:8px}
.plan-edit-pop{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--txt-2);cursor:pointer}
.plan-edit-name{font-size:17px;font-weight:600;padding:6px 8px;border:1px solid var(--line-2);
  border-radius:var(--r-m);background:var(--bg-1);color:var(--txt-0);width:100%}
.plan-edit-locked{opacity:.75}
.plan-edit-locked .plan-per{color:var(--txt-3)}
.plan-edit-locked-note{font-size:11px;color:var(--txt-3);margin:-4px 0 4px}
.plan-edit-blurb{font-size:12.5px;padding:6px 8px;border:1px solid var(--line-2);border-radius:var(--r-m);
  background:var(--bg-1);color:var(--txt-1);width:100%;resize:vertical;font-family:inherit}
.plan-edit-feats{display:flex;flex-direction:column;gap:5px;margin-top:2px}
.plan-edit-feat{display:flex;gap:5px;align-items:center}
.plan-edit-feat input{flex:1;font-size:12px;padding:5px 7px;border:1px solid var(--line-2);
  border-radius:var(--r-m);background:var(--bg-1);color:var(--txt-1)}
.plan-edit-featx{flex:0 0 auto;width:24px;height:24px;border:none;border-radius:var(--r-s);background:var(--bg-3);
  color:var(--txt-2);cursor:pointer;font-size:15px;line-height:1}
.plan-edit-featx:hover{background:var(--neg);color:#fff}
.plan-edit-featadd{align-self:flex-start;font-size:11.5px;padding:4px 9px;border:1px dashed var(--line-2);
  border-radius:var(--r-m);background:transparent;color:var(--txt-2);cursor:pointer}
.plan-edit-featadd:hover{color:var(--txt-0);border-color:var(--txt-3)}
.plan-edit-bar{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;margin-top:6px}

/* ---- Post-checkout welcome card (/?welcome=1) ------------------------------- */
.welcome-card{width:min(430px,calc(100vw - 40px));background:var(--bg-1);border:1px solid var(--line-2);
  border-radius:var(--r-l);padding:34px 32px 26px;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:10px;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.welcome-eyebrow{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-3)}
/* the welcome cards carry the Kinolot lockup (mark + one-colour wordmark), not a mono "KINOLOT" eyebrow */
.welcome-eyebrow.welcome-brand{display:flex;align-items:baseline;gap:8px;letter-spacing:0;text-transform:none;color:var(--txt-0)}
.welcome-brand .brand-mark{width:25px;height:14px;color:inherit}
.welcome-brand .brand-name{font-size:17px;color:inherit}
.welcome-title{font-family:var(--f-serif);font-weight:600;font-size:22px;letter-spacing:-.01em;color:var(--txt-0);line-height:1.2}
.welcome-sub{font-size:13px;color:var(--txt-2);line-height:1.55;max-width:34ch}
.welcome-cta{margin-top:10px;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 18px;
  border-radius:var(--r-m);border:none;background:var(--accent);color:var(--ink-on-accent);font:600 13px var(--f-ui);cursor:pointer;transition:.12s}
.welcome-cta:hover{filter:brightness(1.08)}
.welcome-cta:disabled{opacity:.55;cursor:default}
.welcome-later{border:none;background:none;color:var(--txt-3);font-size:12px;cursor:pointer;padding:4px 8px}
.welcome-later:hover{color:var(--txt-1)}

/* ============================================================================
   Home Dashboard (home-dashboard.jsx) — the studio's front door once signed in.
   Top bar + hero + recent films + feature strip, on the landing's page grid (the
   1280px rails) and in the same identity: the Kinolot lockup, Spectral headlines,
   the app's 9px-radius buttons with the amber primary.
   THEME-AWARE (identity pass 2026-09-29): the website palette (--lpw-*, defined with
   the landing) is paper in the light theme and re-points at the app's dark tokens in
   the dark theme, so Home no longer flashes paper between two dark rooms.
   ========================================================================== */
.hd-root{ position:fixed; inset:0; z-index:120; display:flex;
  background:var(--lpw-bg); color:var(--lpw-ink); font-family:var(--f-ui); }
html[data-theme="dark"] .hd-root{ color-scheme:dark;
  --lpw-bg:var(--bg-1); --lpw-glass:rgba(14,15,18,.86); --lpw-surface:var(--bg-3);
  --lpw-card:var(--bg-2); --lpw-card-2:var(--bg-3);
  --lpw-line:rgba(255,255,255,.07); --lpw-line-2:rgba(255,255,255,.12); --lpw-line-3:rgba(255,255,255,.2);
  --lpw-ink:var(--txt-0); --lpw-ink-2:var(--txt-1); --lpw-sub:#8F8C85;   /* 5.4:1 on the cards */
  --lpw-black:var(--bg-0);
  --lpw-amber-soft:rgba(242,154,67,.12);
  --lpw-amber-ink:var(--lpw-amber); --lpw-amber-display:var(--lpw-amber); }   /* amber reads as text on dark (8:1) */

/* full-height vertical rails at the 1280px column edges — the landing page's
   structural signature (.lp-rails), so Home shares the same page grid. */
.hd-rails{ position:absolute; inset:0; pointer-events:none; }
.hd-rails::before,.hd-rails::after{ content:""; position:absolute; top:0; bottom:0; width:1px; background:var(--lpw-line); }
.hd-rails::before{ left:max(0px,calc((100% - 1280px)/2)); }
.hd-rails::after{ right:max(0px,calc((100% - 1280px)/2)); }

/* brand + account in the top bar (no left rail). The lockup matches the landing
   logo: the mark on the Spectral wordmark's baseline. */
.hd-brand{ display:flex; align-items:baseline; gap:10px; background:none; border:0;
  cursor:pointer; color:var(--lpw-ink); padding:0; }
.hd-brand .brand-mark{ width:31px; height:17px; color:inherit; }
.hd-brand-name{ font-family:"Spectral",Georgia,serif; font-weight:600; letter-spacing:-.01em; font-size:23px; line-height:1; color:var(--lpw-ink); }
/* a narrow phone: the lockup steps down so it keeps clear of New Project and the account chip */
@media (max-width:400px){ .hd-brand{ gap:8px; } .hd-brand .brand-mark{ width:27px; height:15px; } .hd-brand-name{ font-size:20px; } }
.hd-topbar-l{ display:flex; align-items:center; gap:18px; min-width:0; }
.hd-acct{ display:flex; align-items:center; margin-left:6px; }

/* main column */
.hd-main{ position:relative; flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
/* frosted full-width bar; content constrained to the SAME 1280px column as the
   rails, with rail segments crossing it (mirrors .lp-nav / .lp-nav-in). */
/* z-index:2 — the frosted bar is its own stacking context (backdrop-filter), so the account menu
   that opens from it was painted UNDER the hero's premiere screen; lift the bar above the scroll body */
.hd-topbar{ position:relative; z-index:2; border-bottom:1px solid var(--lpw-line);
  background:var(--lpw-glass); backdrop-filter:blur(10px); }
.hd-topbar::before,.hd-topbar::after{ content:""; position:absolute; top:0; bottom:0; width:1px; background:var(--lpw-line); }
.hd-topbar::before{ left:max(0px,calc((100% - 1280px)/2)); }
.hd-topbar::after{ right:max(0px,calc((100% - 1280px)/2)); }
.hd-topbar-in{ max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:13px clamp(20px,4vw,48px); }
.hd-top-actions{ display:flex; align-items:center; gap:10px; }
/* top-bar buttons = the landing nav's (.lp-btn): 38px, 9px radius, amber primary. An explicit
   font — a <button> without one fell back to the browser's Arial */
.hd-tbtn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding:0 16px;
  border-radius:var(--r-m); border:1px solid var(--lpw-line-2); background:var(--lpw-surface); color:var(--lpw-ink);
  font:600 13.5px var(--f-ui); line-height:1; white-space:nowrap; cursor:pointer;
  transition:background-color .14s,border-color .14s; }
.hd-tbtn:hover{ background:var(--lpw-card-2); border-color:var(--lpw-line-3); }
.hd-tbtn.hd-accent{ background:var(--lpw-amber); border-color:var(--lpw-amber); color:var(--lpw-on-amber); }
.hd-tbtn.hd-accent:hover{ background:var(--lpw-amber-hover); border-color:var(--lpw-amber-hover); }

/* scroll body (overflow-x hidden: the full-bleed 100vw section rules below;
   no bottom padding — the footer band sits flush like the landing's) */
.hd-scroll{ flex:1 1 auto; overflow:auto; overflow-x:hidden; padding:clamp(36px,5vw,64px) clamp(20px,4vw,48px) 0; }

/* hero */
.hd-hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,5vw,64px);
  align-items:center; max-width:1200px; margin:0 auto; }
.hd-hero-left{ min-width:0; }
/* headline = the homepage's (.lp-h1 spec): Spectral serif, the italic accent in the Kinolot amber */
.hd-hero-title{ font-family:"Spectral",Georgia,serif; font-weight:600; line-height:1.04;
  font-size:clamp(34px,4.8vw,64px); letter-spacing:-.01em; margin:0 0 18px; color:var(--lpw-ink); }
.hd-accent-text{ color:var(--lpw-amber-display); font-style:italic; }
.hd-hero-sub{ font-size:clamp(15px,1.4vw,17px); line-height:1.6; color:var(--lpw-sub); max-width:34ch; margin:0 0 26px; }
.hd-steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0 0 26px; }
/* pipeline steps = the homepage's card language (.lp-card: bone fill, quiet borders), with the
   buttons' 9px radius; the current room wears the amber selection (fill tint + amber text) */
.hd-step{ display:flex; flex-direction:column; gap:3px; text-align:left; padding:12px 13px;
  border-radius:var(--r-m); cursor:pointer; background:var(--lpw-card); border:1px solid transparent;
  color:var(--lpw-ink); font-family:var(--f-ui); transition:background-color .14s,border-color .14s; }
.hd-step:hover:not(.soon){ background:var(--lpw-card-2); border-color:var(--lpw-line-3); }
.hd-step-no{ font-family:var(--f-mono); font-size:11px; color:var(--lpw-sub); }
.hd-step-phase{ font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--lpw-sub); font-weight:600; }
.hd-step-name{ font-family:var(--f-display); font-size:13.5px; font-weight:600; }
.hd-step.on{ border-color:var(--lpw-amber); background:var(--lpw-amber-soft); }
.hd-step.on .hd-step-no, .hd-step.on .hd-step-name{ color:var(--lpw-amber-ink); }
.hd-step.soon{ opacity:.5; cursor:not-allowed; }
.hd-hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
/* buttons = the homepage's (.lp-btn.big): 46px, 9px radius, amber primary, white secondary */
.hd-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 22px; border-radius:var(--r-m);
  font-family:var(--f-ui); font-size:15px; font-weight:600; line-height:1; white-space:nowrap; cursor:pointer; border:1px solid transparent;
  transition:background-color .14s,border-color .14s; }
.hd-btn-accent{ background:var(--lpw-amber); border-color:var(--lpw-amber); color:var(--lpw-on-amber); }
.hd-btn-accent:hover{ background:var(--lpw-amber-hover); border-color:var(--lpw-amber-hover); }
.hd-btn-ghost{ background:var(--lpw-surface); color:var(--lpw-ink); border-color:var(--lpw-line-2); }
.hd-btn-ghost:hover{ background:var(--lpw-card-2); border-color:var(--lpw-line-3); }
.hd-root :is(.hd-brand,.hd-tbtn,.hd-step,.hd-btn,.hd-play,.hd-navbtn,.hd-card,.hd-cact,.lp-foot-link):focus-visible{
  outline:2px solid var(--lpw-ink); outline-offset:2px; }
.hd-hero-right{ min-width:0; }
/* hero media = the PREMIERE SCREEN, styled like the homepage's media panel
   (.lp-video spec: the card radius, hairline border) — a video placeholder for the
   assembled film, not a poster frame */
.hd-hero-media{ position:relative; aspect-ratio:16/10; border-radius:var(--r-l); overflow:hidden;
  background:var(--lpw-black); border:1px solid var(--lpw-line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.hd-hero-media-fallback{ position:absolute; inset:0;
  background:radial-gradient(120% 120% at 30% 20%,#22242b 0%,#121319 60%,#0d0d0e 100%); }
.hd-hero-media-note{ position:relative; z-index:1; font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); text-align:center; padding:0 16px; }
.hd-play{ position:relative; z-index:1; width:68px; height:68px; border-radius:999px; cursor:pointer;
  border:0; background:#fff; color:#0E0F12; display:flex; align-items:center;
  justify-content:center; padding-left:4px; transition:transform .16s; }
.hd-play:hover{ transform:scale(1.06); }
.hd-hero-media-cap{ position:absolute; left:16px; bottom:14px; z-index:1; color:#fff; font-size:13px;
  font-weight:600; text-shadow:0 1px 8px rgba(0,0,0,.6); }

/* recent projects — a full-bleed hairline rule ABOVE the section crosses the
   rails in a "+", exactly like the landing's .lp-section dividers. */
.hd-recent{ position:relative; max-width:1200px; margin:clamp(44px,5vw,64px) auto 0; padding-top:clamp(44px,5vw,64px); }
.hd-recent::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:100vw; height:1px; background:var(--lpw-line); }
/* reference design: compact left-aligned section head */
.hd-sec-head{ display:flex; align-items:center; justify-content:space-between; margin:0 0 16px; }
.hd-sec-title{ font-family:"Spectral",Georgia,serif; font-size:22px; font-weight:600; letter-spacing:-.01em; margin:0; color:var(--lpw-ink); }
/* ‹ › pager for the Recent Projects window — the app's quiet icon buttons (9px radius) */
.hd-nav{ display:flex; align-items:center; gap:8px; }
.hd-navbtn{ display:flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:var(--r-m); background:var(--lpw-surface); border:1px solid var(--lpw-line-2); color:var(--lpw-ink);
  cursor:pointer; transition:background-color .14s,border-color .14s; }
.hd-navbtn:hover:not(:disabled){ background:var(--lpw-card-2); border-color:var(--lpw-line-3); }
.hd-navbtn:disabled{ opacity:.35; cursor:default; }
.hd-viewall{ display:inline-flex; align-items:center; gap:6px; background:none; border:0;
  color:var(--lpw-sub); font-size:13px; font-weight:600; cursor:pointer; transition:.12s; }
.hd-viewall:hover{ color:var(--lpw-amber-ink); }
.hd-recent-row{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.hd-card{ padding:0; border:0; background:none; cursor:pointer; text-align:left; font-family:var(--f-ui); }
.hd-card-art{ position:relative; aspect-ratio:3/4; border-radius:var(--r-l); overflow:hidden;
  background:#14161c center/cover no-repeat; display:flex;
  align-items:center; justify-content:center; box-shadow:0 12px 26px -16px rgba(15,16,18,.35);
  transition:transform .14s,box-shadow .14s; }
/* dark theme: a hairline keeps the dark posters off the dark page */
html[data-theme="dark"] .hd-card-art{ box-shadow:0 0 0 1px var(--lpw-line-2), 0 12px 26px -16px rgba(0,0,0,.6); }
.hd-card:hover .hd-card-art{ transform:translateY(-3px); box-shadow:0 18px 38px -20px rgba(15,16,18,.45); }
.hd-card.current .hd-card-art{ box-shadow:0 0 0 2px var(--lpw-amber); }
.hd-card-initials{ font-family:var(--f-display); font-size:30px; font-weight:700; color:rgba(255,255,255,.7); }
.hd-card-gen{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:rgba(13,13,14,.55); color:#fff; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.hd-card-gen-lab{ font-family:var(--f-mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.9); }
.hd-card-spin{ width:24px; height:24px; border-radius:50%; border:2.5px solid rgba(255,255,255,.28); border-top-color:#fff; animation:hdcardspin .8s linear infinite; }
@keyframes hdcardspin{ to{ transform:rotate(360deg); } }
.hd-card-pill{ position:absolute; top:9px; left:9px; z-index:1; font-family:var(--f-mono); font-size:10px; font-weight:700;
  letter-spacing:.06em; padding:3px 8px; border-radius:999px; color:#fff; background:rgba(10,11,14,.72);
  backdrop-filter:blur(4px); max-width:calc(100% - 18px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* poster actions — appear on hover, top-right (download / regenerate / restore) */
.hd-card-actions{ position:absolute; top:8px; right:8px; z-index:3; display:flex; gap:6px;
  opacity:0; transition:opacity .14s; }
.hd-card:hover .hd-card-actions, .hd-card:focus-within .hd-card-actions{ opacity:1; }
.hd-cact{ display:flex; align-items:center; justify-content:center; width:28px; height:28px;
  border-radius:var(--r-m); border:0; cursor:pointer; color:#fff; background:rgba(10,11,14,.66);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:.14s; }
.hd-cact:hover:not(:disabled){ background:var(--lpw-amber); color:var(--lpw-on-amber); }
.hd-cact:disabled{ opacity:.5; cursor:default; }
.hd-card-shade{ position:absolute; inset:auto 0 0 0; z-index:1; padding:24px 12px 12px;
  background:linear-gradient(to top,rgba(6,7,10,.92) 0%,rgba(6,7,10,.55) 55%,transparent 100%); }
.hd-card-name{ color:#fff; font-family:var(--f-display); font-size:14px; font-weight:600; line-height:1.2; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.hd-card-sub{ color:rgba(255,255,255,.72); font-size:11.5px; margin-top:2px; }
.hd-card-meta{ display:flex; align-items:center; gap:5px; color:rgba(255,255,255,.66); font-family:var(--f-mono); font-size:10px; margin-top:5px; }
.hd-card-new-art{ background:var(--lpw-card); border:1px dashed var(--lpw-line-3); flex-direction:column; gap:9px; color:var(--lpw-sub); box-shadow:none; }
html[data-theme="dark"] .hd-card-new-art{ box-shadow:none; }
.hd-card:hover .hd-card-new-art{ color:var(--lpw-amber-ink); border-color:var(--lpw-amber); }
.hd-card-new-lab{ font-family:var(--f-display); font-size:12.5px; font-weight:600; }

/* feature strip — the divider rule floats midway in the gap above it */
.hd-features{ position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; max-width:1200px;
  margin:clamp(64px,8vw,96px) auto 0; padding:26px; background:var(--lpw-card); border:1px solid transparent; border-radius:var(--r-l); }
.hd-features::before{ content:""; position:absolute; top:calc(clamp(64px,8vw,96px) / -2); left:50%; transform:translateX(-50%);
  width:100vw; height:1px; background:var(--lpw-line); }
.hd-feat{ display:flex; align-items:flex-start; gap:12px; }
.hd-feat-ic{ flex:0 0 auto; width:44px; height:44px; border-radius:var(--r-m); display:flex;
  align-items:center; justify-content:center; background:var(--lpw-bg); border:1px solid var(--lpw-line-2); color:var(--lpw-amber-ink); }
.hd-feat-title{ font-family:var(--f-display); font-size:13.5px; font-weight:600; color:var(--lpw-ink); }
.hd-feat-body{ font-size:12.5px; color:var(--lpw-sub); margin-top:3px; line-height:1.45; }

/* footer — EXACTLY the landing footer: same band (full-viewport border-top rule,
   .lp-foot equivalent) and the same .lp-foot-in inner block (1280px column +
   its own inline padding), sitting flush at the bottom of the scroll. */
.hd-foot{ position:relative; left:50%; transform:translateX(-50%); width:100vw;
  margin-top:clamp(64px,8vw,96px); border-top:1px solid var(--lpw-line); color:var(--lpw-sub); }

/* responsive — minmax(0,…) columns: a plain 1fr let the steps' longest word ("PRE-PRODUCTION")
   widen the single hero column past a phone screen, clipping "Open Project" and the premiere labels */
@media (max-width:1080px){ .hd-hero{ grid-template-columns:minmax(0,1fr); } .hd-recent-row{ grid-template-columns:repeat(3,minmax(0,1fr)); } .hd-features{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px){ .hd-recent-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } .hd-features{ grid-template-columns:minmax(0,1fr); } }
/* phone: the landing's 20px gutter; the four steps go two by two; the hero buttons share the row */
@media (max-width:560px){
  .hd-topbar-in{ padding:11px 20px; }
  .hd-tbtn{ height:36px; padding:0 13px; font-size:13px; }
  .hd-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hd-hero-cta{ gap:10px; }
  .hd-hero-cta .hd-btn{ flex:1 1 auto; height:44px; padding:0 18px; font-size:14.5px; }
  .hd-features{ padding:22px 20px; }
}
/* the narrowest phones: New Project keeps its label on one line (its + icon steps aside) */
@media (max-width:360px){
  .hd-topbar-in{ padding:11px 16px; }
  .hd-top-actions{ gap:8px; }
  .hd-acct{ margin-left:0; }
  .hd-tbtn.hd-accent svg{ display:none; }
}

/* centered progress overlay for long single-scene MUSE work (Redraft from beats) —
   fixed + portaled to <body>, so it's dead-centre on any screen or device */
.redraft-overlay{ position:fixed; inset:0; z-index:9996; display:grid; place-items:center;
  background:rgba(8,8,10,.45); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.redraft-card{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  background:var(--bg-1); border:1px solid var(--line-2); border-radius:var(--r-l);
  padding:26px 30px; max-width:min(420px,86vw); box-shadow:0 24px 70px rgba(0,0,0,.45); }
.redraft-card .orb{ width:26px; height:26px; border-radius:50%;
  background:conic-gradient(from 0deg,var(--neg),var(--pos),var(--neg)); animation:spin 1.2s linear infinite; }
/* the hat MUSE is wearing for this job — small-caps eyebrow above the title, one
   consistent grammar (MUSE · ROLE) across every tab's busy pop-up */
.redraft-role{ font:600 10.5px var(--f-ui); letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-2); margin-bottom:-4px; }
.redraft-t{ font-family:var(--f-display); font-size:15px; font-weight:600; color:var(--txt-0,var(--txt-1)); }
.redraft-d{ font-size:12.5px; color:var(--txt-2); line-height:1.5; }
.studio-progress-card{ min-width:min(420px,86vw); }
.studio-progress-bar{ width:100%; height:5px; border-radius:999px; overflow:hidden;
  background:color-mix(in srgb,var(--txt-1) 12%,transparent); margin-top:2px; }
.studio-progress-bar i{ display:block; height:100%; border-radius:inherit; background:var(--accent);
  transition:width .28s ease; }

/* Brief modal — the rebuild action sits in its own toolbar row between the
   header and the brief text, not floating over it */
.brief-rebuild-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 18px; border-bottom:1px solid var(--line); flex:0 0 auto; }
.brief-rebuild-row .flag-btn{ flex:0 0 auto; }
.brief-model-pick{ display:inline-flex; align-items:center; gap:7px; margin-left:auto; }

/* project switcher — small creation date beside the name (disambiguates
   same-named films, e.g. a rebuild next to its original) */
.proj-row-date{ margin-left:auto; padding-left:10px; flex:0 0 auto;
  font-family:var(--f-mono); font-size:9.5px; color:var(--txt-2); white-space:nowrap; }
/* (txt-2, not txt-3: the active row is raised on bg-4, where txt-3 measured 4.1:1 — review 2026-09-29) */

/* ==========================================================================
   ART ROOM — compact-canvas safety pass
   A card grid can become narrow well before the viewport reaches phone width:
   on a tablet it previously made the reference slot, Generate, Upload and
   overflow menu compete for the same 300px line. Keep shared SheetFrame
   controls in their own predictable lanes so Characters, Props, Locations,
   appearance states, coverage/variant plates and scale sheets all inherit the
   correction instead of each needing a one-off treatment.
   ========================================================================== */
.sheet-gen-row{
  flex-wrap:nowrap;
  align-items:stretch;
}
.sheet-gen-row .sheet-gen-btn{
  min-width:0;
  flex:1 1 auto;
  white-space:normal;
  text-align:center;
  line-height:1.2;
}
.sheet-gen-row .sheet-upload-btn{
  width:100%;
  min-width:0;
  flex:1 1 auto;
  margin-top:0;
  white-space:normal;
  text-align:center;
  line-height:1.2;
}
.sheet-gen-row .sheet-gen-stop{min-width:0}
.sheet-frame > .sheet-dropzone,
.sheet-frame .sheet-dropzone{width:100%;max-width:none}

/* Small, theme-aware workflow state: metadata, not another card surface. */
.sheet-status-bar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;width:100%;box-sizing:border-box;
  margin-top:8px;min-height:28px;position:relative;z-index:21;background:var(--bg-1)}
.sheet-status-label{display:inline-flex;align-items:center;min-height:20px;padding:2px 7px;border:1px solid var(--line-2);
  border-radius:999px;background:var(--bg-3);color:var(--txt-2);font:700 9px/1.2 var(--f-mono);
  letter-spacing:.06em;text-transform:uppercase}
.sheet-status-label.pending,.sheet-status-label.generating,.sheet-status-label.saving{border-color:var(--pos-line);color:var(--pos-ink)}
.sheet-status-label.error,.sheet-status-label.failed{border-color:var(--neg-line);color:var(--neg-ink)}
.sheet-status-label.approved,.sheet-status-label.saved{color:var(--txt-1)}
.sheet-approval-btn,.sheet-retry-save{min-height:24px;padding:3px 8px;border:1px solid var(--line-2);border-radius:var(--r-s);
  background:transparent;color:var(--txt-2);font:600 10px var(--f-ui);cursor:pointer}
.sheet-approval-btn:hover,.sheet-retry-save:hover{background:var(--bg-3);color:var(--txt-0);border-color:var(--line-3)}
.sheet-status-bar .sheet-approval-btn:first-of-type{margin-left:auto}
.sheet-review-details{font-size:10.5px;color:var(--txt-2)}
.sheet-review-details > summary{cursor:pointer}
/* Tools anchor to the media wrapper, never to variable-height review text. */
.sheet-media{min-width:0}
.sheet-retry-save{display:flex;gap:8px;flex-wrap:wrap;cursor:default}
.sheet-retry-save > span{flex-basis:100%;line-height:1.45}

@media (max-width:1100px){
  /* Two generous columns beat three cramped ones. This only affects the
     tablet canvas; wide desktop retains its established grid density. */
  .artroom .sheet-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr))}

  /* The fixed engine controls live in a dedicated right-side gutter instead
     of over the last column of production controls. */
  .artroom .art-scroll{padding-right:96px}

  /* The docking controls stop bisecting the active card at tablet widths.
     Their bottom placement also preserves the established one-hand reach. */
  .nb-dock{top:auto;right:14px;bottom:26px;transform:none}
  .write-dock{top:auto;right:14px;bottom:152px;transform:none}
  .nb-dock-panel{top:auto;bottom:0;transform:none;max-height:calc(100dvh - 152px);overflow-y:auto}

  .sheet-head,
  .sheet-head-top,
  .state-row-head,
  .loc-variant-head{min-width:0}
  .sheet-head-actions{max-width:100%;justify-content:flex-start}
}

@media (min-width:701px) and (max-width:1100px){
  /* Treat the two engine controls as one vertically centred right-edge pair. */
  .nb-dock{top:calc(50% + 63px);bottom:auto;transform:translateY(-50%)}
  .write-dock{top:calc(50% - 63px);bottom:auto;transform:translateY(-50%)}
}

@media (max-width:700px){
  /* There is no useful side gutter on a phone. Keep all form fields clear of
     the two compact docks while allowing the final card content to scroll
     above them. */
  .artroom .art-scroll{padding-right:14px;padding-bottom:250px}
  .nb-dock{right:10px;bottom:18px}
  .write-dock{right:10px;bottom:144px}
  /* on a phone the Images dock shares the bottom-right corner with the Frances bubble (75): keep
     the docks on top, as before the layer scale, so its 16:9 / 2K chips stay tappable. 76 is still
     below every dialog, Home (120) and the raised top bar (130). (.write-dock is also .nb-dock) */
  .nb-dock{z-index:76}

  .sheet-gen-row{gap:8px}
  .sheet-gen-row:not(:has(.sheet-gen-stop)){flex-wrap:wrap}
  .sheet-gen-row:not(:has(.sheet-gen-stop)) .sheet-gen-btn,
  .sheet-gen-row:not(:has(.sheet-gen-stop)) .sheet-upload-btn{flex-basis:100%}
  .sheet-gen-row .sheet-upload-btn{height:auto;min-height:34px;padding:7px 10px}

  /* Nested state, variant and coverage cards may be substantially narrower
     than the viewport. Let their small headers make a deliberate second row
     rather than stealing width from editable names. */
  .state-row-head,
  .loc-variant-head,
  .loc-coverage-sheet .loc-variant-head{flex-wrap:wrap}
  .state-row-head .state-label,
  .loc-variant-head .edit-in,
  .loc-coverage-title{min-width:0;flex:1 1 160px}
  .loc-coverage-source{margin-left:auto}
}

@media (max-width:640px){
  .nb-dock-panel{width:min(280px,calc(100vw - 84px));max-height:calc(100dvh - 152px)}
  /* A full-width drop target stays visually calm; its options control is
     anchored inside the frame and never participates in the action row. */
  .sheet-frame:has(.sheet-dropzone):not(:has(.sheet-status-bar)) .sheet-gen-tools{
    top:20px;
    right:20px;
  }

  /* Image Details is an inspection surface, not a squeezed desktop modal. */
  .dt-overlay{padding:10px}
  .dt-panel{width:100%;max-height:calc(100dvh - 20px);border-radius:var(--r-l)}
  .dt-head{padding:13px 14px;gap:9px}
  .dt-title{font-size:14px}
  .dt-scroll{padding:13px 14px 18px;gap:13px}
  .dt-prompt{font-size:11px;line-height:1.5;max-height:32dvh}
  .dt-thumbs{gap:8px}
}

/* Team collaboration */
.team-modal{width:min(620px,94vw)}
.team-body{display:flex;flex-direction:column;gap:12px;padding:16px 18px 18px;overflow:auto}
.team-note{font-size:12.5px;line-height:1.45;color:var(--txt-2);background:var(--bg-3);
  border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.team-invite{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;gap:8px;align-items:center}
.team-email,.team-role{height:36px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg-2);
  color:var(--txt-0);font:500 12px var(--f-ui);padding:0 10px;outline:none}
.team-email:focus,.team-role:focus{border-color:var(--pos)}
.team-role.compact{height:30px;max-width:136px;font-size:11.5px}
.team-role-blurb{font-size:11.5px;line-height:1.4;color:var(--txt-3);margin-top:-2px;padding:0 2px}
.invite-welcome{max-width:440px}
.invite-film{background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-l);padding:12px 14px}
.invite-film-title{font-size:15px;font-weight:600;color:var(--txt-1);margin-bottom:3px}
.invite-film-by{font-size:12.5px;color:var(--txt-2)}
.invite-pw{background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-l);padding:10px 12px;display:grid;gap:8px}
.invite-pw-note{font-size:11.5px;line-height:1.45;color:var(--txt-2)}
.invite-pw-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.invite-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.invite-later{background:none;border:1px solid var(--line-2);border-radius:var(--r-m);height:34px;padding:0 14px;
  color:var(--txt-2);font-size:12.5px;cursor:pointer}
.invite-later:hover{color:var(--txt-1);border-color:var(--line-1)}
/* home wall — "Shared with me" section */
.hd-shared{ margin-top:8px; }
.hd-pill-shared{ background:#fff; color:#0E0F12; }   /* inverted phase pill — on-palette (it was an off-brand blue) */
.hd-card-owner{ font-style:italic; }
.team-add{height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;
  border-radius:var(--r-m);background:var(--accent);color:var(--ink-on-accent);font:600 12.5px var(--f-ui);padding:0 12px;cursor:pointer}
.team-add:disabled{opacity:.5;cursor:not-allowed}
.team-seats{display:flex;flex-direction:column;gap:7px}
.team-seat{display:flex;align-items:center;gap:10px;min-height:46px;border:1px solid var(--line);
  border-radius:9px;background:var(--bg-1);padding:8px 10px}
.team-seat.owner{background:var(--bg-3)}
.team-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--bg-4);
  color:var(--pos-ink);border:1px solid var(--line)}
.team-member-main{flex:1;min-width:0}
.team-member-email{font:650 12.5px var(--f-ui);color:var(--txt-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-member-role{font:500 10.5px var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--txt-3);margin-top:2px}
.team-member-actions{display:flex;align-items:center;gap:6px}
.team-remove{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line-2);
  border-radius:var(--r-m);background:var(--bg-2);color:var(--txt-3);cursor:pointer}
.team-remove:hover{color:var(--alert);border-color:color-mix(in srgb,var(--alert) 45%,var(--line-2))}
.team-badge{font:700 9px var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--pos-ink);
  border:1px solid var(--pos-line);background:var(--pos-soft);border-radius:20px;padding:3px 7px}
.team-empty{border:1px solid var(--line);border-radius:var(--r-l);background:var(--bg-2);padding:18px 16px;text-align:center;color:var(--txt-2);
  font:500 12px var(--f-ui)}
.team-foot{font-size:11.5px;color:var(--txt-3);line-height:1.4}
@media (max-width:640px){
  .team-invite{grid-template-columns:1fr}
  .team-member-actions{flex-direction:column;align-items:flex-end}
}

/* CRASH BOUNDARY — the recovery screen shown when a render exception escapes React.
   Deliberately dependency-free (no app tokens beyond the basics) so it can still paint
   when whatever broke is a theming/layout problem. */
.crash-wrap{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px;
  background:var(--bg-0,#f4f2ee);overflow:auto}
.crash-card{width:min(560px,100%);background:var(--bg-1,#fff);border:1px solid var(--line-2,#e0dcd4);
  border-radius:var(--r-l);padding:26px 26px 22px;box-shadow:0 18px 60px rgba(0,0,0,.18)}
.crash-t{font-family:var(--f-display,inherit);font-size:19px;font-weight:600;color:var(--txt-0,#1a1a1a)}
.crash-d{font-size:13px;line-height:1.6;color:var(--txt-2,#6b675f);margin-top:8px}
.crash-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.crash-btn{font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line-2,#e0dcd4);background:var(--bg-2,#faf9f6);color:var(--txt-1,#3a3a3a)}
.crash-btn:hover{border-color:var(--txt-3,#98938a)}
.crash-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--ink-on-accent)}
.crash-det{margin-top:16px;font-size:11.5px;color:var(--txt-3,#98938a)}
.crash-det summary{cursor:pointer}
.crash-pre{margin-top:8px;max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-word;
  font-family:var(--f-mono,monospace);font-size:10.5px;line-height:1.5;color:var(--txt-2,#6b675f);
  background:var(--bg-3,#efece6);border-radius:var(--r-m);padding:10px}

/* VIEW-ONLY collaborator — a standing notice, because RLS silently rejects their writes */
.readonly-banner{position:sticky;top:0;z-index:70;display:flex;align-items:center;gap:9px;
  padding:9px 16px;font-size:12px;line-height:1.5;color:var(--txt-0);
  background:var(--alert-soft,rgba(216,166,87,.16));border-bottom:1px solid var(--alert-line,rgba(216,166,87,.4))}
.readonly-banner b{font-weight:650}
.is-readonly .edit-in[readonly]{cursor:default;color:var(--txt-1);background:transparent}
.is-readonly button:disabled,.is-readonly select:disabled{cursor:not-allowed}
.is-readonly .scard:not(.sel),.is-readonly .tree-scene{cursor:pointer}

/* PRESENCE — collaborators currently in this film (top bar, beside Team) */
.presence-dots{display:inline-flex;align-items:center;cursor:help}
.presence-dot{display:grid;place-items:center;width:22px;height:22px;margin-left:-5px;
  border-radius:50%;font:700 9.5px var(--f-ui);letter-spacing:0;
  background:var(--accent);color:var(--ink-on-accent,#fff);border:2px solid var(--bg-1)}
.presence-dot:first-child{margin-left:0}
/* the same person in another window — distinct, because a second window of YOUR OWN is
   the case that used to cause save conflicts */
.presence-dot.self-other{background:var(--txt-3);color:var(--bg-1)}
.presence-dot.more{background:var(--bg-3);color:var(--txt-2);border-color:var(--bg-1)}

/* Slugline units (Location card) */
.loc-time-badge{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:99px;border:1px solid var(--line);color:var(--txt-2);margin-left:6px}
.loc-unit-orphan{display:flex;align-items:center;gap:8px;font-size:12px;color:#b45309;background:rgba(180,83,9,.06);border:1px dashed var(--line);border-radius:var(--r-m);padding:7px 10px;margin:6px 0}
.loc-unit-orphan span{flex:1}
.loc-unit-remove{font-size:11px;background:none;border:1px solid var(--line);border-radius:var(--r-s);padding:2px 8px;cursor:pointer;color:var(--txt-2)}
.loc-unit-remove:hover{color:#b45309;border-color:#b45309}
.loc-unit-card.orphan{opacity:.85}

/* slugline unit set dressing */
.loc-dress{margin:6px 0}
.loc-dress-lab{font-size:11px;font-weight:600;color:var(--txt-3);letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}
.loc-dress-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.loc-dress-row.sugg{margin-top:5px}
.loc-dress-chip{display:inline-flex;align-items:center;gap:2px;font-size:11px;padding:2px 4px 2px 9px;border-radius:99px;background:var(--bg-4);color:var(--txt-1);border:1px solid var(--line)}
.loc-dress-chip button{background:none;border:none;cursor:pointer;color:var(--txt-3);font-size:12px;padding:0 4px;line-height:1}
.loc-dress-chip button:hover{color:#b45309}
.loc-dress-add{display:inline-flex;align-items:center;gap:4px}
.loc-dress-add input{font-size:11px;padding:2px 9px;border-radius:99px;border:1px dashed var(--line);background:none;color:var(--txt-1);width:120px;outline:none}
.loc-dress-add input:focus{border-color:var(--txt-3)}
.loc-dress-sugg{font-size:10.5px;padding:2px 9px;border-radius:99px;border:1px dashed var(--line);background:none;color:var(--txt-3);cursor:pointer}
.loc-dress-sugg:hover{color:var(--txt-1);border-color:var(--txt-3)}
.loc-dress-sugg-lab{font-size:10px;color:var(--txt-3);margin-right:2px}

/* ── fal.ai price-drift card (admin-only, mounted by app/pricing-watch.jsx) ── */
.pricing-watch-card{position:fixed;right:18px;bottom:18px;z-index:99998;width:min(420px,92vw);max-height:70vh;overflow:auto;background:#2a2622;color:#f4efe9;border-radius:var(--r-l);padding:14px 15px 12px;box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 0 1px rgba(220,170,60,.35);font-size:13px;line-height:1.45;animation:turn-toast-in .18s ease-out}
.pricing-watch-card .pw-title{font-weight:700;font-size:14px;color:#ffd98a;margin-bottom:3px}
.pricing-watch-card .pw-sub{color:#d9d2c8;font-size:12px;margin-bottom:9px}
.pricing-watch-card .pw-rows{display:flex;flex-direction:column;gap:4px;margin-bottom:9px}
.pricing-watch-card .pw-row{display:flex;align-items:baseline;gap:7px;padding:4px 8px;border-radius:var(--r-m);background:rgba(255,255,255,.05);font-variant-numeric:tabular-nums}
.pricing-watch-card .pw-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.pricing-watch-card .pw-label em{font-style:normal;font-size:10.5px;color:#b8ac96;opacity:.9}
.pricing-watch-card .pw-old{color:#e8a795;text-decoration:line-through;font-size:12px}
.pricing-watch-card .pw-arrow{color:#8f857a;font-size:11px}
.pricing-watch-card .pw-new{color:#a8e6bf;font-weight:700;font-size:12.5px}
.pricing-watch-card .pw-fail{font-size:11px;color:#c9ab74;margin-bottom:7px}
.pricing-watch-card .pw-when{font-size:10.5px;color:#8f857a;margin-bottom:9px}
.pricing-watch-card .pw-actions{display:flex;gap:8px;justify-content:flex-end}
.pricing-watch-card .pw-btn{font-size:12.5px;padding:6px 13px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:none;color:#e8e2d8;cursor:pointer}
.pricing-watch-card .pw-btn:hover{background:rgba(255,255,255,.07)}
.pricing-watch-card .pw-btn.primary{background:#caa24a;border-color:#caa24a;color:#241d10;font-weight:700}
.pricing-watch-card .pw-btn.primary:hover{background:#dab35b}
.pricing-watch-card .pw-btn:disabled{opacity:.55;cursor:default}
.prop-event-list{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.prop-event-row{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px;border:1px solid var(--line,#dedbd5);border-radius:var(--r-s);background:rgba(255,255,255,.52)}
.prop-event-moment{align-items:end}
.prop-event-inline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.prop-event-input{min-width:0;width:100%;height:30px;padding:0 7px;border:1px solid var(--line,#dedbd5);border-radius:5px;background:#fff;color:inherit;font:inherit;font-size:11px}
.prop-event-row .prop-select{min-width:0;width:100%}
@media(max-width:700px){.prop-event-moment{grid-template-columns:1fr}.prop-event-inline{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- Story Contract (left rail) — a card like the Premise card: one question per
   group (readable title + one-line hint), the picks, then the facts they set ---- */
.contract-wrap{display:flex;flex-direction:column;gap:0;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-m);padding:12px;margin:0 2px 4px}
.contract-banner{display:flex;gap:7px;align-items:flex-start;margin-bottom:12px;padding:7px 9px;border-radius:var(--r-m);
  background:var(--accent-soft);border:1px solid var(--accent-line);font-size:11.5px;line-height:1.45;color:var(--txt-1)}
.contract-banner svg{flex:none;margin-top:2px;color:var(--pos-ink)}
.contract-group{display:flex;flex-direction:column;gap:7px}
.contract-group + .contract-group{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line-2)}
.contract-q-t{font-family:var(--f-ui);font-size:12.5px;font-weight:600;color:var(--txt-0);line-height:1.3}
.contract-q-h{font-size:11.5px;color:var(--txt-2);line-height:1.4;margin-top:1px}
.contract-chips{display:flex;flex-wrap:wrap;gap:5px}
.contract-chip{font:inherit;font-size:11.5px;padding:4px 11px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg-3);color:var(--txt-1);cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.contract-chip:hover:not(:disabled){color:var(--txt-0);border-color:var(--line-3);background:var(--bg-4)}
.contract-chip.sel{border-color:var(--txt-0);background:var(--txt-0);color:var(--bg-2);font-weight:600}
.contract-chip:disabled{opacity:.45;cursor:default}
.contract-meta{display:flex;gap:8px;align-items:baseline;font-size:12px;line-height:1.4}
.contract-meta .k{flex:none;color:var(--txt-2)}
.contract-meta .v{color:var(--txt-0);font-weight:500;min-width:0}
.contract-demands{font-size:12px;line-height:1.5;color:var(--txt-1)}
.contract-verdict{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:9px 10px;border-radius:var(--r-m);
  font-size:12px;line-height:1.5;color:var(--txt-0)}
.contract-verdict-ic{flex:none;display:flex;margin-top:1px}
.contract-verdict-tx{min-width:0}
.contract-verdict-t{font-weight:600;margin-bottom:2px}
.contract-verdict.warn{background:var(--alert-soft);border:1px solid color-mix(in oklab,var(--alert) 35%,transparent)}
.contract-verdict.warn .contract-verdict-ic,.contract-verdict.warn .contract-verdict-t{color:var(--alert)}
.contract-verdict.ok{background:var(--pos-soft);border:1px solid var(--pos-line)}
.contract-verdict.ok .contract-verdict-ic,.contract-verdict.ok .contract-verdict-t{color:var(--pos-ink)}
/* the story rail's field labels & section headers read a step darker/larger than the
   app-wide .obj-lab / .eyebrow — at 9px slate-on-bone they were nearly invisible */
.rail-sec .obj-lab{font-size:10px;color:var(--txt-1)}
.rail-sec-head .eyebrow{color:var(--txt-1)}

/* ==== Stage composer tabs + suggestions (prompt-element redesign) ============
   Image | Video | Sound segmented tabs on the clip composer, a one-tap
   suggestions chip row (the Reference-mode picks), the Image frame composer
   and the Sound (ElevenLabs) line panel. */
.stage2-ctab-head{display:flex;flex-direction:column;gap:9px;margin-bottom:10px}
.stage2-ctab-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stage2-ctab-tabs{display:inline-flex;padding:3px;gap:2px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-3)}
.stage2-ctab-btn{padding:5px 11px;border:0;border-radius:var(--r-s);background:transparent;color:var(--txt-2);font-family:var(--f-ui);font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;cursor:pointer;transition:.13s}
.stage2-ctab-btn:hover{color:var(--txt-1)}
.stage2-ctab-btn.on{background:var(--bg-5);color:var(--txt-0);box-shadow:0 1px 2px rgba(0,0,0,.3)}
/* Fixed-height video prompt: the composer's prompt editor no longer grows with
   long compiled prompts — it holds one steady height and scrolls inside, so the
   toolbar and Generate stay put. (Multi-shot mode unaffected: its rows are the
   editor and the box holds only the toolbar.) */
.stage2-gen-row:not(.ms) .stage2-gen-box .stage2-gen-prompt{
  height:240px;
  min-height:150px;
  max-height:70vh;
  overflow-y:auto;
  resize:vertical;
}

/* ==== Script Check: story-scene vs production-unit grammar ================= */
.script-check-report{max-width:1000px;margin:0 auto 14px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-l);overflow:hidden}
.script-check-split{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1.35fr);align-items:stretch;gap:8px;padding:14px 16px 10px}
.script-check-story,.script-check-units{display:flex;flex-direction:column;gap:5px;padding:12px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-1)}
.script-check-story b{font:650 13px var(--f-display);color:var(--txt-0)}
.script-check-story>span:last-child,.script-check-none{font:500 11px/1.4 var(--f-ui);color:var(--txt-2)}
.script-check-kicker{font:700 9px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3)}
.script-check-arrow{display:grid;place-items:center;color:var(--txt-3)}
.script-check-unitlist{display:flex;flex-direction:column;gap:4px}
.script-check-unitlist button{border:0;background:transparent;padding:3px 0;text-align:left;cursor:pointer;color:var(--txt-1);font:650 11px/1.35 var(--f-mono)}
.script-check-unitlist button:hover{color:var(--accent-ink)}
.script-check-explain{margin:0 16px 11px;padding:9px 11px;border-radius:var(--r-m);background:var(--accent-soft);color:var(--txt-2);font:500 11px/1.45 var(--f-ui)}
.script-check-issues{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.script-check-issue{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:8px;border:0;border-bottom:1px solid var(--line);background:transparent;padding:10px 16px;text-align:left;cursor:pointer}
.script-check-issue:last-child{border-bottom:0}
.script-check-issue:hover{background:var(--bg-1)}
.script-check-issue>.ic{display:grid;place-items:center;color:var(--alert)}
.script-check-issue.error>.ic{color:var(--neg-ink)}
.script-check-issuebody{display:flex;flex-direction:column;gap:2px;min-width:0}
.script-check-issuebody b{font:700 10px var(--f-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--txt-1)}
.script-check-issuebody span{font:500 11.5px/1.4 var(--f-ui);color:var(--txt-2)}
.script-check-goto{font:650 9.5px var(--f-mono);color:var(--txt-3);white-space:nowrap}
.tr-note-lens{font:700 9px var(--f-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--accent-ink)}
.spb-check-flash{animation:spbCheckFlash 2.2s ease}
@keyframes spbCheckFlash{0%,20%{background:var(--alert-soft);box-shadow:0 0 0 4px var(--alert-soft)}100%{background:transparent;box-shadow:none}}
@media(max-width:680px){
  .script-check-split{grid-template-columns:1fr;padding:10px}
  .script-check-arrow{transform:rotate(90deg)}
  .script-check-explain{margin:0 10px 10px}
  .script-check-issue{grid-template-columns:22px minmax(0,1fr)}
  .script-check-goto{grid-column:2}
}

/* Stage render-package preview — compact handoff from script → beat → shot → clip */
.stage-render-plan{width:100%;max-width:100%;min-width:0;margin:14px 0 16px;padding:12px;
  border:1px solid var(--line-2);border-radius:9px;background:var(--bg-2);color:var(--txt-0);
  box-shadow:0 8px 24px rgba(39,35,29,.04);overflow:hidden}
.stage-plan-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-width:0;margin-bottom:9px}
.stage-plan-head>div{min-width:0}
.stage-plan-head h2,.stage-plan-head h3,.stage-plan-head strong{font-family:var(--f-display);font-size:13px;line-height:1.3;font-weight:700;color:var(--txt-0)}
.stage-plan-head p,.stage-plan-head small{display:block;margin-top:2px;font:500 10.5px/1.4 var(--f-ui);color:var(--txt-2);overflow-wrap:anywhere}
.stage-plan-tags{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap;min-width:0}
.stage-plan-tags>span{display:inline-flex;align-items:center;max-width:100%;padding:2px 6px;border:1px solid var(--line-2);
  border-radius:999px;background:var(--bg-1);color:var(--txt-2);font:700 9px/1.35 var(--f-mono);
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.stage-plan-tags>.ready,.stage-plan-tags>.complete{border-color:var(--pos-line);background:var(--pos-soft);color:var(--pos-ink)}
.stage-plan-tags>.blocking{border-color:color-mix(in oklab,var(--alert),transparent 50%);background:var(--alert-soft);color:var(--alert)}
.stage-plan-scroll{width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;
  border:1px solid var(--line);border-radius:var(--r-m);-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
.stage-plan-scroll::-webkit-scrollbar{height:6px}
.stage-plan-scroll::-webkit-scrollbar-thumb{border-radius:999px;background:var(--line-3)}
.stage-plan-rows,.stage-plan-rows table{width:100%;min-width:600px;border:0;border-collapse:collapse;border-spacing:0;
  background:var(--bg-2);color:var(--txt-1);font:500 10.5px/1.35 var(--f-ui);text-align:left}
.stage-plan-rows th,.stage-plan-rows td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.stage-plan-rows tr:last-child td{border-bottom:0}
.stage-plan-rows th{background:var(--bg-3);color:var(--txt-3);font:700 9px/1.3 var(--f-mono);
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.stage-plan-rows td{max-width:240px;overflow-wrap:anywhere}
.stage-plan-rows td:first-child{color:var(--txt-0);font-weight:650}
.stage-plan-issue{display:flex;align-items:flex-start;gap:7px;min-width:0;margin-top:8px;padding:7px 9px;
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-3);color:var(--txt-2);font:500 10.5px/1.4 var(--f-ui);
  overflow-wrap:anywhere}
.stage-plan-issue svg{flex:0 0 auto;margin-top:1px}
.stage-plan-issue.blocking{border-color:color-mix(in oklab,var(--alert),transparent 55%);background:var(--alert-soft);color:var(--alert)}
.stage-plan-note{margin-top:8px;color:var(--txt-2);font:500 10.5px/1.45 var(--f-ui);overflow-wrap:anywhere}
.stage-plan-note strong{color:var(--txt-1);font-weight:700}
.stage-plan-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap;min-width:0;margin-top:10px}
.stage-plan-actions button{min-height:30px;max-width:100%;padding:5px 10px;border:1px solid var(--line-2);border-radius:var(--r-s);
  background:var(--bg-3);color:var(--txt-1);font:700 10.5px/1.2 var(--f-ui);cursor:pointer;white-space:normal;transition:.12s}
.stage-plan-actions button:hover:not(:disabled){border-color:var(--brand);color:var(--txt-0);background:var(--bg-3)}
.stage-plan-actions button.primary,.stage-plan-actions button.ready{border-color:var(--pos-line);background:var(--pos-soft);color:var(--pos-ink)}
.stage-plan-actions button.blocking{border-color:color-mix(in oklab,var(--alert),transparent 48%);background:var(--alert-soft);color:var(--alert)}
.stage-plan-actions button:disabled{opacity:.48;cursor:default}
.stage-plan-actions button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.stage-plan-lineage{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0;margin-top:9px;padding-top:8px;
  border-top:1px solid var(--line);color:var(--txt-3);font:700 9px/1.45 var(--f-mono);letter-spacing:.035em;
  text-transform:uppercase;overflow-wrap:anywhere}
.stage-plan-lineage>*{min-width:0;max-width:100%;overflow-wrap:anywhere}

@media(max-width:420px){
  .stage-render-plan{margin:10px 0 12px;padding:9px}
  .stage-plan-head{flex-direction:column}
  .stage-plan-tags{justify-content:flex-start}
  .stage-plan-actions{align-items:stretch;justify-content:flex-start}
  .stage-plan-actions button{flex:1 1 120px}
}

/* ---- Breakdown (Art Room · the First AD's stripboard, 2026-09-26) ----
   One strip per scene, coloured the crew way: white INT day, yellow EXT day, blue INT
   night, green EXT night, pink dawn/dusk. --bd-c carries the strip colour. */
.bd-sum{font-family:var(--f-mono);font-size:11px;letter-spacing:.03em;color:var(--txt-3);margin-top:4px;line-height:1.5}
.bd-filter{display:inline-flex;padding:3px;gap:2px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-3)}
.bd-filter-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:0;border-radius:var(--r-s);background:transparent;color:var(--txt-2);font-family:var(--f-ui);font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;cursor:pointer;transition:.13s}
.bd-filter-btn:hover{color:var(--txt-1)}
.bd-filter-btn.on{background:var(--bg-5);color:var(--txt-0);box-shadow:0 1px 2px rgba(0,0,0,.3)}
.bd-filter-n{font-family:var(--f-mono);font-size:10px;color:var(--txt-3)}
.bd-filter-btn.on .bd-filter-n{color:var(--txt-2)}
.bd-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:-6px 0 14px;font-size:11px;color:var(--txt-2)}
.bd-legend-i{display:inline-flex;align-items:center;gap:6px}
.bd-sw{width:14px;height:10px;border-radius:2px;border:1px solid var(--line-3);background:var(--bd-c,var(--bg-4))}
.bd-board{display:flex;flex-direction:column;gap:8px}
.bd-strip{--bd-c:var(--txt-3);display:grid;grid-template-columns:92px minmax(0,1fr) 150px;background:var(--bg-2);border:1px solid var(--line-2);border-left:6px solid var(--bd-c);border-radius:var(--r-l);overflow:hidden}
.bd-k-int-day{--bd-c:#f1efe8}
.bd-k-ext-day{--bd-c:oklch(0.87 0.15 95)}
.bd-k-int-night{--bd-c:oklch(0.68 0.13 252)}
.bd-k-ext-night{--bd-c:oklch(0.74 0.14 150)}
.bd-k-dusk{--bd-c:oklch(0.78 0.12 355)}
.bd-strip-id{padding:12px 10px;background:color-mix(in srgb, var(--bd-c) 12%, transparent);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.bd-strip-no{font-family:var(--f-mono);font-size:22px;font-weight:600;color:var(--txt-0);line-height:1}
.bd-strip-ie{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;color:var(--txt-2);text-transform:uppercase;line-height:1.35;overflow-wrap:anywhere}
.bd-strip-body{padding:10px 14px 12px;min-width:0}
.bd-strip-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.bd-strip-title{font-size:14px;font-weight:600;color:var(--txt-0)}
.bd-strip-set{font-size:12px;color:var(--txt-2)}
.bd-rows{display:flex;flex-direction:column;gap:6px}
.bd-row{display:flex;align-items:flex-start;gap:10px}
.bd-row-lab{flex:0 0 62px;padding-top:5px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-3)}
.bd-chips{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.bd-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 9px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg-3);color:var(--txt-1);font-family:var(--f-ui);font-size:11.5px;line-height:1.35;cursor:pointer;text-align:left}
.bd-chip:hover{border-color:var(--line-3);color:var(--txt-0)}
.bd-chip.text{border-style:dashed;color:var(--txt-2)}
.bd-chip-sub{color:var(--txt-3)}
.bd-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--pos);background:transparent}
.bd-dot.ok{border-color:var(--ok);background:var(--ok)}   /* the status token (its light value is built in) */
.bd-empty{font-size:11.5px;color:var(--txt-3);padding-top:3px}
.bd-strip-status{padding:12px;border-left:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:11.5px;color:var(--txt-2);min-width:0}
.bd-strip-status.ok{flex-direction:row;align-items:center;justify-content:center;gap:6px;color:var(--ok);font-weight:600}
.bd-need-n{font-family:var(--f-mono);font-size:20px;font-weight:600;color:var(--pos-ink);line-height:1}
.bd-need-list{display:flex;flex-direction:column;gap:2px;margin-top:4px;min-width:0;width:100%}
.bd-need{border:0;background:none;padding:0;text-align:left;color:var(--txt-1);font-family:var(--f-ui);font-size:11px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bd-need:hover{color:var(--txt-0);text-decoration:underline}
.bd-need.more{color:var(--txt-3);cursor:default}
.bd-need.more:hover{text-decoration:none}
.bd-none{padding:28px;text-align:center;color:var(--txt-2);font-size:13px;border:1px dashed var(--line-2);border-radius:var(--r-l)}
@media (max-width:760px){
  .bd-strip{grid-template-columns:70px minmax(0,1fr)}
  .bd-strip-status{grid-column:1 / -1;border-left:0;border-top:1px solid var(--line);flex-direction:row;flex-wrap:wrap;align-items:center}
  .bd-need-list{flex-direction:row;flex-wrap:wrap;gap:4px 10px;margin:0;width:auto}
  .bd-row-lab{flex-basis:54px}
}
html[data-theme="light"] .bd-k-int-day{--bd-c:#d9d6cc}
.bd-chip-t{min-width:0;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-chip.more{border-style:dashed;color:var(--txt-2)}
/* Run pre-production preview: the writing model the run will use (follows the Writing dock) */
.cc-model{display:flex;align-items:flex-start;gap:7px;padding:9px 11px;border-radius:9px;background:var(--bg-2);border:1px solid var(--line);font-size:11.5px;line-height:1.45;color:var(--txt-2)}
.cc-model svg{flex:0 0 auto;margin-top:2px;color:var(--pos-ink)}
.cc-model b{color:var(--txt-0);font-weight:600}
/* the Art Room's ⋮ carries its exports — visible at every width there */
.overflow-wrap.in-art{display:block}

/* ── Art Room TAB LOCKS (2026-09-27, owner-approved — docs/Story Pipeline.md step 9) ──────────
   A locked tab stays visible: muted, with a padlock in the tab bar and in the phone ⋮ menu; its
   content area shows the lock card (what it waits for + a button to the step that unlocks it).
   Theme tokens only, so light and dark both follow the theme. */
.artroom-tools{display:contents}
.seg.locked{color:var(--txt-3)}
.seg.locked:hover{color:var(--txt-2)}
.seg.locked.on{color:var(--txt-1)}
.seg:focus-visible{outline:2px solid var(--pos-line);outline-offset:1px}
.seg-lock{flex:0 0 auto;display:inline-flex;align-items:center;margin-left:1px;opacity:.9}
.art-lock{flex:1;min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  text-align:center;padding:40px 16px;max-width:580px;margin:0 auto;box-sizing:border-box}
.art-lock-ic{position:relative;width:64px;height:64px;border-radius:var(--r-l);display:grid;place-items:center;
  background:var(--bg-2);border:1px solid var(--line);color:var(--txt-2)}
.art-lock-badge{position:absolute;right:-7px;bottom:-7px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-4);border:1px solid var(--line-2);color:var(--txt-1)}
.art-lock-t{margin:6px 0 0;font-family:var(--f-serif);font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--txt-0);overflow-wrap:anywhere}
.art-lock-d{margin:0;font-size:13px;line-height:1.6;color:var(--txt-2);max-width:460px;overflow-wrap:anywhere}
.art-lock-meter{width:min(240px,100%);height:4px;border-radius:4px;background:var(--bg-3);border:1px solid var(--line);overflow:hidden}
.art-lock-meter > span{display:block;height:100%;background:var(--accent);border-radius:4px}
.art-lock-go{margin-top:6px}
.art-lock-go:focus-visible{outline:2px solid var(--pos-line);outline-offset:3px}
.art-lock-order{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:100%}
.art-lock-step{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;border:1px solid var(--line-2);
  background:var(--bg-1);font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;color:var(--txt-2);white-space:nowrap}
.art-lock-step.is-locked{color:var(--txt-3);border-style:dashed}
.art-lock-step.is-current{color:var(--txt-0);border-color:var(--pos-line)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* the ⋮ menu's Art Room tab list: phone only (the tab bar is icons-only there) */
.export-art-tabs{display:none}
.export-item.is-locked .t{color:var(--txt-2)}
.export-item.is-locked .export-item-ic{color:var(--txt-3)}
.export-item.on .t{color:var(--txt-0);font-weight:600}
/* Props tab: "No props in this story" (unlocks Locations when a story has none) */
.prop-empty-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;justify-content:center;max-width:100%}
.prop-noprops{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px;padding:8px 12px;
  border-radius:9px;border:1px solid var(--line-2);background:var(--bg-2);font-size:12px;line-height:1.45;color:var(--txt-1);max-width:100%}
.prop-noprops > svg{flex:0 0 auto;color:var(--pos-ink)}
.prop-noprops > span{min-width:0;overflow-wrap:anywhere}
.prop-noprops-undo{border:0;background:transparent;color:var(--txt-0);font:600 12px var(--f-ui);text-decoration:underline;cursor:pointer;padding:2px 4px;border-radius:4px}
.prop-noprops-undo:focus-visible{outline:2px solid var(--pos-line);outline-offset:2px}
@media (max-width:700px){
  .export-art-tabs{display:block}
  /* the ⋮ now also lists the tabs: keep the whole menu reachable on a short / landscape phone */
  .overflow-wrap .export-menu{max-height:calc(100vh - 64px);overflow-y:auto;overscroll-behavior:contain}
  .art-lock{padding:28px 16px;min-height:50vh}
  .art-lock-t{font-size:20px}
  .art-lock-go{min-height:44px}
  .prop-empty-actions > button{min-height:44px}
}
/* ============================================================
   ADMIN STORAGE PAGE (app/admin-storage.jsx) — platform admin only,
   2026-09-27. Built on .bible-overlay / .bible-modal with the existing
   tokens only, so the dark default and html[data-theme="light"] both work
   with no extra rules. Rows are CSS grids placed by area (their DOM order
   is the phone order); at ≤640px the modal goes full screen with a sticky
   header, 2×2 tiles, a scrolling tab strip, rows fold into short cards,
   the detail becomes a pushed screen, and the review sheet and bulk bar
   sit at the bottom above the safe area.
   2026-09-27 review: tracks and skeletons use a --line token (ink over any
   surface; --bg-4 is pure white in light mode), phone fields are 16px (no iOS
   focus zoom), and the admin price-drift card hides while this page is open.
   ============================================================ */
body.adm-open .pricing-watch-card{display:none}
.acct-upgrade.acct-admin{background:var(--bg-2);border-color:var(--line-2);color:var(--txt-1)}
.acct-upgrade.acct-admin:hover{background:var(--bg-3);color:var(--txt-0)}
.bible-overlay.adm-overlay{z-index:124}
.bible-modal.adm-storage{position:relative;width:min(1100px,96vw);height:90vh;max-height:90vh}
.adm-head{flex:0 0 auto}
.adm-head .bible-title{min-width:0;flex-wrap:wrap}
.adm-sub{margin-left:2px}
.adm-body{flex:1 1 auto;min-height:0;overflow:auto;padding:14px 16px 20px;display:flex;flex-direction:column;gap:12px}
.adm-muted{color:var(--txt-3)}
.adm-mono{font-family:var(--f-mono);font-size:11px;word-break:break-all;color:var(--txt-1)}
.adm-loading{font-size:12.5px;padding:2px}
.adm-empty{padding:22px 14px;text-align:center;color:var(--txt-2);font-size:12.5px;border:1px dashed var(--line-2);border-radius:10px}
.adm-note{font-size:12px;color:var(--txt-1);background:var(--bg-3);border:1px solid var(--line-2);border-radius:8px;padding:7px 10px}
.adm-count{font-size:11.5px;padding:2px}
.adm-warn{color:var(--pos-ink)}
/* banners + blocking error */
.adm-setup{display:flex;flex-direction:column;gap:6px}
.adm-banner{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 12px;border-radius:9px;border:1px solid var(--line-2);
  background:var(--bg-3);color:var(--txt-0);font-size:12.5px;line-height:1.45}
.adm-banner svg{flex:0 0 auto}
.adm-banner > span{flex:1 1 240px;min-width:0}
.adm-banner.alert{background:var(--alert-soft);border-color:var(--alert)}
.adm-banner.amber{background:var(--pos-soft);border-color:var(--pos-line)}
.adm-error{margin:auto;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px 0;text-align:center}
.adm-error-msg{font-size:14px;line-height:1.5;color:var(--txt-0)}
/* tiles */
.adm-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.adm-tile{min-width:0;padding:11px 13px;border:1px solid var(--line-2);border-radius:11px;background:var(--bg-2)}
.adm-tile.alert{box-shadow:inset 3px 0 0 var(--alert)}
.adm-tile.amber{box-shadow:inset 3px 0 0 var(--pos)}
.adm-tile-lab{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
.adm-tile-val{margin-top:4px;font-family:var(--f-display);font-size:15.5px;font-weight:600;line-height:1.25;color:var(--txt-0);overflow-wrap:anywhere}
.adm-tile-sub{margin-top:2px;font-size:11.5px;color:var(--txt-2)}
.adm-tile.skel{min-height:66px}
.adm-skel-line{height:10px;margin-top:10px;border-radius:5px;background:var(--line-2);animation:admPulse 1.2s ease-in-out infinite}
.adm-skel-line.short{width:45%;margin-top:0}
@keyframes admPulse{0%,100%{opacity:.5}50%{opacity:1}}
/* search, tabs, filters */
.adm-search{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-2);color:var(--txt-3)}
.adm-search:focus-within{border-color:var(--line-3)}
.adm-search input{flex:1;min-width:0;height:100%;border:0;outline:none;background:transparent;color:var(--txt-0);font:13px var(--f-ui)}
.adm-tabs{display:flex;gap:4px;width:max-content;max-width:100%;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--bg-3)}
.adm-tab{height:32px;padding:0 14px;border:0;border-radius:8px;background:transparent;color:var(--txt-2);font:600 12.5px var(--f-ui);white-space:nowrap;cursor:pointer}
.adm-tab:hover{color:var(--txt-0)}
.adm-tab.on{background:var(--bg-5);color:var(--txt-0)}
.adm-tab-body{display:flex;flex-direction:column;gap:10px;min-width:0}
.adm-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.adm-filters{display:flex;gap:6px;flex-wrap:wrap}
.adm-filter{height:28px;padding:0 11px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg-2);color:var(--txt-2);font:600 11.5px var(--f-ui);cursor:pointer}
.adm-filter:hover{color:var(--txt-0)}
.adm-filter.on{border-color:var(--line-3);background:var(--bg-4);color:var(--txt-0)}
.adm-sort{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--txt-3)}
.adm-sort select{height:28px;padding:0 6px;border:1px solid var(--line-2);border-radius:7px;background:var(--bg-2);color:var(--txt-1);font:12px var(--f-ui)}
/* chips, buttons, copy */
.adm-chip{display:inline-flex;align-items:center;max-width:100%;height:20px;padding:0 8px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--bg-3);color:var(--txt-1);font:600 10.5px var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.adm-chip.amber{border-color:var(--pos-line);background:var(--pos-soft);color:var(--txt-0)}
.adm-chip.alert{border-color:transparent;background:var(--alert-soft);color:var(--txt-0)}
.adm-chip.ok{border-color:transparent;background:var(--neg-soft);color:var(--txt-0)}
.adm-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;border:1px solid var(--line-3);border-radius:8px;
  background:var(--bg-4);color:var(--txt-1);font:600 12.5px var(--f-ui);white-space:nowrap;cursor:pointer;transition:.12s}
.adm-btn:hover:not(:disabled){background:var(--bg-5);color:var(--txt-0)}
.adm-btn:disabled{opacity:.5;cursor:not-allowed}
.adm-btn.danger{border-color:var(--alert);background:var(--alert);color:#fff}
.adm-btn.danger:hover:not(:disabled){background:var(--alert);color:#fff;filter:brightness(1.08)}
.adm-btn.sm{height:28px;padding:0 10px;font-size:11.5px}
.adm-copy{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;height:22px;padding:0 7px;border:1px solid var(--line-2);border-radius:6px;
  background:var(--bg-3);color:var(--txt-2);font:600 10.5px var(--f-ui);cursor:pointer}
.adm-copy:hover{border-color:var(--line-3);color:var(--txt-0)}
/* accounts */
.adm-accts{display:flex;flex-direction:column;gap:8px}
.adm-acct{overflow:hidden;border:1px solid var(--line-2);border-radius:11px;background:var(--bg-2)}
.adm-acct.open{border-color:var(--line-3)}
.adm-acct-head{display:flex;align-items:center;gap:14px;width:100%;padding:11px 13px;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.adm-acct-head:hover{background:var(--bg-3)}
.adm-acct-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.adm-acct-l1{min-width:0;font-size:13px;font-weight:600;color:var(--txt-0)}
.adm-acct-email{overflow-wrap:anywhere}
.adm-acct-l2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--txt-2)}
.adm-acct-l3{font-size:11.5px;color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-acct-side{flex:0 0 190px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:11.5px;color:var(--txt-2)}
.adm-acct-size{font-family:var(--f-mono);font-size:12.5px;color:var(--txt-0)}
.adm-bar{width:100%;height:4px;overflow:hidden;border-radius:2px;background:var(--line-2)}
.adm-bar > span{display:block;height:100%;border-radius:2px;background:var(--txt-2)}
.adm-acct-chev{flex:0 0 auto;color:var(--txt-3)}
.adm-acct-body{display:flex;flex-direction:column;gap:12px;padding:10px 13px 13px;border-top:1px solid var(--line);background:var(--bg-1)}
.adm-group{display:flex;flex-direction:column;gap:6px}
.adm-group-h{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
.adm-group-note{font-size:11.5px;line-height:1.4;color:var(--txt-2)}
.adm-service{display:flex;flex-direction:column;gap:6px;padding:11px 13px;border:1px dashed var(--line-2);border-radius:11px}
.adm-service-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--txt-1)}
.adm-service-row .c-title{flex:1 1 220px;min-width:0}
/* tables: grid rows placed by area */
.adm-rows{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-2)}
.adm-row{display:grid;align-items:center;gap:10px;width:100%;min-width:0;padding:8px 12px;border:0;border-top:1px solid var(--line);
  background:transparent;color:var(--txt-1);font:12.5px var(--f-ui);text-align:left}
.adm-row:first-child{border-top:0}
.adm-row > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.adm-head-row{padding-top:6px;padding-bottom:6px;background:var(--bg-3);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.adm-click{cursor:pointer}
.adm-click:hover{background:var(--bg-3)}
.adm-click:focus-visible{outline:2px solid var(--line-3);outline-offset:-2px}
.adm-row.picked{background:var(--alert-soft)}
.adm-br,.adm-unit{display:none}
.adm-row:not(.adm-head-row) > .c-title{font-weight:600;color:var(--txt-0);white-space:nowrap}
.adm-row:not(.adm-head-row) > :is(.c-files,.c-size,.c-safe,.c-total,.c-ready,.c-stuck,.c-result){font-family:var(--f-mono);font-size:11.5px}
.adm-row:not(.adm-head-row) > :is(.c-date,.c-by,.c-owner,.c-next,.c-oldest,.c-kind){font-size:11.5px;color:var(--txt-2);white-space:nowrap}
.adm-row > .c-go{color:var(--txt-3);text-align:right}
.adm-row > .c-act{text-align:right;overflow:visible}
.adm-row > .c-pick{display:flex;align-items:center;justify-content:center;align-self:stretch;cursor:pointer}
.adm-row > .c-pick input{width:16px;height:16px;accent-color:var(--alert);cursor:pointer}
.adm-row > .c-title{grid-area:title}.adm-row > .c-kind{grid-area:kind}.adm-row > .c-state{grid-area:state}
.adm-row > .c-files{grid-area:files}.adm-row > .c-size{grid-area:size}.adm-row > .c-safe{grid-area:safe}
.adm-row > .c-by{grid-area:by}.adm-row > .c-date{grid-area:date}.adm-row > .c-go{grid-area:go}.adm-row > .c-act{grid-area:act}
.adm-row > .c-pick{grid-area:pick}.adm-row > .c-owner{grid-area:owner}.adm-row > .c-result{grid-area:result}
.adm-row > .c-total{grid-area:total}.adm-row > .c-ready{grid-area:ready}.adm-row > .c-next{grid-area:next}
.adm-row > .c-oldest{grid-area:oldest}.adm-row > .c-stuck{grid-area:stuck}
.adm-own .adm-row{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 56px 70px 70px minmax(0,1.3fr) 96px 12px;grid-template-areas:"title kind state files size by date go"}
.adm-else .adm-row{grid-template-columns:minmax(0,1fr) 80px 76px 12px;grid-template-areas:"title files size go"}
.adm-del .adm-row{grid-template-columns:minmax(0,1.2fr) 84px 96px 70px minmax(0,1fr) minmax(0,1.2fr) 96px auto;grid-template-areas:"title state files size safe by date act"}
.adm-proj .adm-row{grid-template-columns:20px minmax(0,1.6fr) minmax(0,1.3fr) minmax(0,.9fr) 74px 58px 72px minmax(0,.9fr) 96px;grid-template-areas:"pick title owner kind state files size safe date"}
.adm-queue .adm-row{grid-template-columns:minmax(0,1.4fr) 70px 80px minmax(0,1fr) minmax(0,1fr) 60px;grid-template-areas:"title total ready next oldest stuck"}
.adm-hist .adm-row{grid-template-columns:110px minmax(0,1fr) minmax(0,1.4fr) minmax(0,1.2fr) 112px 84px;grid-template-areas:"date owner title result state act"}
.adm-run{border-top:1px solid var(--line)}
.adm-run-body{display:flex;flex-direction:column;gap:8px;padding:8px 12px 12px;background:var(--bg-1)}
.adm-run-items{display:flex;flex-direction:column;gap:6px}
.adm-run-confirm{margin:0 12px 10px}
.adm-bulk{position:sticky;bottom:0;z-index:3;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;
  border:1px solid var(--line-3);border-radius:11px;background:var(--bg-4);box-shadow:var(--shadow-pop)}
/* project detail: a right-hand drawer (a pushed screen on phone) */
.adm-detail{position:absolute;top:0;right:0;bottom:0;z-index:5;display:flex;flex-direction:column;width:min(560px,100%);
  border-left:1px solid var(--line-3);background:var(--bg-1);box-shadow:var(--shadow-pop)}
.adm-detail-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.adm-back{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;min-width:30px;height:30px;padding:0 6px;border:0;border-radius:7px;
  background:transparent;color:var(--txt-2);font:600 12.5px var(--f-ui);cursor:pointer}
.adm-back:hover{background:var(--bg-4);color:var(--txt-0)}
.adm-back-phone{display:none;align-items:center;gap:2px}
.adm-back-desk{display:inline-flex}
.adm-detail-title{min-width:0;display:flex;flex-direction:column;gap:4px}
.adm-detail-name{font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--txt-0);overflow-wrap:anywhere}
.adm-detail-chips{display:flex;gap:6px;flex-wrap:wrap}
.adm-detail-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:12px 14px}
.adm-detail-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--bg-2);font-size:11.5px}
.adm-kv{display:flex;flex-direction:column;gap:2px}
.adm-kv > div{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:3px 0;font-size:12.5px;color:var(--txt-1)}
.adm-k{min-width:88px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.adm-folders{display:flex;flex-direction:column;gap:5px}
.adm-folder{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px}
.adm-summary{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;font-size:12px;color:var(--txt-1)}
.adm-fgroup{display:flex;flex-direction:column;gap:6px}
.adm-file{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg-2)}
.adm-file-l1{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--txt-0)}
.adm-file-name{min-width:0;font-weight:600;overflow-wrap:anywhere}
.adm-file-id{font-family:var(--f-mono);font-size:10.5px;font-weight:400;color:var(--txt-3)}
.adm-file-l2{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--txt-2)}
.adm-file-path{display:flex;align-items:flex-start;gap:8px}
.adm-file-path .adm-mono{flex:1;min-width:0;color:var(--txt-2)}
/* review sheet */
.adm-sheet-wrap{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.45)}
.adm-sheet{display:flex;flex-direction:column;gap:12px;width:min(560px,100%);max-height:100%;overflow:auto;padding:18px 18px 16px;
  border:1px solid var(--line-3);border-radius:14px;background:var(--bg-1);box-shadow:var(--shadow-pop)}
.adm-sheet-title{font-family:var(--f-display);font-size:16px;font-weight:600;line-height:1.3;color:var(--txt-0)}
.adm-sheet-p{font-size:12.5px;line-height:1.5;color:var(--txt-1)}
.adm-kept ul{display:flex;flex-direction:column;gap:3px;margin:6px 0 0 18px;font-size:12.5px;color:var(--txt-1)}
.adm-per summary{font-size:12px;color:var(--txt-2);cursor:pointer}
.adm-per-row{display:flex;gap:10px;flex-wrap:wrap;padding:3px 0;font-size:12px;color:var(--txt-1)}
.adm-expiry{font-family:var(--f-mono);font-size:11.5px;color:var(--txt-2)}
.adm-check{display:flex;align-items:center;gap:8px;min-height:40px;font-size:12.5px;color:var(--txt-0);cursor:pointer}
.adm-check input{width:18px;height:18px;accent-color:var(--alert)}
.adm-sheet-acts{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.adm-progress{height:8px;overflow:hidden;border-radius:4px;background:var(--line-2)}
.adm-progress > span{display:block;height:100%;background:var(--alert);transition:width .3s}
.adm-progress-lab{font-family:var(--f-mono);font-size:12.5px;color:var(--txt-0)}
.adm-result{padding:10px 12px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-3);font-size:13px;line-height:1.45;color:var(--txt-0)}
.adm-result.amber{border-color:var(--pos-line);background:var(--pos-soft)}
/* cleanup queue */
.adm-drain{display:flex;flex-direction:column;gap:8px}
.adm-drain-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11.5px}
.adm-confirm{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--alert);border-radius:10px;background:var(--alert-soft);font-size:12.5px;line-height:1.5;color:var(--txt-0)}
@media (max-width:640px){
  .bible-overlay.adm-overlay{padding:0}
  .bible-modal.adm-storage{width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0}
  .adm-head{position:sticky;top:0;z-index:4;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top))}
  .adm-sub{flex:1 0 100%;margin-left:23px}
  .adm-body{padding:12px 16px;padding-bottom:calc(20px + env(safe-area-inset-bottom));overflow-x:hidden}
  .adm-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .adm-tabs{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .adm-tabs::-webkit-scrollbar{display:none}
  .adm-tab{flex:0 0 auto}
  .adm-tab,.adm-btn,.adm-btn.sm,.adm-filter,.adm-search,.adm-copy,.adm-back,.adm-sort select{min-height:40px}
  .adm-search input,.adm-sort select{font-size:16px}
  .adm-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:10px 12px}
  .adm-row.adm-head-row{display:none}
  .adm-br{display:block;flex:0 0 100%;height:0}
  .adm-unit{display:inline}
  .adm-row:not(.adm-head-row) > .c-title{flex:1 1 auto;white-space:normal;overflow-wrap:anywhere}
  .adm-row > .c-go{margin-left:auto}
  .adm-row > .c-act{flex:0 0 100%;text-align:left}
  .adm-row > .c-act:empty{display:none}
  .adm-row > .c-pick{min-width:40px;min-height:40px;margin:-9px 0 -9px -12px}
  .adm-row > .c-pick:empty{display:none}
  .adm-row > .c-pick input{width:22px;height:22px}
  .adm-acct-head{flex-wrap:wrap;gap:8px 12px}
  .adm-acct-main{flex:1 1 0}
  .adm-acct-chev{order:2}
  .adm-acct-side{order:3;flex:1 1 100%;align-items:flex-start}
  .adm-detail{width:100%;border-left:0;box-shadow:none}
  .adm-back-phone{display:inline-flex}
  .adm-back-desk{display:none}
  .adm-sheet-wrap{align-items:flex-end;padding:0}
  .adm-sheet{width:100%;max-height:92%;border-radius:14px 14px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .adm-bulk{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .adm-sheet-acts .adm-btn{flex:1 1 auto}
}

/* ============================================================
   CONSISTENCY PASS (2026-09-29) — shared phone rules for dialogs
   ONE phone rule for every working dialog: at ≤640px it becomes a full-screen sheet, the way
   Story Editors and New Story already did (Brief, Team, the Film bible, Plans, the Cast window,
   the Final Read report and the shot-reference picker used to float as margin cards).
   ============================================================ */
@media (max-width:640px){
  .bible-overlay,.cameo-overlay,.shot-ref-dialog-scrim{padding:0}
  .bible-modal,.plans-modal,.cameo-modal,.cameo-modal.mgr,.qa-modal,.shot-ref-dialog{
    width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;border-radius:0;border:0}
  /* dialog headers: the title keeps a readable column — the model chip drops to its own line under
     it instead of squeezing the title into one word per line ("New / Story", "Story / Editors ·") */
  .ag-runner-head,.ns-head{flex-wrap:wrap;row-gap:8px}
  .ag-runner-head .ag-runner-t,.ns-head .ns-head-t{flex:1 1 160px;min-width:0}
  .ag-runner-head .ag-runner-model,.ns-head .ns-model-badge{order:9;margin-left:40px}
}