/* =============================================================================
   Show Engine — the one design system
   -----------------------------------------------------------------------------
   Light and quiet when you are creating. Dark and cinematic when you are
   watching. Amber only when something genuinely needs an action.

   There is one shell, one type scale, one spacing scale and one accent. Dark
   is not a second system — it is a scoped surface (.plate, .theater) that
   media lives on, so the finished work is the brightest thing on the screen.

   Contents
     1.  Tokens
     2.  Reset and base
     3.  Masthead
     4.  Layout primitives
     5.  Buttons, inputs, disclosure
     6.  Compose — the one creation flow
     7.  The proposal
     8.  Continue — the production that needs you
     9.  Work cards, shelf and library
    10.  Cast
    11.  The production workspace
    12.  Theater — focused review
    13.  Sheets, setup and dialogs
    14.  Empty states and toast
    15.  Your world and Advanced Diagnostics
    16.  Responsive and reduced motion
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
/* The canonical Show Engine brand, from `docs/brand/logo_stylesheet.png`.
   Four colours, and everything in the product is built from them. Deep navy is
   the identity and carries the type; amber is action and energy and is spent
   sparingly; neutral gray builds structure. See docs/BRAND_SYSTEM.md. */
:root{
  /* --- the approved palette, exactly as documented ---------------------- */
  --brand-amber:#FF8A00;
  --brand-amber-light:#FFB347;
  --brand-navy:#0B1A2B;
  --brand-gray:#E5E7EB;

  /* The room: a warm near-white so the shell stays calm and the media leads. */
  --app:#FAFAFB;
  --app-sunk:#F1F2F5;
  --surface:#FFFFFF;
  --surface-2:#FAFAFB;

  /* Type is navy, not black. The wordmark sets that. */
  --ink:var(--brand-navy);
  --ink-2:#4A5A6B;
  --ink-3:#7C8896;

  --line:var(--brand-gray);
  --line-2:#CFD4DC;

  /* Action. Amber must feel valuable, so it is spent on one thing at a time. */
  --amber:var(--brand-amber);
  --amber-hi:var(--brand-amber-light);
  --amber-ink:#2B1400;
  --amber-text:#B35F00;
  --amber-tint:#FFF6EA;
  --amber-line:#FFD9A8;

  /* Semantic states stay semantic. Brand consistency is not a reason to make
     an error amber. */
  --good:#12805C;
  --good-tint:#E7F4EF;
  --warn:#B35F00;
  --bad:#C0392B;

  /* Media. Dark surfaces exist only where real media lives. */
  --media:#07121E;
  --media-2:#0F2033;
  --media-line:#1E3348;
  --on-media:#F4F6F8;
  --on-media-2:#9FB0C0;

  /* One UI family, chosen once, used everywhere. No page picks its own.
     The approved wordmark is artwork and is never rebuilt in this font. */
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',
         Inter,'Helvetica Neue',Helvetica,Arial,sans-serif;

  /* Type. Hierarchy is carried by size and weight, not by decoration. */
  --t-display:clamp(1.875rem,3.4vw,2.625rem);
  --t-title:clamp(1.375rem,2.2vw,1.6875rem);
  --t-section:1.1875rem;
  --t-lead:1rem;
  --t-body:0.9063rem;
  --t-small:0.8438rem;
  --t-micro:0.75rem;

  --track-display:-.032em;
  --track-title:-.024em;
  --track-body:-.009em;

  /* One spacing scale. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  --shadow-1:0 1px 2px rgba(11,26,43,.06);
  --shadow-2:0 10px 26px -16px rgba(11,26,43,.26),0 2px 6px -3px rgba(11,26,43,.10);
  --shadow-3:0 34px 70px -34px rgba(11,26,43,.42),0 4px 12px -6px rgba(11,26,43,.12);

  --focus-ring:var(--brand-amber);

  /* Control heights, so a button, a select and an icon control line up
     because they are told to, not because three numbers happened to agree. */
  --control-sm:34px;
  --control:42px;
  --control-lg:50px;

  /* Identity. Chip, 2026-09-08: "The profile picture is currently too small…
     Increase the visible avatar approximately 2X." It was 22px. The photograph
     is who is directing Show Engine, so it is sized like it matters. */
  --avatar:44px;
  --avatar-sm:40px;
  --avatar-lg:96px;

  --gutter:clamp(20px,4.5vw,56px);
  --rail:1240px;
  --bar:68px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---- 1b. The dark studio -------------------------------------------------
   Not a second design system. The same tokens, the same type scale, the same
   spacing and the same amber — the room's lights are simply down. Media
   surfaces do not change at all, because they were always dark; what changes
   is the paper around them.

   Chip asked for this control on 2026-09-08. The build brief had deliberately
   deferred an appearance setting to keep decisions down; his instruction is
   the later one, so the toggle exists and defaults to light. */
:root[data-theme="dark"]{
  /* The lights go down onto the brand's own deep navy, so the approved
     dark-background lockup sits in the masthead with no visible plate. */
  --app:#0B1A2B;
  --app-sunk:#122234;
  --surface:#102030;
  --surface-2:#14263A;

  --ink:#F2F5F8;
  --ink-2:#A9BACA;
  --ink-3:#7E90A2;

  --line:#1E3245;
  --line-2:#2C455C;

  --amber:var(--brand-amber);
  --amber-hi:var(--brand-amber-light);
  --amber-ink:#241000;
  --amber-text:var(--brand-amber-light);
  --amber-tint:#241A0E;
  --amber-line:#4E3616;

  --good:#3FBF92;
  --good-tint:#0E2A22;
  --warn:#E0A34A;
  --bad:#E2705E;

  --shadow-1:0 1px 2px rgba(0,0,0,.45);
  --shadow-2:0 10px 26px -16px rgba(0,0,0,.85),0 2px 6px -3px rgba(0,0,0,.55);
  --shadow-3:0 34px 70px -34px rgba(0,0,0,.92),0 4px 12px -6px rgba(0,0,0,.6);

  color-scheme:dark;
}
/* The two surfaces that are literally paper stay legible when the lights go
   down: an unfilmed frame is a dim stage rather than a bright rectangle. */
:root[data-theme="dark"] .work__frame{
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 34px),
    linear-gradient(160deg,#1B1E23,#141619);
}
:root[data-theme="dark"] .wstage__media--empty{
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 48px),
    linear-gradient(160deg,#1B1E23,#141619);
}
:root[data-theme="dark"] .member__portrait{
  background:linear-gradient(165deg,#22262C,#191C20);
}
:root[data-theme="dark"] .work__badge{
  background:rgba(20,22,26,.9);color:var(--ink-2);
}
:root[data-theme="dark"] #toast{background:var(--ink);color:var(--brand-navy)}

/* The lights switch. Quiet, never amber — it is not a creator action. */
.lights{
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid transparent;color:var(--ink-3);
  border-radius:var(--r-sm);width:var(--control-sm);height:var(--control-sm);
  padding:0;flex:none;
  transition:border-color .14s var(--ease),color .14s var(--ease),
             background .14s var(--ease);
}
.lights:hover{background:var(--app-sunk);color:var(--ink)}
.lights__icon{
  width:13px;height:13px;border-radius:50%;flex:none;
  background:var(--ink-3);
  box-shadow:inset -4px -1px 0 0 var(--surface);
}
:root[data-theme="dark"] .lights__icon{
  background:var(--amber);box-shadow:none;
}
/* The words are gone, so nothing is left to hide at a narrow width. */

/* ---- 2. Reset and base -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--app);color:var(--ink);
  transition:background-color .25s var(--ease),color .25s var(--ease);
  font-family:var(--sans);font-size:1rem;line-height:1.5;
  letter-spacing:var(--track-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
body.is-theater{overflow:hidden}
h1,h2,h3,p{margin:0}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:var(--amber);color:var(--amber-ink)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:4px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--surface);padding:12px 18px;border-radius:0 0 var(--r-sm) 0;
  box-shadow:var(--shadow-2);text-decoration:none;color:var(--ink);font-weight:600;
}
.skip:focus{left:0}

/* ---- 3. Masthead -------------------------------------------------------- */
.masthead{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:var(--s5);
  height:var(--bar);padding:0 var(--gutter);
  background:color-mix(in srgb,var(--app) 88%,transparent);
  backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid var(--line);
}
/* The approved logo, used as artwork. It is never rebuilt from live text and
   never redrawn — see docs/BRAND_SYSTEM.md. */
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
/* Chip, 2026-09-09: 15% smaller on desktop, 20% smaller on mobile. The
   lockup was carrying more weight than the page it sits on. */
.brand img{height:1.275rem;width:auto;display:block}
/* Specificity matters here: `.brand img` is (0,1,1) and would beat a bare
   `.brand__dark` (0,1,0), which showed both lockups at once. */
.brand img.brand__dark{display:none}
:root[data-theme="dark"] .brand img.brand__light{display:none}
:root[data-theme="dark"] .brand img.brand__dark{display:block}

.nav{display:flex;gap:2px;margin-right:auto}
.nav button{
  background:none;border:0;padding:7px 13px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:0.875rem;font-weight:500;letter-spacing:-.008em;
  transition:color .12s var(--ease),background .12s var(--ease);
}
.nav button:hover{color:var(--ink);background:var(--app-sunk)}
.nav button[aria-current="true"]{color:var(--ink);background:var(--surface);box-shadow:var(--shadow-1)}

.masthead__end{display:flex;align-items:center;gap:var(--s3);flex:none}

/* Environment, not a feature. It never competes with a creator action. */
/* An environment indicator, not a feature. It never competes with a creator
   action — and it explains itself, because a label nobody can decode is worse
   than no label. */
/* Chip, 2026-09-08: "use a tiny subdued environment indicator if needed. Do
   not style it like a primary feature." A dot and a small word, no border, no
   pill — it reads as a condition of the room rather than a control. */
.flag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);background:none;border:0;padding:4px 2px;
  white-space:nowrap;transition:color .14s var(--ease);
}
.flag::before{
  content:"";width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--warn);opacity:.8;
}
.flag:hover{color:var(--ink-2)}
.flag[hidden]{display:none}

/* The signed-in operator stays visible. Two people share this studio and
   approving under the wrong identity writes a false entry into the history. */
.account{position:relative}
/* The photograph leads and the chrome gets out of its way: no bordered pill
   competing with Create two controls to its left. The ring is the only
   decoration, and it is what makes a photograph read as identity rather than
   as another image on the page. */
.account > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:3px 10px 3px 3px;border-radius:var(--r-pill);
  border:1px solid transparent;background:none;
  font-size:0.875rem;font-weight:550;color:var(--ink);
  max-width:230px;white-space:nowrap;overflow:hidden;
  transition:background .14s var(--ease),border-color .14s var(--ease);
}
.account > summary::-webkit-details-marker{display:none}
.account > summary:hover{background:var(--app-sunk)}
.account[open] > summary{background:var(--app-sunk)}
.account__name{overflow:hidden;text-overflow:ellipsis}
/* Below the widest desktop the name gives way before the face does. */
@media (max-width:1080px){ .account__name{display:none} .account > summary{padding-right:3px} }
.account__dot{width:6px;height:6px;border-radius:50%;background:var(--good);flex:none}
.account__menu{
  position:absolute;right:0;top:calc(100% + 8px);min-width:230px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-3);padding:var(--s2);z-index:60;
}
.account__who{
  padding:8px 10px 10px;color:var(--ink-3);font-size:var(--t-micro);
  border-bottom:1px solid var(--line);margin-bottom:var(--s2);
}
.account__who b{color:var(--ink);font-weight:600}
.account__menu button{
  display:block;width:100%;text-align:left;background:none;border:0;
  padding:9px 10px;border-radius:var(--r-sm);font-size:var(--t-body);color:var(--ink-2);
}
.account__menu button:hover{background:var(--app-sunk);color:var(--ink)}

/* ---- 4. Layout primitives ----------------------------------------------- */
main{max-width:var(--rail);margin:0 auto;padding:0 var(--gutter) var(--s9);
  min-height:calc(100vh - var(--bar))}
.view[hidden]{display:none}
.cluster{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}

.heading{
  display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;
  margin:var(--s8) 0 var(--s5);padding-bottom:var(--s3);
  border-bottom:1px solid var(--line);
}
.heading h2{font-size:var(--t-section);font-weight:650;letter-spacing:-.02em;flex:none}
.heading__note{color:var(--ink-3);font-size:var(--t-small)}
.heading .count{color:var(--ink-3);font-size:var(--t-small);margin-left:auto}

.greet{padding:var(--s7) 0 0}
.greet h2{font-size:var(--t-lead);font-weight:600;letter-spacing:-.018em}
.greet p{color:var(--ink-3);font-size:var(--t-small);margin-top:2px}

/* ---- 5. Buttons, inputs, disclosure -------------------------------------
   Chip, 2026-09-08: "The existing buttons feel too generic and inexpensive.
   This is a P0 visual issue… Primary controls should have a deliberate visual
   mass. Think: high-quality physical control. Not: cheap SaaS rounded
   rectangle."

   So a button is built from the control-height scale rather than from padding
   that happened to look right, every state is designed rather than left to the
   browser, and the hierarchy is legible without reading the label: amber mass
   for the one primary action, a real surface for secondary, and text for
   tertiary. Three tiers, and nothing in between. */
.btn{
  --btn-h:var(--control);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:var(--r-pill);
  height:var(--btn-h);padding:0 22px;
  font-family:var(--sans);
  font-size:var(--t-body);font-weight:600;letter-spacing:-.006em;
  white-space:nowrap;cursor:pointer;
  transition:background .14s var(--ease),border-color .14s var(--ease),
             color .14s var(--ease),box-shadow .14s var(--ease),
             transform .08s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn:disabled{cursor:not-allowed;transform:none}
.btn--lg{--btn-h:var(--control-lg);padding:0 28px;font-size:var(--t-lead)}
.btn--sm{--btn-h:var(--control-sm);padding:0 15px;font-size:0.8438rem}

/* PRIMARY — the one action on the screen that matters. Amber has mass here and
   nowhere else, which is what keeps it worth something. */
.btn--primary{
  background:var(--amber);color:var(--amber-ink);
  box-shadow:0 1px 0 rgba(11,26,43,.06),0 2px 8px -4px rgba(255,138,0,.55);
}
.btn--primary:hover{background:var(--amber-hi);box-shadow:0 1px 0 rgba(11,26,43,.06),0 4px 14px -5px rgba(255,138,0,.6)}
.btn--primary:active{box-shadow:inset 0 1px 2px rgba(11,26,43,.18)}
.btn--primary:disabled{background:var(--app-sunk);color:var(--ink-3);box-shadow:none}

/* SECONDARY — a real surface, not an outlined HTML default. */
.btn--quiet{
  background:var(--surface);border-color:var(--line-2);color:var(--ink);font-weight:550;
  box-shadow:var(--shadow-1);
}
.btn--quiet:hover{border-color:var(--ink-3);background:var(--surface-2)}
.btn--quiet:active{background:var(--app-sunk);box-shadow:inset 0 1px 2px rgba(11,26,43,.08)}
.btn--quiet:disabled{color:var(--ink-3);background:var(--app-sunk);border-color:var(--line);box-shadow:none}

/* TERTIARY — understated text. Never a pill; pills are supposed to mean
   something, and if everything is one they mean nothing. */
.btn--bare{
  background:none;border:0;color:var(--ink-2);font-weight:550;
  padding:0 8px;border-radius:var(--r-sm);
}
.btn--bare:hover{color:var(--ink);background:var(--app-sunk)}
.btn--bare:disabled{color:var(--ink-3);background:none}

/* DESTRUCTIVE — semantic states stay semantic; brand is never a reason to make
   a destructive action amber. */
.btn--danger{background:none;border-color:var(--line-2);color:var(--bad);font-weight:600}
.btn--danger:hover{border-color:var(--bad);background:#FDF3F2}

/* LOADING — a button that is working says so, and stops taking presses. */
.btn[data-busy="1"]{pointer-events:none;color:transparent!important;position:relative}
.btn[data-busy="1"]::after{
  content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  color:var(--amber-ink);
  animation:btn-spin 700ms linear infinite;
}
.btn--quiet[data-busy="1"]::after,.btn--bare[data-busy="1"]::after{color:var(--ink-2)}
@keyframes btn-spin{to{transform:rotate(360deg)}}
/* On a dark plate the same buttons invert, without a second design system. */
.on-dark .btn--quiet{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);color:var(--on-media)}
.on-dark .btn--quiet:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34)}
.on-dark .btn--bare{color:var(--on-media-2)}
.on-dark .btn--bare:hover{color:var(--on-media)}

a.btn{text-decoration:none;display:inline-block}

.pick{display:flex;flex-direction:column;gap:6px}
.pick label{color:var(--ink-3);font-size:var(--t-micro)}
.pick select{
  appearance:none;background:var(--surface);border:1px solid var(--line-2);
  color:var(--ink);padding:10px 34px 10px 13px;border-radius:var(--r-sm);
  font-size:var(--t-small);box-shadow:var(--shadow-1);
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  transition:border-color .14s var(--ease);
}
.pick select:hover{border-color:var(--ink-3)}

/* ---- 6. Compose — the one creation flow --------------------------------- */
.compose{padding:var(--s5) 0 0;max-width:840px}
.compose h1{
  font-size:var(--t-display);font-weight:600;line-height:1.06;
  letter-spacing:var(--track-display);margin-bottom:var(--s5);text-wrap:balance;
}
.idea{
  position:relative;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-2);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.idea:focus-within{border-color:var(--line-2);box-shadow:var(--shadow-3)}
.idea__mirror,.idea textarea{
  font-size:clamp(1.125rem,1.75vw,1.3125rem);line-height:1.5;font-weight:400;
  letter-spacing:-.014em;padding:24px 26px 6px;width:100%;min-height:118px;
}
.idea textarea{
  position:relative;z-index:2;background:transparent;border:0;
  color:var(--ink);resize:vertical;display:block;
}
.idea textarea:focus{outline:none}
.idea textarea::placeholder{color:var(--ink-3);opacity:1}
.idea__mirror{
  position:absolute;inset:0;z-index:1;color:transparent;pointer-events:none;
  white-space:pre-wrap;word-wrap:break-word;overflow:hidden;
}
.idea__mirror em{color:var(--ink-3);font-style:normal}
.idea__foot{
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  padding:10px 16px 14px 26px;
}
.idea__actions{display:flex;align-items:center;gap:var(--s2);margin-left:auto}
.tip{color:var(--ink-3);font-size:var(--t-micro);min-height:18px}
.tip kbd{
  font-family:var(--sans);font-size:0.6875rem;border:1px solid var(--line-2);
  border-radius:4px;padding:1px 5px;color:var(--ink-2);background:var(--surface-2);
}

/* Progressive disclosure. Nothing here is asked before an idea exists. */
.tune{margin-top:var(--s4)}
.tune > summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  color:var(--ink-2);font-size:var(--t-small);font-weight:550;
  padding:7px 12px;border-radius:var(--r-pill);border:1px solid transparent;
}
.tune > summary::-webkit-details-marker{display:none}
.tune > summary::before{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .16s var(--ease)}
.tune[open] > summary::before{transform:rotate(45deg)}
.tune > summary:hover{color:var(--ink);border-color:var(--line-2);background:var(--surface)}
.tune__now{color:var(--ink);font-weight:600}
.tune__now:not(:empty)::before{content:' \2014 ';color:var(--ink-2);font-weight:550}
.tune__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:var(--s4) var(--s5);margin:var(--s4) 0 0;padding:var(--s5);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}

