/* v4 — THE MEETING ROOM DISPLAY (/room; room display v4.22, 29/10/2026,
 * ported from PR #60 onto the v4 tokens). Tokens only (tokens/*.css): no bare
 * hex, weights 400/500.
 *
 * ONE FIXED STAGE. Everything is drawn on a 1920 × 1080 stage in px and scaled
 * to the window by views/room.js (transform: scale), so a 1080p TV, a 4K TV at
 * 200 % and a laptop window show the same picture and nothing reflows on the
 * wall. That is why the sizes here are px on the stage, not vw, and why the
 * layout-width law (W1–W4) does not reach it: it is a full-screen surface (W4).
 *
 * Read from the end of a table: nothing anybody needs is under 24px on the
 * stage; hints are 18px. The clock is 200px, the countdown 280px.
 *
 * Dark is the default (a TV in a room with the lights down half the time);
 * Team › Room can set it light. The theme rides on #room-root's own
 * data-theme, so theme.css / refresh.css supply every colour. Orange
 * (--attn-ink) means "now / late / needs you", and nothing else. */

body.room-kiosk {
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overflow: hidden;
}
body.room-kiosk #room-host { position: fixed; inset: 0; z-index: 10; }

.rm {
  --rm-ground: var(--rail-bg);
  --rm-card: var(--surface);
  --rm-line: var(--hair);
  --rm-hot: var(--attn-ink);
  --rm-blue: var(--link);
  --rm-blue-fill: var(--tint-blue-2);
  --rm-ok: var(--status-ok-ui);
  position: absolute; inset: 0; overflow: hidden;
  background: var(--rm-ground); color: var(--ink);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.rm[data-theme="dark"] { --rm-ground: var(--ground); --rm-card: var(--surface); }
.rm.rm-nocursor, .rm.rm-nocursor * { cursor: none; }
.rm-stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  transform-origin: 0 0;
  /* The burn-in nudge: a few pixels a minute, linear, never noticed. */
  transition: transform var(--dur-slow) linear;
}
.rm-follow { position: absolute; inset: 0; }
.rm button { font-family: inherit; color: inherit; }
.rm kbd {
  font-family: var(--font-technical); font-size: 0.72em; letter-spacing: 0.06em;
  padding: 2px 10px; border: 1px solid currentColor; border-radius: var(--radius-6); opacity: 0.8;
}

