/* ---------- the Lounge ----------
   The scene itself: the feed, the two kinds of line in it, the machine plate,
   the camera bar and the composer. public/rooms/scene.js draws it.

   37 style attributes to one, and the one that stays is the documented data
   exception: the art column's width is a number the user drags
   (`--artw:${S.artw}px`), so it rides as a scoped custom property.

   SIZES READ OFF THE GLASS:

     written 30 -> 30  --t-display    written 15   -> 16  --t-lead
     written 28 -> 26  --t-title      written 13.5 -> 14  --t-small
     written 26 -> 26  --t-title      written 13   -> 14  --t-small
     written 16 -> 16  --t-lead       written 12.5 -> 13  --t-tiny
                                      mono 15      -> 16  --t-lead
                                      mono 11      -> 13  --t-tiny
                                      mono 8-9     -> 11  --t-label

   The 36px `+` in the call-in circle is off the scale by name; components.css
   already lists it as one of the two size-of-a-thing exclusions.

   ONE LETTERSPACING SNAP: the room title, -.024em to --ls-head. The machine
   plate's -.01em is deliberately NOT snapped — it is a hair of tracking on a
   16px line, not a heading, and --ls-head would treble it.

   TWO RADII ARE ASYMMETRIC AND STAY WRITTEN OUT: your own line in the feed is
   `5px 15px 15px 5px`, a card with a squared-off left edge against its accent
   rule. Snapping it would square all four corners and lose the shape. */

[data-render-phase="update"] .scene,
[data-render-phase="update"] .scene-callin,
[data-render-phase="update"] .cam-scrim{animation:none!important;}

.scene{display:flex; flex-direction:column; gap:18px; padding:6px 0 0;
  animation:fadeUp .35s ease both;}
/* the wall behind the room, at the opacity base.css already defaults to */
.scene-grid{--wallop:.2;grid-template-columns:1fr;}
@media (min-width:900px){
  .scene-grid[data-lz="grid"]{grid-template-columns:1fr;}
}
/* base.css lays [data-lz="art"] out as a row; here it is a column. Same
   specificity, so this file loading after base.css is what decides it. */
.scene-art{flex-direction:column; gap:10px;}

/* the picture carries no words — only the sweep while it paints */
.scene-sweep{position:absolute; inset:0; pointer-events:none; width:45%;
  background:linear-gradient(90deg,transparent,var(--glow),transparent);
  animation:sweep 1.2s linear infinite;}
/* the strip of the last scenes: five at most, sharing the column's width, so
   each thumb shrinks as the column does */
.scene-thumbs{display:flex; gap:6px;}
.scene-thumb{flex:1; min-width:0; aspect-ratio:16/9; overflow:hidden; padding:0;
  border-radius:var(--r-sm); border:var(--bd) solid var(--edge);}
.scene-thumb-on{border-color:var(--accent);}
.scene-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
/* a thumb loaded into the viewer shows WHOLE: scenes are painted 16:9 and
   the panel frame is portrait, so cover was cropping the picture to bits —
   contain letterboxes it against the inset instead */
.scene-view-img{width:100%; height:100%; object-fit:contain; display:block;
  background:var(--inset);}

/* ---------- the seats ---------- */
/* The row fits the ROOM, not the viewport (Mark, 2026-08-16 — a vw clamp
   still clipped the last seat, because the chat column is narrower than
   the glass). The seats flex down together, so every face shrinks the
   same amount: capped at the written 120, floored at 64 before the row
   finally scrolls. The face keeps its circle by ratio, not by a second
   written size, and a name too wide for a shrunken seat ellipsizes. */
.scene-cast{display:flex; gap:13px; overflow-x:auto; padding-bottom:2px; justify-content:safe center;}
.scene-seat{flex:1 1 0; min-width:64px; max-width:132px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:4px 2px; border-radius:var(--r-lg); background:transparent;}
.scene-seat-on{background:var(--sel);}
/* The seat square and the lit name mark who holds the mic — the face itself
   never wears the accent. A cold seat is muted, and its ring is SOLID (Mark,
   2026-09-02, at the Lounge cast row: "it should be solid"); the dashes read
   as a broken picture rather than a quiet seat. */
