/* ---------- THE GLASS (plans/GLASS.md): its own sheet ----------
   The wall layers and the glass window, split out of components.css the day
   the blur slider pushed that sheet past the 800-line ratchet. One feature,
   one sheet, the same rule as a room. Loaded for every room because the pane
   icon stands in every banner. */

/* ---------- THE GLASS: the wall layers and the modal (plans/GLASS.md) ----------
   The wall a room CHOSE, hung by the shell (rooms/partials.js). It rides the
   same [data-lz="wall"] node the legacy rooms hang, so house-shell-show
   positions and covers it with the rules it already has; what is added here
   is only the light. The slider is the Cellar''s own mechanic made per-room:
   --wall-light is worn by the document (lib/render.js) from the standing
   room''s record, and brightness() on a wall is the shipped precedent from
   cellar.css - a control the READER moves, which the theme law''s no-filter
   rule (a rule about THEMES) never governed. */
.house-wall img{filter:brightness(var(--wall-light,1));}

/* ONE GLASS OVER A CHOSEN WALL, EVERY SURFACE IN STEP (Mark, 2026-08-22:
   "WE NEED TO MAKE THE CANVAS SYNC WITH THE PANELS AND HEADER AND THE MODAL
   NEEDS TO CONTROL ALL OF IT... THE BLUR IN CENTER NEEDS TO RESPOND TO DAY
   NITE").

   The first cut gave the canvas a bare blur and left the chrome on its own
   fixed 18px, so the centre read as a different material from the panels
   around it - and with no tint of its own it stayed dark whatever the theme,
   a night canvas in a day room. Now:

   - The CANVAS wears the chrome's own frost family - a color-mix of --panel
     over the blur - so it is the same pane as the banner and the rails, and
     because --panel is a theme token the centre goes light in Day and dark
     in Night by construction.
   - AMENDED 2026-08-23 (Mark: "the sides need to match the middle with one
     adjustment for all"). The canvas used to mix a thinner 42% on purpose,
     "the wall is the feature and the middle is where you look at it" - his
     own ruling, and it stood until his eyes on Novel Forge showed the real
     cost: a control that dims the WALL cannot fix a panel that was never as
     solid as its neighbours, so the centre read as bare no matter where the
     slider sat. The fix retires the split rather than picking a side: this
     rule now reads --wall-mix, the same one value every pane in
     house-shell.css reads, so there is no thinner number left to choose.
   - THE SLIDER (blur) drives every pane exactly as it did: --wall-blur when
     a chosen wall stands, one control in the modal moving the banner, the
     rails, the header and the canvas together. These land after
     house-shell-show's fixed values in the cascade because this sheet loads
     after house-shell.css (the shell rules' own home since the 800-line cut,
     2026-08-23), and that ordering is load-bearing. */
.house-shell-wall .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-shell-wall .house-banner,
.house-shell-wall .house-left,
.house-shell-wall .house-right,
.house-shell-wall .house-rail{
  backdrop-filter:blur(var(--wall-blur,12px));
  -webkit-backdrop-filter:blur(var(--wall-blur,12px));}
.house-shell-wall .house-canvas-header{
  backdrop-filter:blur(var(--wall-blur,12px));
  -webkit-backdrop-filter:blur(var(--wall-blur,12px));}

/* THE SEAM AT THE GRIP (Mark, 2026-08-22: "THE RIGHT SIDE OF THE CANVAS
   GLASS HAS A SMALL GAP CLOSE IT"). The 7px resize grips between the canvas
   and the side panels stayed solid --edge while everything around them went
   to glass, and a solid strip between two frosted panes reads as a gap of
   raw wall. On glass they join it - same pane as the canvas - and the hover
   still answers in accent so the handle is still findable. */
.house-shell-show .house-grip{
  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-shell-show .house-grip:hover{background:var(--accent);}

/* THE GLOW WITH THE GLASS OFF (Mark, 2026-08-22: "I DONT THINK THE GLOW IS
   WORKING IN NO GLASS MODE" - it was not: turning glass off silenced the
   glow entirely). Glass is the FROST and the glow is the LIGHT, and they are
   separate switches, so glass-off with glow-on paints the wash on the shell
   and opens the centre to it, with no frost on anything. The wash is the
   Community's own two corner lights (community.css). */
.house-shell-glow{background:
  radial-gradient(1500px 950px at 6% -16%, var(--glow), transparent 60%),
  radial-gradient(1250px 850px at 99% -2%, color-mix(in srgb, var(--accent-soft) 62%, transparent), transparent 62%),
  var(--bg);}
.house-shell-glow .house,
.house-shell-glow .house-main,
.house-shell-glow .house-stage{background:transparent;}

/* THE GLOW OVER A WALL (GLASS.md 3): the Community''s two corner lights as a
   LAYER on top of the picture - a background under an opaque wall would be
   invisible, and stacking is what Mark literally asked for. A layer over art,
   never a filter on it. */
.house-glow-over{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1500px 950px at 6% -16%, var(--glow), transparent 60%),
    radial-gradient(1250px 850px at 99% -2%, color-mix(in srgb, var(--accent-soft) 62%, transparent), transparent 62%);}