/* One quiet sentence, never a setup wall. */
.nudge{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:var(--s4);color:var(--ink-3);font-size:var(--t-small);
}
.nudge .btn--bare{color:var(--amber-text);text-decoration:underline;padding:2px 0}
.nudge .btn--bare:hover{color:var(--amber-text);opacity:.8}

/* Said once to a first-time creator, then gone for good. */
.orient{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(26px,3.6vw,38px);margin-top:var(--s7);box-shadow:var(--shadow-1);
}
.orient h2{font-size:var(--t-title);font-weight:600;letter-spacing:var(--track-title);
  margin-bottom:var(--s3)}
.orient > p{color:var(--ink-2);font-size:var(--t-lead);line-height:1.6;max-width:62ch;
  margin-bottom:var(--s6)}
.orient__steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--s5);list-style:none;padding:0;margin:0 0 var(--s4);counter-reset:step;
}
.orient__steps li{counter-increment:step;position:relative;padding-top:var(--s5)}
.orient__steps li::before{
  content:counter(step);position:absolute;top:0;left:0;
  font-size:var(--t-micro);font-weight:650;color:var(--amber-text);
  width:22px;height:22px;border-radius:50%;border:1px solid var(--amber-line);
  display:grid;place-items:center;
}
.orient__steps b{display:block;font-size:var(--t-body);font-weight:600;margin-bottom:5px}
.orient__steps span{color:var(--ink-3);font-size:var(--t-small);line-height:1.55}

.nudge--carry b{color:var(--ink)}

/* A control that costs the creator something says so, under it. */
.pick--wide{grid-column:span 2;min-width:0}
.pick__note{
  color:var(--ink-3);font-size:var(--t-micro);line-height:1.5;
  margin-top:2px;max-width:52ch;
}
.pick select optgroup{font-style:normal;font-weight:600;color:var(--ink-3)}
@media (max-width:720px){ .pick--wide{grid-column:span 1} }

/* Who is in this one. Everybody, unless the creator says otherwise. */
.whos{padding:var(--s4) var(--s5) var(--s5);background:var(--surface);
  border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);
  margin-top:-1px}
.whos > p{color:var(--ink-3);font-size:var(--t-micro);margin-bottom:var(--s3)}
.whos__row{display:flex;gap:var(--s2);flex-wrap:wrap}
.who{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:6px 14px 6px 10px;font-size:var(--t-small);color:var(--ink-2);
  background:var(--surface);transition:border-color .14s var(--ease),color .14s var(--ease);
}
.who:hover{border-color:var(--ink-3);color:var(--ink)}
.who input{accent-color:var(--amber);margin:0}
.who--on{border-color:var(--amber);background:var(--amber-tint);color:var(--ink)}

/* ---- 7. The proposal ---------------------------------------------------- */
.proposal{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:30px 32px;margin-top:var(--s5);box-shadow:var(--shadow-2);
}
.proposal__said{color:var(--ink-3);font-size:var(--t-small);margin-bottom:var(--s3)}
.proposal h2{
  font-size:var(--t-title);font-weight:600;line-height:1.2;
  letter-spacing:var(--track-title);margin-bottom:var(--s3);text-wrap:balance;
}
.proposal__body{font-size:1.0312rem;line-height:1.6;color:var(--ink-2);
  margin-bottom:var(--s5);max-width:64ch}
.proposal__facts{
  display:flex;gap:var(--s5);flex-wrap:wrap;align-items:baseline;
  color:var(--ink-3);font-size:var(--t-small);margin-bottom:var(--s5);
  padding-top:var(--s4);border-top:1px solid var(--line);
}
.proposal__facts b{color:var(--ink);font-weight:600}
.alts{border-top:1px solid var(--line);margin-top:var(--s5);padding-top:var(--s4);display:grid;gap:var(--s2)}
.alts > p{color:var(--ink-3);font-size:var(--t-micro);margin-bottom:2px}
.alt{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:13px 16px;text-align:left;color:var(--ink-2);
  font-size:var(--t-body);line-height:1.5;
  transition:border-color .14s var(--ease),color .14s var(--ease);
}
.alt:hover{border-color:var(--line-2);color:var(--ink);background:var(--surface)}

/* ---- 8. Continue — the production that needs you ------------------------ */
/* Dark, because it holds real media. The one place on the Studio where the
   lights are down, so the work reads as the subject and the page as the frame. */
.plate{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:var(--media);border:1px solid var(--media-line);
  box-shadow:var(--shadow-3);color:var(--on-media);
  min-height:300px;display:flex;
}
.plate__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);filter:saturate(.92)}
.plate__scrim{
  position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(8,9,11,.96) 0%,rgba(8,9,11,.84) 45%,rgba(8,9,11,.44) 100%),
             linear-gradient(0deg,rgba(8,9,11,.8) 0%,transparent 62%);
}
.plate__over{
  position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(26px,3.6vw,44px);max-width:62ch;width:100%;
}
.plate__eyebrow{
  color:var(--on-media-2);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--s3);
}
.plate__over h2{
  font-size:var(--t-title);font-weight:600;line-height:1.16;
  letter-spacing:var(--track-title);margin-bottom:8px;text-wrap:balance;
}
.plate__status{color:var(--on-media);font-size:var(--t-lead);margin-bottom:6px}
.plate__when{color:var(--on-media-2);font-size:var(--t-small);margin-bottom:var(--s5)}
.plate .btn--primary{box-shadow:0 10px 26px -12px rgba(0,0,0,.9)}

/* Nothing filmed yet is not a black rectangle. It is a designed state. */
.opening{
  border-radius:var(--r-xl);border:1px solid var(--line);
  background:linear-gradient(160deg,var(--surface),var(--surface-2));
  box-shadow:var(--shadow-2);padding:clamp(28px,4vw,44px);
}
.opening__eyebrow{color:var(--amber-text);font-size:var(--t-micro);font-weight:650;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--s3)}
.opening h2{font-size:var(--t-title);font-weight:600;letter-spacing:var(--track-title);
  line-height:1.18;margin-bottom:8px}
.opening__status{color:var(--ink-2);font-size:var(--t-lead);margin-bottom:6px}
.opening__when{color:var(--ink-3);font-size:var(--t-small);margin-bottom:var(--s5)}

/* Real countable work, never an invented percentage. */
.bar{height:3px;background:var(--app-sunk);border-radius:3px;overflow:hidden;margin-top:var(--s4)}
.bar i{display:block;height:100%;background:var(--amber);border-radius:3px;
  transition:width .5s var(--ease)}
.on-dark .bar{background:rgba(255,255,255,.14)}

/* ---- 9. Work cards, shelf and library ----------------------------------- */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:var(--s6) var(--s5)}
.work{
  background:none;border:0;padding:0;text-align:left;
  display:flex;flex-direction:column;gap:11px;
}
/* The frame is paper until a real frame of the production covers it. A dark
   rectangle means media; an empty one would be the placeholder-looking surface
   this product must not ship. */
.work__frame{
  aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;position:relative;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.028) 0 1px,transparent 1px 34px),
    linear-gradient(160deg,var(--surface),var(--app-sunk));
  border:1px solid var(--line);
  display:grid;place-items:center;box-shadow:var(--shadow-1);
  transition:box-shadow .18s var(--ease),transform .18s var(--ease);
}
.work:hover .work__frame{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.work__frame img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.work__frame .glyph{
  color:var(--ink-3);font-size:var(--t-micro);padding:0 var(--s4);
  text-align:center;line-height:1.5;
}
.work__badge{
  position:absolute;left:10px;bottom:10px;z-index:2;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);color:var(--ink-2);
  border:1px solid var(--line);box-shadow:var(--shadow-1);
  font-size:0.7188rem;font-weight:600;padding:4px 10px;border-radius:var(--r-pill);
}
.work__badge--ready{background:var(--good);color:#fff;border-color:transparent}
.work h3{font-size:0.9375rem;font-weight:600;letter-spacing:-.012em}
.work__line{display:flex;align-items:baseline;gap:10px;color:var(--ink-3);font-size:var(--t-small)}
.work__line .right{margin-left:auto}

/* Engineering fixtures never sit beside creator work. */
.fixtures{margin-top:var(--s8);border-top:1px solid var(--line);padding-top:var(--s4)}
.fixtures > summary{
  list-style:none;cursor:pointer;color:var(--ink-3);font-size:var(--t-small);
}
.fixtures > summary::-webkit-details-marker{display:none}
.fixtures > summary::before{content:'▸ ';}
.fixtures[open] > summary::before{content:'▾ ';}
.fixtures > summary:hover{color:var(--ink-2)}
.fixtures .shelf{margin-top:var(--s5)}
.shelf__lede{color:var(--ink-3);font-size:var(--t-small);line-height:1.55;
  max-width:60ch;margin:calc(-1 * var(--s2)) 0 var(--s5)}
.fixtures .shelf__lede{margin-top:var(--s4)}

/* ---- 10. Cast ----------------------------------------------------------- */
.company{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:var(--s5)}
.member{
  background:none;border:0;padding:0;text-align:left;font:inherit;color:inherit;
  display:flex;flex-direction:column;gap:11px;
}
.member__portrait{
  aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden;position:relative;
  background:linear-gradient(165deg,var(--app-sunk),var(--brand-gray));
  border:1px solid var(--line);box-shadow:var(--shadow-1);
  display:grid;place-items:center;
  transition:box-shadow .18s var(--ease),transform .18s var(--ease);
}
.member:hover .member__portrait{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.member__portrait img{width:100%;height:100%;object-fit:cover}
.member__initials{font-size:1.875rem;font-weight:600;color:var(--ink-3);letter-spacing:-.03em}
.member h3{font-size:0.9375rem;font-weight:600;letter-spacing:-.012em}
.member__kind{color:var(--ink-3);font-size:var(--t-micro);margin-top:1px}
.member__state{font-size:var(--t-small);display:flex;align-items:baseline;gap:7px;
  line-height:1.4;margin-top:4px}
.member__state i{width:6px;height:6px;border-radius:50%;flex:none;transform:translateY(-1px)}
.member--ready .member__state{color:var(--good)}
.member--ready .member__state i{background:var(--good)}
.member--waiting .member__state{color:var(--amber-text)}
.member--waiting .member__state i{background:var(--amber)}
.member__cta{margin-top:6px}

.member--add .member__portrait{
  border-style:dashed;border-color:var(--line-2);background:none;
  color:var(--ink-3);font-size:var(--t-body);font-weight:550;
}
.member--add:hover .member__portrait{border-color:var(--amber);color:var(--amber-text)}

/* ---- 11. The production workspace --------------------------------------- */
.wsbar{
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  padding:var(--s6) 0 var(--s4);border-bottom:1px solid var(--line);margin-bottom:var(--s6);
}
.wsbar__title{font-size:var(--t-lead);font-weight:600;letter-spacing:-.018em}
.wsbar__when{margin-left:auto;color:var(--ink-3);font-size:var(--t-small)}

.wstage{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);
  gap:clamp(24px,3.4vw,44px);align-items:start}
.wstage__media{
  width:100%;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
  background:var(--media);border:1px solid var(--media-line);
  box-shadow:var(--shadow-3);display:block;position:relative;
}
video.wstage__media{background:#000}
/* Nothing filmed is not a black rectangle. Dark means media; this is a
   designed state on paper, so a creator never wonders whether it failed to
   load. */
/* THE CLIPPING, at its source.
   
   `.wstage__media` is a 16:9 box with `overflow:hidden`, which is exactly
   right for a video. This modifier is what stands in when there is NO video —
   and it inherited both, so anything taller than 16:9 was sliced off at the
   bottom with no scrollbar and no hint. The story panel, the failure panel,
   the filming panel: every designed state that lives in this slot was being
   cut off by the frame meant for the film.
   
   Chip reported it repeatedly. I kept fixing the thing INSIDE the box, and
   verified by injecting markup straight into #workspace — which bypassed this
   parent entirely, so my checks passed while his screen stayed cut. A frame
   sized for a picture must not crop a page. */
.wstage__media--empty{
  /* One full-width column. `place-items:center` sized the column to its widest
     child, so a panel asking for width:100% got its own content width instead
     — which is why the test strip came out 287px wide and stacked into a blob.
     Centring is vertical only; the panels inside say how they align. */
  display:grid;grid-template-columns:minmax(0,1fr);
  align-content:center;justify-items:stretch;
  text-align:center;padding:var(--s6);
  aspect-ratio:auto;
  overflow:visible;
  min-height:240px;
  height:auto;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.028) 0 1px,transparent 1px 48px),
    linear-gradient(160deg,var(--surface),var(--app-sunk));
  border-color:var(--line);box-shadow:var(--shadow-1);
}
/* A blanket `p` rule inside this container, at (0,1,1), quietly outranked
   every panel class I styled today — `.filming__said`, `.filming__why` and
   `.teststrip` are all paragraphs, and all of them were being clamped to 36ch
   (about 287px) no matter what width they asked for. That is why the error
   message wrapped into a narrow ribbon in a huge empty card, and why the test
   strip stacked into a blob.
   
   It now applies only to a plain paragraph placed DIRECTLY in the frame — the
   simple states it was written for — and never to a panel inside it. */
.wstage__media--empty > p:not(.teststrip){
  color:var(--ink-2);font-size:var(--t-small);max-width:36ch;line-height:1.6;
  justify-self:center;
}
/* Same trap as the `p` rule above: a blanket `b` here turned every inline
   bold inside any panel into a block with a margin. Scoped to the plain states
   and the panel heading it was written for. */
.wstage__media--empty > p b,
.wstage__media--empty .filming__what b{display:block;color:var(--ink);font-size:var(--t-lead);
  font-weight:600;margin-bottom:8px}
.wstage__play{
  position:absolute;inset:0;display:grid;place-items:center;z-index:2;
  background:none;border:0;color:var(--on-media);
}
.wstage__play span{
  display:grid;place-items:center;width:66px;height:66px;border-radius:50%;
  background:rgba(255,255,255,.14);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.3);font-size:1.1875rem;padding-left:4px;
  transition:background .16s var(--ease),transform .16s var(--ease);
}
.wstage__play:hover span{background:rgba(255,255,255,.24);transform:scale(1.05)}

.wstage__eyebrow{color:var(--amber-text);font-size:var(--t-micro);font-weight:650;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--s3)}
.wstage__side h1{
  font-size:var(--t-title);font-weight:600;line-height:1.18;
  letter-spacing:var(--track-title);margin-bottom:var(--s4);text-wrap:balance;
}
.wstage__count{color:var(--ink-3);font-size:var(--t-small);margin:var(--s3) 0 var(--s5)}
.wstage__side .cluster{margin-bottom:var(--s5)}

/* Where every scene has got to, without a table. */
.strip{display:flex;gap:3px;flex-wrap:wrap}
.strip span{height:5px;flex:1 1 12px;border-radius:3px;background:var(--app-sunk)}
.strip .strip--done{background:var(--good)}
.strip .strip--mid{background:var(--amber)}
.strip .strip--wait{background:var(--app-sunk)}

/* What Show Engine handled on your behalf. Rare, specific and true. */
.noticed{list-style:none;padding:var(--s4) 0 0;margin:0;border-top:1px solid var(--line)}
.noticed li{color:var(--ink-2);font-size:var(--t-small);line-height:1.55;margin-bottom:7px;
  padding-left:15px;position:relative}
.noticed li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--good)}

/* A production that has stopped. A fact, stated once, with the way out. */
.stopped{
  margin:var(--s5) 0 0;padding:var(--s4) var(--s5);
  border:1px solid var(--amber-line);border-left:3px solid var(--amber);
  border-radius:var(--r-md);background:var(--amber-tint);
}
.stopped__what{font-size:var(--t-body);line-height:1.5;color:var(--ink)}
.stopped__fix{margin-top:6px;font-size:var(--t-small);line-height:1.55;color:var(--ink-2)}
.stopped .cluster{margin-top:var(--s4)}

.wsblock{border-top:1px solid var(--line);margin-top:var(--s5);padding-top:var(--s4)}
.wsblock h3{font-size:var(--t-small);font-weight:650;margin-bottom:6px}
.wsblock p{color:var(--ink-2);font-size:var(--t-small);line-height:1.58}
.chapters{list-style:none;padding:0;margin:var(--s3) 0 0;counter-reset:ch}
.chapters li{counter-increment:ch;padding:9px 0 9px 26px;position:relative;
  font-size:var(--t-small);border-top:1px solid var(--line)}
.chapters li:first-child{border-top:0}
.chapters li::before{content:counter(ch);position:absolute;left:0;top:10px;
  color:var(--ink-3);font-size:var(--t-micro)}
.chapters b{font-weight:600}
.chapters span{display:block;color:var(--ink-3);font-size:var(--t-micro);margin-top:2px}

.suggestion{
  display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:13px 16px;margin-top:var(--s5);background:var(--surface);
}
.suggestion p{font-size:var(--t-small);line-height:1.55;color:var(--ink-2);flex:1 1 220px}
.suggestion b{color:var(--amber-text);font-weight:650;margin-right:6px}
.suggestion button{margin-left:auto;flex:none;white-space:nowrap}

/* Delivery size: a choice while it is being made, a fact once it is finished. */
.wsdeliver{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:var(--s5);padding-top:var(--s4);
  color:var(--ink-3);font-size:var(--t-small);
}
.wsdeliver b{color:var(--ink)}
.wsdeliver label{color:var(--ink-3);font-size:var(--t-micro)}
.wsdeliver select{
  appearance:none;background:var(--surface);border:1px solid var(--line-2);
  color:var(--ink);padding:7px 30px 7px 11px;border-radius:var(--r-sm);
  font-size:var(--t-small);
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.wsdeliver span{flex:1 1 100%;color:var(--ink-3);font-size:var(--t-micro)}

/* ---- 12. Theater — focused review --------------------------------------- */
/* The lights go down. Same design system, one intentional state. */
.theater{
  position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;
  background:rgba(9,10,12,.97);backdrop-filter:blur(20px);
  padding:clamp(14px,2.5vw,32px);
  animation:dim .26s var(--ease);
}
.theater[hidden]{display:none}
@keyframes dim{from{opacity:0}to{opacity:1}}
.theater__bar{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s4);flex:none}
.theater__title{color:var(--on-media);font-size:var(--t-body);font-weight:600;
  letter-spacing:-.012em;margin-right:auto}
.theater__close{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  color:var(--on-media);border-radius:var(--r-pill);padding:7px 17px;
  font-size:0.8438rem;font-weight:600;
}
.theater__close:hover{background:rgba(255,255,255,.18)}
.theater__stage{flex:1;min-height:0;display:grid;place-items:stretch}
/* The media fills the room. Without this a video sits at the element default
   of 300x150 until its metadata arrives, which reads as a broken player. */
.theater__stage video{
  width:100%;height:100%;min-height:0;object-fit:contain;
  border-radius:var(--r-md);background:#000;box-shadow:0 40px 90px -40px rgba(0,0,0,1);
}
.theater__note{color:var(--on-media-2);font-size:var(--t-small);text-align:center;
  padding-top:var(--s4);flex:none}

