/* ---------- The Community: HomeBidPros' community, rule for rule ----------
   Mark, 2026-08-21: "MAKE IT PIXEL FOR PIXEL", and later the same night, on the
   second attempt: "copy EXACTLY the ux look and design of the polished
   community page."

   Every rule below the alias block is COPIED from
   `homebidpros/public/pro-ai-power-tool.css` (its `.apt-feed*`, `.apt-cmp*`,
   `.apt-forum*`, `.apt-right*`, `.apt-imgmodal*` and `.apt-feed-tabs` blocks),
   so the two files can be diffed rather than eyeballed. Do not "tidy" a rule
   here: the shorthand, the half-pixel font sizes and the odd 650 weight ARE the
   reference, and matching them is the whole point.

   THE ONE DELIBERATE DIFFERENCE IS COLOUR. HomeBidPros is emerald; this app is
   themed, and every colour has to be a token or a theme cannot reach it (the
   theme law in CLAUDE.md). So the alias block maps HomeBidPros' token NAMES
   onto this app's tokens. Geometry, spacing, radius, weight and shadow are
   identical; the hue is ours, in day and in night, and no raw colour is typed.

   WHAT THE SECOND PASS HAD WRONG, so the next diff starts from here:
   - The tab pill was `display:flex`, so it stretched the whole column. The
     reference is `inline-flex` and hugs its two tabs.
   - The big avatar was 44px. It is 56px there.
   - Picked files were a text chip. They are thumbnails there.
   - The rail wrapped every block in a bordered card. There, the rules are ONE
     note and the moderators and support are plain rows.
   - An error read in the ACCENT colour, which in this app is blue, so every
     refusal on this screen looked like a link. Errors are red, and --danger is
     a real token now. */

.apt-social {
  /* HomeBidPros' names, this app's values. Nothing below this block knows. */
  --panel: var(--c-panel);
  --panel-2: var(--inset);
  --border: var(--edge);
  --border-soft: var(--edge);
  --text-2: var(--ink2);
  --text-3: var(--muted);
  --green: var(--accent);
  --green-soft: var(--accent-soft);
  --green-line: var(--accent-line);
  --green-ink: var(--accent);
  --shadow: var(--sh-card);
  --shadow-lg: var(--sh-panel);
  /* The reference reaches for both spellings of the same red. */
  --red: var(--danger);
}

/* The page. HomeBidPros' .apt-instr: 720px, centred, its own padding. */
.apt-instr { max-width: 720px; margin: 0 auto; padding: 24px 28px 40px; }
.apt-instr-h { font-size: 20px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.3px; color: var(--text); }
.apt-instr-sub { color: var(--text-2); font-size: 14px; margin: 0 0 22px; line-height: 1.5; }
.apt-empty-note { font-size: 12.5px; color: var(--text-3); padding: 6px 8px; }

/* ---------- the tab bar ----------
   INLINE-FLEX, so the pill is the width of its tabs and not the width of the
   room. It was `flex` here and drew a full-column bar with two tabs floating in
   the left end of it, which is the first thing the eye catches against the
   reference. Two short tabs cannot overflow, but the nowrap and the hidden
   scrollbar stay: a shelf added from the admin one day must not fold the pill
   into a two-row blob, which is exactly what it did with six. */
.apt-feed-tabs { display: inline-flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 999px; padding: 3px; gap: 2px; margin: 0 0 14px; box-shadow: var(--shadow); scrollbar-width: none; }
.apt-feed-tabs::-webkit-scrollbar { display: none; }
.apt-feed-tabs .seg-btn { white-space: nowrap; flex: 0 0 auto; border: none; background: none; border-radius: 999px; padding: 7px 16px; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; font-family: inherit; transition: background .15s, color .15s; }
.apt-feed-tabs .seg-btn:hover { color: var(--text); }
.apt-feed-tabs .seg-btn.on { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }

