/* ---------- the Cellar room, slice one: the header ----------
   cellarHeader and the paint-controls row.
   The title is written 15.5 / -.012em and renders at 16. The -.012em stays:
   a hair of tracking on a 16px line is not a heading. 48px faces and the 36px
   back button are sizes of things. Radius 17 is --r-xl.

   THE HEADER'S TOOLS ARE TWO ICONS (Mark, 2026-08-19): a gear holding Score
   and the brief, and a trash can. The labelled pill doors are retired, and so
   is the voice door — voice is a house-wide default and lives in Settings. */

/* 30px is the size of a tool, not a step of a scale. */
.cellar-tool{width:30px; height:30px; flex:none; display:grid; place-items:center;
  border:none; background:transparent; border-radius:var(--r-sm); color:var(--muted);}
.cellar-tool:hover{color:var(--text); background:var(--sel);}
.cellar-tool-on{color:var(--accent);}
.cellar-tool-idle{opacity:.4;}
/* the gear's menu, anchored under it — the account menu's own grammar */
.cellar-menu{position:absolute; right:0; top:36px; z-index:6; min-width:190px;
  background:var(--panel); border:var(--bd) solid var(--edge); border-radius:14px;
  box-shadow:var(--sh-card); padding:8px; display:flex; flex-direction:column; gap:2px;}
/* the sub header wears the ember too (Mark, 2026-08-16): the same diagonal
   over its own panel, so the card reads as part of the room's heat instead
   of a plate blocking it */
.cellar-head{display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; padding:12px 15px; border:var(--bd) solid var(--edge);
  border-radius:var(--r-xl); box-shadow:0 14px 34px var(--shad);
  background:linear-gradient(135deg, var(--cellar-ember), transparent 62%), var(--panel);}
.cellar-head-who{display:flex; align-items:center; gap:14px; min-width:0;}
.cellar-head-faces{display:flex; gap:8px; flex-wrap:wrap;}
.cellar-spk{display:flex; flex-direction:column; align-items:center; gap:4px; width:84px; flex:none;}
.cellar-spk-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.cellar-spk-face{width:64px; height:64px; border-radius:var(--r-round); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--t-sub); font-weight:var(--w-semi); color:var(--ink4);
  border:var(--bd-thick) solid var(--edge);}
/* the ring marks the floor and holds; the fade is so a handover reads as a
   move rather than a flash (Mark, 2026-08-19: it "keeps flicking") */
.cellar-spk-face{transition:border-color .25s ease;}
.cellar-spk-face-on{border-color:var(--accent);}
.cellar-head-copy{display:flex; flex-direction:column; gap:3px; min-width:0;}
.cellar-head-title{font-size:var(--t-lead); font-weight:var(--w-semi); letter-spacing:-.012em;}
.cellar-head-tools{display:flex; align-items:center; gap:4px; position:relative;}
/* two verbs and two tools on one row: the buttons take the space, the icons
   sit at the end (Mark, 2026-08-19 — the controls cut to four) */
.cellar-paint{display:flex; align-items:center; gap:8px; flex-wrap:wrap; width:100%;}
.cellar-paint .cellar-paint-btn{flex:1 1 0; min-width:96px;}
.cellar-paint-tools{display:flex; align-items:center; gap:2px; flex:none; margin-left:auto;}

/* slice two: the room itself, full width on the centre stage. The you-line's
   5px 15px 15px 5px is asymmetric and stays written out. */
.cellar-crew{display:flex; flex-direction:column; gap:18px;}
.cellar-you{display:flex; flex-direction:column; gap:6px; padding:13px 15px;
  border:var(--bd) solid var(--edge); border-left:2px solid var(--accent);
  border-radius:5px 15px 15px 5px; background:var(--panel); box-shadow:0 10px 26px var(--shad);}