.scene-face{display:flex; align-items:center; justify-content:center;
  width:100%; max-width:120px; aspect-ratio:1; overflow:hidden; border-radius:var(--r-round);
  border:var(--bd-thick) solid var(--edge);
  font-size:var(--t-title); font-weight:var(--w-semi); color:var(--ink4);}
.scene-face-cold{border-color:var(--muted);}
.scene-seat-name{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.scene-callin-btn{flex:1 1 0; min-width:64px; max-width:132px;
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:4px 2px;}
/* the 36px + is the size of a glyph, named in components.css */
.scene-callin-plus{display:flex; align-items:center; justify-content:center;
  width:100%; max-width:120px; aspect-ratio:1; border-radius:var(--r-round);
  border:var(--bd-thick) dashed var(--edge); color:var(--muted); font-size:36px;}
.scene-callin{display:flex; flex-wrap:wrap; gap:8px; padding:10px;
  border:var(--bd) dashed var(--edge); border-radius:var(--r-lg); background:var(--inset);
  animation:fadeUp .25s ease both;}
.scene-callin-lbl{width:100%;}
.scene-callin-pick{display:flex; align-items:center; gap:8px; padding:8px 12px;
  border-radius:var(--r-pill); border:var(--bd) solid var(--edge);
  font-size:var(--t-small); font-weight:var(--w-semi);}

/* ---------- the feed, and its three kinds of line ---------- */
.scene-feed{display:flex; flex-direction:column; gap:24px; padding-top:2px; padding-bottom:24px;}
.scene-thinking{animation:pulse 1.2s ease-in-out infinite;}
.scene-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);}
.scene-you-body{font-size:var(--t-lead); line-height:1.45; color:var(--ink);}
/* the Narrator's stage voice: set off from the actors, an accent rule and
   the description read in italic */
.scene-narr{padding:10px 12px; border-left:2px solid var(--accent);
  background:var(--inset); line-height:1.55; font-size:var(--t-small);
  font-style:italic; color:var(--ink2);}
/* A narrator the creator has made into somebody wears their face and name
   over the description (Mark, 2026-08-19). The who-row is the feed's own,
   so it reads like every other speaker; only the body keeps the italic
   stage register, because it is still description. 26px is a face. */
.scene-narr-who-line{display:flex; flex-direction:column; gap:6px; font-style:normal;}
.scene-narr-face{width:26px; height:26px; flex:none; border-radius:var(--r-round);
  overflow:hidden; border:var(--bd) solid var(--edge); display:grid; place-items:center;
  font-size:var(--t-label); font-weight:var(--w-semi); color:var(--muted);}
.scene-narr-face img,.scene-narr-img{width:100%; height:100%; object-fit:cover; display:block;}
.scene-narr-face .slot{width:100%; height:100%;}
.scene-narr-body{font-style:italic; line-height:1.55; color:var(--ink2);}
.scene-say{display:flex; flex-direction:column; gap:5px;}
.scene-say-who{display:flex; align-items:center; gap:8px;}
.scene-say-name{font-size:var(--t-small); font-weight:var(--w-semi); color:var(--accent);}
/* 23px is the size of the dot you tap to hear a line */
.scene-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);}
.scene-say-body{font-size:var(--t-lead); line-height:1.5; color:var(--ink2);}

/* ---------- the machine's face in the Lounge ---------- */
.scene-machine{width:100%; display:flex; flex-direction:column; gap:8px; padding:12px 14px;
  border:var(--bd) solid var(--edge); border-radius:var(--r-lg); background:var(--panel);
  box-shadow:0 10px 26px var(--shad); animation:hum 4s ease-in-out infinite; text-align:left;}