/* ---- 13. Sheets, setup and dialogs -------------------------------------- */
dialog{
  border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--surface);color:var(--ink);padding:0;
  width:min(560px,94vw);max-height:90vh;box-shadow:var(--shadow-3);
}
dialog::backdrop{background:rgba(28,24,18,.34);backdrop-filter:blur(3px)}
.sheet{padding:32px;overflow:auto;max-height:90vh}
.sheet h2{font-size:1.375rem;font-weight:600;letter-spacing:-.026em;margin-bottom:var(--s2)}
.sheet > p{color:var(--ink-2);font-size:var(--t-body);line-height:1.55;margin-bottom:var(--s5)}
.sheet label{display:block;color:var(--ink-3);font-size:var(--t-micro);margin-bottom:6px}
.sheet input,.sheet textarea,.sheet select{
  width:100%;background:var(--surface);border:1px solid var(--line-2);
  color:var(--ink);padding:12px 14px;border-radius:var(--r-sm);
  margin-bottom:var(--s4);font-size:var(--t-body);
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease);
}
.sheet input:focus,.sheet textarea:focus{
  border-color:var(--amber);outline:none;box-shadow:0 0 0 3px rgba(224,154,43,.16);
}
.sheet input::placeholder,.sheet textarea::placeholder{color:var(--ink-3);opacity:1}
.sheet textarea{min-height:88px;resize:vertical}
.sheet__foot{color:var(--ink-3);font-size:var(--t-micro);margin-top:var(--s4);line-height:1.55}
.sheet .review{width:100%;border-radius:var(--r-md);background:#000;
  margin-bottom:var(--s4);display:block}
.sheet .review--audio{width:100%;display:block;margin:var(--s4) 0}
.script{
  white-space:pre-wrap;font-size:var(--t-small);line-height:1.65;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:18px;max-height:42vh;overflow:auto;margin-bottom:var(--s5);
}
.routes{display:grid;gap:var(--s3);margin-bottom:var(--s5)}
.routes button{
  text-align:left;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:16px 18px;color:var(--ink);
  transition:border-color .14s var(--ease),background .14s var(--ease);
}
.routes button:hover{border-color:var(--amber);background:var(--amber-tint)}
.routes b{display:block;font-size:var(--t-body);font-weight:600;margin-bottom:4px}
.routes span{color:var(--ink-3);font-size:var(--t-small);line-height:1.5}

/* Every sheet has a way out. A modal with no exit is a trap. */
.sheet__close{
  position:absolute;top:14px;right:14px;z-index:3;
  width:32px;height:32px;display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-3);padding:0;
  transition:color .14s var(--ease),border-color .14s var(--ease);
}
.sheet__close svg{width:16px;height:16px}
.sheet__close:hover{color:var(--ink);border-color:var(--ink-3)}
.sheet--gate .sheet__close{display:none}
dialog{position:fixed}
.sheet{padding-right:56px}

/* What a good photograph looks like, drawn rather than photographed. */
.examples{margin-bottom:var(--s3)}
.examples__tip{color:var(--ink-3);font-size:var(--t-micro);line-height:1.55;
  margin-bottom:var(--s3);max-width:52ch}
.examples__row{display:flex;gap:var(--s2);flex-wrap:wrap}
.example{
  margin:0;flex:0 0 auto;width:4.75rem;text-align:center;color:var(--ink-2);
}
.example img{
  width:100%;height:auto;display:block;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line);
}
/* The illustration tile stays light in both themes — it is guidance artwork,
   not media, and the approved icons are drawn for a warm neutral surface. */
:root[data-theme="dark"] .example img{background:#FBFBFC;border-color:var(--line-2)}
.example figcaption{
  color:var(--ink-3);font-size:0.6875rem;line-height:1.3;margin-top:6px;
}

/* Guided setup: appearance, full body, movement, voice. */
.steps{display:flex;gap:6px;margin-bottom:var(--s5)}
.steps i{flex:1;height:4px;border-radius:3px;background:var(--app-sunk)}
.steps i.on{background:var(--good)}
.need{
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:17px 19px;margin-bottom:var(--s3);background:var(--surface-2);
}
.need--done{background:var(--good-tint);border-color:color-mix(in srgb,var(--good) 24%,transparent)}
.need__head{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:5px}
.need__head b{font-size:var(--t-body);font-weight:600}
.need__head span{margin-left:auto;color:var(--ink-3);font-size:var(--t-micro);white-space:nowrap}
.need--done .need__head span{color:var(--good);font-weight:600}
.need p{color:var(--ink-2);font-size:var(--t-small);line-height:1.55;margin-bottom:var(--s3)}
.need input{margin-bottom:0}
.need__inline{display:flex;gap:var(--s2);align-items:center}
.need__inline input{flex:1}
.need__drop{display:block}
.need__drop span{
  display:block;text-align:center;cursor:pointer;
  border:1px dashed var(--line-2);border-radius:var(--r-sm);
  padding:11px;color:var(--ink-2);font-size:var(--t-small);font-weight:550;
  background:var(--surface);
  transition:border-color .14s var(--ease),color .14s var(--ease);
}
.need__drop:hover span{border-color:var(--amber);color:var(--amber-text)}
/* A file being dragged over the zone. Without a visible target, a drag from
   Finder is a guess about whether the studio is listening. */
.need__drop--over span{
  border-color:var(--amber);border-style:solid;color:var(--amber-text);
  background:var(--app-sunk);
}

/* Optional depth inside a sheet: folded away, same disclosure as everywhere. */
.tune--sheet{margin:var(--s4) 0}
.tune--sheet > summary{font-size:var(--t-small)}
.moreabout{padding-top:var(--s4)}
.moreabout__grade{color:var(--ink-2);font-size:var(--t-small);line-height:1.55;
  margin-bottom:var(--s4)}
.moreabout__grade b{color:var(--ink)}
.moreabout__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:var(--s3) var(--s4);margin-bottom:var(--s4)}
.moreabout__grid .pick input{margin-bottom:0}

/* ---- 14. Empty states and toast ----------------------------------------- */
.blank{
  border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);
  padding:var(--s8) var(--s7);text-align:center;box-shadow:var(--shadow-1);
}
.blank h3{font-weight:600;font-size:1.3125rem;letter-spacing:-.024em;margin-bottom:var(--s2)}
.blank p{color:var(--ink-2);margin:0 auto var(--s5);max-width:46ch;font-size:var(--t-body);
  line-height:1.6}

#toast{
  position:fixed;left:50%;bottom:30px;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:var(--r-pill);
  font-size:var(--t-small);z-index:120;display:none;max-width:min(560px,90vw);
  box-shadow:var(--shadow-3);text-align:center;
}

/* ---- 15. Your world and Advanced Diagnostics ---------------------------- */
.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 28px;margin-bottom:var(--s4);box-shadow:var(--shadow-1);
}
.panel h3{font-size:var(--t-lead);font-weight:600;letter-spacing:-.018em;margin-bottom:6px}
.panel > p{color:var(--ink-2);font-size:var(--t-small);line-height:1.6}
.panel__facts{display:flex;gap:var(--s5);margin-top:var(--s4);color:var(--ink-3);
  font-size:var(--t-small)}
.panel__facts b{color:var(--ink);font-weight:600}
.plainlist{list-style:none;padding:var(--s4) 0 0;margin:0}
.plainlist li{
  display:flex;align-items:baseline;gap:var(--s3);
  padding:11px 0;border-top:1px solid var(--line);font-size:var(--t-small);
}
.plainlist li span{margin-left:auto;color:var(--ink-3);font-size:var(--t-micro)}

/* The things a show is made of. */
.stuff{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:var(--s4);margin-top:var(--s5);
}
.stuff__item{
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:15px 17px;background:var(--surface-2);
  display:flex;flex-direction:column;
}
.stuff__head{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:5px}
.stuff__head b{font-size:var(--t-body);font-weight:600}
.stuff__head span{margin-left:auto;color:var(--ink-3);font-size:var(--t-micro)}
.stuff__item p{color:var(--ink-2);font-size:var(--t-small);line-height:1.5;
  margin-bottom:var(--s3);flex:1}

/* Level 4. Behind a disclosure, never on a creator surface. */
.advanced{
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 18px;background:var(--surface-2);margin-top:var(--s5);
}
.advanced summary{cursor:pointer;color:var(--ink-2);font-size:var(--t-small);
  font-weight:550;list-style:none}
.advanced summary::-webkit-details-marker{display:none}
.advanced summary::before{content:'▸ ';color:var(--ink-3)}
.advanced[open] summary::before{content:'▾ '}
.advanced summary:hover{color:var(--ink)}
.diag{padding-top:var(--s4);margin-top:var(--s4);border-top:1px solid var(--line)}
.diag dl{display:grid;grid-template-columns:auto 1fr;gap:9px var(--s5);margin:0}
.diag dt{color:var(--ink-3);font-size:var(--t-micro)}
.diag dd{margin:0;font-size:var(--t-small)}
.diag__link{margin-top:var(--s4);font-size:var(--t-micro);color:var(--ink-3)}
.diag__link a{color:var(--ink-2)}

/* ---- 15b. Settings, profile and reading ---------------------------------- */
.you{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s5)}
.you__face{
  position:relative;width:84px;height:84px;border-radius:50%;flex:none;cursor:pointer;
  display:grid;place-items:center;overflow:hidden;
  background:var(--app-sunk);border:1px solid var(--line);color:var(--ink-3);
  font-size:1.625rem;font-weight:600;letter-spacing:-.02em;
}
.you__face img{width:100%;height:100%;object-fit:cover}
.you__swap{
  position:absolute;left:0;right:0;bottom:0;padding:5px 0;
  background:rgba(20,18,14,.72);color:#fff;font-size:0.6562rem;font-weight:600;
  text-align:center;opacity:0;transition:opacity .14s var(--ease);
}
.you__face:hover .you__swap,.you__face:focus-within .you__swap{opacity:1}
.you__name{display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:wrap;flex:1;min-width:220px}
.you__name label{display:block;color:var(--ink-3);font-size:var(--t-micro);margin-bottom:6px}
.you__name input{
  width:100%;max-width:320px;background:var(--surface);border:1px solid var(--line-2);
  color:var(--ink);padding:10px 13px;border-radius:var(--r-sm);font-size:var(--t-body);
}
.you__name > div{flex:1}

.account__face{
  width:var(--avatar);height:var(--avatar);border-radius:50%;flex:none;overflow:hidden;
  background:var(--app-sunk);display:grid;place-items:center;
  box-shadow:0 0 0 1px var(--line);
}
.account__face--photo{background:var(--app-sunk)}
/* The image is already the square the creator placed inside the circle, so
   `cover` here is a no-op rather than a second, silent crop. */
.account__face img{width:100%;height:100%;object-fit:cover;display:block}

.switches{display:grid;gap:var(--s2);margin-top:var(--s5)}
.switch{
  display:flex;align-items:flex-start;gap:var(--s4);text-align:left;
  background:none;border:1px solid transparent;border-radius:var(--r-md);
  padding:12px 14px;color:inherit;width:100%;
  transition:background .14s var(--ease),border-color .14s var(--ease);
}
.switch:hover{background:var(--surface-2);border-color:var(--line)}
.switch__track{
  width:40px;height:23px;border-radius:999px;flex:none;margin-top:2px;
  background:var(--app-sunk);border:1px solid var(--line-2);position:relative;
  transition:background .16s var(--ease),border-color .16s var(--ease);
}
.switch__knob{
  position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:var(--surface);box-shadow:var(--shadow-1);
  transition:transform .16s var(--ease);
}
.switch--on .switch__track{background:var(--amber);border-color:var(--amber)}
.switch--on .switch__knob{transform:translateX(17px)}
.switch__text b{display:block;font-size:var(--t-body);font-weight:600;margin-bottom:3px}
.switch__text span{color:var(--ink-3);font-size:var(--t-small);line-height:1.5}

/* The reading controls, and the system settings they sit on top of. */
/* Larger text scales the root, and every size in the studio is
   expressed relative to it, so the whole interface grows rather than
   one stray heading. */
:root{font-size:15px}
:root[data-text]{font-size:18px}
/* Higher contrast, still the brand's colours — deepened, not replaced. */
:root[data-contrast]{
  --ink:#000A14; --ink-2:#25384B; --ink-3:#4A5D70;
  --line:#B9C1CC; --line-2:#8B96A4;
}
:root[data-theme="dark"][data-contrast]{
  --ink:#FFFFFF; --ink-2:#D6E0EA; --ink-3:#A9BACA;
  --line:#3A5570; --line-2:#5B7790;
}
:root[data-focus] :focus{outline:2px solid var(--focus-ring);outline-offset:3px}
:root[data-motion] *,:root[data-motion] *::before,:root[data-motion] *::after{
  animation:none!important;transition:none!important;scroll-behavior:auto!important;
}

/* ---- 16. Responsive and reduced motion ---------------------------------- */
@media (max-width:1000px){
  .wstage{grid-template-columns:1fr}
}
@media (max-width:820px){
  .heading__note{display:none}
  .plate{min-height:0}
  .plate__over{padding:24px}
  .company{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media (max-width:680px){
  .masthead{height:auto;padding:10px var(--gutter);flex-wrap:wrap;gap:var(--s3)}
  .nav{order:3;width:100%;overflow-x:auto}
  .brand{margin-right:auto}
  .idea__foot{padding:10px 14px 14px 18px}
  .idea__actions{width:100%;justify-content:flex-end}
  .shelf{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---- How your videos are filmed ----------------------------------------
   A real choice, so it looks like one: three options, the current one
   obviously current, and one that cannot be picked until something is
   connected. No provider name, no host, no token. */
.choices{display:grid;gap:var(--s2);margin-top:var(--s4)}
@media (min-width:720px){ .choices{grid-template-columns:repeat(3,1fr)} }
.choice{
  display:block;text-align:left;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);padding:var(--s3) var(--s4);
  transition:border-color .14s var(--ease),background-color .14s var(--ease);
}
.choice b{display:block;font-size:var(--t-body);font-weight:600;margin-bottom:3px}
.choice span{display:block;font-size:var(--t-small);color:var(--ink-2);line-height:1.45}
.choice:hover:not(:disabled){border-color:var(--line-2)}
.choice--on{border-color:var(--amber);background:var(--amber-tint)}
.choice--on b{color:var(--amber-text)}
.choice:disabled{opacity:.55;cursor:not-allowed}
.choice:focus-visible{outline:2px solid var(--amber-text);outline-offset:2px}

/* ---- The renderer's power switch ----------------------------------------
   Deliberately the loudest thing in the masthead. A rented GPU bills by the
   hour whether or not it is rendering, so ON must be impossible to miss and
   OFF must be visibly the resting state. Chip's rule, 2026-09-08. */
.power{
  display:inline-flex;align-items:center;gap:9px;
  border:1.5px solid var(--line-2);border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink-2);
  padding:5px 14px 5px 11px;
  font-size:0.8125rem;font-weight:600;line-height:1.15;
  transition:border-color .14s var(--ease),background-color .14s var(--ease),color .14s var(--ease);
}
.power__lamp{
  width:11px;height:11px;border-radius:50%;flex:none;
  background:var(--ink-3);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--surface) 60%,transparent);
}
.power__text{display:flex;flex-direction:column;align-items:flex-start}
.power__cost{font-size:0.6562rem;font-weight:500;opacity:.85;letter-spacing:.01em}
.power:hover{border-color:var(--ink-3);color:var(--ink)}
.power:focus-visible{outline:2px solid var(--amber-text);outline-offset:2px}

/* ON. Money is moving — this is the one place the studio shouts. */
.power--on{
  border-color:var(--bad);
  background:color-mix(in srgb,var(--bad) 12%,var(--surface));
  color:var(--bad);
}
.power--on .power__lamp{
  background:var(--bad);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 26%,transparent);
  animation:powerPulse 1.9s ease-in-out infinite;
}
@keyframes powerPulse{
  0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 26%,transparent)}
  50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--bad) 6%,transparent)}
}
@media (prefers-reduced-motion: reduce){ .power--on .power__lamp{animation:none} }

/* Unknown. Never shown as off — claiming the meter stopped when it may not
   have is the one thing this control must not do. */
.power--unknown{border-color:var(--warn);color:var(--warn)}
.power--unknown .power__lamp{background:var(--warn)}

@media (max-width:820px){
  .power__cost{display:none}
  .power{padding:5px 11px 5px 9px}
}

/* A choice offered inside a sheet stacks rather than sitting in a row. */
.choices--stack{grid-template-columns:1fr}
.choices--stack .choice{padding:var(--s4)}

/* ---- The lights switch's mark -------------------------------------------
   A moon while the lights are up, a sun while they are down — the icon shows
   the room you are in, the label says what pressing it does. Chip asked for
   these specifically on 2026-09-08; they replace an abstract dot that told
   nobody anything. */
.lights__moon,.lights__sun{
  width:15px;height:15px;flex:none;color:currentColor;
  transition:opacity .18s var(--ease),transform .18s var(--ease);
}
.lights__sun{display:none}
.lights--dark .lights__moon{display:none}
.lights--dark .lights__sun{display:block;color:var(--amber)}
.lights:hover .lights__moon,.lights:hover .lights__sun{transform:rotate(-12deg)}
@media (prefers-reduced-motion: reduce){
  .lights__moon,.lights__sun{transition:none}
  .lights:hover .lights__moon,.lights:hover .lights__sun{transform:none}
}


/* =============================================================================
   17. Mobile — a phone's own composition, not the desktop made narrow
   -----------------------------------------------------------------------------
   Chip, 2026-09-08: "MOBILE IS NOT SHRUNK DESKTOP." and
   "ONE THUMB. ONE INTENTION. ONE OBVIOUS NEXT ACTION."

   The desktop shell above is untouched and still renders exactly as it did.
   What follows is a second composition of the same product, built from the
   same tokens, the same type scale and the same amber, that takes over below
   768px. Three structural moves carry it:

     * a compact top app bar carrying only the quiet brand mark and the
       creator's own photograph,
     * bottom navigation, so Studio, Productions, Create and Cast are all
       inside a thumb's arc,
     * sheets and full-screen flows in place of dropdowns and dialogs.

   Everything technical — renderer state, Test mode, the lights, engine
   readiness — is gone from the phone's chrome. It still exists; it lives in
   Settings, where someone goes on purpose.
   ========================================================================== */

/* The phone's top bar. Absent entirely on a desktop. */
.appbar{display:none}

/* Bottom navigation, likewise. */
.tabbar{display:none}

/* The account sheet and its scrim. */
.msheet,.scrim{display:none}

/* ---- the profile cropper -------------------------------------------------
   Not mobile-only. Placing your own face inside a circle is the same job on
   any screen, and a "profile uploader without crop/reposition" is a stated
   failure condition — so this is the one uploader, everywhere. */