/* ---------- faces, and the one primary button ---------- */
.apt-forum-av { width: 30px; height: 30px; border-radius: 50%; background: var(--green-soft); color: var(--green-ink); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; object-fit: cover; }
.apt-forum-av.big { width: 56px; height: 56px; font-size: 20px; }
.apt-forum-new { font-size: 12.5px; font-weight: 700; color: var(--green-ink); background: var(--green-soft); border: 1px solid var(--green-line); padding: 7px 15px; border-radius: 20px; text-decoration: none; white-space: nowrap; box-shadow: var(--shadow); transition: filter .15s; cursor: pointer; font-family: inherit; }
.apt-forum-new:hover { filter: brightness(.97); }
.apt-forum-new:disabled { opacity: .55; cursor: default; }
.apt-set-pill { font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--panel-2); border: 1px solid var(--border); padding: 4px 11px; border-radius: 20px; flex-shrink: 0; }

/* ---------- the composer ---------- */
.apt-cmp { background: var(--panel); border: 1px solid var(--border-soft); border-radius: 14px; box-shadow: var(--shadow); margin: 0 0 16px; }
.apt-cmp.closed { display: flex; align-items: center; gap: 11px; padding: 12px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.apt-cmp.closed:hover { border-color: var(--border); box-shadow: var(--shadow-lg); }
.apt-cmp-hint { flex: 1; font-size: 13.5px; color: var(--text-3); }
.apt-cmp-icons { display: inline-flex; gap: 10px; color: var(--text-3); }
.apt-cmp.open { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
/* Dragging a photo over the open composer lights the whole box, which is how
   you know it is the target and not the page behind it. */
.apt-cmp.open.drop { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.apt-cmp-head { display: flex; align-items: center; gap: 10px; }
.apt-cmp-head .sp { flex: 1; }
.apt-cmp-room { border: 1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 9px; font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 10px; max-width: 280px; }
.apt-cmp-title { border: none; border-bottom: 1px solid var(--border-soft); background: none; padding: 4px 2px 8px; font-size: 15px; font-weight: 650; color: var(--text); font-family: inherit; outline: none; }
.apt-cmp-title::placeholder { color: var(--text-3); font-weight: 500; }
.apt-cmp-body { border: none; background: none; min-height: 74px; max-height: 300px; resize: vertical; padding: 2px; font-size: 14px; line-height: 1.55; color: var(--text); font-family: inherit; outline: none; }
.apt-cmp-body::placeholder { color: var(--text-3); }
.apt-cmp-row { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--border-soft); padding-top: 10px; }
.apt-cmp-row .sp { flex: 1; }
.apt-cmp-tool { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border-soft); background: var(--panel-2); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .15s, border-color .15s; }
.apt-cmp-tool:hover { color: var(--green-ink); border-color: var(--green-line); }
.apt-cmp-tool.on { color: var(--green-ink); border-color: var(--green-line); background: var(--green-soft); }
.apt-hidden-file { display: none; }

/* ---------- what is picked, and not sent yet ----------
   HomeBidPros' fileThumbs. It was the words "1 image" with one × that dropped
   the lot; these are the actual pictures, the first tagged Header because that
   is the one the card wears, and each with its own ×. A script and a chapter
   have no thumbnail to show, so they take the video cell: a tag and a filename. */
.apt-cmp-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.apt-cmp-thumbs.small .apt-cmp-thumb { width: 64px; height: 64px; }
.apt-cmp-thumb { position: relative; width: 86px; height: 86px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-soft); background: var(--panel-2); }
.apt-cmp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apt-cmp-thumb.video { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 6px; width: 130px; }
.apt-cmp-thumbs.small .apt-cmp-thumb.video { width: 118px; }
.apt-cmp-vname { font-size: 10.5px; color: var(--text-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apt-cmp-tag { position: absolute; left: 5px; top: 5px; font-size: 10px; font-weight: 700; color: var(--onScrim); background: var(--scrimDeep); border-radius: 8px; padding: 2px 7px; }
.apt-cmp-thumb.video .apt-cmp-tag { position: static; color: var(--green-ink); background: var(--green-soft); margin-bottom: 2px; }
.apt-cmp-x { position: absolute; right: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%; border: none; background: var(--scrimDeep); color: var(--onScrim); font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; }
.apt-cmp-x.plain { position: static; background: none; color: var(--text-3); font-size: 20px; width: 28px; height: 28px; }
.apt-cmp-x.plain:hover { color: var(--text); }

/* The tray writes into what you are typing. The BUTTON that opens it is a line
   icon like every other control here; the house rule is about the interface,
   and these are characters in a sentence. */
.apt-emoji-tray { display: flex; flex-wrap: wrap; gap: 2px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 8px; }
.apt-emoji-b { border: none; background: none; font-size: 19px; line-height: 1; padding: 5px; border-radius: 8px; cursor: pointer; font-family: inherit; }
.apt-emoji-b:hover { background: var(--panel); }

/* ---------- the feed ---------- */
.apt-feed { display: flex; flex-direction: column; gap: 16px; margin: 0 0 20px; }
.apt-feed-card { border: 1px solid var(--border-soft); border-radius: 14px; background: var(--panel); overflow: hidden; box-shadow: var(--shadow); transition: box-shadow .15s ease, border-color .15s ease; }
.apt-feed-card:hover { border-color: var(--border); box-shadow: var(--shadow-lg); }
.apt-feed-media { position: relative; aspect-ratio: 16/9; background: var(--panel-2); overflow: hidden; cursor: pointer; }
.apt-feed-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apt-feed-media.vid { cursor: default; background: var(--scrimDeep); }
.apt-feed-media.vid video { width: 100%; height: 100%; display: block; border: none; }
.apt-feed-imgcount { position: absolute; right: 10px; bottom: 10px; font-size: 12px; font-weight: 700; color: var(--onScrim); background: var(--scrimDeep); border-radius: 12px; padding: 3px 9px; }
.apt-feed-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 2px; }
.apt-feed-thumb { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: var(--panel-2); opacity: .72; transition: opacity .12s, border-color .12s; }
.apt-feed-thumb:hover { opacity: 1; }
.apt-feed-thumb.on { opacity: 1; border-color: var(--green-ink); }
.apt-feed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.apt-feed-body { padding: 14px 16px 12px; }
.apt-feed-head { display: flex; align-items: center; gap: 10px; }
.apt-feed-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.apt-feed-author { font-size: 13.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apt-feed-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apt-feed-title { font-size: 16px; font-weight: 650; letter-spacing: -.01em; color: var(--text); margin: 10px 0 4px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.apt-feed-text { font-size: 13.5px; color: var(--text-2); line-height: 1.55; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.apt-feed-text.full { display: block; -webkit-line-clamp: none; overflow: visible; }
.apt-feed-more { background: none; border: none; padding: 0; margin-top: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-3); cursor: pointer; font-family: inherit; }
.apt-feed-more:hover { color: var(--text-2); }
.apt-feed-foot { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border-soft); padding: 8px 16px; }
.apt-feed-foot .sp { flex: 1; }
.apt-feed-count { background: none; border: none; padding: 0; font-size: 12.5px; color: var(--text-3); cursor: pointer; font-family: inherit; }
.apt-feed-count:hover { color: var(--text-2); }
.apt-feed-act { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 6px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; font-family: inherit; text-decoration: none; transition: background .15s, color .15s; }
.apt-feed-act:hover { background: var(--green-soft); color: var(--green-ink); }
.apt-feed-act.small { padding: 4px 6px; }
.apt-feed-icw { display: inline-flex; align-items: center; }
.apt-like.on { color: var(--green-ink); }
.apt-like.on svg { fill: var(--accent-soft); }
.apt-like.small { padding: 2px 6px; font-size: 11.5px; }
.apt-feed-cwhen .apt-like { vertical-align: middle; }

/* A script or a chapter has no thumbnail, so it reads as a file row: the name
   leads and the kind sits at the end, the Reader's shelf grammar. */
.apt-feed-files { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.apt-feed-file { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--panel-2); color: var(--text-2); font-size: 12.5px; font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s; }
.apt-feed-file:hover { border-color: var(--green-line); color: var(--green-ink); }
.apt-feed-fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apt-feed-fkind { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- comments, under their card ---------- */
.apt-feed-comments { border-top: 1px solid var(--border-soft); padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.apt-feed-cmt { display: flex; gap: 9px; align-items: flex-start; }
.apt-feed-cmt .apt-forum-av, .apt-feed-crow .apt-forum-av { width: 26px; height: 26px; font-size: 11px; }
.apt-feed-cmt .apt-feed-bubble { flex: 1; min-width: 0; }
.apt-feed-bubble { background: var(--panel-2); border-radius: 12px; padding: 8px 12px; min-width: 0; }
.apt-feed-cauthor { font-size: 12.5px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.apt-feed-ctext { font-size: 13px; color: var(--text-2); line-height: 1.5; overflow-wrap: anywhere; margin-top: 2px; }
/* The date, the like and your own Edit / Delete sit UNDER the bubble, indented
   past the avatar at 47px, which is the reference's rule verbatim. */
.apt-feed-cwhen { font-size: 11.5px; color: var(--text-3); margin: 3px 0 0 47px; }
.apt-feed-cact { border: none; background: none; font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--text-3); padding: 0 2px; margin-left: 8px; cursor: pointer; }
.apt-feed-cact:hover { color: var(--text); }
.apt-feed-cact.warn:hover { color: var(--danger); }
.apt-feed-cimgs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.apt-feed-cimgs img { max-width: 150px; max-height: 110px; border-radius: 8px; border: 1px solid var(--border-soft); object-fit: cover; display: block; cursor: pointer; }
.apt-feed-crow { display: flex; gap: 9px; align-items: flex-start; }
.apt-feed-cbox { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.apt-feed-in { width: 100%; min-height: 38px; max-height: 180px; resize: vertical; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 9px 12px; font-size: 13px; color: var(--text); font-family: inherit; }
.apt-feed-in:focus { outline: none; border-color: var(--green-line); }
.apt-feed-cnote { font-size: 12.5px; color: var(--text-3); }
.apt-feed-cnote.err { color: var(--red); }

/* An edit happens in place: the box, then Save and Cancel in that order on the
   LEFT, then the refusal under them. */
.apt-feed-editwrap { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.apt-feed-edit { width: 100%; min-height: 74px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 12px; padding: 9px 12px; font-size: 13.5px; }
.apt-feed-editrow { display: flex; gap: 8px; align-items: center; }
.apt-feed-editrow .sp { flex: 1; }
.apt-feed-editrow .apt-cmp-tool { width: 28px; height: 28px; }
.apt-feed-editrow .apt-forum-new { padding: 6px 14px; }

/* ---------- the overflow menu on something of yours ---------- */
.apt-card-menu { position: relative; margin-left: auto; }
.apt-card-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; min-width: 200px; }
.apt-card-pop-b { border: none; background: none; text-align: left; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.apt-card-pop-b:hover { background: var(--panel-2); color: var(--text); }
.apt-card-pop-b.warn:hover { color: var(--danger); }

/* ---------- one picture, opened ----------
   HomeBidPros' image modal: mid-size, an expand that makes it large, and a
   backdrop that closes. It sits above the app, so it carries its own ground
   rather than the room's. */
.apt-imgmodal { position: fixed; inset: 0; z-index: 9999; background: var(--scrimDeep); display: flex; align-items: center; justify-content: center; padding: 24px; }
.apt-imgmodal-stage { max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; }
.apt-imgmodal-img { max-width: 60vw; max-height: 66vh; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 40px var(--shad); transition: max-width .18s ease, max-height .18s ease; }
.apt-imgmodal.large .apt-imgmodal-img { max-width: 94vw; max-height: 90vh; }
.apt-imgmodal-x { position: absolute; top: 16px; right: 20px; width: 40px; height: 40px; border: none; background: var(--scrimDeep); color: var(--onScrim); font-size: 26px; line-height: 1; border-radius: 50%; cursor: pointer; font-family: inherit; }
.apt-imgmodal-expand { position: absolute; top: 16px; right: 68px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: var(--scrimDeep); color: var(--onScrim); border-radius: 50%; cursor: pointer; }
.apt-imgmodal-x:hover, .apt-imgmodal-expand:hover { filter: brightness(1.4); }

/* ---------- the right panel: Social Settings ----------
   HomeBidPros' rail blocks, at its sizes. It sits inside the house panel, so it
   takes the panel's scrolling and only draws its own rows. Nothing here is a
   card: the rules are one note, and the shelves, the moderators and support are
   rows. Boxing every block turned a rail into a stack of tiles. */
.apt-panel { gap: 0; }
.apt-right-label { font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--text-3); text-transform: uppercase; margin-bottom: 8px; }
.apt-right-label.pad { margin-top: 22px; }
.apt-right-collapse { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--text-3); text-transform: uppercase; padding: 0; margin-bottom: 8px; }
.apt-right-collapse.pad { margin-top: 22px; }
.apt-right-collapse:hover { color: var(--text-2); }
.apt-rail-chev { display: inline-flex; flex-shrink: 0; transition: transform .15s ease; }
.apt-right-collapse.open .apt-rail-chev { transform: rotate(180deg); }
.apt-forum-note { font-size: 12.5px; color: var(--text-3); border: 1px solid var(--border-soft); background: var(--panel-2); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; line-height: 1.55; }
.apt-forum-railrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); padding: 6px 10px; }
.apt-forum-raillink { background: none; border: none; padding: 0; font-family: inherit; font-size: 12.5px; color: var(--text-2); cursor: pointer; text-decoration: none; flex: 1; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apt-forum-raillink:hover { color: var(--text); }
.apt-forum-raillink.on { color: var(--green-ink); font-weight: 600; }
.apt-profile { display: flex; align-items: center; gap: 11px; padding: 4px 10px 10px; flex-wrap: wrap; }
.apt-profile-name { flex: 1; min-width: 0; }
.apt-profile-acts { flex-basis: 100%; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.apt-forum-chip { font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--panel-2); border: 1px solid var(--border); padding: 6px 13px; border-radius: 20px; box-shadow: var(--shadow); transition: border-color .15s; cursor: pointer; font-family: inherit; }
.apt-forum-chip:hover { border-color: var(--text-3); }
.apt-bio { flex-basis: 100%; width: 100%; font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin-top: 2px; overflow-wrap: anywhere; }
.apt-bio-wrap { flex-basis: 100%; width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.apt-bio-edit { min-height: 56px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; }
.apt-rename { width: 100%; font-size: 13.5px; }

/* ---------- the category chips ----------
   HomeBidPros' .apt-forum-bar, the row UNDER the composer. The rooms are the
   pill row above it; these are what is discussed. Copied rule for rule. */
.apt-forum-bar { display: flex; gap: 10px; align-items: center; margin: 2px 0 16px; flex-wrap: wrap; }
.apt-forum-chip.on { background: var(--green-soft); color: var(--green-ink); border-color: var(--green-line); }

/* ---------- the phone ----------
   The room gives back its side padding and the tab row scrolls sideways rather
   than wrapping into four lines. */
@media (max-width: 720px) {
  .apt-instr { padding: 16px 14px 32px; }
  .apt-feed-tabs { border-radius: 14px; }
  .apt-cmp-room { max-width: 100%; }
  .apt-imgmodal-img { max-width: 92vw; max-height: 70vh; }
}

/* ---------- THE GLASS, WITH NOTHING BEHIND IT ----------
   Mark, 2026-08-21: "can you apply to the community so i can see what it looks
   like without a back ground image", and then: "can it be for the entire space
   not just the centercanvas."

   THE HONEST PROBLEM FIRST. `backdrop-filter` blurs whatever is painted behind
   an element, and a blur of one flat colour is that same flat colour. Every
   other glass in this app (the Cellar, the Lounge, Home) is frosting over a
   PHOTOGRAPH, which is why it reads. Put the identical rules on this room over
   its flat stage and nothing happens: the panes go translucent, pick up the same
   grey they were sitting on, and the only visible change is softer borders.

   SO THE WHOLE FRAME IS GIVEN A LIGHT OF ITS OWN, and it is still not an image:
   two very wide radial gradients in the accent, at the top corners, painted on
   the SHELL. That is what the frosting catches. It is on the shell rather than
   on the stage because the light has to be one light: a wash that stops at the
   centre canvas leaves the banner and the two rails sitting on flat colour, and
   the seam between them is the first thing the eye finds.

   THE SURFACE LIST IS `house-shell-show`'s, VERBATIM (components.css). That
   block is what frosts the chrome over a painted wall, and this is the same job
   with a different thing behind it, so it is the same list at the same weights:
   the banner and the two side panels at 62% panel, the icon rail at 70% chrome,
   the canvas header at 62%, and the house, the main and the stage transparent so
   the light IS the room. Copying it rather than inventing a second set is what
   keeps one glass in this app instead of two that drift.

   The room's own panes are the Cellar's weights tuned up. Its panel is nearly
   black under a bright photograph so 34% works there; over a quiet wash anything
   under about 60% loses the words, and every surface a WORD sits on has to stay
   readable, which is the one rule that block obeys too.

   It is one class from partials.js and this one block. Deleting both puts the
   room back exactly as it was, and nothing outside it changes either way. */

/* ---------- the light, on the whole frame ---------- */
.house-shell-glass {
  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-glass .house,
.house-shell-glass .house-main,
.house-shell-glass .house-stage { background: transparent; }

/* ---------- the chrome, at house-shell-show's own weights ---------- */
.house-shell-glass .house-banner,
.house-shell-glass .house-left,
.house-shell-glass .house-right {
  background: color-mix(in srgb, var(--panel) 62%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.house-shell-glass .house-rail {
  background: color-mix(in srgb, var(--chrome) 70%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.house-shell-glass .house-canvas-header {
  background: color-mix(in srgb, var(--panel) 62%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

/* The cards and the composer: the two big planes, and the ones the light has
   the most room to move behind. */
.house-shell-glass .apt-feed-card,
.house-shell-glass .apt-cmp {
  background: color-mix(in srgb, var(--panel) 62%, transparent);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-color: color-mix(in srgb, var(--border) 60%, transparent);
}
.house-shell-glass .apt-feed-card:hover,
.house-shell-glass .apt-cmp.closed:hover {
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border-color: color-mix(in srgb, var(--border) 85%, transparent);
}

/* The small chrome: the pill, the chips and the tools. Thinner glass, because
   they are small and a heavy frost on a 30px control just reads as mud. */
.house-shell-glass .apt-feed-tabs,
.house-shell-glass .apt-forum-chip,
.house-shell-glass .apt-cmp-tool,
.house-shell-glass .apt-cmp-room {
  background: color-mix(in srgb, var(--panel) 50%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.house-shell-glass .apt-feed-tabs .seg-btn.on,
.house-shell-glass .apt-forum-chip.on {
  background: color-mix(in srgb, var(--green-soft) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

/* A comment bubble, a file row and a note sit ON the card's glass rather than
   on the room, so they are lighter again: two panes of frost stacked read as
   grey, not as depth. */
.house-shell-glass .apt-feed-bubble,
.house-shell-glass .apt-feed-in,
.house-shell-glass .apt-feed-file,
.house-shell-glass .apt-forum-note {
  background: color-mix(in srgb, var(--panel) 38%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* A PICTURE IS NEVER FROSTED. The plate, its thumbs and the lightbox stay
   exactly as they are: the theme law says a theme dresses the frame around the
   picture and never touches the picture, and glass is a theme decision. */
.house-shell-glass .apt-feed-media,
.house-shell-glass .apt-feed-thumb,
.house-shell-glass .apt-imgmodal-img { backdrop-filter: none; -webkit-backdrop-filter: none; }