/* ---------- the house shell, split out of components.css ----------
   Lifted whole (2026-08-23): components.css crossed the 800-line pin-or-fail
   ratchet (tools/factor.mjs) and this band — icon rail, banner, the optional
   left/right panels, the canvas header and stage, the resize grips, the
   narrow-viewport stack — was the seam that let it split clean. One feature,
   one sheet, the rule this app already applies everywhere else (glass.css's
   own split off this same file is the precedent).

   NOTHING MOVED IN MEANING: every rule below is byte-for-byte what stood at
   components.css lines 115-298, in the same order, cut and pasted rather
   than rewritten. Every other sheet's own `.house-*` rules reach these as
   compound descendant selectors (`.house-shell-wall .house-stage` and the
   like), which win on specificity rather than on which sheet loaded first —
   so moving this band changes nothing about which rule wins where. The two
   pairs in this app that ARE load-order-dependent, `.chip`/`.chip-on` and
   `.monotype`/`.monotype-N`, both sit elsewhere in components.css and do not
   move with this cut.

   Loaded in index.html immediately after components.css's own <link>, so it
   keeps the exact cascade position this band always held — anything that
   assumed "the house shell rules land where components.css's own middle
   used to be" still finds them in the same place in the loaded order. */

/* ---------- the house shell ----------
   Icon rail, optional sides, sliders, docks on the center. Widths ride
   --house-lw / --house-rw as data (the --artw pattern). */
.house-shell{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;min-height:0;}
.house-banner{height:48px;flex:none;background:var(--panel);border-bottom:var(--bd) solid var(--edge);
  display:flex;align-items:center;gap:6px;padding:0 14px;}
/* A button since 2026-08-22 (the wordmark walks home), so the element's own
   chrome is zeroed and the face stays exactly what it was. */
.house-brand{font-family:var(--font-trajan);font-size:var(--t-lead);font-weight:var(--w-semi);
  letter-spacing:.04em;color:var(--text);background:none;border:0;padding:0;cursor:pointer;}
.house-banner-sp{flex:1;}
.house-chrome-btn{width:34px;height:34px;border-radius:var(--r-round);display:grid;place-items:center;
  color:var(--muted);background:transparent;}
.house-chrome-btn:hover{background:var(--sel);color:var(--text);}
/* THE CREDIT LINE (docs/BETA-DOOR.md, ruling 3, Lane 4). The house body face at
   a house size, muted like the chrome beside it, and the press is a quiet
   outline rather than a filled blue pill: a person should read the number, not
   be sold to by it. Both sizes come off the --t-* scale, nowhere else. */
.house-credit{font-size:var(--t-small);color:var(--muted);white-space:nowrap;}
.house-credit-buy{font-size:var(--t-small);color:var(--muted);background:transparent;
  border:var(--bd) solid var(--edge);border-radius:var(--r-sm);padding:2px 8px;margin-left:6px;cursor:pointer;}
.house-credit-buy:hover{background:var(--sel);color:var(--text);}
.house-shell-show .house-show{position:absolute;inset:0;z-index:0;}
.house-shell-show .house-banner,.house-shell-show .house{position:relative;z-index:1;}
.house-shell-show .house,.house-shell-show .house-main,.house-shell-show .house-stage{background:transparent;}
/* THE GLASS THICKNESS (Mark, 2026-08-23: "the sides need to match the
   middle with one adjustment for all"). One dial, --wall-mix, and every
   pane below reads it instead of its own number — retires the split this
   block used to carry (banner/left/right at 62, the rail at 70, the
   canvas header at 62, the stage at 68 here and 42 in glass.css). The rail
   alone keeps an OFFSET rather than the bare value (Mark's ruling): it
   mixes --chrome, a different base colour than the panels' --panel, and
   changing that RELATIONSHIP is a look he did not ask for — the dial
   should move it exactly the way it moves everything else, not flatten it
   to match. 62 default + 8 is the relationship today, preserved as a calc. */