.cropper{
  position:fixed;inset:0;z-index:300;
  display:flex;flex-direction:column;
  background:var(--media);color:var(--on-media);
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
  height:100dvh;
}
.cropper[hidden]{display:none}
.cropper__bar{
  flex:none;display:flex;align-items:center;gap:var(--s3);
  padding:6px 10px;border-bottom:1px solid var(--media-line);
}
.cropper__title{
  flex:1;text-align:center;font-size:var(--t-body);font-weight:600;
  color:var(--on-media);letter-spacing:-.012em;
}
.cropper__quit,.cropper__save{
  min-width:44px;min-height:44px;padding:0 14px;border-radius:var(--r-pill);
  background:none;border:0;font-size:var(--t-body);font-weight:600;
}
.cropper__quit{color:var(--on-media-2)}
.cropper__quit:hover{color:var(--on-media)}
.cropper__save{color:var(--amber)}
.cropper__save[disabled]{color:var(--on-media-2);cursor:progress}
.cropper__stage{
  flex:1;min-height:0;position:relative;overflow:hidden;
  display:grid;place-items:center;touch-action:none;background:#000;
}
.cropper__stage canvas{display:block;max-width:100%;max-height:100%}
/* The circle is a window cut out of a dim sheet: everything outside the crop
   is darkened, so what will be saved is unmistakable. */
.cropper__guide{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.cropper__guide span{
  display:block;width:min(78vw,60vh);aspect-ratio:1;border-radius:50%;
  box-shadow:0 0 0 100vmax rgba(4,9,15,.72);
  border:2px solid rgba(255,255,255,.9);
}
.cropper__hint{
  flex:none;text-align:center;color:var(--on-media-2);
  font-size:var(--t-small);padding:var(--s3) var(--s4) 0;
}
.cropper__tools{flex:none;padding:var(--s3) var(--s5) var(--s5);display:grid;gap:var(--s3)}
.cropper__row{display:flex;gap:var(--s3);justify-content:center}
.cropper__tools .btn--quiet{background:transparent;border-color:var(--media-line);color:var(--on-media)}
.cropper__tools .btn--quiet:hover{border-color:var(--on-media-2)}
.cropper__tools .btn--bare{color:var(--on-media-2)}
.cropper__tools .btn--bare:hover{color:var(--on-media)}
.cropper__tools input[type=range]{
  width:100%;accent-color:var(--amber);height:44px;background:none;
}

/* =============================================================================
   Below 768px the phone composition takes over.
   ========================================================================== */
@media (max-width:767px){

  /* A phone reads at its own sizes. This is not the desktop scale shrunk
     proportionally — titles come down hard, body text does not. */
  :root{
    --gutter:18px;
    --bar:52px;
    --tabbar:58px;
    --t-display:1.75rem;
    --t-title:1.3125rem;
    --t-section:1.0625rem;
    --t-lead:0.9688rem;
    --t-body:0.9375rem;
    --t-small:0.875rem;
    --t-micro:0.75rem;
  }

  /* No normal mobile screen may scroll sideways. `clip` rather than `hidden`
     so the sticky app bar keeps working. */
  html,body{overflow-x:clip;max-width:100%}

  /* The desktop masthead does not appear on a phone at all — not narrowed,
     not wrapped, not scrolled. With it goes every control Chip's mobile law
     forbids in the header. */
  .masthead{display:none}

  /* ---- the top app bar ------------------------------------------------- */
  .appbar{
    display:flex;align-items:center;gap:var(--s3);
    position:sticky;top:0;z-index:50;
    height:calc(var(--bar) + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) var(--gutter) 0;
    background:color-mix(in srgb,var(--app) 92%,transparent);
    backdrop-filter:blur(18px) saturate(1.6);
    border-bottom:1px solid var(--line);
  }
  .appbar__brand{display:flex;align-items:center;margin-right:auto;text-decoration:none;
    min-height:44px}
  .appbar__mark{height:.9rem;width:auto;display:block}
  .appbar img.brand__dark{display:none}
  :root[data-theme="dark"] .appbar img.brand__light{display:none}
  :root[data-theme="dark"] .appbar img.brand__dark{display:block}

  /* The creator's own face, always present while signed in. Never a name,
     never a status pill. */
  .appbar__me{
    width:44px;height:44px;flex:none;padding:0;border:0;background:none;
    display:grid;place-items:center;border-radius:50%;
  }
  .appbar__face{
    width:34px;height:34px;border-radius:50%;overflow:hidden;
    display:grid;place-items:center;
    background:var(--app-sunk);border:1px solid var(--line-2);
    color:var(--ink-2);font-size:0.8125rem;font-weight:650;letter-spacing:.01em;
  }
  .appbar__face img{width:100%;height:100%;object-fit:cover}
  .appbar__me:active .appbar__face{transform:scale(.94)}
  .appbar__face{transition:transform .12s var(--ease)}

  /* ---- bottom navigation ----------------------------------------------- */
  .tabbar{
    display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding-bottom:env(safe-area-inset-bottom);
    background:color-mix(in srgb,var(--app) 94%,transparent);
    backdrop-filter:blur(18px) saturate(1.6);
    border-top:1px solid var(--line);
    transition:transform .2s var(--ease);
  }
  .tab{
    background:none;border:0;padding:7px 2px 6px;
    min-height:var(--tabbar);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:var(--ink-3);font-size:0.6875rem;font-weight:550;letter-spacing:-.004em;
  }
  /* Every label sits on the same line, so Create is distinctive without the
     row looking crooked. */
  .tab__icon{width:23px;height:26px;display:block}
  .tab[aria-current="true"]{color:var(--ink)}
  .tab:active{opacity:.6}
  /* Create is the one amber thing on the phone's chrome. */
  .tab--make{color:var(--amber-text)}
  .tab__make{
    width:42px;height:26px;border-radius:var(--r-pill);
    display:grid;place-items:center;
    background:var(--amber);color:var(--amber-ink);box-shadow:var(--shadow-1);
  }
  .tab__make svg{width:18px;height:18px}
  .tab--make[aria-current="true"]{color:var(--amber-text)}

  /* Content clears the bar rather than hiding under it. */
  main{
    padding:0 var(--gutter);
    padding-bottom:calc(var(--tabbar) + env(safe-area-inset-bottom) + var(--s7));
    min-height:auto;
  }
  #toast{bottom:calc(var(--tabbar) + env(safe-area-inset-bottom) + 14px)}

  /* ---- Studio: the question comes first --------------------------------- */
  /* No status pills, no renderer, no large greeting. A compact hello, then
     the only question that matters. */
  .greet{padding:var(--s5) 0 0}
  .greet h2{font-size:var(--t-small);font-weight:550;color:var(--ink-2)}
  .greet p{display:none}
  .compose{padding:var(--s3) 0 0;max-width:none}
  .compose h1{font-size:1.5rem;line-height:1.2;margin-bottom:var(--s3)}

  /* The composer starts compact and grows with what is typed. Hundreds of
     empty pixels are not reserved before there is anything to put in them. */
  /* The composer starts at one comfortable line and grows with what is
     typed, the way a message field does. */
  .idea textarea,.idea__mirror{min-height:0;padding:14px 16px;font-size:1rem}
  .idea textarea{height:74px;resize:none;overflow:hidden}
  .idea__foot{padding:8px 12px 12px 16px;flex-wrap:wrap;gap:var(--s2)}
  .tip{font-size:var(--t-micro)}
  .idea__actions{width:100%;margin-left:0;justify-content:space-between}
  .idea__actions .btn--primary{flex:1;min-height:46px;justify-content:center}
  .idea__actions .btn--bare{min-height:44px}

  /* Every detail control stacks. Two columns of half-width selects on a
     360px phone is the desktop grid squeezed, which is the failure. */
  .tune__grid{grid-template-columns:1fr}
  .pick--wide{grid-column:span 1}
  .pick select{min-height:46px}

  /* ---- headings and cards ----------------------------------------------- */
  /* Not every section needs a container. Hierarchy and spacing carry it. */
  .heading{margin:var(--s6) 0 var(--s4)}
  .heading__note{display:none}
  .blank{padding:var(--s6) var(--s4)}
  .blank h3{font-size:1.125rem}
  .blank p{font-size:var(--t-small)}

  /* ---- Productions: a vertical feed, one per row ------------------------ */
  .shelf{grid-template-columns:1fr;gap:0}
  .work{
    flex-direction:row;align-items:center;gap:var(--s3);width:100%;
    padding:var(--s3) 0;border-bottom:1px solid var(--line);
  }
  .work:last-child{border-bottom:0}
  .work__frame{width:112px;flex:none;border-radius:var(--r-md);box-shadow:none}
  .work:hover .work__frame{transform:none;box-shadow:none}
  .work__body{min-width:0;flex:1}
  .work h3{font-size:var(--t-body);line-height:1.35}
  .work__line{display:block;font-size:var(--t-micro);margin-top:3px}
  .work__line .right{display:block;margin-left:0}
  /* The status is already said in words beside the thumbnail. A badge across
     a 112px frame is clutter, not information. */
  .work__badge{display:none}
  /* A row you can tap says so. */
  .work::after,.member:not(.member--add)::after{
    content:'';width:7px;height:7px;flex:none;margin-left:2px;
    border-right:1.6px solid var(--ink-3);border-top:1.6px solid var(--ink-3);
    transform:rotate(45deg);
  }
  .shelf__lede{margin-bottom:var(--s4)}

  /* ---- Cast: people in a list, not two huge empty rectangles ------------ */
  .company{grid-template-columns:1fr;gap:0}
  .member{
    flex-direction:row;align-items:center;gap:var(--s3);width:100%;
    padding:var(--s3) 0;border-bottom:1px solid var(--line);
  }
  .member__portrait{
    width:56px;height:56px;flex:none;aspect-ratio:1;border-radius:50%;
  }
  .member__body{min-width:0;flex:1}
  .member h3{font-size:var(--t-body)}
  .member__kind,.member__state{font-size:var(--t-micro)}
  .member__cta{margin-top:0;margin-left:auto;flex:none}
  .member--add .member__portrait{
    width:56px;height:56px;font-size:1.5rem;display:grid;place-items:center;
  }
  .member--add .member__body{color:var(--ink-2);font-size:var(--t-body);font-weight:550}

  /* ---- the production page: media, status, next action ------------------ */
  /* The bar above the media is a way back and a title, on one line. It does
     not get to push the media off the first screenful. */
  .wsbar{padding:var(--s4) 0 var(--s3);margin-bottom:var(--s4);gap:var(--s3)}
  .wsbar__title{font-size:var(--t-body);min-width:0;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .wsbar__when{display:none}
  .plate{border-radius:var(--r-lg)}
  .plate__over{padding:var(--s4)}
  .plate__over h2{font-size:var(--t-title)}
  .opening{padding:var(--s5) var(--s4)}
  .wstage{gap:var(--s4)}
  /* Now only the padding and the floor differ; the aspect-ratio and overflow
     are handled once, for every width, on the base rule. */
  .wstage__media--empty{
    min-height:150px;padding:var(--s5) var(--s4);
  }
  /* Same trap as the desktop rule: scoped to a plain paragraph in the frame,
     never to a panel inside it. */
  .wstage__media--empty > p:not(.teststrip){font-size:var(--t-micro);max-width:32ch}
  .wstage__media--empty > p b,
  .wstage__media--empty .filming__what b{font-size:var(--t-body)}
  .wstage__side h1{font-size:var(--t-title)}
  .cluster .btn{min-height:46px}
  .cluster .btn--primary{flex:1;justify-content:center}

  /* ---- focused review: the media takes the phone ------------------------ */
  .theater{
    padding:env(safe-area-inset-top) 10px env(safe-area-inset-bottom);
    height:100dvh;
  }
  .theater__note{font-size:var(--t-micro)}

  /* ---- Settings: compact sections, not oversized cards ------------------ */
  .panel{
    border:0;border-radius:0;padding:var(--s5) 0;background:none;
    box-shadow:none;border-bottom:1px solid var(--line);
  }
  .panel:last-child{border-bottom:0}
  .switch{min-height:52px}

  /* ---- dialogs become sheets -------------------------------------------- */
  dialog{
    width:100%;max-width:100%;margin:auto 0 0;border-radius:var(--r-xl) var(--r-xl) 0 0;
    max-height:92dvh;
  }
  .sheet{padding:var(--s5) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
    padding-right:52px;max-height:none}
  .sheet h2{font-size:1.1875rem}

  /* Every control a thumb has to hit. */
  .btn{min-height:44px}
  .btn--sm{min-height:40px}
  .account,.lights,.power,.flag{display:none}

  /* ---- the account sheet ------------------------------------------------ */
  .scrim{
    display:block;position:fixed;inset:0;z-index:70;
    background:rgba(11,26,43,.42);backdrop-filter:blur(2px);
  }
  .scrim[hidden]{display:none}
  .msheet{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:var(--surface);color:var(--ink);
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    box-shadow:var(--shadow-3);
    padding:10px var(--gutter) calc(var(--s4) + env(safe-area-inset-bottom));
    animation:sheetUp .22s var(--ease);
  }
  .msheet[hidden]{display:none}
  @keyframes sheetUp{from{transform:translateY(14%);opacity:.4}to{transform:none;opacity:1}}
  .msheet__grip{
    width:38px;height:4px;border-radius:var(--r-pill);background:var(--line-2);
    margin:0 auto var(--s4);
  }
  .msheet__who{display:flex;align-items:center;gap:var(--s3);padding-bottom:var(--s4);
    border-bottom:1px solid var(--line)}
  .msheet__face{
    width:46px;height:46px;flex:none;border-radius:50%;overflow:hidden;
    display:grid;place-items:center;background:var(--app-sunk);
    border:1px solid var(--line-2);color:var(--ink-2);font-weight:650;
  }
  .msheet__face img{width:100%;height:100%;object-fit:cover}
  .msheet__name{display:flex;flex-direction:column;min-width:0}
  .msheet__name b{font-size:var(--t-lead);font-weight:600;letter-spacing:-.016em;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .msheet__name span{color:var(--ink-3);font-size:var(--t-micro)}
  .msheet__acts{display:grid;padding-top:var(--s2)}
  .msheet__acts button{
    text-align:left;background:none;border:0;padding:14px 2px;min-height:50px;
    font-size:var(--t-body);color:var(--ink);border-bottom:1px solid var(--line);
  }
  .msheet__acts button:last-child{border-bottom:0;color:var(--ink-2)}
  .msheet__acts button:active{background:var(--app-sunk)}
  .msheet__env{
    margin-top:var(--s3);text-align:center;
    color:var(--ink-3);font-size:0.625rem;font-weight:600;letter-spacing:.12em;
  }
  .msheet__env[hidden]{display:none}

  /* ---- the keyboard ------------------------------------------------------
     When the software keyboard opens, the primary action goes with it rather
     than under it, and the bottom navigation steps out of the way. There is
     never a moment where the creator can type but cannot send. */
  body.is-typing .tabbar{transform:translateY(120%)}
  body.is-typing .idea__foot{
    position:fixed;left:0;right:0;bottom:var(--kb,0px);z-index:70;
    background:var(--surface);border-top:1px solid var(--line);
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px -18px rgba(11,26,43,.5);
  }
  body.is-typing .tip{display:none}
}

/* A larger phone earns a little more room, never a second layout. */
@media (min-width:415px) and (max-width:767px){
  :root{--gutter:20px}
  .work__frame{width:128px}
}

@media (prefers-reduced-motion:reduce){
  .msheet{animation:none}
  .tabbar{transition:none}
}

/* The row wrappers the mobile feed needs. On a desktop they must change
   nothing at all, so they simply disappear from the layout and their children
   go on being the card's own flex children exactly as before. */
.work__body,.member__body{display:contents}
.member__plus{font-size:2rem;font-weight:300;line-height:1;color:inherit}
@media (max-width:767px){
  .work__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
  .member__body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
  .member--add .member__plus{font-size:1.5rem}
}

/* The profile picture is a button now rather than a label wrapping a file
   input, because tapping it opens the cropper rather than a bare file dialog.
   Everything about how it looks is unchanged. */
.you__face{padding:0;font-family:inherit}
/* A phone has no hover, so the affordance is simply visible. */
@media (hover:none){ .you__swap{opacity:1} }
@media (max-width:767px){
  .you{gap:var(--s4)}
  .you__face{width:72px;height:72px;font-size:1.375rem}
  .you__name{min-width:0;width:100%}
  .you__name input{max-width:none;min-height:46px}
}


/* =============================================================================
   18. Watching, and the versions made from a finished video
   -----------------------------------------------------------------------------
   Chip, 2026-09-08: the Watch button did not work, and everything under Other
   Versions needed "a processing style reference that stays on the page so the
   user knows."

   Nothing above is changed. What follows says what the player is doing while
   it opens, and turns five buttons that remembered nothing into five rows that
   say where each version has got to.
   ========================================================================== */

/* The stage becomes the positioning context so the waiting state can sit over
   the film rather than pushing it out of the grid. */
.theater__stage{position:relative}

.theater__waiting{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s4);text-align:center;padding:var(--s6);
  color:var(--on-media-2);font-size:var(--t-body);
}
.theater__waiting p{margin:0}
.theater__stuck{color:var(--on-media);font-weight:600;max-width:34ch}
.theater__spin{
  width:26px;height:26px;border-radius:50%;
  border:2px solid rgba(255,255,255,.22);border-top-color:rgba(255,255,255,.85);
  animation:se-spin 820ms linear infinite;
}
@keyframes se-spin{to{transform:rotate(360deg)}}

/* ---- other versions ------------------------------------------------------ */
.wsblock__lede{color:var(--ink-3);font-size:var(--t-small);margin:2px 0 var(--s4)}

.wsexplain{
  color:var(--ink-3);font-size:var(--t-small);line-height:1.5;
  margin:var(--s3) 0 0;max-width:56ch;
}
.wsexplain b{color:var(--ink-2);font-weight:600}

.versions{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.version{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;padding:11px 13px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--surface);
}
.version--making{border-color:var(--amber);background:var(--amber-tint)}
.version--ready{border-color:var(--line-2)}
.version__what{display:grid;gap:2px;min-width:0;flex:1 1 15rem}
.version__what b{font-size:var(--t-body);font-weight:600;color:var(--ink)}
.version__what > span{color:var(--ink-3);font-size:var(--t-small)}
.version__state{margin-top:3px;font-size:var(--t-micro);font-weight:600}
.version__working{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2)}
.version__spin{
  width:12px;height:12px;border-radius:50%;flex:none;
  border:2px solid var(--line-2);border-top-color:var(--amber);
  animation:se-spin 820ms linear infinite;
}
.version__done{color:var(--good)}
.version__failed{color:var(--ink-2)}

@media (prefers-reduced-motion: reduce){
  .theater__spin,.version__spin{animation:none}
}
:root[data-motion] .theater__spin,
:root[data-motion] .version__spin{animation:none}

/* ---- the face in the top bar ---------------------------------------------
   It was a green circle on every screen but Settings. Initials stand in until
   there is a photograph; a coloured dot says nothing about who is signed in. */
.account__face{background:var(--app-sunk);color:var(--ink-3)}
.account__face span{font-size:0.9375rem;font-weight:700;letter-spacing:.01em}

/* ---- speaking instead of typing -----------------------------------------
   One button. It exists only where the browser can genuinely listen, so it is
   never a control that does nothing. Amber while it is listening, because that
   is the one moment it is doing something. */
.mic{
  width:40px;min-height:40px;padding:0;display:grid;place-items:center;
  border-radius:var(--r-pill);color:var(--ink-3);flex:none;
}
.mic svg{width:19px;height:19px}
.mic:hover{color:var(--ink-2);background:var(--app-sunk)}
.mic--on{color:var(--amber-ink);background:var(--amber)}
.mic--on:hover{color:var(--amber-ink);background:var(--amber-hi)}
.say{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3)}
.say__go{flex:1;justify-content:center}