.rm-screen { position: absolute; inset: 0; box-sizing: border-box; padding: 48px 64px 40px;
  display: flex; flex-direction: column; gap: 32px; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.rm-head { display: flex; align-items: center; gap: 24px; min-height: 56px; }
.rm-logo { display: inline-flex; align-items: center; justify-content: center; height: 56px; min-width: 56px;
  padding: 6px 10px; box-sizing: border-box; border-radius: var(--radius-12); background: var(--brand-white); }
.rm-logo img { height: 44px; width: auto; max-width: 220px; display: block; }
.rm-orgname { font-size: 34px; font-weight: var(--weight-medium); letter-spacing: -0.02em; }
.rm-sep { width: 1px; height: 40px; background: var(--rm-line); }
.rm-room { font-size: 32px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-head-r { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.rm-headclock { font-size: 44px; font-weight: var(--weight-medium); letter-spacing: -0.01em; }
.rm-headdate { font-size: 24px; color: var(--ink-3); letter-spacing: 0.08em; }
.rm-live { display: inline-flex; align-items: center; gap: 12px; font-size: 20px; letter-spacing: 0.1em; color: var(--ink-3); }
.rm-live i { width: 14px; height: 14px; border-radius: 50%; background: var(--rm-ok); }
.rm-live.stale i { background: var(--ink-3); }
.rm-live.stale { color: var(--rm-hot); }
.rm-fs { font-size: 20px; padding: 10px 18px; border-radius: var(--radius-10); background: transparent;
  border: 1px solid var(--rm-line); color: var(--ink-2); cursor: pointer; display: inline-flex; gap: 10px; align-items: center; }

/* ── Shared pieces ───────────────────────────────────────────────────────── */
.rm-card { background: var(--rm-card); border: 1px solid var(--rm-line); border-radius: var(--radius-xl);
  padding: 28px 32px; box-sizing: border-box; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rm-card-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 18px; }
.rm-sum { margin-left: auto; font-size: 22px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rm-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 20px; font-weight: var(--weight-medium);
  letter-spacing: 0.12em; color: var(--ink-3); white-space: nowrap; }
.rm-eyebrow i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.rm-eyebrow.hot { color: var(--rm-hot); }
.rm-eyebrow.ok { color: var(--rm-ok); }
.rm-none { font-size: 26px; color: var(--ink-3); }
.rm-hint { position: absolute; right: 64px; bottom: 18px; font-size: 18px; letter-spacing: 0.12em; color: var(--ink-3); }

.rm-av { width: 48px; height: 48px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: var(--weight-medium); background: var(--cal-misc-bg); color: var(--cal-misc-ink); }
.rm-av.p1 { background: var(--cal-p1-bg); color: var(--cal-p1-ink); }
.rm-av.p2 { background: var(--cal-p2-bg); color: var(--cal-p2-ink); }
.rm-av.p3 { background: var(--cal-p3-bg); color: var(--cal-p3-ink); }
.rm-av.p4 { background: var(--cal-p4-bg); color: var(--cal-p4-ink); }
.rm-av.p5 { background: var(--cal-p5-bg); color: var(--cal-p5-ink); }
.rm-av.p6 { background: var(--cal-p6-bg); color: var(--cal-p6-ink); }
.rm-av.more { background: var(--grey-pill); color: var(--ink-2); }

/* ── 1 · Wallboard ───────────────────────────────────────────────────────── */
.rm-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 560px 1fr 540px; gap: 32px; }
.rm-left { display: flex; flex-direction: column; gap: 28px; min-height: 0; }
.rm-clock { font-size: 200px; line-height: 0.9; font-weight: var(--weight-medium); letter-spacing: -0.04em; }
.rm-dateline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 28px; margin-top: 14px; }
.rm-date { font-size: 34px; color: var(--ink-2); }
.rm-oclock { display: inline-flex; gap: 10px; align-items: baseline; font-size: 24px; color: var(--ink-3); }
.rm-oclock b { font-weight: var(--weight-medium); color: var(--ink-2); font-size: 28px; }
.rm-next { flex: 1; gap: 14px; justify-content: flex-start; }
.rm-next-time { display: flex; align-items: baseline; gap: 18px; }
.rm-next-time b { font-size: 72px; font-weight: var(--weight-medium); letter-spacing: -0.02em; line-height: 1; }
.rm-next-time span { font-size: 28px; color: var(--ink-3); }
.rm-next-title { font-size: 34px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rm-next-free { font-size: 40px; color: var(--ink-2); margin-top: 10px; }
.rm-people { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.rm-people-note { margin-left: 12px; font-size: 24px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.rm-today { min-height: 0; }
.rm-tl { position: relative; flex: 1; margin-left: 92px; }
.rm-tl-h { position: absolute; left: -92px; transform: translateY(-50%); font-size: 20px; color: var(--ink-3); }
.rm-tl-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--rm-line); }
.rm-tl-m { position: absolute; left: 6px; right: 6px; box-sizing: border-box; border-radius: var(--radius-10);
  padding: 8px 16px; background: var(--rm-blue-fill); border-left: 6px solid var(--rm-blue);
  display: flex; flex-direction: column; overflow: hidden; }
.rm-tl-m .t { font-size: 20px; color: var(--ink-2); white-space: nowrap; flex: none; }
.rm-tl-m .n { font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-tl-m.short { flex-direction: row; align-items: center; gap: 14px; padding-top: 0; padding-bottom: 0; }
.rm-tl-m.past { opacity: 0.45; }
.rm-tl-m.next { border-left-color: var(--rm-hot); }
.rm-tl-now { position: absolute; left: -10px; right: 0; height: 3px; background: var(--rm-hot); z-index: 2; }
.rm-tl-now i { position: absolute; left: -6px; top: -6px; width: 15px; height: 15px; border-radius: 50%; background: var(--rm-hot); }

.rm-where { min-height: 0; gap: 0; overflow: hidden; }
.rm-wg { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 14px; border-top: 1px solid var(--rm-line); }
.rm-wg:first-of-type { border-top: 0; padding-top: 0; }
.rm-wg-l { font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.rm-wg-off .rm-wg-l { color: var(--rm-hot); }
.rm-wr { display: flex; align-items: center; gap: 14px; min-height: 48px; }
.rm-wr .rm-av { width: 40px; height: 40px; font-size: 19px; }
.rm-wr > b { font-size: 28px; font-weight: var(--weight-medium); white-space: nowrap; }
.rm-wr > span:not(.rm-av) { font-size: 24px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rm-wr-more { font-size: 22px; color: var(--ink-3); }

.rm-band { display: grid; grid-template-columns: repeat(5, 1fr) 2.4fr; gap: 0; align-items: stretch;
  background: var(--rm-card); border: 1px solid var(--rm-line); border-radius: var(--radius-xl); padding: 24px 8px; }
.rm-fig { display: flex; flex-direction: column; justify-content: center; padding: 0 20px; border-right: 1px solid var(--rm-line); min-width: 0; }
.rm-fig b { font-size: 72px; line-height: 1; font-weight: var(--weight-medium); letter-spacing: -0.02em; }
.rm-fig span { font-size: 18px; letter-spacing: 0.05em; color: var(--ink-3); margin-top: 10px; white-space: nowrap; }
.rm-fig.hot b { color: var(--rm-hot); }
.rm-att { display: flex; flex-direction: column; gap: 10px; padding: 0 28px; min-width: 0; }
.rm-att .rm-eyebrow { font-size: 18px; }
.rm-att-row { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
.rm-att-row b { font-size: 28px; font-weight: var(--weight-medium); }
.rm-att-row.hot b { color: var(--rm-hot); }
.rm-att-row span { font-size: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rm-att-row em { font-style: normal; font-size: 22px; color: var(--ink-3); white-space: nowrap; margin-left: auto; }

/* ── 1b · The studio this week ───────────────────────────────────────────── */
.rm-studio-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; }
.rm-dl-grid { display: grid; grid-template-columns: 130px 110px 1fr 220px 190px; gap: 16px; align-items: center; }
.rm-dl-cols { font-size: 18px; letter-spacing: 0.1em; color: var(--ink-3); padding: 0 18px 10px; border-bottom: 1px solid var(--rm-line); }
.rm-dl-row { min-height: 70px; padding: 0 18px; border-bottom: 1px solid var(--rm-line); }
.rm-dl-row .d { font-size: 26px; }
.rm-dl-row .r { font-size: 28px; font-weight: var(--weight-medium); color: var(--rm-blue); }
.rm-dl-row .p { font-size: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-dl-row .s { font-size: 24px; color: var(--ink-2); }
.rm-dl-row .left { font-size: 22px; letter-spacing: 0.06em; color: var(--ink-3); text-align: right; }
.rm-dl-row.past { background: var(--late-tint); border-radius: var(--radius-10); border-bottom-color: transparent; }
.rm-dl-row.past .d, .rm-dl-row.past .r, .rm-dl-row.past .left { color: var(--rm-hot); }
.rm-dl-row.soon .left { color: var(--ink); }
.rm-dl-none { padding: 18px; }
.rm-col { display: flex; flex-direction: column; gap: 32px; min-height: 0; }
.rm-go { flex: 1.3; overflow: hidden; }
.rm-iss { flex: 1; overflow: hidden; }
.rm-go-row { display: flex; align-items: center; gap: 18px; min-height: 58px; border-top: 1px solid var(--rm-line); min-width: 0; }
.rm-go-row:first-of-type { border-top: 0; }
.rm-go-row b { font-size: 28px; font-weight: var(--weight-medium); color: var(--rm-blue); }
.rm-go-row span { font-size: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.rm-go-row i { font-style: normal; font-size: 22px; color: var(--ink-3); white-space: nowrap; }
.rm-stage-pill { font-style: normal; font-size: 20px; padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--blue-tint-2); color: var(--blue-pill-ink); white-space: nowrap; }
.rm-stage-pill.hot { background: var(--late-tint); color: var(--rm-hot); }
.rm-strip { display: flex; align-items: center; gap: 20px; padding: 18px 28px; border-radius: var(--radius-xl);
  background: var(--rm-card); border: 1px solid var(--rm-line); }
.rm-strip i { width: 12px; height: 12px; border-radius: 50%; background: var(--rm-hot); }
.rm-strip .k { font-size: 20px; letter-spacing: 0.12em; color: var(--rm-hot); }
.rm-strip .v { font-size: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.rm-strip .h { font-size: 18px; letter-spacing: 0.12em; color: var(--ink-3); }

/* ── 2 · Starting soon ───────────────────────────────────────────────────── */
.rm-soon-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 620px; gap: 48px; }
.rm-soon-left { display: flex; flex-direction: column; gap: 18px; min-width: 0; justify-content: center; }
.rm-count { font-size: 280px; line-height: 0.88; font-weight: var(--weight-medium); letter-spacing: -0.04em; color: var(--rm-hot); }
.rm-soon-title { font-size: 56px; line-height: 1.15; font-weight: var(--weight-medium); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rm-soon-sub { font-size: 30px; color: var(--ink-2); }
.rm-soon-act { display: flex; align-items: center; gap: 28px; margin-top: 18px; }
.rm-join { font-size: 36px; font-weight: var(--weight-medium); padding: 22px 36px; border-radius: var(--radius-xl); border: 0; cursor: pointer;
  background: var(--brand-orange); color: var(--brand-white); display: inline-flex; align-items: center; gap: 20px; }
.rm-soon-note { font-size: 22px; color: var(--ink-3); max-width: 520px; }
.rm-who { gap: 16px; }
.rm-who-row { display: flex; align-items: center; gap: 18px; }
.rm-who-row div b { display: block; font-size: 30px; font-weight: var(--weight-medium); }
.rm-who-row div span { display: block; font-size: 22px; color: var(--ink-3); }
.rm-who-foot { margin-top: auto; font-size: 18px; letter-spacing: 0.12em; color: var(--ink-3); }
.rm-progress { height: 8px; border-radius: var(--radius-pill); background: var(--rm-line); overflow: hidden; }
.rm-progress i { display: block; height: 100%; background: var(--rm-hot); transition: width var(--dur-slow) linear; }

/* ── 3 · Today ───────────────────────────────────────────────────────────── */
.rm-today-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 520px; gap: 40px; }
.rm-rows { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden; }
.rm-row { display: grid; grid-template-columns: 64px 170px 1fr 200px; gap: 22px; align-items: center; text-align: left;
  min-height: 96px; padding: 12px 24px; box-sizing: border-box; border-radius: var(--radius-xl);
  background: var(--rm-card); border: 1px solid var(--rm-line); width: 100%; }
button.rm-row { cursor: pointer; }
.rm-row.past { opacity: 0.45; min-height: 72px; }
.rm-row.next { border: 3px solid var(--rm-hot); }
.rm-rk { width: 52px; height: 52px; border-radius: var(--radius-10); display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: var(--weight-medium); background: var(--grey-pill); }
.rm-row .st b { display: block; font-size: 36px; font-weight: var(--weight-medium); }
.rm-row .st span { font-size: 18px; letter-spacing: 0.08em; color: var(--ink-3); }
.rm-row .tt { min-width: 0; }
.rm-row .tt b { display: block; font-size: 32px; font-weight: var(--weight-regular); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-row .tt span { display: block; font-size: 22px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-row .state { font-size: 20px; letter-spacing: 0.1em; color: var(--ink-3); text-align: right; }
.rm-row.next .state { color: var(--rm-hot); }
.rm-rows-none { padding: 32px; }
.rm-rows-foot { font-size: 20px; color: var(--ink-3); margin-top: 6px; }
.rm-side { display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.rm-standing { display: flex; align-items: center; gap: 18px; text-align: left; padding: 18px 22px; border-radius: var(--radius-xl);
  background: var(--rm-card); border: 1px solid var(--rm-line); cursor: pointer; }
.rm-standing div b { display: block; font-size: 28px; font-weight: var(--weight-medium); }
.rm-standing div span { display: block; font-size: 20px; color: var(--ink-3); }
.rm-keys { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.rm-keyrow { display: flex; align-items: center; gap: 18px; font-size: 24px; color: var(--ink-2); }
.rm-keyrow kbd { min-width: 96px; text-align: center; font-size: 18px; }
.rm-leave { margin-top: 18px; font-size: 20px; padding: 14px 18px; border-radius: var(--radius-10); background: transparent;
  border: 1px solid var(--rm-line); color: var(--ink-2); cursor: pointer; text-align: left; }
.rm-sleepbar { height: 6px; border-radius: var(--radius-pill); background: var(--rm-hot); opacity: 0; transition: width 1s linear, opacity var(--dur-base) linear; }

/* ── 4 · Visitor ─────────────────────────────────────────────────────────── */
.rm-visitor { justify-content: space-between; }
.rm-welcome { display: flex; flex-direction: column; gap: 28px; max-width: 1500px; }
.rm-welcome h1 { margin: 0; font-size: 120px; line-height: 1; font-weight: var(--weight-medium); letter-spacing: -0.035em; }
.rm-welcome p { margin: 0; font-size: 36px; color: var(--ink-2); }
.rm-welcome p b { color: var(--ink); font-weight: var(--weight-medium); }
.rm-vfoot { display: flex; gap: 72px; align-items: baseline; padding-top: 28px; border-top: 1px solid var(--rm-line); }
.rm-vfoot .k { display: block; font-size: 18px; letter-spacing: 0.12em; color: var(--ink-3); margin-bottom: 8px; }
.rm-vfoot .v { font-size: 30px; }

/* Focus is for the keyboard on the table: big enough to see across the room. */
.rm button:focus-visible { box-shadow: 0 0 0 4px var(--focus-ring); }

/* ── The rail's Room display button (rail foot, above your name) ─────────── */
.rail .rail-foot .rail-room {
  display: flex; align-items: center; justify-content: center; gap: 6px; align-self: stretch;
  margin: 0 -8px 12px; min-height: 36px; padding: 0 8px; border: 1px solid var(--hair); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink-2); font-family: var(--font-sans); font-size: 11.5px;
  font-weight: var(--weight-regular); white-space: nowrap; cursor: pointer; }
.rail .rail-foot .rail-room[hidden] { display: none; }
.rail .rail-foot .rail-room:hover { border-color: var(--hair-strong); color: var(--ink); }
.rail .rail-foot .rail-room svg { flex: none; }
@media (pointer: coarse), (max-width: 760px) { .rail .rail-foot .rail-room { min-height: 44px; } }