/* The window: the show-win shape (home.css), which is the house''s window. */
.glass-win{pointer-events:auto; display:flex; flex-direction:column; gap:10px;
  width:min(420px, calc(100vw - 32px)); max-height:min(82vh, 760px); overflow-y:auto;
  border:var(--bd) solid var(--edge); border-radius:var(--r-xl);
  background:var(--panel); box-shadow:var(--sh-modal); padding:0 0 14px;}
/* The shelf's own window is the same window with less in it: three rows and no
   wall rack, so it does not need the height a room's does (Mark, 2026-08-31,
   the comic cards' glass). It borrows every other class whole rather than
   growing a second stylesheet for one small window. */
.glass-win-sm{width:min(360px, calc(100vw - 32px));}
.glass-win-sm .glass-row-note{padding:0 16px;}
.glass-win-head{display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; flex:none; padding:16px 16px 10px;
  border-bottom:var(--bd) solid var(--edge); cursor:move;}
.glass-win-label{font-family:"IBM Plex Mono",monospace; font-size:var(--t-label);
  letter-spacing:var(--ls-wide); color:var(--muted);}
.glass-win-title{font-size:var(--t-lead); font-weight:var(--w-semi); color:var(--ink);}
.glass-win-x{flex:none; width:26px; height:26px; border-radius:var(--r-sm);
  color:var(--muted); cursor:pointer;}
.glass-win-x:hover{color:var(--ink); background:var(--inset);}
.glass-sec{padding:6px 16px 0; font-size:var(--t-label); font-weight:var(--w-bold);
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}

/* The rack: the room''s own picture where it has one, the five defaults
   (slot 1 the factory), and None. An empty slot draws as an empty frame -
   the rack is honest about how much of it exists. */
.glass-rack{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; padding:0 16px;}
.glass-thumb{position:relative; aspect-ratio:16/10; overflow:hidden; padding:0;
  border:var(--bd) solid var(--edge); border-radius:var(--r-md);
  background:var(--inset); cursor:pointer; display:flex; align-items:flex-end;}
.glass-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.glass-thumb.on{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent);}
/* The tag wears the over-art ink ONLY over art: an empty slot is the theme's
   own inset, where --mark (always pale, by design) would vanish in Day. */
.glass-thumb-tag{position:relative; z-index:1; width:100%; padding:3px 6px;
  font-size:var(--t-tiny); color:var(--muted); text-align:left;}
.glass-thumb:has(img) .glass-thumb-tag{color:var(--mark); background:var(--art-foot);}

.glass-prompt-row{display:flex; gap:8px; padding:0 16px;}
.glass-prompt{flex:1; min-width:0; padding:9px 12px; border:var(--bd) solid var(--edge);
  border-radius:var(--r-md); background:var(--inset); color:var(--ink);
  font:inherit; font-size:var(--t-small);}
.glass-prompt::placeholder{color:var(--muted);}
.glass-prompt:focus{outline:none; border-color:var(--accent);}
.glass-go{flex:none; padding:9px 14px; border:var(--bd) solid var(--accent-line);
  border-radius:var(--r-md); background:var(--inset); color:var(--accent);
  font:inherit; font-size:var(--t-small); font-weight:var(--w-semi); cursor:pointer;}
.glass-go:hover{border-color:var(--accent); color:var(--ink);}
.glass-go[disabled]{opacity:.55; cursor:default;}

.glass-row{display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:4px 16px;}
.glass-row-label{display:flex; flex-direction:column; gap:1px; min-width:0;
  font-size:var(--t-small); font-weight:var(--w-med); color:var(--ink);}
.glass-row-sub{font-size:var(--t-tiny); font-weight:var(--w-med); color:var(--muted);}
.glass-row-note{font-size:var(--t-tiny); color:var(--muted);}
.glass-chip{flex:none;}
.glass-range{flex:1; max-width:180px;}
.glass-win .work-said{margin:0 16px;}
.glass-upload{flex:none; padding:8px 12px; border:var(--bd) solid var(--edge);
  border-radius:var(--r-md); background:var(--inset); color:var(--ink2);
  font-size:var(--t-small); font-weight:var(--w-semi); cursor:pointer;}
.glass-upload:hover{border-color:var(--accent); color:var(--ink);}
.glass-upload input{display:none;}
.glass-keep-slots{display:flex; gap:6px; flex-wrap:wrap;}
.glass-keep-slot{cursor:pointer;}