.house-shell-show .house-banner,.house-shell-show .house-left,.house-shell-show .house-right{
  background:color-mix(in srgb,var(--panel) var(--wall-mix,62%),transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.house-shell-show .house-rail{
  background:color-mix(in srgb,var(--chrome) calc(var(--wall-mix,62%) + 8%),transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.house-shell-show .house-canvas-header{
  background:color-mix(in srgb,var(--panel) var(--wall-mix,62%),transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.house-shell-show [data-lz="wall"]{position:absolute;inset:0;z-index:0;opacity:1;pointer-events:none;}
.house-shell-show [data-lz="wall"] img{width:100%;height:100%;object-fit:cover;}
/* THE ADJACENT BLUR GAP (found in the same study, fixed in the same pass):
   this rule's blur was hardcoded at 20px while its wall-gated sibling in
   glass.css already read the slider, so a played scene or the Cellar's own
   wall never felt the canvas-blur control at all. Wired to var(--wall-blur)
   now, matching the room it should have matched from the day the slider
   shipped. */
.house-shell-lounge .house-main,.house-shell-lounge .house-stage{
  background:color-mix(in srgb,var(--panel) var(--wall-mix,62%),transparent);backdrop-filter:blur(var(--wall-blur,12px));-webkit-backdrop-filter:blur(var(--wall-blur,12px));}
.house{--house-lw:220px;--house-rw:200px;--house-head:48px;--house-row:40px;--house-seat:48px;
  display:flex;flex:1;min-height:0;background:var(--bg);}
.house-rail{width:56px;flex:none;display:flex;flex-direction:column;align-items:center;
  gap:0;padding:0 0 12px;background:var(--chrome);border-right:var(--bd) solid var(--edge);}
/* 8 tab-track margin + 40 track + 8 margin + 10 list top padding: the first
   rail icon sits level with the first menu row, and both rows are 40px. */
.house-rail-head{height:66px;flex:none;}
/* --house-seat is the height of a menu row AND of its rail icon, one number
   in two places so the two columns stay level (Mark, 2026-09-03). */
.house-ico{width:40px;height:var(--house-seat);border-radius:10px;color:var(--muted);display:grid;place-items:center;}
.house-ico.on{background:var(--sel);color:var(--accent);}
.house-rail-sp{flex:1;}
/* the unseen twin of a menu heading: same class for the same height, no
   width so it never widens the rail, and hidden rather than empty so the
   font still sets the line. */
.house-rail-gap{visibility:hidden;width:0;margin-left:0;margin-right:0;overflow:hidden;white-space:nowrap;}
.house-group.house-rail-gap-first{margin-top:0;} /* outranks .house-group, which is declared later */
.house-you-dot{width:30px;height:30px;border-radius:var(--r-round);background:var(--text);border:2px solid var(--accent);display:block;}
/* the monogram: the same disc, now with a letter in it (Mark, 2026-08-19) */
.house-you-mono{display:grid;place-items:center;color:var(--bg);
  font-size:var(--t-small);font-weight:var(--w-bold);line-height:1;}
.house-you-rail{padding:0;background:transparent;}
.house-left{width:var(--house-lw);flex:none;display:flex;flex-direction:column;min-width:0;
  background:var(--panel);border-right:var(--bd) solid var(--edge);}
/* The segmented control (Mark, 2026-08-15: "match that apple style"):
   the tab row IS the track — a full pill of chrome — and the selected
   segment is a raised pill inside it. One segment still reads as a
   labeled track, not a lonely button. */
/* ---------- THE PANEL EDGE, DECLARED ONCE ----------
   Mark, 2026-08-31, asked for Ann's padding to be standardized "across all
   panels", and the tab row is where the column's left edge is actually set:
   everything below it either lines up with this margin or visibly does not.
   --panel-pad is that edge, and the panel bodies under it read the variable
   instead of restating a number that drifted to 14 in one of them. */
.house{--panel-pad:var(--s4);}
.house-tabs{display:flex;align-items:center;gap:0;flex:none;margin:var(--s3) var(--panel-pad);padding:3px;
  background:var(--chrome);border:var(--bd) solid var(--edge);border-radius:999px;}
/* Both segments carry the same weight (Mark, 2026-08-15) — the pill and the
   colour say which is on, never the boldness. line-height 20 pins the track
   at 40px, which the rail-head offset above counts on. The off segment reads
   ink4, a step lighter than muted, so on and off actually contrast (Mark,
   2026-08-15: "the inactive tab needs to be light grey"). */
.house-tab{flex:1;border:none;background:transparent;border-radius:999px;text-align:center;
  padding:6px 0;font-size:var(--t-small);line-height:20px;font-weight:var(--w-med);color:var(--ink4);}
.house-tab.on{background:var(--sel);color:var(--text);}
/* Four segments in a side panel is more track than label. The names are the
   canon's and they do not abbreviate, so the quad track drops a step and
   lets a long one wrap rather than clipping it. */
.house-tabs-quad{margin:0 10px 8px;}
.house-tabs-quad .house-tab{padding:5px 4px;font-size:var(--t-label);line-height:1.25;
  white-space:normal;min-width:0;}
/* Three one-word names (Cast · Crew · Lab, Story System/THE-CELLAR.md §7)
   fit the full step; only the min-width comes off, so a narrow panel
   squeezes the track instead of pushing the panel sideways. */
.house-tabs-trio .house-tab{min-width:0;}
.house-list{padding:10px 10px 14px;display:flex;flex-direction:column;gap:0;flex:1;min-height:0;overflow:auto;}
/* the grouped menu's kickers — the Pathary kicker voice, our grouping.
   A step up from the 11px kicker, and the rows under one sit tighter
   than the house row (Mark, 2026-08-15). */
.house-group{margin:20px var(--panel-pad) 5px;font-size:var(--t-tiny);font-weight:var(--w-bold);
  letter-spacing:.5px;text-transform:uppercase;color:var(--muted);}
.house-group:first-child{margin-top:0;}
/* THE ADMIN FOLD: the heading is a press, the chevron says which way it is
   (Mark, 2026-09-02). Same face and colour as the plain heading so a folding
   group and a fixed one read as one list. */
.house-group-fold{display:flex;align-items:center;gap:6px;width:auto;padding:0;border:0;background:none;
  cursor:pointer;font:inherit;font-size:var(--t-tiny);font-weight:var(--w-bold);letter-spacing:.5px;text-transform:uppercase;color:var(--muted);}
.house-group-fold:hover{color:var(--ink);}
.house-group-chevron{display:inline-flex;transition:transform .15s ease;}
.house-group-chevron-open{transform:rotate(180deg);}
/* every row is one seat tall (--house-seat), tag or no tag, so the rail's
   icons land level with them (Mark, 2026-09-03). */
.house-list .house-row{height:var(--house-seat);}
/* a bare landing: the title stands in the middle of the stage */
.landing{min-height:60vh;display:flex;align-items:center;justify-content:center;}
.landing-title{font-size:var(--t-room);font-weight:var(--w-bold);letter-spacing:var(--ls-head);}
/* World Forge is a landing() room with people under it now (Mark,
   2026-09-02), so its title sits at the top of the stage, not centered in
   60vh of empty space; the note follows it, then the people. */
.forge-world .landing{min-height:0;display:block;padding:var(--s6) 0 0;}
.forge-world-note{max-width:60ch;margin:10px 0 var(--s6);}
.house-lounge{flex:1;min-height:0;overflow:auto;padding:var(--s3) var(--panel-pad) var(--s5);}
.house-lounge .scene-art{position:relative;top:auto;}
.house-lounge [data-lz="artcard"]{aspect-ratio:3/4;}
.house-row{flex:none;height:var(--house-seat);padding:0 var(--panel-pad);border-radius:10px;font-size:var(--t-body);
  font-weight:var(--w-med);color:var(--text);text-align:left;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:1px;}
.house-row.on{background:var(--sel);}
.house-row.on .house-row-label{color:var(--accent);}
/* flex:none because the rows are children of a scrolling column and an
   explicit min-height throws away the content minimum, so a list taller than
   the panel shrank every row to 40px and clipped the tag. */
/* TAG LINES UNDER THE RAIL ROWS (Mark, 2026-09-03): the label keeps the
   row's own colour and the active tint; the tag is a second, smaller,
   muted line, one row, no wrap. */
.house-row-label{color:inherit;}
.house-row-tag{font-size:var(--t-tiny);font-weight:var(--w-med);color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
/* 14px until 2026-08-31, four wider than the tab row directly above it, so
   the Tool Box's contents stood inset from every other row in the column. */
.house-toolbox{flex:1;min-height:0;overflow:auto;padding:var(--s2) var(--panel-pad) var(--s6);
  display:flex;flex-direction:column;gap:var(--s3);}
.house-toolbox-note{font-size:var(--t-small);line-height:var(--lh-body);color:var(--muted);}
/* ---------- ANN'S PANEL: ONE INSET, AND EVERY ROW READS IT ----------
   Mark, 2026-08-31: "anns text box and other stuff does not have correct
   padding can we look at the css for her panel and standardize it across all
   panels."

   The panel's own left/right inset was written SEVEN times in two stylesheets
   with FIVE different values: the head at 10, the ask box and the control bar
   at 8, the log at 10 and again at 12 in the top variant, the note at 10, the
   empty state at 16. Nothing lined up down the left edge, and her box sat two
   pixels narrower than the face above it, which is what he was looking at.

   None of them were wrong on purpose. They were written at different times by
   whoever was in the file, each one reasonable alone, and a hardcoded pixel
   cannot be corrected in one move because there is no one place holding it.
   So there is one now. `--ann-pad` is the panel's edge and every row inside
   reads it; the value is --s4, the same 10px the tab row above the panel
   already sits on, so the whole right column shares one margin.

   THE VERTICAL RHYTHM IS --ann-gap, for the same reason: the gaps between the
   head, the box, the bar and the log were 6 and 8 in the same column.

   AND IT DERIVES FROM --panel-pad, the column's own edge declared on .house,
   so Ann is not a second opinion about where the panel wall is: move that one
   and her rows, the tab row, the menu and the Tool Box all move together. The
   fallback is there because the panel is drawn inside .house today and a
   variable with no source should still land on the house value rather than
   collapse to nothing.

   A ROW THAT WANTS A DIFFERENT INSET OVERRIDES THE VARIABLE, never the
   padding, or the drift starts again. */
.house-ann{--ann-pad:var(--panel-pad,var(--s4));--ann-gap:var(--s3);
  flex:1;min-height:0;margin:0 var(--s3) var(--s4);border:var(--bd) solid var(--edge);border-radius:14px;
  display:flex;flex-direction:column;overflow:hidden;}
.house-ann-head{display:flex;align-items:center;gap:var(--s3);padding:var(--ann-pad);}
.house-ann-face{width:36px;height:36px;border-radius:var(--r-round);object-fit:cover;flex:none;background:var(--sel);}
/* HER FACE IS THE DOOR TO HER CARD (Mark, 2026-08-31), so it wears the
   affordance the gear used to: a ring on hover, and a real focus ring for the
   keyboard. The button is only a frame around the portrait — no padding, no
   background — because what is pressed IS the picture, not a control with a
   picture in it. */
.house-ann-facebtn{flex:none;display:block;padding:0;border:0;background:none;
  border-radius:var(--r-round);cursor:pointer;line-height:0;}
.house-ann-facebtn .house-ann-face{transition:box-shadow .18s ease,opacity .18s ease;}
.house-ann-facebtn:hover .house-ann-face{box-shadow:0 0 0 2px var(--accent);opacity:.9;}
.house-ann-facebtn:focus{outline:none;}
.house-ann-facebtn:focus-visible .house-ann-face{box-shadow:0 0 0 2px var(--accent);}
.house-ann-init{display:grid;place-items:center;font-weight:var(--w-semi);color:var(--muted);}
.house-ann-who{min-width:0;}
.house-ann-name{font-size:var(--t-body);font-weight:var(--w-semi);}
.house-ann-role{font-size:var(--t-label);color:var(--muted);}
.house-ann-gear{margin-left:auto;flex:none;}
.house-ann-log{flex:1;min-height:0;overflow:auto;padding:0 var(--ann-pad) var(--ann-pad);
  display:flex;flex-direction:column;gap:var(--ann-gap);}
.house-ann-her{font-size:var(--t-small);line-height:1.45;}
/* Her paragraphs breathe (2026-08-25, "SHE NEEDS TO NOT TALK IN BLOCKS"):
   the bubble draws one div per paragraph now, and this is the air between
   them. Direct children only — the facts fold inside keeps its own layout. */
.house-ann-her>div+div{margin-top:.55em;}
.house-ann-her b{color:var(--accent);font-weight:var(--w-semi);}
/* ---------- WHAT MARKDOWN LOOKS LIKE IN A 200px PANEL ----------
   Her answers go through lib/markdown.js now, so the bubble can hold
   headings, lists, quotes and code where it used to hold paragraphs only.
   Everything here is sized to the thread rather than to the page: this is a
   side panel at --t-small, so a subhead is bold body text one step up and
   nothing in it is ever page-title sized. The first and last thing in a
   bubble lose their outer margin so the padding stays even. */
.house-ann-her>:first-child{margin-top:0;}
.house-ann-her>:last-child{margin-bottom:0;}
.house-ann-her p{margin:0 0 .55em;}
.house-ann-her h3,.house-ann-her h4{
  margin:.9em 0 .35em;font-size:var(--t-small);font-weight:var(--w-semi);
  color:var(--text);letter-spacing:0;line-height:1.35;}
.house-ann-her h4{color:var(--ink2);}
.house-ann-her ul,.house-ann-her ol{margin:0 0 .55em;padding-left:1.35em;}
.house-ann-her li{margin:0 0 .2em;}
.house-ann-her li>ul,.house-ann-her li>ol{margin:.2em 0 0;}
.house-ann-her strong{color:var(--text);font-weight:var(--w-semi);}
.house-ann-her blockquote{
  margin:0 0 .55em;padding:0 0 0 .7em;
  border-left:2px solid var(--edge);color:var(--muted);}
/* A LINK SHE WROTE LOOKS LIKE A LINK, so nobody presses one by accident and
   nobody misses one that matters. */
.house-ann-her a{color:var(--accent);text-decoration:underline;}
/* CODE IS THE ONE PLACE MONO TYPE BELONGS in this panel: it is content, not
   a label on an instrument, and the spacing is what makes it readable. */
.house-ann-her code{
  padding:1px 3px;border-radius:var(--r-sm);background:var(--inset);
  font-family:var(--font-mono);font-size:.92em;}
.house-ann-her pre{
  margin:0 0 .55em;padding:var(--s3) var(--s4);overflow-x:auto;
  border:var(--bd) solid var(--edge);border-radius:var(--r-md);background:var(--inset);}
.house-ann-her pre code{padding:0;background:none;line-height:var(--lh-body);}
/* SOMEBODY ELSE'S LINE IN HER THREAD: a crew seat, or a Council expert. It
   wears a face and a name where hers wears neither, because the moment a
   third voice is in the panel a reader needs telling whose sentence it is.
   The head is not a paragraph, so it opts out of the paragraph air above. */
.house-ann-seat-head{display:flex;align-items:center;gap:6px;margin-bottom:4px;}
.house-ann-her>.house-ann-seat-head+div{margin-top:0;}
.house-ann-seat-face{width:20px;height:20px;flex:none;border-radius:var(--r-round);object-fit:cover;
  background:var(--sel);font-size:var(--t-label);}
.house-ann-seat-name{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:var(--ls-label);
  color:var(--accent);text-transform:uppercase;}
/* ---------- THE DEMO'S TWO PRESSES AND ITS COUNT ----------
   Mark's ruling, 2026-09-02: the conversation is on the right and only there,
   so the way past a teach step stands under the line that was just said. Back
   and Skip wear .house-ann-dig, the house chip the Next chip already wears,
   and this only lays the pair out in a row rather than stacked.

   THE COUNT IS READ, NOT PRESSED, so it is small and muted at the end of the
   line's head and wears no mono and no caps: a step number is a number, not
   an instrument label. */
.house-ann-teach-feet{display:flex;gap:6px;}
.house-ann-teach-feet .house-ann-dig{margin-top:6px;}
.house-ann-teach-count{margin-left:auto;font-size:var(--t-label);color:var(--muted);}
.house-ann-you{align-self:flex-end;max-width:90%;padding:6px 10px;border-radius:10px;background:var(--sel);
  font-size:var(--t-small);line-height:1.4;}
.house-ann-wait{font-size:var(--t-small);color:var(--accent);}
/* THE INPUT IS AT THE TOP (Mark, 2026-08-21), directly under her head and
   directly above the newest thing she said. It sat at the foot for months
   while the log above it read newest-first, so you typed at the far end of
   the panel from the line you were answering. */
.house-ann-top .house-ann-ask{margin:0 var(--ann-pad) var(--ann-gap);}
/* HER LIVE PRESS AND WHAT SHE IS DOING (Mark, 2026-09-02, the voice ladder).
   A word rather than an icon, because End has to read as End. Same height as
   the two round buttons beside it so the bar stays one line, and the accent
   is the only thing that changes when the line is open. */
.house-ann-live{display:inline-flex;align-items:center;justify-content:center;height:26px;
  padding:0 10px;border:var(--bd) solid var(--edge);border-radius:var(--r-pill);
  background:var(--inset);color:var(--muted);font:inherit;font-size:var(--t-tiny);cursor:pointer;}
.house-ann-live:hover{color:var(--ink);border-color:var(--accent-line);}
.house-ann-live.on{color:var(--accent);border-color:var(--accent);}
.house-ann-live[disabled]{opacity:.5;cursor:default;}
.house-ann-live-state{color:var(--muted);font-size:var(--t-tiny);}
/* The quiet line at the foot: what she reads, what she will not do. */
.house-ann-note{padding:0 var(--ann-pad) var(--ann-gap);color:var(--muted);font-size:var(--t-tiny);line-height:1.4;}
/* HER BOX, AND WHY IT IS THE ONE ROW THAT MOVED (Mark, 2026-08-31: "anns
   text box and other stuff does not have correct padding").

   TWO faults, and only the second is visible in the CSS.

   WIDTH: base.css gives every input `width:100%`, which here meant 100% of
   the panel PLUS the margins either side, so the box hung nine pixels off the
   panel's right edge while sitting ten inside it on the left. `width:auto`
   lets the flex column stretch it and both edges come out equal.

   ITS BORDER STANDS ON THE PANEL INSET, like the head and the log, so the
   margin is --ann-pad and stays. What was wrong is what happens INSIDE it:
   it padded its text a further ten, so "Ask Ann…" began twenty pixels in
   while every other row began at ten. A framed control is allowed to breathe
   inside its own frame — the box is not a bare line of text — but that
   breath is --s2, not a second copy of the panel's edge.

   Measured by tools/welcome/eyes.mjs against the CONTENT edge of each row,
   not the rects: a padded row and a margined row measure differently from
   outside while landing in the same place, and reading the rule is exactly
   how this was missed. Zeroing the margin instead was tried and looked
   worse — the border ran wall to wall and the panel lost its frame — which
   is why the shot is looked at and not only the numbers. */
.house-ann-ask{width:auto;margin:0 var(--ann-pad) var(--ann-gap);
  padding:var(--s3) var(--s2);
  border:var(--bd) solid var(--edge);border-radius:10px;font-size:var(--t-small);}
.house-ann-empty{padding:var(--s3) var(--ann-pad);color:var(--muted);font-size:var(--t-small);}
.house-foot{margin-top:auto;padding:8px;border-top:var(--bd) solid var(--edge);position:relative;}
.house-me{width:100%;display:flex;align-items:center;gap:8px;padding:8px;border:var(--bd) solid var(--edge);
  border-radius:12px;background:var(--panel);text-align:left;}
.house-caret{margin-left:auto;color:var(--muted);font-size:11px;}
.house-menu{position:absolute;left:8px;right:8px;bottom:56px;background:var(--panel);border:var(--bd) solid var(--edge);
  border-radius:14px;box-shadow:var(--sh-card);padding:8px;z-index:3;display:flex;flex-direction:column;gap:2px;}
/* the account menu rows: icon + label, same 40px row as the menu list */
.house-acct-row{display:flex;align-items:center;gap:10px;height:var(--house-row);padding:0 10px;
  border-radius:10px;font-size:var(--t-body);font-weight:var(--w-med);color:var(--text);text-align:left;background:transparent;}
.house-acct-row:hover{background:var(--sel);}
.house-acct-row svg{color:var(--muted);flex:none;}
.house-grip{width:7px;flex:none;align-self:stretch;padding:0;background:var(--edge);cursor:col-resize;border:0;}
.house-grip:hover{background:var(--accent);}
.house-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;position:relative;}
/* the canvas header (Mark, 2026-08-19): the strip across the top of the
   centre canvas, holding the two panel-fold buttons */
.house-canvas-header{position:absolute;top:0;left:0;right:0;height:44px;padding:0 12px;z-index:5;display:flex;
  justify-content:space-between;align-items:center;pointer-events:none;}
/* the fold buttons are bare icons (Mark, 2026-08-19: "make the button clear —
   I only want to see the icon"). No plate, no border: the band behind them is
   the surface, and a box around an icon on a band is a second surface. */
.house-canvas-btn{width:32px;height:32px;border:none;background:transparent;
  color:var(--muted);display:grid;place-items:center;padding:0;pointer-events:auto;}
.house-canvas-btn:hover{color:var(--text);}
/* The band carries the room's own light all the way across (Mark,
   2026-08-19: "the gradient going all the way thru the canvas header"), so
   the top of the room reads as one piece with the sub header under it
   instead of a grey strip above a lit card. */
.house-canvas-cellar{background:linear-gradient(135deg, var(--cellar-ember), transparent), var(--panel);}
/* the room's name in the canvas header, Trajan-style capitals dead centre
   (Mark, 2026-08-19). Cinzel is the house's Trajan: same Roman capitals,
   already loaded for the wordmark. Centred for free: the fold buttons on
   either side weigh the same. */
.house-canvas-title{flex:1;text-align:center;font-family:var(--font-trajan);
  font-size:var(--t-small);font-weight:500;letter-spacing:.34em;color:var(--muted);}
.house-stage{position:relative;flex:1;min-height:0;overflow:auto;padding-top:44px;}
.house-stage .house-show{top:0;}
.house-cover{min-height:100%;display:flex;align-items:center;justify-content:center;}
.house-cover-mark{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;color:var(--muted);}
.house-right{width:var(--house-rw);flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border-left:var(--bd) solid var(--edge);}
.house-right-desk{flex-direction:column;align-items:stretch;justify-content:flex-start;min-width:0;}
.house-right-ann{flex-direction:column;align-items:stretch;justify-content:flex-start;min-width:0;}
/* The Cellar's panel is Cast · Crew · Lab (Story System/THE-CELLAR.md §7).
   It is rows rather than a scene, so it needs no scene's width — but a
   face, a name and a checkbox do have a floor, and 210 is it. Below that
   the row would have to choose between the name and the box. */
.house-right-cellar{flex-direction:column;align-items:stretch;justify-content:flex-start;
  min-width:0;width:max(var(--house-rw),210px);}
.house-right-mark{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;color:var(--muted);
  writing-mode:vertical-rl;transform:rotate(180deg);}
/* The whole Council used to be rendered hidden on every other screen just
   so its assistant modal could open there. The character editor is drawn on
   its own now (Story System/THE-CELLAR.md §8), so the disguise is gone. */
@media (max-width:900px){
  .house{flex-wrap:wrap;}
  .house-rail{width:100%;height:52px;flex-direction:row;padding:8px 10px;border-right:0;
    border-bottom:var(--bd) solid var(--edge);order:0;}
  .house-rail-head{height:100%;width:40px;border-bottom:0;}
  .house-rail-gap{display:none;}
  .house-left,.house-right{position:fixed;top:100px;bottom:0;z-index:8;width:min(var(--house-lw),86vw);
    box-shadow:var(--sh-card);}
  .house-left{left:0;}
  .house-right{right:0;width:min(var(--house-rw),86vw);}
  .house-grip{display:none;}
  /* flex-basis, not width. `.house-main` is `flex:1`, which is `flex:1 1 0%`,
     and a 0% basis is what the flex line measures — so `width:100%` never
     forced the wrap it looks like it forces. The rail above is width:100%,
     it took the whole line, and main stayed on that line at ZERO width,
     pushed off the right edge with the entire centre stage inside it. Every
     room, every viewport under 900px. Found by the Cellar's width sweep in
     tools/verify.mjs; the bug is older than it and belongs to no room. */
  .house-main{order:1;flex-basis:100%;width:100%;height:calc(100% - 52px);}
}