.cellar-you-body{font-size:var(--t-lead); line-height:1.45; color:var(--ink);}
.cellar-them{display:flex; flex-direction:column; gap:5px;}
.cellar-them-who{display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
.cellar-them-name{font-size:var(--t-small); font-weight:var(--w-semi); color:var(--accent);}
.cellar-them-narr{color:var(--muted);}
/* the aside's tag, and the one animated label: written as classes because a
   line of the room is drawn a hundred times and a style string is not */
.cellar-aud{text-align:right;}
.cellar-pulse{animation:pulse 1.2s ease-in-out infinite;}
/* the standing status line: one row, always there, so the feed under it never
   moves when the room starts or stops thinking (Mark, 2026-08-19 — the blink).
   The height is reserved in em off its own type, so it holds its line whether
   it carries words or nothing. */
.cellar-status{min-height:1.5em; line-height:1.5;}
/* THE GLASS (Mark, 2026-08-19: "i want to be able to make the image have a
   glass effect on the back ground of things … a button or toggle").

   The house's own `house-shell-show` / `-lounge` do the chrome and the
   canvas, and the Lounge's mixes are tuned for the Lounge: 68% panel over
   the centre reads as a tint there and as a closed door here, because the
   Cellar's panel is nearly black. So the room asks for its own weights on
   its own class, and the picture is actually visible through them.

   One rule the whole block obeys: every surface a WORD sits on is frosted.
   A photograph is bright and text on bare glass over it is unreadable, so
   nothing is left to chance and no line is left floating on the wall. */
.house-shell-cellar .house-main,
.house-shell-cellar .house-stage{
  background:color-mix(in srgb,var(--panel) 34%,transparent);
  backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);}
.house-shell-cellar .house-left,
.house-shell-cellar .house-right{
  background:color-mix(in srgb,var(--panel) 52%,transparent);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);}
.house-shell-cellar .cellar-head,
.house-shell-cellar .cellar-composer{
  background:color-mix(in srgb,var(--panel) 46%,transparent);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);}
/* every spoken line gets its own pane. `.cellar-them` carries no background
   of its own — correct on a flat room, unreadable over a photograph — so on
   the glass it becomes a card like the player's, and the two read as a pair
   instead of one bubble and one line of floating text. */
.house-shell-cellar .cellar-them{
  padding:12px 15px; border-radius:15px 15px 15px 5px;
  border:var(--bd) solid var(--edge);
  background:color-mix(in srgb,var(--panel) 62%,transparent);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);}
.house-shell-cellar .cellar-you{
  background:color-mix(in srgb,var(--panel) 68%,transparent);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);}
/* the ember is painted ON the room root, and over a photograph it reads as a
   stain rather than a light. The wall is the light now. */
.house-shell-cellar .cellar-room{background:none;}
.cellar-hear{display:flex; align-items:center; justify-content:center; flex:none;
  width:23px; height:23px; border-radius:var(--r-round);
  border:var(--bd) solid var(--edge); color:var(--muted);}
/* the read matches the Lounge upstairs now (Mark, 2026-08-16): the house
   face, the Lounge's leading — the serif register retired */
.cellar-read{font-size:var(--t-lead); line-height:1.5;
  color:var(--ink); white-space:pre-wrap;}
.cellar-composer{display:flex; align-items:center; gap:8px; padding:7px 7px 7px 15px;
  border:var(--bd) solid var(--edge); border-radius:var(--r-lg); background:var(--panel);
  box-shadow:0 14px 30px var(--shad);}
.cellar-composer-input{font-size:var(--t-lead); padding:6px 0;}
.cellar-icon{display:flex; align-items:center; justify-content:center; flex:none;
  width:34px; height:34px; border-radius:var(--r-round);
  border:var(--bd) solid var(--edge); color:var(--muted);}
.cellar-icon-on{border-color:var(--accent); color:var(--accent);}
.cellar-icon-live{border-color:var(--accent); background:var(--sel); color:var(--accent);
  animation:pulse 1.4s ease-in-out infinite;}
.cellar-icon-rec{border-color:var(--accent); color:var(--accent);
  animation:pulse 1.1s ease-in-out infinite;}
.cellar-send{display:flex; align-items:center; justify-content:center; flex:none;
  width:34px; height:34px; border-radius:var(--r-round);
  background:var(--accent); color:var(--onAccent);}
.cellar-send[disabled]{opacity:.5;}
.cellar-feed{display:flex; flex-direction:column; gap:24px; padding-bottom:40px;}
.cellar-empty{padding:26px 18px; border:var(--bd) dashed var(--edge); border-radius:var(--r-lg);
  text-align:center; display:flex; flex-direction:column; gap:7px;}