.scene-machine-top{display:flex; align-items:center; justify-content:space-between;}
.scene-machine-where{display:flex; flex-wrap:wrap; align-items:baseline; gap:9px; text-align:left; width:100%;}
/* -.01em stays: a hair of tracking, not a heading snap */
.scene-machine-place{font-size:var(--t-display); font-weight:var(--w-semi); letter-spacing:-.01em;}
/* the year asks for the display step by class — the mono band table tops out
   at lead, and a number in the band call would silently fall to the 11px base */
.scene-machine-when{font-size:var(--t-display);}
/* the room's two tools on their own row under the place and year,
   right-justified: bare icons, no button chrome */
.scene-machine-tools{display:flex; align-items:center; justify-content:flex-end; gap:4px;}
.scene-tool{display:flex; align-items:center; justify-content:center;
  padding:6px; color:var(--muted);}
.scene-tool-on{color:var(--accent); animation:pulse 1.2s ease-in-out infinite;}

/* ---------- the composer ---------- */
/* the quiet foot under the bar: one small verb, right where the send lives */
.scene-composer-foot{display:flex; justify-content:flex-end; margin-top:3px;}
.scene-clear{padding:3px 6px; border-radius:var(--r-sm);}
.scene-composer{display:flex; align-items:center; gap:9px; 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);}
.scene-composer-input{padding:6px 0; font-size:var(--t-lead);}
/* the bar's quiet circles: pause, speaker, conversation — the mic keeps its
   own class for the recording pulse */
.scene-icon{display:flex; align-items:center; justify-content:center; flex:none;
  width:36px; height:36px; border-radius:var(--r-round);
  border:var(--bd) solid var(--edge); color:var(--muted);}
.scene-icon-on{border-color:var(--accent); color:var(--accent);}
.scene-icon-live{border-color:var(--accent); background:var(--sel); color:var(--accent);
  animation:pulse 1.1s ease-in-out infinite;}
.scene-mic{display:flex; align-items:center; justify-content:center; flex:none;
  width:36px; height:36px; border-radius:var(--r-round);
  border:var(--bd) solid var(--edge); color:var(--muted);}
.scene-mic-on{border-color:var(--accent); color:var(--accent);
  animation:pulse 1.1s ease-in-out infinite;}
.scene-send{display:flex; align-items:center; justify-content:center; flex:none;
  width:36px; height:36px; border-radius:var(--r-round);
  background:var(--accent); color:var(--onAccent);}

/* ---------- the camera modal ----------
   15 attributes. Title -.02em to --ls-head is the declared snap. The 16px
   lever's -.012em stays. Shadow 0 30px 80px stays literal. */
.cam-scrim{position:fixed; inset:0; z-index:82; display:flex; align-items:center;
  justify-content:center; padding:16px; pointer-events:none;
  animation:fadeUp .25s ease both;}
.cam-scrim>*{pointer-events:auto;}
.cam{width:100%; max-width:520px; max-height:92vh; 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);}
.cam-head{display:flex; align-items:center; justify-content:space-between;}
.cam-kicker{display:flex; flex-direction:column; gap:2px;}
.cam-title{font-size:var(--t-head); font-weight:var(--w-semi); letter-spacing:var(--ls-head);}
.cam-x{display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:var(--r-sm);
  border:var(--bd) solid var(--edge); color:var(--muted);}
.cam-block{display:flex; flex-direction:column; gap:8px;}
.cam-block-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.cam-ta{width:100%; padding:11px 13px; border:var(--bd) solid var(--edge);
  border-radius:var(--r-md); background:var(--inset); font-size:var(--t-body);
  line-height:1.5; color:var(--ink); resize:vertical;}
.cam-opts{display:flex; gap:7px; flex-wrap:wrap;}
.cam-opt{padding:8px 13px; border-radius:var(--r-md);
  font-size:var(--t-small); font-weight:var(--w-semi);}
.cam-lever{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 17px; border-radius:var(--r-lg);
  background:var(--accent); color:var(--onAccent); box-shadow:0 14px 34px var(--shad);}
.cam-lever-label{display:flex; flex-direction:column; gap:2px; text-align:left;}
.cam-lever-title{font-size:var(--t-lead); font-weight:var(--w-semi); letter-spacing:-.012em;}