/* The canvas, the right panel and the narrow layout, moved whole out of house-shell.css (docs/SEAMS.md,
   September 27). They came after Ann's panel in that file, and this sheet loads right after assistant-panel.css,
   so every rule keeps its place in the cascade. */
.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:calc(40px + var(--s3)*2);padding:0;z-index:5;display:flex;
  justify-content:space-between;align-items:center;pointer-events:none;background:transparent;border:0;box-shadow: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:inherit;font-size:var(--t-label);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:inherit;font-size:calc(10px * var(--t-k));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{display:none;}
  .house-rail-gap{display:none;}
  /* Bug 179 (September 27): every room icon fits on the phone rail, in one row with no scrollbar. The empty head goes
     and the room icons share the row, from 40px down to 28px each: eleven fit at 360px. Bug 54's scrolling stays only
     for more rooms than that, so no icon is ever out of reach.
     Sent back (October 10): a company owner's rail holds sixteen icons or more, and its scrollbar showed grey under
     them. As a phone's tab strip does, the row has no scrollbar, a swipe scrolls it, and the edge that has more fades.
     NAMED EXCEPTION to Bug 49's thin scrollbars (base.css), for this one row: the fade is what says it scrolls. */
  .house-rail{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-inline:6px;}
  .house-rail::-webkit-scrollbar{display:none;}
  .house-rail > *{flex-shrink:0;}
  .house-rail > .house-ico{flex:0 1 40px;min-width:28px;}
  .house-rail-sp{flex:1 1 0;min-width:0;}
  /* THE FADE IS A MASK, as Chat's capped list's is (titan-rail.css), so it works over any wall, and it shows only at an
     edge with more past it. It is on the icons, not the bar: a masked bar showed the raw wall at its ends. Each icon's
     mask is the row's own view, placed where the row's edges are: railEdges (rooms/shell.js) measures the row and its
     icons after each paint, scroll and resize, as Chat's list is measured. */
  .house-rail:is(.house-rail-more-start,.house-rail-more-end) > *{
    mask-image:linear-gradient(to right,transparent,#000 var(--house-rail-fade-start,0px),#000 calc(100% - var(--house-rail-fade-end,0px)),transparent);
    mask-size:var(--house-rail-view) 100%;mask-position:var(--house-rail-at) 0;mask-repeat:no-repeat;}
  .house-rail-more-start{--house-rail-fade-start:28px;}
  .house-rail-more-end{--house-rail-fade-end:28px;}
  /* A MASK HIDES WHAT IS OUTSIDE THE BOX IT MASKS, and Bug 52's focus ring (base.css) is drawn 2px outside, so on this
     row the same ring is drawn inside the icon, as Chat's project rows draw theirs (document-mode.css). A Tab that
     reaches an icon past the edge scrolls it in clear of the 28px fade, not under it. */
  .house-rail{scroll-padding-inline:28px;}
  .house-rail :focus-visible{outline-offset:-2px;}
  /* THE FOLD BUTTONS STAY REACHABLE (the browser test of 2026-09-06,
     finding D: at 760 by 900 both panels covered the canvas header, so the
     Hide left panel and Hide right panel buttons were under them and the
     title clipped). The panels are overlays here on purpose; they now start
     below the canvas header's 44px band instead of on top of it, so the two
     buttons and the title stand clear whatever is open, and either panel can
     be put away with one press. The title ends in an ellipsis rather than
     being cut mid-letter. Nothing else about the narrow layout moves. */
  .house-left,.house-right{position:fixed;top:var(--house-panel-top,144px);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;}
  .house-canvas-header{z-index:9;}
  .house-canvas-title{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;letter-spacing:.2em;}
  /* 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);}
}

.backup-warning { position: relative; z-index: 2; padding: 8px 16px; background: #493719; color: #fff4dc; font-size: calc(14px * var(--t-k)); flex-shrink: 0; }
.backup-warning .btn { margin-left: 12px; }
.backup-warning { padding-right: 44px; }
.backup-warning-hide { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 26px; height: 26px; border: 0; border-radius: var(--r-6); background: transparent; color: inherit; font-size: var(--t-head); line-height: 1; cursor: pointer; }
.backup-warning-hide:hover, .backup-warning-hide:focus-visible { background: #fff4dc22; }