.cellar-empty-title{font-size:var(--t-lead); font-weight:var(--w-semi);}
.cellar-empty-note{font-size:var(--t-small); line-height:1.55; color:var(--muted);
  max-width:46ch; margin:0 auto;}

/* slice three: the panels and the peek. The four benches' rules stood here
   and went out with the benches (Story System/THE-CELLAR.md §7 v2) — every
   one of them was drawn by markup that no longer exists, and a stylesheet
   that keeps rules for a deleted room is where the deleted room creeps back.
   Sizes off the glass. The room wrapper fades in; name it under update or
   every keystroke re-runs the animation. 0 30px 80px stays literal. */
[data-render-phase="update"] .cellar-room{animation:none!important;}
/* the ember: a subtle maroon washing the WHOLE centre canvas, one diagonal
   sweep from the upper left down toward the lower right (Mark, 2026-08-16
   — painted on the room root, which always fills the canvas, never on the
   conversation column, which is only as tall as its talk). */
.cellar-room{display:flex; flex-direction:column; gap:20px; padding:8px 18px 0;
  animation:fadeUp .35s ease both; min-height:100%;
  background:linear-gradient(135deg, var(--cellar-ember), transparent 62%);}

/* ---------- the right panel: Cast · Crew · Lab ----------
   Story System/THE-CELLAR.md §7 v2, and the law the whole sheet obeys: TABS
   PICK, THE STAGE SHOWS. What stands in here is rows — a face, a name, a
   line, at most one checkbox — so nothing in this panel needs the width a
   scene needs, and nothing in it can overlap when the panel is dragged
   narrow. Every minimum is 0 and every line ellipses. */
.cellar-panel{flex:1; min-height:0; overflow:auto; padding:0 10px 12px;
  display:flex; flex-direction:column; gap:12px;}
.cellar-panel-body{display:flex; flex-direction:column; gap:9px; min-width:0;}
/* the quiet utility at the foot: the room's, not the reader's */
.cellar-toolbox-utils{margin-top:auto; padding-top:10px; display:flex; gap:8px;
  flex-wrap:wrap; border-top:var(--bd) solid var(--edge);}
.cellar-util{padding:7px 11px; border-radius:var(--r-sm); border:var(--bd) dashed var(--edge);
  background:transparent; color:var(--muted); font-size:var(--t-label);}
.cellar-util-lit{border-style:solid; color:var(--accent);}
.cellar-face-img{width:100%; height:100%; object-fit:cover; display:block;}
/* THE STRIP (Mark, 2026-08-19), the Lounge's own under the frame: five at
   most, newest first, the held one ringed. 54px is the size of a thumb, not
   a step of a scale. */
/* the gallery scrolls rather than pushing the chips and the admin door off
   the bottom of the panel. 168px is three rows of thumbs plus their gaps —
   a size, not a step of a scale. */
.cellar-thumbs{display:flex; gap:6px; flex-wrap:wrap; max-height:168px; overflow-y:auto;
  overscroll-behavior:contain; scrollbar-gutter:stable;}
.cellar-thumb{width:54px; height:54px; flex:none; padding:0; overflow:hidden;
  border-radius:var(--r-sm); border:var(--bd) solid var(--edge); background:var(--panel);}
.cellar-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.cellar-thumb-on{border-color:var(--accent);}
/* the X rides the corner of a thumb and only shows on hover or focus, so the
   gallery reads as pictures rather than as a row of delete buttons */
.cellar-thumb-wrap{position:relative; display:inline-flex; flex:none;}
.cellar-thumb-x{position:absolute; top:-5px; right:-5px; width:17px; height:17px;
  border-radius:var(--r-round); border:var(--bd) solid var(--edge);
  background:var(--panel); color:var(--muted); font-size:var(--t-tiny); line-height:1;
  display:grid; place-items:center; opacity:0; transition:opacity .12s ease;}
.cellar-thumb-wrap:hover .cellar-thumb-x,.cellar-thumb-x:focus{opacity:1;}
.cellar-thumb-x:hover{color:var(--accent); border-color:var(--accent);}
.cellar-gallery-foot{display:flex; gap:8px; flex-wrap:wrap;}
/* the whole panel is the drop target; the ring only appears while a file is
   actually over it */