/* The camera comes first on a phone, the library second. */
.need__capture{display:flex;gap:var(--s2);margin-top:var(--s3);flex-wrap:wrap}
.need__capture label{cursor:pointer;flex:1;justify-content:center;min-height:44px;
  display:inline-flex;align-items:center}
.need__take{font-weight:600}

@media (max-width:767px){
  .mic{width:44px;min-height:44px}
  .mic svg{width:21px;height:21px}
}

/* The way back out of focused review, and the way to say what should change
   while you are still looking at it. */
.theater__back{
  display:none;background:none;border:0;color:var(--on-media);
  width:44px;height:44px;padding:0;place-items:center;border-radius:var(--r-pill);flex:none;
}
.theater__back svg{width:22px;height:22px}
.theater__change{
  background:none;border:1px solid rgba(255,255,255,.28);color:var(--on-media);
  border-radius:var(--r-pill);padding:8px 15px;font-size:var(--t-small);
  font-weight:550;min-height:40px;white-space:nowrap;
}
.theater__change:hover{border-color:rgba(255,255,255,.5)}
.theater__change[hidden]{display:none}
@media (max-width:767px){
  /* On a phone, Back is the control and Done is redundant beside it. */
  .theater__back{display:grid}
  .theater__close{display:none}
  .theater__bar{gap:var(--s2);margin-bottom:var(--s3)}
  .theater__title{font-size:var(--t-small);min-width:0;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .theater__change{min-height:44px;padding:8px 13px}
}

/* The sentence under the delivery control: what the size costs and what the
   renderer actually does with it. Empty until a renderer says something. */
.pick__note{display:block;margin-top:5px;color:var(--ink-3);font-size:var(--t-micro);line-height:1.4}
.pick__note:empty{display:none}


/* =============================================================================
   19. Production Diagnostics, and the header's remaining quiet
   -----------------------------------------------------------------------------
   Chip, 2026-09-08: "Renderer status and Test Mode should not visually dominate
   normal creator chrome… The user should not constantly think about
   infrastructure."
   ========================================================================== */
.diag{margin-top:var(--s3)}
.diag__quiet{color:var(--ink-3);font-size:var(--t-small);margin:0;max-width:60ch}
.diag__row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;padding:13px 15px;border-radius:var(--r-md);
  background:var(--app-sunk);
}
.diag__what{display:grid;gap:3px;min-width:0;flex:1 1 18rem}
.diag__what b{font-size:var(--t-body);font-weight:600;color:var(--ink)}
.diag__what > span{color:var(--ink-3);font-size:var(--t-small);line-height:1.45}

/* The masthead now carries brand, navigation, one action and an identity. The
   gap between the utility cluster and the account is what separates "things
   you rarely touch" from "who you are". */
.masthead__end{gap:var(--s2)}
.masthead__end .btn--primary{margin-left:var(--s2)}
.masthead__end .account{margin-left:var(--s2)}

/* A production card says what it wants next, where its pixel dimensions used
   to be. Chip, 2026-09-08: Productions emphasises "thumbnail, title, state,
   useful next action", never "resolution numbers, technical metadata". */
.work__next{
  margin-left:auto;flex:none;
  font-size:var(--t-micro);font-weight:600;letter-spacing:-.004em;
  color:var(--amber-text);
}
.on-dark .work__next{color:var(--amber-hi)}

/* The primary action wins unmistakably. "Skip the preview" is a way out, not
   an alternative — so it reads as text and Make it carries the mass. */
.idea__actions .btn--bare{font-size:var(--t-small);color:var(--ink-3);font-weight:500}
.idea__actions .btn--bare:hover{color:var(--ink-2);background:none}


/* =============================================================================
   20. Settings as grouped sections, not a stack of explanatory cards
   -----------------------------------------------------------------------------
   Chip, 2026-09-08: "Settings should not consist of oversized explanatory
   cards. Use compact grouped sections… Use short explanations only where they
   add understanding."

   Card discipline from the same brief applies here first: four white
   rectangles with a paragraph each is exactly the generic software look it
   names. Settings becomes one surface with ruled groups — the structure comes
   from a heading, a rule and spacing rather than from four more borders.
   ========================================================================== */
#settings{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
  overflow:hidden;
  max-width:720px;
}
#settings .panel{
  background:none;border:0;border-radius:0;box-shadow:none;
  margin:0;padding:var(--s5) var(--s5) var(--s5);
  border-top:1px solid var(--line);
}
#settings .panel:first-child{border-top:0}
#settings .panel h3{
  font-size:var(--t-micro);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s3);
}
#settings .panel > p{
  color:var(--ink-3);font-size:var(--t-small);line-height:1.5;
  margin:0 0 var(--s3);max-width:58ch;
}
/* The switches carry their own explanation, so the group does not need a
   second one above them. */
#settings .switches{margin-top:0}
@media (max-width:520px){
  #settings{border-radius:var(--r-md)}
  #settings .panel{padding:var(--s4)}
}


/* =============================================================================
   21. Casting — Show Engine recommends, the creator chooses if they care
   -----------------------------------------------------------------------------
   Chip, 2026-09-08, MASTER VISUAL CASTING. Desktop puts three candidates side
   by side; a phone shows one at a time, because three faces across 390px are
   three thumbnails nobody can judge.

   Deliberately not a character creator: no sliders, no panels of controls, no
   video-game avatar builder. One recommendation, three ways to push it, and a
   line to say what you want in your own words.
   ========================================================================== */

.castintro{
  max-width:44rem;padding:var(--s7) 0 var(--s6);
}
.castintro__eyebrow{
  font-size:var(--t-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber-text);margin:0 0 var(--s3);
}
.castintro h2{
  font-size:var(--t-display);font-weight:600;line-height:1.08;
  letter-spacing:var(--track-display);margin:0 0 var(--s3);text-wrap:balance;
}
.castintro__note{color:var(--ink-2);font-size:var(--t-lead);margin:0 0 var(--s5);max-width:52ch}

.castsum{
  padding:var(--s6) 0 var(--s5);border-bottom:1px solid var(--line);margin-bottom:var(--s5);
}
.castsum h2{
  font-size:var(--t-title);font-weight:600;letter-spacing:var(--track-title);
  margin:0 0 var(--s3);
}
.castsum__list{
  list-style:none;margin:0 0 var(--s4);padding:0;
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  color:var(--ink-2);font-size:var(--t-body);
}
.castsum__list b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.castsum__have{color:var(--ink-3);font-size:var(--t-small);margin:0 0 var(--s4)}
.castsum__or{color:var(--ink-3);font-size:var(--t-small)}

.role{padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.role:last-child{border-bottom:0}
.role__head{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.role__head h3{
  font-size:var(--t-section);font-weight:600;letter-spacing:-.014em;margin:0;
}
.role__kind{
  font-size:var(--t-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);
}
.role__done{
  margin-left:auto;font-size:var(--t-micro);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--good);
}
.role__note{color:var(--ink-2);font-size:var(--t-small);margin:6px 0 0;max-width:60ch}
.role__wait{
  color:var(--ink-3);font-size:var(--t-small);margin:var(--s3) 0 0;max-width:60ch;
  padding:12px 14px;border-radius:var(--r-md);background:var(--app-sunk);
}

.cands{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--s4);margin:var(--s4) 0 var(--s3);
}
.cands--one{grid-template-columns:minmax(0,260px)}
.cands__count{display:none}

.cand{
  display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s3);border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surface);
}
/* The frame a portrait will occupy. It is not pretending to be one — the brief
   forbids showing a candidate image that looks fake, and there is no image
   provider in Show Engine yet, so the space says what it is waiting for. */
.cand__frame{
  aspect-ratio:3/4;border-radius:var(--r-md);
  background:var(--app-sunk);
  border:1px dashed var(--line-2);
  display:grid;place-items:center;padding:var(--s4);
}
.cand__pending{
  color:var(--ink-3);font-size:var(--t-micro);text-align:center;line-height:1.5;
  max-width:16ch;
}
.cand__look{
  color:var(--ink-2);font-size:var(--t-small);line-height:1.5;margin:0;flex:1;
}
.cand .btn{align-self:flex-start}

.role__say{margin-top:var(--s4);display:grid;gap:6px;max-width:34rem}
.role__say label{color:var(--ink-3);font-size:var(--t-micro)}
.role__sayrow{display:flex;gap:var(--s2)}
.role__sayrow input{
  flex:1;min-width:0;background:var(--surface);border:1px solid var(--line-2);
  color:var(--ink);border-radius:var(--r-sm);padding:0 13px;height:var(--control-sm);
  font-size:var(--t-small);font-family:var(--sans);
}
.role__sayrow input:focus{outline:2px solid var(--focus-ring);outline-offset:1px;border-color:transparent}

/* ---- the phone: one candidate at a time --------------------------------- */
@media (max-width:767px){
  .cands{grid-template-columns:1fr;gap:0}
  .cands .cand{display:none}
  .cands .cand--showing{display:flex}
  .cands--one .cand{display:flex}
  .cands__count{
    display:block;text-align:center;color:var(--ink-3);
    font-size:var(--t-micro);margin:var(--s2) 0 var(--s3);
    font-variant-numeric:tabular-nums;
  }
  .cand__frame{aspect-ratio:4/5}
  .cand .btn{align-self:stretch;justify-content:center}
  .castintro{padding:var(--s5) 0 var(--s5)}
  .castintro .btn{width:100%;justify-content:center}
  .castsum .btn--lg{width:100%;justify-content:center}
  .castsum__or{display:block;text-align:center;width:100%}
}

/* A candidate frame that actually holds a face. */
.cand__frame--photo{border-style:solid;border-color:var(--line);padding:0;overflow:hidden;background:var(--media-2)}
.cand__frame--photo img{width:100%;height:100%;object-fit:cover;display:block}
.cand__flag{
  margin:0;color:var(--warn);font-size:var(--t-micro);font-weight:600;
}


/* =============================================================================
   22. Review the production — visual, scene by scene, never a spreadsheet
   ========================================================================== */
.askbox{
  border:1px solid var(--amber-line);background:var(--amber-tint);
  border-radius:var(--r-md);padding:var(--s4) var(--s5);margin:var(--s5) 0;
}
.askbox h3{font-size:var(--t-body);font-weight:600;margin:0 0 var(--s2)}
.askbox ul{margin:0;padding-left:1.1rem;color:var(--ink-2);font-size:var(--t-small);line-height:1.6}

.scenecard{padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.scenecard:last-of-type{border-bottom:0}
.scenecard__head{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.scenecard__no{
  font-family:var(--sans);font-size:var(--t-micro);font-weight:700;
  color:var(--paper,var(--surface));background:var(--ink-3);
  min-width:22px;height:22px;border-radius:var(--r-sm);
  display:inline-grid;place-items:center;flex:none;
}
.scenecard__head h3{font-size:var(--t-section);font-weight:600;margin:0;letter-spacing:-.014em}
.scenecard__when{color:var(--ink-3);font-size:var(--t-small);margin-left:auto}
.scenecard__light{color:var(--ink-3);font-size:var(--t-small);margin:4px 0 0}
.scenecard__who{color:var(--ink-2);font-size:var(--t-small);margin:var(--s3) 0 0}
.scenecard__who b{color:var(--ink);font-weight:600}
.scenecard__hero{color:var(--amber-text);font-size:var(--t-small);font-weight:550;margin:4px 0 0}
.scenecard__cov{color:var(--ink-2);font-size:var(--t-small);margin:var(--s3) 0 var(--s2);font-weight:550}

.shots{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.shots li{
  display:flex;gap:var(--s3);align-items:baseline;flex-wrap:wrap;
  padding:7px 11px;border-radius:var(--r-sm);background:var(--app-sunk);
  font-size:var(--t-small);
}
.shots li b{font-weight:600;color:var(--ink);min-width:9.5rem}
.shots li span{color:var(--ink-3)}

.scenecard__cont{
  list-style:none;margin:var(--s3) 0 0;padding:0;
  color:var(--ink-3);font-size:var(--t-micro);line-height:1.6;
}
.scenecard__cont li::before{content:"— ";}

.worldsum{
  margin-top:var(--s6);padding-top:var(--s5);border-top:1.5px solid var(--line);
}
.worldsum h3{font-size:var(--t-body);font-weight:600;margin:0 0 var(--s2)}
.worldsum p{color:var(--ink-2);font-size:var(--t-small);margin:0 0 6px;line-height:1.6}
.worldsum b{color:var(--ink);font-weight:600}

@media (max-width:767px){
  .scenecard__when{margin-left:0;width:100%}
  .shots li b{min-width:0;width:100%}
  .castintro .btn,.scenecard .btn{justify-content:center}
}


/* =============================================================================
   23. Change the look — visual choices, one row at a time
   -----------------------------------------------------------------------------
   Chip, 2026-09-08: "Prefer visual controls when possible… Avoid forcing
   creators into uncertain terminology." And on a phone, "use bottom sheets or
   focused steps. Do not display a huge form."

   Not a character creator: no sliders, no numbers, no dual-pane editor. One
   labelled row per thing, and the things that are genuinely visual — skin,
   hair, eyes — are colours you point at rather than words you have to know.
   ========================================================================== */
.looks{display:grid;gap:var(--s3);margin:var(--s4) 0}
.lookrow{display:grid;gap:7px}
.lookrow__label{
  font-size:var(--t-micro);font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);
}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2);
  border-radius:var(--r-pill);padding:0 12px;height:var(--control-sm);
  font-size:var(--t-small);font-weight:500;font-family:var(--sans);cursor:pointer;
  transition:border-color .12s var(--ease),background .12s var(--ease),color .12s var(--ease);
}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip--on{border-color:var(--amber);background:var(--amber-tint);color:var(--ink);font-weight:600}
.chip i{width:15px;height:15px;border-radius:50%;flex:none;
  box-shadow:inset 0 0 0 1px rgba(11,26,43,.18)}
/* A swatch shows the colour and keeps the word, so nobody has to guess what a
   colour is called and nobody is forced to read a colour name they do not use. */
.chip--swatch span{font-size:var(--t-micro)}

.lookrow--text{gap:5px}
.lookrow__input,.looks__say input{
  background:var(--surface);border:1px solid var(--line-2);color:var(--ink);
  border-radius:var(--r-sm);padding:0 12px;height:var(--control-sm);
  font-size:var(--t-small);font-family:var(--sans);width:100%;
}
.lookrow__input:focus,.looks__say input:focus{
  outline:2px solid var(--focus-ring);outline-offset:1px;border-color:transparent;
}
.looks__say{display:grid;gap:5px;margin:var(--s4) 0 var(--s4)}
.looks__say label{
  font-size:var(--t-micro);font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);
}
.sheet__lede{color:var(--ink-3);font-size:var(--t-small);margin:6px 0 0;line-height:1.5}

/* On a phone the sheet is the screen, and every row is a thumb's reach. */
@media (max-width:767px){
  .looks{gap:var(--s4)}
  .chip{height:38px;padding:0 14px}
  .looks .cluster .btn,.sheet .cluster .btn{width:100%;justify-content:center}
}


/* Finishing: two choices and a button. No model names, no strength sliders. */
.finish{margin:var(--s4) 0 var(--s3);display:grid;gap:var(--s3)}
.finish__eyebrow{
  font-size:var(--t-micro);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin:0;
}
.finish__note{color:var(--ink-3);font-size:var(--t-small);margin:0;min-height:1.2em}
.role__hint{color:var(--ink-3);font-size:var(--t-micro);margin:6px 0 0;max-width:56ch;line-height:1.5}

/* ---------------------------------------------------------------------------
   Universal Intake. What Show Engine made of the files, shown before anything
   is created — the creator sees the reading and can correct it, rather than
   discovering it as twelve wrong productions.
   --------------------------------------------------------------------------- */
.intake{margin:14px 0 0;padding:14px 16px;border:1px solid var(--line);
  border-radius:14px;background:var(--card)}