[data-drop="cellar"]{border-radius:var(--r-lg);}
[data-drop="cellar"][data-dropping]{outline:2px dashed var(--accent); outline-offset:6px;}
/* the brush sits under the two verbs, at the left, where he asked for it */
.cellar-brush-row{display:flex;}
.cellar-brush{padding:5px 10px; border-radius:var(--r-sm); border:var(--bd) dashed var(--edge);
  background:transparent; color:var(--muted); font-size:var(--t-label);}
.cellar-brush:hover{border-style:solid; color:var(--accent); border-color:var(--accent);}
/* THE LIGHT (Mark, 2026-08-19). One property, worn on the document by the
   renderer, read by the two places the same picture appears — the panel's
   still and the wall behind the room — so the preview can never disagree
   with what you are reading over. */
.cellar-still-img{filter:brightness(var(--wall-light,1));}
.house-shell-cellar [data-lz="wall"] img{filter:brightness(var(--wall-light,1));}
/* minimal on purpose: no numbers, no label, no gradient. A dark-to-bright
   ramp would need two raw colours, and a colour belongs in a theme block —
   the ratchet said so and it was right. The thumb's position is the reading. */
.cellar-light{display:flex; align-items:center; width:100%;}
.cellar-light-range{width:100%; height:18px; background:transparent; appearance:none; -webkit-appearance:none;}
.cellar-light-range::-webkit-slider-runnable-track{height:3px; border-radius:2px;
  background:var(--edge);}
.cellar-light-range::-moz-range-track{height:3px; border-radius:2px;
  background:var(--edge);}
.cellar-light-range::-webkit-slider-thumb{appearance:none; -webkit-appearance:none;
  width:12px; height:12px; margin-top:-4.5px; border-radius:var(--r-round);
  background:var(--accent); border:var(--bd) solid var(--panel);}
.cellar-light-range::-moz-range-thumb{width:12px; height:12px; border-radius:var(--r-round);
  background:var(--accent); border:var(--bd) solid var(--panel);}

/* ---------- a character row ----------
   The Your Assistants pattern: face, name, one role line, and — on the Crew
   page — the checkbox that IS presence. The row itself opens the editor. */
.cast-group{display:flex; flex-direction:column; gap:8px;}
/* the group head folds its rows (Mark, 2026-08-19): the whole line is the
   button, the chevron points right folded and down open */
.cast-group-head{display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:2px 0; background:transparent; border:none; text-align:left; color:var(--muted);}
.cast-chev{flex:none; transition:transform .15s ease;}
.cast-chev-open{transform:rotate(90deg);}
.cast-group-note{font-size:var(--t-small); line-height:var(--lh-body); color:var(--muted);
  margin-bottom:2px;}
.cast-note{font-size:var(--t-small); line-height:var(--lh-body); color:var(--ink2); max-width:66ch;}
.cast-empty{font-size:var(--t-label); color:var(--muted); padding:6px 2px;}
.cast-row{display:flex; align-items:center; gap:10px; padding:8px 10px; min-width:0;
  border:var(--bd) solid var(--edge); border-radius:var(--r-lg); background:var(--inset);
  text-align:left; width:100%;}
.cast-row-on{border-color:var(--accent); background:var(--sel);}
.cast-row-new{border-style:dashed; background:transparent;}
.cast-row-new:hover{border-color:var(--accent);}
/* Presence, quietly (Mark, 2026-08-19: the big bulking checkboxes need to be
   more elegant, and "they don't need checks, that is redundant"). A small
   round mark rather than a heavy square box, and no tick inside it: hollow
   and nearly invisible is on the bench, filled accent is in the room. 16px
   is the size of a mark, not a step of a scale. */
.cast-check{width:16px; height:16px; flex:none; border-radius:var(--r-round);
  border:1px solid var(--ink5); background:transparent; padding:0;
  transition:border-color .12s ease, background .12s ease;}
.cast-row:hover .cast-check{border-color:var(--muted);}
.cast-check-on,.cast-row:hover .cast-check-on{border-color:var(--accent); background:var(--accent);}
.cast-open{display:flex; align-items:center; gap:10px; flex:1; min-width:0;
  background:transparent; padding:0; text-align:left;}
.cast-face{width:34px; height:34px; flex:none; border-radius:var(--r-round); overflow:hidden;
  border:var(--bd) solid var(--edge); display:grid; place-items:center;
  font-size:var(--t-small); font-weight:var(--w-semi); color:var(--muted);}
.cast-face img{width:100%; height:100%; object-fit:cover; display:block;}
.cast-face-narr{border-style:dashed;}
.cast-face-plus{border-style:dashed; font-size:var(--t-lead); font-weight:var(--w-med);}
/* flex:1 (2026-08-23, M-5): without it this box sizes to its own text and a
   trailing .cast-away pill packs immediately after wherever the name/role
   happens to end — ragged, a different column on every row. Growing this
   box to fill the row gives .cast-away (flex:none, its own padding) a real,
   uniform right edge for free. Shared, unscoped, across cellar-lab.js,
   cellar-panel.js, forge-cast.js and studio.js — checked all four for a
   dependency on content-width and found none. */
.cast-lines{min-width:0; flex:1; display:flex; flex-direction:column; gap:2px;}
.cast-name{font-size:var(--t-body); font-weight:var(--w-semi);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cast-role{font-size:var(--t-label); color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cast-seat-note{margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* .cast-speaking left with the roster's floor report (Mark, 2026-08-19), and
   the narrator's HERE/AWAY pill went with its presence mark. .cast-away stays:
   the Lab's CHANGE button wears it. */
.cast-away{flex:none; padding:5px 9px; border-radius:var(--r-pill);
  border:var(--bd) solid var(--edge); color:var(--muted);
  font-size:var(--t-tiny); font-weight:var(--w-semi);}
/* A CUT, ON THE ROW (M-6, 2026-08-23: Mark is looking at five wrong rows at
   once and wants them gone without a journey through each one's own study).
   Trailing, and quiet until the row is actually looked at — most rows are
   never pressed, so the × stays out of the way rather than reading as a
   warning on every single one. 22px is the size of this control, not a
   step of a scale. */
.cast-cut{flex:none; width:22px; height:22px; display:grid; place-items:center;
  border-radius:var(--r-round); border:1px solid transparent; background:transparent;
  color:var(--muted); font-size:var(--t-small); line-height:1; opacity:0;
  transition:opacity .12s ease, color .12s ease, border-color .12s ease, background .12s ease;}
.cast-row:hover .cast-cut,.cast-cut:focus{opacity:1;}
.cast-cut:hover{color:var(--accent); border-color:var(--edge); background:var(--sel);}

/* ---------- the Lab: the audition (Story System/THE-CELLAR.md §8) ----------
   The tasting and the twin test in one shape: a turn is the prompt with every
   candidate's answer to it under it, in a grid that is genuinely SIDE BY SIDE
   the moment the panel is dragged past about two columns' worth, and stacks
   in the same fixed order when it is not. The order never changes between
   turns — reading the third answer against the third answer is the exercise,
   and a grid that reshuffles is not a comparison. */
.lab-field{display:flex; flex-direction:column; gap:6px; min-width:0;}
.lab-note{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lab-thread{display:flex; flex-direction:column; gap:14px; min-width:0;}
.lab-round{display:flex; flex-direction:column; gap:8px; min-width:0;}
.lab-prompt{display:flex; flex-direction:column; gap:4px; padding:9px 11px;
  border:var(--bd) solid var(--edge); border-left:2px solid var(--accent);
  border-radius:5px 12px 12px 5px; background:var(--panel);
  font-size:var(--t-small); line-height:1.5;}
.lab-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:9px;}
.lab-take{display:flex; flex-direction:column; gap:5px; min-width:0; padding:10px 11px;
  border:var(--bd) solid var(--edge); border-radius:var(--r-md); background:var(--inset);}
.lab-take-won{border-color:var(--accent);}
.lab-take-head{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.lab-take-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lab-read{font-size:var(--t-small); line-height:1.6;
  color:var(--ink2); white-space:pre-wrap;}
.lab-foot{display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  padding-top:8px; border-top:var(--bd) solid var(--edge);}

/* ---------- the left panel's Cellar tab: all the image work ----------
   Two verbs, the still they make, the chips that aim them, and the door to
   the machinery. Nothing here is on the stage or in the right panel. */
.cellar-images{display:flex; flex-direction:column; gap:12px; min-width:0;}
.cellar-img-block{display:flex; flex-direction:column; gap:6px; min-width:0;}
.cellar-img-empty{padding:12px; border:var(--bd) dashed var(--edge); border-radius:var(--r-md);
  font-size:var(--t-label); line-height:var(--lh-body); color:var(--muted);}
.cellar-img-foot{padding-top:8px; border-top:var(--bd) solid var(--edge); display:flex;}
.cellar-paint-btn{flex:1; min-width:0; padding:9px 12px; border-radius:var(--r-md);
  border:var(--bd) solid var(--edge); background:transparent; color:var(--muted);
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:var(--t-label);
  letter-spacing:.1em;}
.cellar-paint-btn:hover{border-color:var(--accent); color:var(--accent);}
.cellar-paint-btn-busy{color:var(--accent); animation:pulse 1.1s ease-in-out infinite;}
.cellar-paint-btn-off{opacity:.45;}
.cellar-wrap-6{display:flex; flex-wrap:wrap; gap:6px;}

.cellar-pill{padding:5px 10px; border-radius:var(--r-pill);
  font-size:var(--t-tiny); font-weight:var(--w-semi);}
.cellar-pill-13{padding:8px 13px; border-radius:var(--r-pill);
  font-size:var(--t-tiny); font-weight:var(--w-semi);}
.cellar-pick{padding:9px 11px; border-radius:var(--r-md); border:var(--bd) solid var(--edge);
  background:var(--panel); color:var(--text); font-size:var(--t-small);}
.cellar-pick-inset{padding:10px 12px; border-radius:var(--r-md); border:var(--bd) solid var(--edge);
  background:var(--inset); color:var(--text); font-size:var(--t-small);}
.cellar-still{border:var(--bd) solid var(--edge); border-radius:var(--r-lg); overflow:hidden;}
.cellar-still-img{display:block; width:100%; height:auto;}
.cellar-peek-col{display:flex; flex-direction:column; gap:9px;}
.cellar-peek-body{line-height:1.7; white-space:pre-wrap; padding:11px 13px;
  border:var(--bd) solid var(--edge); border-radius:var(--r-lg); background:var(--inset);}
.cellar-peek-line{line-height:1.65; white-space:pre-wrap;}
.cellar-read-n{font-style:italic; color:var(--ink2);}

.cellar-dot{display:flex; align-items:center; justify-content:center; flex:none;
  border-radius:var(--r-round); border:var(--bd) solid var(--edge); color:var(--muted);}
.cellar-dot-22{width:22px; height:22px;}

.cellar-box{display:flex; align-items:center; gap:8px; padding:6px 6px 6px 14px;
  border:var(--bd) solid var(--edge); border-radius:var(--r-lg); background:var(--inset);}

.cellar-peek-scrim{position:fixed; inset:0; z-index:86; display:flex; align-items:center;
  justify-content:center; padding:16px; pointer-events:none;}
.cellar-peek-scrim>*{pointer-events:auto;}
.cellar-peek{width:100%; max-width:720px; max-height:88vh; overflow-y:auto; display:flex;
  flex-direction:column; gap:16px; padding:20px; border:var(--bd) solid var(--edge);
  border-radius:var(--r-xl); background:var(--panel); box-shadow:0 30px 80px var(--shad);}
.cellar-peek-head{display:flex; align-items:center; justify-content:space-between;}
.cellar-peek-title{font-size:var(--t-sub); font-weight:var(--w-semi);}
.cellar-peek-x{width:30px; height:30px; border-radius:var(--r-sm);
  border:var(--bd) solid var(--edge); color:var(--muted);}
.cellar-msg{padding:9px 12px; border:var(--bd) solid var(--edge); border-radius:var(--r-md);
  background:transparent;}
.cellar-msg-user{background:var(--inset);}

/* ---------- the Cellar's four sheets ----------
   Modes, the scoreboard, the voice and the brief. public/rooms/modals/cellar.js
   draws them. The room itself is still inline and joins this sheet later.

   59 style attributes to zero. The classes are named after the 24 property
   sets the survey found, not after a design idea.

   SIZES READ OFF THE GLASS. The bridge at the foot of components.css moves
   most of what these sheets typed:

     written 22    -> 22  --t-head       written 13.5 -> 14  --t-small
     written 16    -> 16  --t-lead       written 12.5 -> 13  --t-tiny
     written 14.5  -> 15  --t-body       mono 7.5-9   -> 11  --t-label

   Corners the same way: written 20 is --r-xl (18), 14 and 13 are --r-lg,
   12 is --r-md, 9 is --r-sm, 100px is --r-pill.

   ONE LETTERSPACING SNAP: the four titles' -.02em to --ls-head. The two
   -.012em sites on a 16px line stay — a hair of tracking is not a heading.

   Spacing is not swept. The 0 30px 80px shadow stays literal: it is the
   deepest thing in the app and matches no step. */

[data-render-phase="update"] .cellar-mod-scrim{animation:none!important;}

/* own scrim: z-index 84 under the house dialog's 95, padding 16 not --s7 */
.cellar-mod-scrim{position:fixed; inset:0; z-index:84; display:flex; align-items:center;
  justify-content:center; padding:16px; pointer-events:none;
  animation:fadeUp .25s ease both;}
.cellar-mod-scrim>*{pointer-events:auto;}
.cellar-mod{width:100%; max-height:92vh; overflow-y:auto; display:flex;
  flex-direction:column; padding:20px; border:var(--bd) solid var(--edge);
  border-radius:var(--r-xl); background:var(--panel); box-shadow:0 30px 80px var(--shad);}
.cellar-mod-score{max-width:600px; gap:13px;}
.cellar-mod-wide{max-width:660px; gap:13px;}

.cellar-mod-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.cellar-mod-kicker{display:flex; flex-direction:column; gap:2px;}
.cellar-mod-title{font-size:var(--t-head); font-weight:var(--w-semi); letter-spacing:var(--ls-head);}
.cellar-mod-x{display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex:none; border-radius:var(--r-sm);
  border:var(--bd) solid var(--edge); color:var(--muted);}

.cellar-mod-on{color:var(--accent);}

/* scoreboard */
.cellar-mod-pick{display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:13px 14px; border:var(--bd) solid var(--edge); background:var(--inset);
  border-radius:var(--r-lg); text-align:left; width:100%;}
.cellar-mod-pick-on{border-color:var(--accent); background:var(--sel);}
.cellar-mod-pick-body{display:flex; flex-direction:column; gap:3px; min-width:0;}
.cellar-mod-pick-name{font-size:var(--t-body); font-weight:var(--w-semi);}

/* voice */
.cellar-mod-row-wrap{display:flex; flex-wrap:wrap; align-items:center; gap:5px;}
.cellar-mod-voices{display:flex; flex-wrap:wrap; gap:5px;}
.cellar-mod-voice{display:inline-flex; align-items:center; gap:5px; padding:7px 12px;
  border-radius:var(--r-pill); font-size:var(--t-tiny); font-weight:var(--w-semi);}
.cellar-mod-dials{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px;}
.cellar-mod-dial{display:flex; align-items:center; gap:9px;}
.cellar-mod-range{width:130px; accent-color:var(--accent);}
.cellar-mod-play{display:flex; align-items:center; gap:8px; padding:9px 15px;
  border-radius:var(--r-pill); border:var(--bd) solid var(--accent); color:var(--accent);}

/* brief */
.cellar-mod-actions{display:flex; align-items:center; gap:10px;}
.cellar-mod-stack{display:flex; flex-direction:column; gap:12px;}
.cellar-mod-field{display:flex; flex-direction:column; gap:6px;}
.cellar-mod-field-head{display:flex; align-items:baseline; justify-content:space-between;}
.cellar-mod-pair{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px;}
.cellar-mod-ta{width:100%; resize:vertical; padding:12px 14px; border:var(--bd) solid var(--edge);
  border-radius:var(--r-md); background:var(--inset); color:var(--ink2);
  font-size:var(--t-small); line-height:1.55;}
.cellar-mod-ta-accent{border-color:var(--accent);}

/* ---------- the Director's desk (rooms/cellar-desk.js) ----------
   The brief as a stage surface: scenario tabs, the card's fields, the
   chairs. Reuses the retired brief modal's field kit above. */
.cellar-desk{display:flex; flex-direction:column; gap:14px; min-height:0; overflow-y:auto; padding-bottom:24px;}
.cellar-desk-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.cellar-desk-tools{display:flex; align-items:center; gap:8px;}
.desk-tabs{flex-wrap:wrap;}
.cellar-desk-row{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;}
.cellar-desk-grow{flex:1; min-width:220px;}
.desk-chips{display:flex; gap:6px; flex-wrap:wrap;}
.cellar-desk-name{width:100%; padding:10px 14px; border:var(--bd) solid var(--edge);
  border-radius:var(--r-md); background:var(--inset); color:var(--ink2);
  font-size:var(--t-small);}
.cellar-desk-house{align-self:flex-start;}
.cellar-desk-chairs{display:flex; flex-direction:column; gap:10px;
  border-top:var(--bd) solid var(--edge); padding-top:12px;}
.cellar-desk-hand{display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left;}

/* ---------- THE CAPTURE (rooms/modals/capture.js) ----------
   Story System/THE-CAPTURE.md. The cut room: the menu, the rewrite, the three
   doors out. It lives in this sheet rather than components.css because it has
   exactly one caller and that caller is the Cellar; the picture window is in
   components.css for the opposite reason, three rooms open it.

   The scrim paints NOTHING and passes pointers through, so the room stays live
   behind an open cut room. The window catches its own. That is the modal law
   (CLAUDE.md), and the shape is the picture window's, borrowed rather than
   reinvented. */
.cap-scrim{position:fixed; inset:0; z-index:89; display:flex; align-items:center;
  justify-content:center; padding:16px; pointer-events:none; animation:fadeUp .25s ease both;}
/* the entrance plays once: the renderer rebuilds the tree on every state
   write, and an ungated entrance strobes under the hand */
[data-render-phase="update"] .cap-scrim{animation:none!important;}
.cap-scrim>*{pointer-events:auto;}
.cap{width:min(94vw,680px); max-height:92vh; overflow-y:auto; gap:var(--s5);}
.cap-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;}
.cap-label{display:flex; flex-direction:column; gap:var(--s1); min-width:0;}
.cap-title{font-size:var(--t-title); font-weight:var(--w-semi);
  letter-spacing:var(--ls-head); margin-top:4px;}
.cap-x{font-size:var(--t-sub); line-height:1;}

/* THE CUT MENU. A label column and a chip row, one row per choice, so the
   choices read as a list of decisions rather than a wall of pills. */
.cap-menu{display:flex; flex-direction:column; gap:var(--s4);}
.cap-row{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.cap-row-label{width:78px; flex:none; padding-top:5px;}
.cap-chips{display:flex; gap:6px; flex-wrap:wrap; flex:1; min-width:0;}
.cap-run{display:flex; flex-direction:column; gap:var(--s2); align-items:flex-start;
  border-top:var(--bd) solid var(--edge); padding-top:var(--s5);}

/* THE RESULT is read, not edited: this window shows what the novelist wrote
   and the writing room is where it is changed. The reading measure is capped
   the way the notes are, because prose set to the full width of a window is
   prose nobody finishes. */
.cap-result{display:flex; flex-direction:column; gap:var(--s4);}
.cap-read{white-space:pre-wrap; font-size:var(--t-body); line-height:var(--lh-read);
  color:var(--ink2); max-width:66ch; max-height:46vh; overflow-y:auto;
  padding:var(--s5); border:var(--bd) solid var(--edge); border-radius:var(--r-md);
  background:var(--inset);}
.cap-acts{display:flex; gap:8px; flex-wrap:wrap; border-top:var(--bd) solid var(--edge);
  padding-top:var(--s4);}
.cap-landing{display:flex; flex-direction:column; gap:var(--s3);}
.cap-projects{display:flex; flex-direction:column; gap:6px; align-items:flex-start;}
.cap-project{text-align:left;}
.cap-landed{color:var(--accent);}
.cap-err{padding:9px 12px; border:var(--bd) solid var(--danger); border-radius:var(--r-md);
  color:var(--danger); font-size:var(--t-small); line-height:var(--lh-body);}