.intake__plain{margin:0;font-size:15px;line-height:1.5}
.intake__files{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.intake__files li{display:flex;gap:10px;align-items:baseline;font-size:13px;
  color:var(--muted)}
.intake__files b{font-weight:600;color:var(--ink);font-size:13px}
.intake__files .bad{color:var(--warn,#b23c3c)}
.intake__season{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.intake__season h4{margin:0 0 6px;font-size:13px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--muted)}
.intake__season p{margin:0 0 8px;font-size:14px;line-height:1.5}
.intake__season .warn{color:var(--warn,#b23c3c)}
.idea.dropping{outline:2px dashed var(--accent,#7a6cff);outline-offset:4px}

/* ===========================================================================
   THE GATE — the sign-in experience.

   Chip, 2026-09-09: "this ultimately will be a sign in experience when we go
   to market. so it has to have a market appeal to it."

   What was here was a bare dialog on white: "Welcome back." and two fields.
   It works, and it says nothing about what somebody is signing in to. This is
   the first thing a buyer sees and the only screen guaranteed to be seen by
   everybody, so it carries the brand properly.

   Two panels. The left is the product's argument, on the brand navy with a
   slow amber light behind it — the "not dead" part, and it moves slowly
   enough to read as depth rather than as animation. The right is the form,
   unchanged in what it asks for.

   Everything degrades: one column on a phone, no movement when the visitor
   has asked for less of it, and a solid navy where gradients are unsupported.
   =========================================================================== */
.sheet--gate{padding:0;max-width:min(980px,94vw);width:min(980px,94vw);
  max-height:min(640px,92vh);border:none;overflow:hidden;border-radius:20px}
/* The padding lives on the body, not on the dialog, so zeroing the dialog
   alone left the panel floating inside a white frame. */
.sheet--gate #sheetBody{padding:0;overflow:hidden;height:100%}
.gate{display:grid;grid-template-columns:1.05fr .95fr;height:100%;min-height:0}
/* Each side scrolls on its own rather than the pair overflowing the dialog,
   which is what clipped the footer off the bottom of the pitch. */
.gate > *{min-height:0;overflow:auto}

.gate__pitch{position:relative;overflow:hidden;background:var(--brand-navy);
  color:#fff;padding:44px 40px;display:flex;flex-direction:column;
  justify-content:space-between;isolation:isolate}
/* The light. Two slow amber washes, offset, so the field never repeats
   visibly — a single rotating gradient reads as a loading spinner. */
.gate__pitch::before,.gate__pitch::after{content:"";position:absolute;
  inset:-40%;z-index:-1;border-radius:50%;filter:blur(70px)}
/* Amber is a glow ON the navy, not a wash THROUGH it. At equal strength the
   two average out to brown, which is nobody's brand colour. */
.gate__pitch::before{background:radial-gradient(circle at 28% 22%,
  var(--brand-amber) 0%,transparent 58%);opacity:.34;
  animation:gate-drift 22s ease-in-out infinite}
.gate__pitch::after{background:radial-gradient(circle at 74% 78%,
  #2E6BFF 0%,transparent 58%);opacity:.5;
  animation:gate-drift 29s ease-in-out infinite reverse}
@keyframes gate-drift{
  0%,100%{transform:translate3d(-6%,-4%,0) scale(1)}
  50%{transform:translate3d(8%,6%,0) scale(1.18)}
}
.gate__mark{height:1.5rem;width:auto;display:block}
.gate__lede{font-size:1.5rem;line-height:1.25;letter-spacing:-.028em;
  font-weight:600;margin:28px 0 0;max-width:18ch}
.gate__sub{color:rgba(255,255,255,.72);font-size:var(--t-body);line-height:1.6;
  margin-top:12px;max-width:34ch}
.gate__points{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.gate__points li{display:flex;gap:10px;align-items:flex-start;
  color:rgba(255,255,255,.86);font-size:var(--t-micro);line-height:1.5}
.gate__points b{display:block;color:#fff;font-weight:600;font-size:var(--t-body)}
.gate__tick{flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;
  background:var(--brand-amber);display:grid;place-items:center}
.gate__tick svg{width:11px;height:11px;display:block}
.gate__foot{color:rgba(255,255,255,.5);font-size:.75rem;margin-top:28px}

.gate__form{padding:44px 40px;display:flex;flex-direction:column;
  justify-content:center;background:var(--surface)}
.gate__form h2{font-size:1.5rem;font-weight:600;letter-spacing:-.026em;margin:0}
.gate__form > p{color:var(--ink-2);font-size:var(--t-body);line-height:1.55;
  margin:8px 0 26px}
.gate__form label{display:block;color:var(--ink-3);font-size:var(--t-micro);
  margin-bottom:6px}
.gate__form input{width:100%;margin-bottom:16px}
.gate__hint{
  margin:-4px 0 2px;
  font-size:var(--t-micro);
  color:var(--ink-3);
  line-height:1.5;
}
.gate__error{color:#B42318;font-size:var(--t-micro);line-height:1.5;
  margin:-6px 0 14px;min-height:1.1em}
.gate__submit{width:100%;margin-top:4px}

@media (max-width:820px){
  .sheet--gate{max-width:100vw;width:100vw;max-height:100vh;border-radius:0}
  .gate{grid-template-columns:1fr;min-height:100vh}
  /* On a phone the form is what somebody came for, so it goes first and the
     pitch becomes a header rather than half the screen. */
  .gate__pitch{order:-1;padding:28px 24px 26px;min-height:auto}
  .gate__lede{font-size:1.25rem;margin-top:18px}
  .gate__points,.gate__foot{display:none}
  .gate__form{padding:28px 24px 36px}
}
@media (prefers-reduced-motion:reduce){
  .gate__pitch::before,.gate__pitch::after{animation:none}
}

/* ===========================================================================
   THE STUDIO, WITH SOME AIR IN IT

   Chip: "what can we do to the first page to not feel so dead?"

   The page was a headline and an empty box on flat white. Nothing here adds a
   control or a claim — it adds depth. A very quiet amber wash at the top of
   the page, a composer that reads as a surface rather than an outline, and
   the one genuinely useful addition: starting points that fill the composer.
   =========================================================================== */
/* The amber wash that used to sit behind the composer is gone — Chip,
   2026-09-09. It was a flat centred blob of one colour, which reads as a
   smudge on the page rather than as light in a room, and a page that needs
   tinting to look alive is a page whose structure is not carrying it. The
   structure carries it now. */
.compose{position:relative}

/* Starting points. These fill the composer — they are not decoration, and a
   control that does nothing must not ship. */
.starters{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.starters__label{width:100%;color:var(--ink-3);font-size:var(--t-micro);
  margin-bottom:2px}
.starter{border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);border-radius:999px;padding:7px 14px;
  font-size:var(--t-micro);cursor:pointer;transition:border-color .15s,
  color .15s,transform .15s,background .15s}
.starter:hover{border-color:var(--amber);color:var(--ink);transform:translateY(-1px)}
.starter:active{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.starter{transition:none}
  .starter:hover{transform:none}}

/* ===========================================================================
   PAGE STRUCTURE, AND UNDERSTANDING

   Chip, 2026-09-09: Cast 3/10, Studio 4.5/10, "structure is not up to
   standard", and separately: "understanding is a 4 out of 10".

   Those turned out to be the same problem. Every page was a title and a grid,
   so nothing on any of them said where you are, what just happened, or what
   happens next — and a Cast card was a 530px slab of grey with one letter in
   it, pushing every piece of actual information below the fold.

   Three things fix it, applied identically to Studio, Productions and Cast:

     1. One structure everywhere — title, what this page is for, THE STATE
        LINE (what is true now and the one thing to do next), then content. A
        page you re-learn is a page you do not understand.
     2. A visible journey. The six stages of making something, with what is
        done, what is happening, and what is next, in creator words.
     3. Cards that carry meaning instead of a portrait and a hope.
   =========================================================================== */

/* --- the state line: the single most useful sentence on any page ---------- */
.state{display:flex;align-items:flex-start;gap:14px;margin:0 0 var(--s5);
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--shadow-1)}
.state__dot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:7px;
  background:var(--ink-3)}
.state--go .state__dot{background:var(--good)}
.state--wait .state__dot{background:var(--amber-hi)}
.state__text{flex:1;min-width:0}
.state__now{font-size:var(--t-body);line-height:1.5;color:var(--ink);
  font-weight:550}
.state__next{color:var(--ink-2);font-size:var(--t-small);line-height:1.5;
  margin-top:3px}
.state__do{flex:none;align-self:center}

/* --- the journey: six stages, always the same six ------------------------ */
.journey{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.journey__step{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;
  border-radius:999px;font-size:.75rem;line-height:1.4;
  border:1px solid var(--line);color:var(--ink-3);background:var(--surface)}
.journey__step b{font-weight:550}
.journey__mark{width:14px;height:14px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-size:9px;line-height:1;
  border:1px solid var(--line-2);color:transparent}
.journey__step--done{color:var(--ink-2);border-color:var(--line)}
.journey__step--done .journey__mark{background:var(--good);border-color:transparent;
  color:#fff}
/* The current step is marked by weight and one filled dot, not by painting
   the chip amber three times over. Amber stays surgical — it is the accent
   that means "act on this", and a page that uses it for every state has
   spent it. */
.journey__step--now{color:var(--ink);border-color:var(--line-2);
  font-weight:550;background:var(--surface)}
.journey__step--now .journey__mark{background:var(--amber);border-color:transparent}

/* --- cast cards that are about people, not about grey ------------------- */
/* A 3:4 portrait at this column width was 530px of empty tile before a single
   word of information. Square, smaller columns, and the facts stay visible. */
.company{grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
.member__portrait{aspect-ratio:1/1}
.member__initials{font-size:1.5rem}
/* What this person is for. The card said someone's name and whether they were
   "ready" — never what being in the cast means or why it matters. */
.member__for{color:var(--ink-3);font-size:var(--t-micro);line-height:1.45;
  margin-top:5px}
.member--add .member__body{color:var(--ink-2)}
.member__addnote{color:var(--ink-3);font-size:var(--t-micro);line-height:1.45;
  margin-top:4px;display:block;font-weight:400}

/* --- teaching, at the point of confusion --------------------------------- */
.teach{margin:0 0 var(--s5);padding:14px 16px;border-radius:var(--r-lg);
  background:var(--app-sunk);border:1px solid var(--line);
  color:var(--ink-2);font-size:var(--t-small);line-height:1.6}
.teach b{color:var(--ink);font-weight:600}
.teach + .teach{margin-top:calc(var(--s5) * -.5)}

/* --- an empty state that teaches rather than shrugging ------------------- */
.blank{padding:44px 32px;text-align:center;border:1px dashed var(--line-2);
  border-radius:var(--r-lg);background:var(--surface)}
.blank h3{font-size:1.125rem;font-weight:600;letter-spacing:-.018em;
  margin-bottom:8px}
.blank p{color:var(--ink-2);font-size:var(--t-body);line-height:1.6;
  max-width:46ch;margin:0 auto var(--s4)}

@media (max-width:640px){
  .state{flex-wrap:wrap}
  .state__do{width:100%;margin-top:4px}
  .company{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:var(--s4)}
}

/* ===========================================================================
   THE REFINEMENT LAYER
   Chip, 2026-09-09: "remove all locked designs. You need to make this website
   look like something Apple would buy."

   What that actually means, as decisions rather than adjectives:

   **Space is the material.** The single biggest difference between software
   that looks expensive and software that does not is how much room it gives
   things. Every measure below went up, and nothing was added to fill it.

   **One accent, spent once per view.** Restraint reads as confidence. A page
   with four highlighted things has told you nothing is important.

   **Depth from light, not from lines.** Hairline borders and large, very soft,
   very low-opacity shadows — the way a real object sits on a surface — rather
   than boxes drawn around regions.

   **Type does the hierarchy.** Size, weight and tracking carry the structure
   so that colour does not have to. Display sizes get tighter tracking, body
   text gets longer leading, and optical sizing is on where the platform
   supports it.

   **Motion is physical or absent.** One easing curve, short durations, and
   nothing moves that a finger did not move.

   This is a layer rather than a rewrite: it sits at the end of the stylesheet
   and refines what is already there. Rewriting 1,800 lines of working CSS to
   change how it feels would risk every surface in the product to gain nothing
   the cascade does not already offer.
   =========================================================================== */
:root{
  /* One curve for everything that moves. */
  --ease:cubic-bezier(.32,.72,0,1);
  --quick:.18s;
  --calm:.34s;

  /* Elevation as light rather than as outline. */
  --shadow-1:0 1px 2px rgba(11,26,43,.04), 0 1px 1px rgba(11,26,43,.03);
  --shadow-2:0 12px 32px -8px rgba(11,26,43,.10), 0 4px 10px -4px rgba(11,26,43,.06);
  --shadow-3:0 32px 64px -16px rgba(11,26,43,.16), 0 8px 20px -8px rgba(11,26,43,.08);

  /* Radii that agree with each other. */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px;
}
:root[data-theme="dark"]{
  --shadow-1:0 1px 2px rgba(0,0,0,.32);
  --shadow-2:0 12px 32px -8px rgba(0,0,0,.48), 0 4px 10px -4px rgba(0,0,0,.32);
  --shadow-3:0 32px 64px -16px rgba(0,0,0,.6), 0 8px 20px -8px rgba(0,0,0,.4);
}

html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-optical-sizing:auto;letter-spacing:-.011em}

/* --- room to breathe ----------------------------------------------------- */
.view{padding-block:clamp(28px,5vw,64px)}
.compose{padding-block:clamp(20px,4vw,48px)}

/* --- type: the hierarchy, carried by type ------------------------------- */
.compose h1{
  font-size:clamp(2rem,4.4vw,3.25rem);
  line-height:1.04;
  letter-spacing:-.035em;
  font-weight:640;
  max-width:16ch;
  margin-bottom:clamp(20px,3vw,34px);
}
.heading{align-items:baseline;gap:14px;margin-bottom:clamp(18px,2.4vw,28px)}
.heading h2{font-size:clamp(1.5rem,2.6vw,2.125rem);letter-spacing:-.028em;
  font-weight:650}
.heading__note{font-size:var(--t-body);color:var(--ink-3)}

/* --- the composer, as an object rather than an outline ------------------ */
.idea{
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--shadow-2);
  transition:box-shadow var(--calm) var(--ease),
             border-color var(--calm) var(--ease),
             transform var(--calm) var(--ease);
}
.idea:focus-within{
  border-color:var(--line-2);
  box-shadow:var(--shadow-3);
  transform:translateY(-1px);
}
.idea textarea{font-size:clamp(1.0625rem,1.5vw,1.1875rem);line-height:1.5}

/* --- the app bar, as glass over the page -------------------------------- */
.masthead,.appbar{
  background:color-mix(in srgb,var(--app) 78%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
}

/* --- cards: hairline, soft light, one radius ---------------------------- */
.work__frame,.member__portrait,.state,.starter,.teach,.blank,.intake{
  border-radius:var(--r-lg);
}
.work__frame,.member__portrait{
  border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
  box-shadow:var(--shadow-1);
  transition:box-shadow var(--calm) var(--ease),
             transform var(--calm) var(--ease);
}
.work:hover .work__frame,.member:hover .member__portrait{
  box-shadow:var(--shadow-2);
  transform:translateY(-3px);
}
.work:active .work__frame,.member:active .member__portrait{
  transform:translateY(-1px);
  transition-duration:var(--quick);
}
.shelf,.company{gap:clamp(18px,2.4vw,30px)}

/* --- the state line, quieter and wider ---------------------------------- */
.state{
  border-color:color-mix(in srgb,var(--line) 80%,transparent);
  box-shadow:var(--shadow-1);
  padding:16px 18px;
}
.state__now{font-weight:590;letter-spacing:-.014em}

/* --- buttons that feel pressed ------------------------------------------ */
.btn{transition:transform var(--quick) var(--ease),
     box-shadow var(--quick) var(--ease), background var(--quick) var(--ease),
     border-color var(--quick) var(--ease)}
.btn--primary{box-shadow:var(--shadow-1)}
.btn--primary:hover{box-shadow:var(--shadow-2);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}

/* --- teaching text, set as prose ---------------------------------------- */
.teach{max-width:74ch;line-height:1.65;background:transparent;
  border-color:color-mix(in srgb,var(--line) 70%,transparent)}

/* --- focus that is visible and not ugly --------------------------------- */
:where(button,a,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* Nothing moves for anyone who asked for less of it. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;
    transition-duration:.001ms!important}
  .work:hover .work__frame,.member:hover .member__portrait,
  .btn--primary:hover,.idea:focus-within{transform:none}
}

/* --- balance, judged on the built page ----------------------------------
   The first pass was generous in the wrong direction: a big top margin and a
   display headline that between them pushed the composer — the thing the page
   exists for — below the fold. Space is the material, but it belongs BETWEEN
   things rather than above all of them.
   ------------------------------------------------------------------------ */
.compose{padding-top:clamp(12px,1.6vw,22px)}
.view{padding-top:clamp(16px,2vw,28px)}
.greet{margin-bottom:clamp(14px,1.8vw,20px)}
.compose h1{
  font-size:clamp(1.875rem,3.4vw,2.625rem);
  margin-bottom:clamp(16px,2vw,24px);
  max-width:14ch;
}
/* The state line belongs with the greeting it explains, not floating between
   the greeting and the headline. */
.compose .state{margin-bottom:clamp(20px,2.6vw,32px)}

/* --- the last of the dead space, and cards that stop growing ------------- */
/* A grid of 1fr columns divides ALL the space between however few items there
   are, so a cast of two became two enormous tiles. Cards have a natural size;
   the row should end, not stretch. */
.company{grid-template-columns:repeat(auto-fill,minmax(168px,208px));
  justify-content:start}
.shelf{grid-template-columns:repeat(auto-fill,minmax(260px,320px));
  justify-content:start}
/* The masthead already separates itself from the page with glass and a
   hairline; the view underneath does not also need a large margin. */
.view{padding-top:clamp(10px,1.4vw,18px)}
.compose{padding-top:clamp(8px,1.2vw,16px)}

/* `.heading` carries a 64px top margin so that headings BETWEEN sections get
   air. The first one in a view is not between anything — it was adding a
   second gap under a masthead that already separates itself. Invisible in the
   stylesheet, obvious in the box model. */
.view > .heading:first-child,
.compose > .heading:first-child{margin-top:0}

/* ===========================================================================
   GRAIN
   Chip, 2026-09-09: the amber fade was a 6, and then — "fade needs to go. or
   add texture behind it. what would be best?"

   Texture, and monochrome. The fade failed because it was COLOUR poured into
   empty space, and colour in empty space draws the eye to the emptiness. Grain
   does the opposite: it gives the surface a material quality without creating
   anything to look at. It also works identically in both themes, which a tint
   never does — an amber wash that reads as warmth on white reads as a stain on
   navy.

   A tile rather than an SVG filter: `feTurbulence` is resolution-independent
   and rasterises differently across browsers and expensively over a full
   viewport. A 128px PNG is predictable, GPU-tiled, cached once, and the
   noise is gaussian rather than uniform — uniform noise reads as digital
   speckle, gaussian reads as film grain.

   Fixed rather than scrolled, so it behaves like the material of the screen
   instead of a decal printed on the page.
   =========================================================================== */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:url('/static/brand/grain.png');
  background-size:128px 128px;
  /* Barely there on purpose. If it is visible as texture it is too strong;
     it should only be visible by its absence. */
  opacity:.028;
}
/* Dark surfaces swallow grain, so it takes a little more to register — and a
   little more is still nothing you would notice as noise. */
:root[data-theme="dark"] body::before{opacity:.05}

/* Never over media. Grain on top of a video is dirt on the lens. */
body.is-theater::before{display:none}

/* ===========================================================================
   THE MARK, ONCE
   Chip, 2026-09-09: "You should add the Show Engine design in a strategic way
   to the grain."

   The obvious reading of that is to tile the symbol into the texture, and it
   is the one execution that would cheapen both. A repeating watermark is what
   bank stationery and PowerPoint templates do; it reads as decoration applied
   to a surface rather than as a brand that owns the surface.

   So: one mark, once, very large, cropped by the corner of the screen, at the
   threshold of visibility. Anchored to the viewport rather than the document,
   so it sits behind the product like a wall behind furniture instead of
   scrolling past like a decal.

   Three rules keep it from becoming decoration.

   **It never competes with reading.** Bottom-right, where this layout keeps no
   content, and gone entirely below the width where the margin disappears.
   **It is never legible as a logo.** If somebody notices it as a logo it is
   too strong — the masthead is where the brand is stated.
   **It never touches media.** Same rule as the grain.
   =========================================================================== */
body::after{
  content:"";
  position:fixed;
  right:-6vmin;
  bottom:-10vmin;
  width:min(46vh,420px);
  height:min(46vh,420px);
  z-index:-1;
  pointer-events:none;
  background:url('/static/brand/symbol.png') no-repeat right bottom;
  background-size:contain;
  opacity:.022;
  /* Fades into the page rather than ending at a hard rectangle. */
  -webkit-mask-image:radial-gradient(ellipse at 70% 70%,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse at 70% 70%,#000 30%,transparent 78%);
}
:root[data-theme="dark"] body::after{opacity:.045}

/* No margin to put it in, so it would sit under the content instead of beside
   it. A brand mark behind a sentence is worse than no brand mark. */
@media (max-width:1100px){ body::after{display:none} }
body.is-theater::after{display:none}

/* --- the phone: the cast before the explanation ------------------------- */
/* On a wide screen the explanation sits beside nothing and costs nothing. On
   a phone it filled the entire first screen and pushed every cast member out
   of sight, so somebody opening Cast saw no cast. The explanation is worth
   reading once; the people are worth seeing every time. */
@media (max-width:640px){
  #view-cast{display:flex;flex-direction:column}
  #view-cast .heading{order:1}
  #view-cast .state{order:2}
  #view-cast .company{order:3}
  #view-cast .teach{order:4;margin-top:var(--s5);margin-bottom:0}
  /* Two people to a row rather than one enormous card each. */
  .company{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
}

/* ===========================================================================
   THE HEADER, WITH THE BRAND WINNING IT
   Chip, 2026-09-09: "The header logo is not optimal. I need it to stand out."

   It was not primarily a size problem. The active navigation item was a raised
   white pill with a drop shadow sitting immediately beside the lockup, which
   made the NAV the heaviest object in the bar — so the eye landed on "Studio"
   rather than on Show Engine. Making the logo bigger while leaving that in
   place would have produced two things shouting instead of one.

   Three changes, in order of how much each actually does:

   1. The navigation recedes. The current item is marked by ink and a fine
      underline rather than by a floating white slab.
   2. The brand gets its own territory — real space and a hairline rule before
      the nav starts. Separation reads as importance.
   3. The lockup grows a little: 1.275rem to 1.45rem. Still under the 1.5rem it
      was before Chip asked for it smaller, so the reduction he wanted survives
      while the presence he wants arrives.
   =========================================================================== */
.brand img{height:1.45rem}

/* Its own zone, then a rule, then everything else. */
.brand{padding-right:var(--s5);position:relative}
.brand::after{
  content:"";position:absolute;right:0;top:50%;
  width:1px;height:20px;transform:translateY(-50%);
  background:var(--line);
}
.masthead{gap:var(--s4)}
.nav{margin-left:var(--s3)}

/* The navigation stops competing. */
.nav button{color:var(--ink-3);font-weight:500}
.nav button:hover{color:var(--ink);background:transparent}
.nav button[aria-current="true"]{
  color:var(--ink);
  background:transparent;
  box-shadow:none;
  font-weight:600;
  position:relative;
}
.nav button[aria-current="true"]::after{
  content:"";position:absolute;left:13px;right:13px;bottom:1px;height:2px;
  border-radius:2px;background:var(--amber);
}

@media (max-width:900px){
  /* No room for a divider on a phone; the mark stands alone there anyway. */
  .brand{padding-right:0}
  .brand::after{display:none}
}

/* ===========================================================================
   THE PHONE, PROPERLY
   Chip, 2026-09-09, with a screenshot: "The buttons are horrible. Nothing
   feels branded."

   Both were true and both were structural.

   The composer's footer put four controls in one row with space-between — a
   microphone, Add files, Skip the preview, and Make it — so on a 400px screen
   they were crushed together and the primary action was pinned against the
   edge looking clipped. Four peers in a row is not a hierarchy; it is a queue.

   And the header was a 0.9rem wordmark next to a 40px photograph of a person,
   which makes the avatar the most branded thing on the screen. The mark was
   reduced 20% when the desktop bar was crowded; a phone bar is not crowded, so
   it does not need to pay that tax.
   =========================================================================== */
@media (max-width:640px){
  /* Two rows: the quiet ways in, then the one thing you came to press. */
  .idea__foot{flex-direction:column;align-items:stretch;gap:10px;
    padding:10px 14px 14px}
  .idea__actions{display:grid;grid-template-columns:auto 1fr;
    align-items:center;gap:10px;width:100%;margin-left:0}
  .idea__actions .mic{grid-column:1;justify-self:start}
  .idea__actions #addFilesBtn{grid-column:2;justify-self:start}
  /* An escape hatch for people who already know what it does. It is not worth
     a third of the width on a phone, and its label means nothing to anybody
     who has not already seen the preview it skips. */
  .idea__actions #skipBtn{display:none}
  .idea__actions .btn--primary{
    grid-column:1 / -1;
    width:100%;
    min-height:52px;
    font-size:1rem;
    justify-content:center;
  }
  .tip{order:-1}

  /* The brand is the brand, not the avatar. */
  .appbar__mark{height:1.15rem}
  .appbar__face{width:32px;height:32px}
}

/* A primary action with some depth in it, rather than a flat orange lozenge.
   Brand colour doing brand work: one accent, given dimension. */
.btn--primary{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--amber-hi) 55%,var(--amber)) 0%,
    var(--amber) 62%,
    color-mix(in srgb,var(--amber) 92%,#000) 100%);
  border:1px solid color-mix(in srgb,var(--amber) 80%,#000);
  box-shadow:0 1px 2px rgba(11,26,43,.16),
             inset 0 1px 0 rgba(255,255,255,.34);
}
.btn--primary:hover{
  box-shadow:0 6px 16px -4px rgba(255,138,0,.42),
             inset 0 1px 0 rgba(255,255,255,.40);
}

/* --- the phone header, with authority ------------------------------------
   Chip: "The mobile Header logo is too small. Just no authority whatsoever."

   It was 0.9rem in a 52px bar — the wordmark occupying about a sixth of the
   height of the thing it is supposed to own, beside a photograph of a person
   that was larger than it. A wordmark reads as authoritative at roughly half
   the height of its bar, so that is what it gets, and the bar grows a little
   to carry it. The 20% reduction was the right call for a crowded desktop
   masthead; a phone bar holds a mark and an avatar and nothing else.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  :root{--bar:58px}
  .appbar__mark{height:1.7rem}
  .appbar__brand{gap:0}
  /* The avatar stops out-weighing the brand it sits opposite. */
  .appbar__face{width:30px;height:30px}
}

/* ===========================================================================
   THE STUDIO COLUMN
   Chip, 2026-09-09: the empty right-hand side "is probably still contributing
   to the feels dead read." It was, and it was two faults rather than one.

   The composer was capped at 840px inside a 1240px rail and pinned left, so
   roughly four hundred pixels of nothing sat beside it. Worse, the things
   BELOW it — what to continue, what you made recently — ran the full rail. So
   the page had a ragged right edge as well as a hole: three blocks, two
   different widths, one flush left.

   Whitespace is not the problem. ASYMMETRIC whitespace is. A margin on one
   side reads as something missing; the same amount of space on both sides
   reads as composition, which is why every page built around a single action
   centres it. So the studio column is one measure, shared by everything in it,
   and centred — and the measure is wider than it was, so there is less void to
   balance in the first place.

   The headline keeps its own narrow measure: a line of display type wants
   about fourteen characters regardless of how wide the column is.
   =========================================================================== */
:root{--studio-measure:1040px}

.greet,
.compose,
#view-home > #continue,
#view-home > #recent{
  max-width:var(--studio-measure);
  margin-inline:auto;
}
/* It carried a narrower cap from before the column existed. */
.compose{max-width:var(--studio-measure)}

@media (max-width:1120px){
  /* Below the point where centring buys anything, the column is simply the
     page and the gutters do the work. */
  :root{--studio-measure:100%}
}

/* ===========================================================================
   POWERED BY SHOW ENGINE™
   Chip, 2026-09-09: "You never added 'Powered By Show Engine' bottom center."

   He is right, and it was an omission rather than a decision. It is the mark
   that travels with everything the platform makes, so it belongs on every
   page — bottom centre, quiet enough to be a signature rather than a banner.

   It clears the phone's tab bar, which owns the bottom of that screen, and it
   is hidden entirely in the theatre, where the only thing on screen should be
   the picture.
   =========================================================================== */
.poweredby{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:38px 0 44px;
  color:var(--ink-3);
  font-size:.8125rem;
  letter-spacing:-.006em;
}
.poweredby b{font-weight:600;color:var(--ink-2)}
.poweredby__mark{height:15px;width:auto;display:block;opacity:.75}
/* One lockup at a time, the same way the masthead does it. */
.poweredby img.brand__dark{display:none}
:root[data-theme="dark"] .poweredby img.brand__light{display:none}
:root[data-theme="dark"] .poweredby img.brand__dark{display:block}

@media (max-width:900px){
  /* The tab bar owns the bottom of a phone; sit above it, not under it. */
  .poweredby{padding:28px 0 calc(24px + var(--bar) + env(safe-area-inset-bottom))}
}
body.is-theater .poweredby{display:none}

/* ---- Filming, while you wait ------------------------------------------------
   Chip: "while the scene or video is rendering, there should be some kind of
   action going on so that the user can see that it's being rendered. The more
   exciting, the better, as long as it doesn't take away from the actual
   render."

   So: CSS only. No canvas, no timers, no per-frame JavaScript — the render is
   happening on somebody else's machine but the browser still has to stay
   responsive enough to poll it and play the result. A compositor-only
   animation costs nothing measurable.

   It is a film gate: the frame line sweeping, and the four sprocket holes of a
   strip moving past. It stops entirely for anyone who asked it to. */
.filming{
  position:relative;
  display:grid;
  place-items:center;
  gap:14px;
  padding:26px 20px;
  width:100%;
}
.filming__gate{
  position:relative;
  width:min(320px,72%);
  aspect-ratio:16/9;
  border:1px solid var(--rule);
  border-radius:4px;
  overflow:hidden;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 22px,
      color-mix(in srgb,var(--ink) 5%,transparent) 22px 24px);
}
.filming__sweep{
  position:absolute;
  inset:0 auto 0 -40%;
  width:40%;
  background:linear-gradient(90deg,
    transparent,
    color-mix(in srgb,var(--amber) 22%,transparent),
    transparent);
  animation:filmSweep 2.4s linear infinite;
}
.filming__holes{
  position:absolute;
  left:0; right:0; bottom:6px;
  display:flex;
  gap:14px;
  justify-content:center;
  animation:filmRun 1.6s linear infinite;
}
.filming__holes i{
  width:9px;height:7px;border-radius:1.5px;
  background:color-mix(in srgb,var(--ink) 16%,transparent);
}
.filming__what{
  font-size:var(--t-small);
  color:var(--ink-2);
  text-align:center;
  max-width:40ch;
  line-height:1.6;
}
.filming__what b{color:var(--ink)}

@keyframes filmSweep{ to{ transform:translateX(350%); } }
@keyframes filmRun{ to{ transform:translateX(28px); } }

@media (prefers-reduced-motion: reduce){
  .filming__sweep,.filming__holes{animation:none}
  .filming__sweep{opacity:.25;transform:translateX(120%)}
}

/* The progress bar under the film gate. It advances on completed shots, so it
   can sit still for a long time on a single-shot scene — the sentence above it
   is what carries the news in that case. */
.filming__bar{
  width:min(320px,72%);
  height:5px;
  border-radius:3px;
  background:color-mix(in srgb,var(--ink) 9%,transparent);
  overflow:hidden;
}
.filming__bar span{
  display:block;height:100%;
  background:var(--amber);
  border-radius:3px;
  transition:width .6s ease;
}
.filming__pct{
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  margin:0;
}
@media (prefers-reduced-motion: reduce){ .filming__bar span{transition:none} }

/* What the renderer said, and what to do about it.
   
   Both of these used to be crammed into `.filming__what` — a centred 40ch
   column — with the advice wearing `.filming__pct`, an 11px monospace CAPTION
   class. A five-line paragraph set in a caption style, centred, in a narrow
   column, is the wall of small type Chip photographed on 2026-09-09. Prose is
   set as prose: left-aligned, at a readable size, in a column wide enough to
   hold a sentence. */
.filming__said,
.filming__why{
  max-width:62ch;
  text-align:left;
  margin:0;
  overflow-wrap:anywhere;   /* a provider id or URL never widens the page */
}
.filming__said{
  font-size:var(--t-body);
  color:var(--ink);
  line-height:1.6;
}
.filming__why{
  font-size:var(--t-small);
  color:var(--ink-2);
  line-height:1.65;
  border-left:2px solid var(--amber);
  padding-left:14px;
}
:root[data-theme="dark"] .filming__why{border-left-color:var(--amber)}
/* The stopped panel reads like a page, not a centred poster — and everything
   in it shares one left edge, including the scene box, which centres itself
   everywhere else. */
.filming--stopped{justify-items:start;text-align:left;width:100%}
.filming--stopped .filming__what{text-align:left;max-width:62ch}
/* The scene box uses the room it is given.
   
   It was capped at 620px inside a panel nearly three times that wide, which is
   what Chip photographed: a narrow column of text stranded in an empty card.
   Prose still wraps at a readable measure; the scene itself fills. */
.filming--stopped .scenebox{margin-left:0;margin-right:0;width:100%;max-width:1040px}
.filming--stopped .filming__said,
.filming--stopped .filming__why{max-width:78ch}

/* THE CLIPPING, finally.
   
   `#inlineScene` carries `class="idea"` on the TEXTAREA ITSELF. The padding
   rule is `.idea__mirror,.idea textarea`, which needs `.idea` to be an
   ANCESTOR — so it never matched, and the box had NO PADDING AT ALL. The first
   character of every line sat flush against a 1px border inside a 22px corner
   radius, and the "T" of "Two guys" was sliced in half by it. That is the text
   he kept photographing, and it was never a truncation — it was a missing
   padding declaration. */
textarea.idea{
  padding:18px 22px;
  font-size:var(--t-body);
  line-height:1.7;
  min-height:132px;
  border-radius:var(--r-lg);
}
.scenebox--read .scenebox__text{padding:0}

@media (max-width:767px){
  .filming__said,.filming__why{max-width:100%}
  .filming--stopped{padding:20px 16px}
  textarea.idea{padding:14px 16px;min-height:120px}
}

/* Stopped and idle are still, on purpose. The animation means "work is
   happening"; if it runs when nothing is happening it means nothing at all. */
.filming--stopped .filming__what b{color:var(--warn)}
.filming--idle .filming__what b,
.filming--stopped .filming__what b{display:inline-block;margin-bottom:2px}

/* Advice about a scene: what has been refused before, not a rule of ours. It
   is deliberately quiet — a warning that shouts is a warning people learn to
   dismiss, and this one is often going to be wrong. */
.advice{
  margin-top:14px;
  border:1px solid var(--rule);
  border-left:3px solid var(--amber);
  border-radius:2px;
  padding:12px 14px;
  background:var(--card);
}
.advice__head{margin:0 0 8px;font-weight:600;font-size:var(--t-small);color:var(--ink)}
.advice__item{margin:0 0 8px;font-size:var(--t-small);color:var(--ink-2);line-height:1.55}
.advice__item span{color:var(--ink-3)}
.advice__foot{margin:6px 0 0;font-size:11px;color:var(--ink-3)}

/* The facts of a production, in the bar where it is being made. Quiet, because
   they are reference rather than news. */
.wsbar__facts{
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
/* It used to be truncated with an ellipsis, and then hidden outright on a
   phone — so the one line naming the size and the length disappeared exactly
   where the screen was smallest. It wraps now. Nothing about what is being
   made is ever hidden to save a row. */
@media (max-width:720px){
  .wsbar__facts{width:100%;order:9;white-space:normal;line-height:1.5}
}

/* The scene, its size and its length, wherever a creator is about to commit.
   Nobody should press a button that spends money without seeing what it will
   spend it on. */
.scenebox{
  width:min(560px,94%);
  margin:14px auto 0;
  text-align:left;
  display:grid;
  gap:10px;
}
.scenebox__label{
  margin:0;
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);
}
.scenebox textarea{width:100%;resize:vertical;min-height:110px}
.scenebox__row{
  display:flex;flex-wrap:wrap;gap:12px;align-items:end;
}
.scenebox__row label{
  display:grid;gap:4px;
  font-size:var(--t-small);color:var(--ink-2);
}
.scenebox__cost{
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:11px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  padding-bottom:8px;
}
/* What is being filmed is shown WHOLE.
   
   This used to be capped at 7.5em with an inner scrollbar, which on a phone is
   invisible and on a desktop reads as text that has been cut off — which is
   exactly what Chip reported on 2026-09-09. It was capped in the same commit
   that quoted his instruction to show it "amply, freely, happily". No cap. */
.scenebox--read .scenebox__text{
  margin:0;
  font-size:var(--t-body);
  color:var(--ink);
  line-height:1.65;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.scenebox--read .scenebox__facts{
  margin:0;
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:11px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

/* The facts of the render, labelled and legible. Never a run-on of middots at
   11px — a creator about to spend money reads these. */
.facts{
  margin:0;display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;
}
.facts__f{background:var(--surface);padding:9px 12px 10px;min-width:0}
.facts dt{
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);
}
.facts dd{
  margin:2px 0 0;font-size:var(--t-small);font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.35;
  overflow-wrap:anywhere;
}
@media (max-width:767px){
  .facts{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
  .scenebox{width:100%}
}


/* ---- Test mode, at the size it deserves ---------------------------------
   It used to be a full-page essay that also HID the failure panel, the filming
   animation and the editable scene behind it, because it was the first branch
   of the media area. Chip, 2026-09-09: "it could just say 'test'." */
.teststrip{
  text-align:left;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:var(--s4) 0 0;padding:10px 14px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--surface);
  font-size:var(--t-small);color:var(--ink-2);
  width:100%;max-width:1040px;
}
.teststrip__tag{
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:10px;letter-spacing:.14em;font-weight:700;
  color:var(--ink-3);border:1px solid var(--line-2);
  padding:2px 7px;border-radius:var(--r-sm);flex:none;
}
.teststrip .btn{margin-left:auto;flex:none}
@media (max-width:767px){
  .teststrip{border-radius:var(--r-md)}
  .teststrip .btn{margin-left:0}
}

/* The story panel uses the room, like the stopped panel beside it. A scene is
   read left to right; centring it strands a narrow column in a wide card. */
.filming--idle{justify-items:start;text-align:left;width:100%}
.filming--idle .filming__what{text-align:left;max-width:62ch}
.filming--idle .scenebox{margin-left:0;margin-right:0;width:100%;max-width:1040px}

/* The facts the pickers do not already carry. */
.scenebox__extras{
  margin:0;font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;
}
/* The action is the point of this panel, so it looks like it. */
/* `.scenebox` is a grid, so the horizontal axis is justify-self. align-self
   left it stretched across the full width, which made the action look like a
   banner instead of a button. */
.scenebox__go{justify-self:start;min-width:180px;justify-content:center}

/* What is held about a locked cast member. Read-only on purpose: videos have
   been made against these values, so a form here could only ever be refused. */
.held{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 14px;
  margin:12px 0 0;
  font-size:var(--t-small);
}
.held dt{color:var(--ink-3)}
.held dd{
  margin:0;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}


/* A production that has STOPPED REPORTING.

   2026-09-09, measured: filming was killed at 04:25:31 and at 04:50 the screen
   still read "roughly 3m 43s to go, 8m 11s so far" — a frozen counter under a
   film gate that was still sweeping. The panel is rendered without the gate at
   all (see `stoppedReporting` in studio.js); these rules are the belt to that
   brace, so that if any moving part ever finds its way back in here it arrives
   already stopped. An animation that says "working" when nothing is working is
   a lie with a frame rate, and this is the one state where the thing being
   animated may genuinely be dead.

   It borrows `.filming--stopped` for its layout — left-aligned prose, one
   shared left edge, the scene box using the room it is given — because it is
   the same shape of news. It is not the same news: this one does not claim
   anything has failed. */
.filming--quiet .filming__gate{display:none}
.filming--quiet .filming__gate,
.filming--quiet .filming__sweep,
.filming--quiet .filming__holes,
.filming--quiet .filming__holes i{animation:none!important}
.filming--quiet .filming__bar span{transition:none;animation:none!important}

/* Uploaded photographs: visible, choosable, removable. The controls are always
   present rather than revealed on hover — a hover-only delete does not exist on
   a phone, which is where half of these photographs will be taken. */
.shots{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:10px;
  margin:12px 0 4px;
}
.shot{
  position:relative;
  margin:0;
  border:1px solid var(--rule);
  border-radius:4px;
  overflow:hidden;
  background:var(--card);
}
.shot img{
  display:block;
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  background:color-mix(in srgb,var(--ink) 6%,transparent);
}
.shot--profile{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.shot__badge{
  position:absolute;top:6px;left:6px;
  background:var(--amber);
  color:#1A1D1A;
  font-size:10px;font-weight:600;letter-spacing:.04em;
  padding:2px 6px;border-radius:2px;
}
.shot__warn{
  position:absolute;top:6px;right:6px;
  background:var(--bad,#B8433C);
  color:#fff;
  font-size:10px;font-weight:600;
  padding:2px 6px;border-radius:2px;
  cursor:help;
}
.shot figcaption{
  display:flex;flex-wrap:wrap;gap:2px;
  padding:6px;
}
.shot__act{
  flex:1 1 auto;
  border:0;background:transparent;
  color:var(--ink-2);
  font-size:11px;
  padding:4px 2px;
  cursor:pointer;
  border-radius:2px;
}
.shot__act:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink)}
.shot__act:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.shot__act--del{color:var(--bad,#B8433C)}


/* The one line on the measurements sheet that is time-sensitive: a tape
   measure is only in somebody's hand once, and everything under this heading
   has to be captured then or not at all. */
.moreabout__now{
  margin-top:10px;padding:9px 12px;
  border-left:2px solid var(--amber);
  background:var(--app-sunk);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--ink-2);font-size:var(--t-small);line-height:1.55;
}
.moreabout__now b{color:var(--ink);font-weight:600}

/* The sentence that turns "start a new version" from a threat into a button
   somebody will press: it keeps everything. */
.moreabout__keeps{
  margin-top:10px;padding:10px 12px;
  border-left:2px solid var(--good);
  background:var(--app-sunk);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--ink-2);font-size:var(--t-small);line-height:1.55;
}
.moreabout__keeps b{color:var(--ink);font-weight:600}

/* Uploaded recordings — a voice or a movement clip. A face has a gallery of
   thumbnails; a WAV has nothing to show, so it gets a list with the one number
   that actually matters: how much speech is in there against the thirty
   seconds the voice needs. */
.reclist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden}
.reclist__row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;gap:12px;padding:9px 12px;background:var(--surface)}
.reclist__name{font-size:var(--t-small);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reclist__len{font-size:var(--t-micro);color:var(--ink-3);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.reclist__total{padding:9px 12px;background:var(--app-sunk);
  font-size:var(--t-small);color:var(--ink-2)}
.reclist__total b{color:var(--ink);font-weight:600}
.reclist__total--ok{color:var(--good)}
.reclist__total--ok b{color:var(--good)}
@media (max-width:520px){
  .reclist__row{grid-template-columns:minmax(0,1fr) auto;gap:6px}
  .reclist__len{grid-column:1;font-size:var(--t-micro)}
}

/* ---- The Script Library ----------------------------------------------------
   Deliberately calm. Nothing here is a warning, because nothing about a script
   is wrong — a script that is never produced is a complete and valid thing. */
.scriptbar{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:0 0 18px;
}
.scriptbar input[type=search]{min-width:200px;flex:1 1 220px}
.scriptbar__spacer{flex:1 1 auto}
.scriptbar__archived{
  display:flex;align-items:center;gap:6px;
  font-size:var(--t-small);color:var(--ink-2);white-space:nowrap;
}

.scards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:12px;
}
.scard{
  display:flex;flex-direction:column;justify-content:space-between;
  border:1px solid var(--rule);
  border-radius:6px;
  background:var(--card);
  padding:16px;
  min-height:172px;
}
.scard--archived{opacity:.62}
.scard h3{
  margin:0 0 8px;
  font-size:17px;line-height:1.25;
  text-wrap:balance;
}
.scard__meta{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:0 0 6px;
}
.scard__meta span{
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);
  border:1px solid var(--rule);
  border-radius:2px;
  padding:2px 6px;
}
.scard__when{margin:0 0 10px;font-size:var(--t-small);color:var(--ink-3)}
.scard__radio{margin:0;font-size:var(--t-small);color:var(--ink-2)}
.scard__radio b{color:var(--ink-3);font-weight:500;margin-right:6px}
.scard__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

.scriptrow{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.scriptrow label{display:grid;gap:4px;font-size:var(--t-small);color:var(--ink-2)}


/* --- the radio show -------------------------------------------------------
   A list of lines you can hear, one after another. The line being spoken is
   the only thing moving on the page, because that is what listening looks
   like. Everything else stays still and readable. */
.rshow__runtime{
  font-size:var(--t-small);color:var(--ink-2);margin:var(--s3) 0;
}
.rlines{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:var(--s3)}
.rline{
  border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:var(--s3);background:var(--surface);display:grid;gap:6px;
  transition:border-color .12s var(--ease),background .12s var(--ease);
}
.rline--playing{border-color:var(--amber);background:var(--amber-tint)}
.rline__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rline__head b{font-size:var(--t-small);letter-spacing:.02em}
.rline__head span{font-size:var(--t-micro);color:var(--ink-3);
  font-variant-numeric:tabular-nums}
/* The sheet styles every input as a full-width stacked field. These are
   inline controls inside a line, so they take back their own width and drop
   the stacking margin rather than the sheet's rule being weakened for
   everything else that relies on it. */
.sheet .rline__text{
  width:100%;resize:vertical;min-height:44px;margin-bottom:0;
  font-size:var(--t-small);padding:9px 11px;
}
.rline__acts{align-items:center}
.rline__acts label{display:inline-flex;align-items:center;gap:6px;
  color:var(--ink-3);font-size:var(--t-micro);margin-bottom:0;white-space:nowrap}
.sheet .rline__pause{width:78px;margin-bottom:0;padding:0 8px;
  height:var(--control-sm);font-size:var(--t-small);
  font-variant-numeric:tabular-nums}
.cluster--tight{gap:6px;flex-wrap:wrap}
.sheet .input--sm{
  width:auto;flex:1 1 190px;min-width:0;margin-bottom:0;
  height:var(--control-sm);font-size:var(--t-small);padding:0 10px;
}
/* One speaker per row: who they are, whose voice they get, and the field to
   change it. Wraps to a stack on a narrow screen rather than clipping. */
.rvoices li{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rvoices li b{flex:none}
.rvoices li > span{flex:none;color:var(--ink-3);font-size:var(--t-micro)}

/* --- the radio show's four tabs -------------------------------------------
   Perform, Sound, Review, Pictures. One at a time, because a person is doing
   exactly one of those things at any moment, and showing all four at once is
   how a simple surface becomes a cockpit. */
.rtabs{
  display:flex;gap:2px;margin:var(--s4) 0 var(--s3);
  border-bottom:1px solid var(--line-2);
}
.rtab{
  background:none;border:none;border-bottom:2px solid transparent;
  color:var(--ink-3);font-family:var(--sans);font-size:var(--t-small);
  font-weight:500;padding:8px 14px;cursor:pointer;
  transition:color .12s var(--ease),border-color .12s var(--ease);
}
.rtab:hover{color:var(--ink)}
.rtab--on{color:var(--ink);border-bottom-color:var(--amber);font-weight:600}
.rpanel{min-height:120px}
.rsound__head{
  font-size:var(--t-small);font-weight:600;letter-spacing:.01em;
  margin:var(--s5) 0 var(--s2);color:var(--ink-2);
}
/* A cue, a note: the same card, because both are "a thing at a moment that you
   accept or dismiss". */
.rcue{
  border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:var(--s3);background:var(--surface);display:grid;gap:6px;
}
.rcue--on{border-color:var(--amber);background:var(--amber-tint)}
.rcue p{font-size:var(--t-small);line-height:1.5;margin:0}
.rline--reaction{border-style:dashed}
.rline__tune{margin-top:4px}
.rline__tune > summary{font-size:var(--t-micro);color:var(--ink-3)}
/* The direction controls. A short grid rather than a column of full-width
   fields — these are one decision made of five small parts, not five
   decisions. */
.rdirect{
  display:grid;gap:8px var(--s3);margin:var(--s3) 0;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.sheet .rdirect label{
  display:grid;gap:4px;margin-bottom:0;
  color:var(--ink-3);font-size:var(--t-micro);
}
.sheet .rdirect input,.sheet .rdirect select{
  margin-bottom:0;height:var(--control-sm);padding:0 10px;
  font-size:var(--t-small);width:100%;
}

/* The first version of this was a left-aligned paragraph under a half-width
   rule inside a centre-aligned empty state, which read as an afterthought
   rather than as part of the product. Superseded by .start below. */

/* ---- Questions Show Engine asks -----------------------------------------
   Its own dialog, not the browser's. A decision that costs money is the last
   place a product should be showing the operating system's chrome. */
#ask{
  border:none;padding:0;background:transparent;max-width:min(440px,92vw);
  color:var(--ink);
}
#ask::backdrop{background:rgba(11,26,43,.42);backdrop-filter:blur(3px)}
.ask{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--shadow-3);
  padding:30px 30px 24px;display:grid;gap:var(--s3);
}
.ask h2{
  font-size:1.1875rem;font-weight:600;letter-spacing:var(--track-title);
  margin:0;text-wrap:balance;
}
.ask p{color:var(--ink-2);font-size:var(--t-body);line-height:1.6;margin:0}
.ask p + p{margin-top:var(--s2)}
.ask b{color:var(--ink);font-weight:600}
/* A number somebody is about to commit to gets to be the size of the decision. */
.ask__figure{
  font-size:2rem;font-weight:600;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;margin:var(--s1) 0 var(--s2) !important;
}
.ask__figure span{font-size:var(--t-small);font-weight:500;color:var(--ink-3);
  letter-spacing:0;margin-left:6px}
.ask label{display:grid;gap:6px;color:var(--ink-3);font-size:var(--t-micro);margin:0}
#ask input{
  width:100%;background:var(--surface);border:1px solid var(--line-2);
  color:var(--ink);padding:11px 13px;border-radius:var(--r-sm);
  font-size:var(--t-body);font-family:var(--sans);
}
#ask input:focus{
  border-color:var(--amber);outline:none;box-shadow:0 0 0 3px rgba(224,154,43,.16);
}
.ask__acts{display:flex;gap:var(--s2);justify-content:flex-end;margin-top:var(--s2)}
/* Destructive is red, never amber. Brand consistency is not a reason to make a
   delete look like the thing you want somebody to press. */
.btn--danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn--danger:hover{background:#a53226;border-color:#a53226}

/* ---- The empty Script Library -------------------------------------------
   Two steps, because it genuinely is a sequence: write it, then hear it. The
   numbering encodes that rather than decorating it. The Radio Show has to be
   visible as a NAMED part of the product here, because until a script exists
   this is the only place it can be seen at all. */
.start{
  display:grid;gap:var(--s4);margin:var(--s7) auto 0;max-width:640px;text-align:left;
  grid-template-columns:1fr 1fr;
}
.start__step{
  border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg);
  padding:var(--s5);display:grid;gap:var(--s2);align-content:start;
}
.start__n{
  width:26px;height:26px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--ink);color:var(--surface);font-size:var(--t-micro);font-weight:600;
  font-variant-numeric:tabular-nums;
}
.start__step h4{
  font-size:var(--t-lead);font-weight:600;letter-spacing:var(--track-body);
  margin:0;color:var(--ink);
}
.start__step p{
  margin:0;color:var(--ink-2);font-size:var(--t-small);line-height:1.6;max-width:none;
}
.start__free{
  grid-column:1/-1;text-align:center;color:var(--ink-3);font-size:var(--t-micro);
  margin:0;padding-top:var(--s2);
}
@media (max-width:640px){ .start{grid-template-columns:1fr} }

/* ---- Who says it --------------------------------------------------------
   A creator picks a NAME. The identifier lives behind Advanced, because it is
   how the machine finds a voice and not the name of anything. */
.rvoice{margin:var(--s5) 0}
.rvoice__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-bottom:var(--s3);
}
.rvoice__head h3{
  font-size:var(--t-small);font-weight:600;letter-spacing:.01em;margin:0;color:var(--ink-2);
}
.rvoice__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.rvoice__row{
  display:grid;grid-template-columns:minmax(96px,auto) 1fr auto;
  gap:var(--s3);align-items:center;
  border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:var(--s3);background:var(--surface);
}
.rvoice__who{display:grid;gap:2px;min-width:0}
.rvoice__who b{font-size:var(--t-small);letter-spacing:.02em}
.rvoice__who span{font-size:var(--t-micro);color:var(--ink-3)}
.rvoice__pick{display:grid;gap:3px;min-width:0}
.sheet .rvoice__pick select{margin-bottom:0;height:var(--control-sm);padding:0 10px;
  font-size:var(--t-small);width:100%}
.rvoice__note{font-size:var(--t-micro);color:var(--ink-3)}
.sheet .rvoice__own{
  display:grid;grid-template-columns:minmax(88px,auto) 1fr auto;gap:var(--s2);
  align-items:center;margin:0 0 var(--s2);color:var(--ink-3);font-size:var(--t-micro);
}
.sheet .rvoice__own input{margin-bottom:0}
@media (max-width:560px){
  .rvoice__row,.sheet .rvoice__own{grid-template-columns:1fr}
}

/* A state, said in one word. Semantic colour stays semantic: a thing still
   waiting is amber-text, a thing settled is green. Neither is the brand accent,
   which is spent on actions. */
.tag{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  font-size:var(--t-micro);font-weight:500;letter-spacing:.01em;
  padding:3px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);color:var(--ink-3);background:var(--bg);
}
.tag--ok{color:var(--good);border-color:color-mix(in srgb,var(--good) 30%,transparent);
  background:var(--good-tint)}
.tag--wait{color:var(--warn);border-color:var(--amber-line);background:var(--amber-tint)}

/* SHOW ENGINE GUARDIAN™ — one line, and only when there is something true to
   say. A badge that always reads "Protected" teaches people the word is
   decoration, so this renders nothing at all until Guardian has spoken. */
.guardian{
  margin:.7rem 0 0; padding:.6rem .8rem; border-radius:10px;
  font-size:.92rem; line-height:1.5; border:1px solid var(--line);
  background:var(--sunk); color:var(--ink-2);
}
.guardian b{ color:var(--ink); }
.guardian--ok{ border-color:var(--good-line); background:var(--good-tint); }
.guardian--fixed{ border-color:var(--amber-line); background:var(--amber-tint); }
.guardian--lead{ border-color:var(--bad-line); background:var(--bad-tint); }

/* Which renderers Guardian may use. Lives in Studio Setup because it is
   machinery, not a creative decision — but it is the one hard gate a person has
   to pass, so it must be findable rather than a curl command. */
.routes{ display:grid; gap:var(--s4); margin-top:var(--s4); }
.route{
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--s4); background:var(--surface);
}
.route--on{ border-color:var(--good-line); background:var(--good-tint); }
.route__head{ display:flex; align-items:baseline; gap:var(--s4); flex-wrap:wrap; }
.route__head b{ font-size:var(--t-small); font-weight:650; }
.route__state{
  margin-left:auto; font-size:var(--t-micro); font-weight:600;
  padding:2px 8px; border-radius:var(--r-pill);
  background:var(--sunk); color:var(--ink-3); border:1px solid var(--line);
}
.route__state--on{ background:var(--good-tint); color:var(--good); border-color:var(--good-line); }
.route__what{ color:var(--ink-3); font-size:var(--t-micro); margin:4px 0 0; }
.route__caps{
  display:grid; grid-template-columns:auto 1fr; gap:4px var(--s4);
  margin:var(--s4) 0 0; font-size:var(--t-micro);
}
.route__caps dt{ color:var(--ink-3); }
.route__caps dd{ margin:0; color:var(--ink-2); }
/* Unproven is not "cannot". It is a thing to go and find out, and it is the
   state the whole likeness question currently sits in. */
.route__unproven{ color:var(--amber-text)!important; font-weight:600; }
.route__note{ margin:var(--s4) 0 0; font-size:var(--t-micro); color:var(--ink-3); }
.route .btn{ margin-top:var(--s4); }

/* ---------------------------------------------------------------- §39 ----
   THE RADIO SHOW — what the video will sound like, before it exists.

   Deliberately quiet. This is a listening surface, not a dashboard: a line
   saying what it is, a player, and the two decisions worth making. The stale
   variant is the only loud thing here, because filming to an out-of-date
   performance is the one mistake this panel exists to prevent. */
.radio{
  grid-column: 1 / -1;
  margin-top: 14px; padding: 18px 22px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card);
  display: grid; gap: 12px; justify-items: stretch;
}
.radio--stale{ border-color: var(--warn, #b4791f); }
.radio__label{ margin: 0; font-weight: 600; }
.radio__why{
  margin: 0; max-width: 62ch;
  font-size: .92rem; line-height: 1.5; color: var(--muted);
}
.radio__scene{ display: grid; gap: 6px; }
.radio__scenelabel{ margin: 0; font-size: .88rem; color: var(--muted); }
.radio__player{ width: 100%; }
.radio__row{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }

@media (max-width: 720px){
  .radio{ padding: 14px 16px; }
}

/* ---- Bringing a script in ------------------------------------------------
   The dashed area used to be a picture of a drop zone with nothing behind it:
   dropping a file made the browser navigate away and open it, which looks
   exactly like the studio ignoring you. It is real now, and it says what it
   does rather than relying on the dashes to imply it. */
.drop{
  border:2px dashed var(--line-2); border-radius:var(--r-lg);
  padding:var(--s6) var(--s5); text-align:center; margin:var(--s5) auto 0;
  max-width:44rem; background:var(--sunk);
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.drop--slim{ padding:var(--s4); margin:0 0 var(--s5); max-width:none; }
.drop--slim .drop__formats{ display:none; }
.drop__note{ margin:0; font-size:var(--t-body); color:var(--ink-2); }
.drop__note b{ color:var(--ink); font-weight:650; }
.drop__or{ margin:4px 0 0; font-size:var(--t-small); color:var(--ink-3); }
.drop__formats{ margin:var(--s3) 0 0; font-size:var(--t-micro); color:var(--ink-3); }
/* The active state has to be unmistakable — a dashed border going slightly
   darker is not an answer to "did it see me". */
.drop--over{
  border-color:var(--amber); background:var(--amber-tint);
  border-style:solid;
}
.drop--over .drop__note b{ color:var(--amber-text); }
.drop--busy{ border-style:solid; border-color:var(--amber-line); }
.drop--busy .drop__note{ color:var(--amber-text); }
@media (prefers-reduced-motion:reduce){ .drop{ transition:none; } }

/* Where a script sits in a series, and whether the last save landed. */
.scard__series{ margin:2px 0 0; font-size:var(--t-micro); color:var(--ink-3);
  letter-spacing:.02em; }
.saved{ font-size:var(--t-micro); color:var(--ink-3); margin-left:var(--s3); }
.saved--bad{ color:var(--bad); font-weight:600; }


/* ---- Daily videos (2026-10-13): a link into its own page, styled exactly
   like the views beside it so it reads as one app. ------------------------ */
.nav a.nav__link{
  background:none;border:0;padding:7px 13px;border-radius:var(--r-sm);text-decoration:none;
  color:var(--ink-3);font-size:0.875rem;font-weight:500;letter-spacing:-.008em;
  transition:color .12s var(--ease);
}
.nav a.nav__link:hover{color:var(--ink)}
a.tab{text-decoration:none}
.daily-card{
  display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:center;
  margin:0 0 var(--s4);padding:14px 18px;border-radius:var(--r-md, 14px);
  background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);
  box-shadow:var(--shadow-1);
}
.daily-card:hover{border-color:var(--amber)}
.daily-card__title{font-weight:650;font-size:1rem}
.daily-card__text{grid-column:1;color:var(--ink-2);font-size:0.875rem;line-height:1.4}
.daily-card__go{grid-column:2;grid-row:1 / span 2;color:var(--amber-text, var(--amber));font-weight:600;white-space:nowrap}