/* ═══════════════════════════════════════════════════════════════════════
   PRISM · remote — the phone surface.

   Built on css/prism-tokens.css. The old remote wore the Arena's kit:
   Rajdhani, cyan, and four equally-weighted chunky boxes, which is why
   nothing on it read as more important than anything else.

   Three decisions carry this redesign:

   1. NAVIGATION GOES TO THE BOTTOM. This is a one-handed device held at
      a dark venue. Tabs at the top are the furthest point from the thumb;
      tabs at the bottom are the nearest. It also gives the top back to
      the one thing worth naming — the room on the wall.

   2. EACH PANE HAS EXACTLY ONE HERO. Blackout on Room, the pad on D-pad,
      the surface on Trackpad. Everything else is deliberately quieter.
      The old surface had no primary at all.

   3. PROSE IS NOT UI. Explanations moved into the help sheet. What stays
      on the pane is at most one line, and it earns its place by changing
      as you use the control.

   The accent is the room's own hue, sent by the display: the remote takes
   on the colour of whatever is on the wall.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --rm-bar:56px;
  --rm-tabs:60px;
  --rm-gut:16px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{height:100%;overscroll-behavior:none}
body{
  background:var(--p-ground);
  color:var(--p-text-2);
  font-family:var(--p-ui);
  font-size:var(--p-fs-body);
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
  overflow:hidden;
}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--p-accent);outline-offset:2px;border-radius:var(--p-r1)}

/* ═══ app bar ══════════════════════════════════════════════════════════
   One line. The old header stacked a brand row on a separate status strip
   reading "idle  ▾ LOG" — two rows of chrome above a phone-sized pane. */

.rm-bar{
  flex:none;display:flex;align-items:center;gap:var(--p-3);
  height:calc(var(--rm-bar) + var(--p-top));
  padding:var(--p-top) calc(var(--p-3) + var(--p-rgt)) 0 calc(var(--rm-gut) + var(--p-lft));
  border-bottom:1px solid var(--p-line);
  background:var(--p-surface);
}
.rm-bar .mark{flex:none;display:grid;place-items:center;width:22px;height:22px;opacity:.95}
.rm-bar .mark svg,.rm-bar .mark img{display:block}
.rm-bar .who{flex:1;min-width:0}
.rm-bar .who b{
  display:block;font-family:var(--p-display);font-size:17px;font-weight:500;
  color:var(--p-text-1);line-height:1.15;letter-spacing:.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-bar .who span{
  display:block;font-size:10.5px;letter-spacing:var(--p-track-micro);text-transform:uppercase;
  color:var(--p-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}

/* the link, as one dot — colour is state, and the tooltip carries the rest */
.rm-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--p-text-3);
  box-shadow:0 0 0 0 currentColor;transition:background var(--p-t-std)}
.rm-dot[data-s="live"]{background:var(--p-ok);animation:rm-pulse 2.6s ease-in-out infinite}
.rm-dot[data-s="joining"]{background:var(--p-warn)}
.rm-dot[data-s="down"]{background:var(--p-bad)}
@keyframes rm-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.rm-dot{animation:none!important}}

.rm-icon{
  flex:none;width:var(--p-tap);height:var(--p-tap);display:grid;place-items:center;
  border-radius:var(--p-r1);color:var(--p-text-2);
  transition:background var(--p-t-micro),color var(--p-t-micro)}
.rm-icon:active{background:var(--p-overlay);color:var(--p-text-1)}
.rm-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ═══ panes ════════════════════════════════════════════════════════════ */

/* the paired app fills the viewport between bar and tabs */
#app{flex:1;min-height:0;display:flex;flex-direction:column}
#app[hidden]{display:none}

.rm-main{flex:1;min-height:0;position:relative}
.rm-pane{
  position:absolute;inset:0;display:none;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:var(--p-5) calc(var(--rm-gut) + var(--p-rgt)) var(--p-6) calc(var(--rm-gut) + var(--p-lft));
}
.rm-pane.on{display:flex}
.rm-pane.flush{padding-bottom:var(--p-3)}

/* section label — 11px, tracked, with a rule. Quiet by design: it is a
   signpost, not a heading. */
.rm-sec{
  display:flex;align-items:center;gap:var(--p-3);
  font-size:var(--p-fs-micro);font-weight:600;letter-spacing:var(--p-track-micro);
  text-transform:uppercase;color:var(--p-text-3);
  margin:var(--p-5) 0 var(--p-3)}
.rm-pane > .rm-sec:first-child{margin-top:0}
.rm-sec::after{content:"";flex:1;height:1px;background:var(--p-line)}

.rm-card{
  border:1px solid var(--p-line);border-radius:var(--p-r3);
  background:var(--p-surface);overflow:hidden}
.rm-card + .rm-card{margin-top:var(--p-2)}

/* ═══ HERO 1 · blackout ════════════════════════════════════════════════
   The single most important control at a live event, and previously a
   button the same size and weight as "show the QR". */

.rm-black{
  width:100%;min-height:84px;border-radius:var(--p-r3);
  border:1px solid var(--p-line-hi);background:var(--p-surface);
  display:flex;align-items:center;gap:var(--p-4);
  padding:var(--p-4) var(--p-5);text-align:left;
  transition:background var(--p-t-std),border-color var(--p-t-std),transform var(--p-t-micro)}
.rm-black:active{transform:scale(.985)}
.rm-black .ring{
  flex:none;width:44px;height:44px;border-radius:50%;
  border:2px solid var(--p-line-hi);display:grid;place-items:center;
  transition:border-color var(--p-t-std),background var(--p-t-std)}
.rm-black .ring::after{content:"";width:14px;height:14px;border-radius:50%;
  background:var(--p-text-3);transition:background var(--p-t-std),transform var(--p-t-std)}
.rm-black .tx{min-width:0}
.rm-black .tx b{display:block;font-family:var(--p-display);font-size:19px;font-weight:500;
  color:var(--p-text-1);line-height:1.2}
.rm-black .tx span{display:block;font-size:var(--p-fs-small);color:var(--p-text-3);margin-top:2px}
.rm-black[aria-pressed="true"]{
  background:rgba(255,122,138,.10);border-color:var(--p-bad)}
.rm-black[aria-pressed="true"] .ring{border-color:var(--p-bad);background:rgba(255,122,138,.14)}
.rm-black[aria-pressed="true"] .ring::after{background:var(--p-bad);transform:scale(1.15)}
.rm-black[aria-pressed="true"] .tx b{color:var(--p-bad)}

/* ═══ HERO 2 · brightness ══════════════════════════════════════════════ */

.rm-bright{padding:var(--p-4) var(--p-5) var(--p-5)}
.rm-bright .top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--p-3)}
.rm-bright label{font-size:var(--p-fs-micro);font-weight:600;letter-spacing:var(--p-track-micro);
  text-transform:uppercase;color:var(--p-text-3)}
.rm-bright output{font-family:var(--p-display);font-size:26px;font-weight:400;
  color:var(--p-text-1);font-variant-numeric:tabular-nums;line-height:1}
.rm-bright output i{font-style:normal;font-size:14px;color:var(--p-text-3);margin-left:2px}

/* one slider definition for the whole remote. The old one was a 3px track
   with a 12px thumb — below the 24px touch floor, on a touch-only device. */
.rm-range{-webkit-appearance:none;appearance:none;background:none;
  width:100%;height:40px;display:block;margin:0}
.rm-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--p-raised);
  border:1px solid var(--p-line)}
.rm-range::-moz-range-track{height:6px;border-radius:3px;background:var(--p-raised);
  border:1px solid var(--p-line)}
.rm-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:28px;height:28px;border-radius:50%;margin-top:-12px;
  background:var(--p-text-1);border:3px solid var(--p-accent);
  box-shadow:0 2px 8px rgba(0,0,0,.5);transition:transform var(--p-t-micro)}
.rm-range::-moz-range-thumb{width:28px;height:28px;border-radius:50%;
  background:var(--p-text-1);border:3px solid var(--p-accent);box-shadow:0 2px 8px rgba(0,0,0,.5)}
.rm-range:active::-webkit-slider-thumb{transform:scale(1.12)}

/* ═══ room controls ════════════════════════════════════════════════════ */

.rm-row{
  display:flex;align-items:center;gap:var(--p-4);width:100%;
  min-height:56px;padding:var(--p-3) var(--p-5);text-align:left;
  border-bottom:1px solid var(--p-line)}
.rm-card > .rm-row:last-child,.rm-card > *:last-child .rm-row{border-bottom:0}
.rm-row .ico{flex:none;width:22px;font-size:17px;line-height:1;text-align:center}
.rm-row .tx{flex:1;min-width:0}
.rm-row .tx b{display:block;font-size:var(--p-fs-ui);font-weight:500;color:var(--p-text-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-row .tx span{display:block;font-size:var(--p-fs-small);color:var(--p-text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-row .val{flex:none;font-family:var(--p-mono);font-size:12px;color:var(--p-text-2);
  font-variant-numeric:tabular-nums}
.rm-row .go{flex:none;color:var(--p-text-3);font-size:17px}
button.rm-row:active{background:var(--p-overlay)}

/* the slider row keeps its label and value on one line and the track below,
   so a value never has to fight a label for width */
.rm-srow{display:block;padding:var(--p-3) var(--p-5) var(--p-2)}
.rm-srow .top{display:flex;align-items:baseline;gap:var(--p-3)}
.rm-srow .top b{flex:1;font-size:var(--p-fs-ui);font-weight:500;color:var(--p-text-1)}
.rm-srow .top .val{font-family:var(--p-mono);font-size:12px;color:var(--p-accent);
  font-variant-numeric:tabular-nums}

.rm-sw{
  flex:none;width:50px;height:30px;border-radius:var(--p-rp);position:relative;
  border:1px solid var(--p-line-hi);background:var(--p-raised);
  transition:background var(--p-t-micro),border-color var(--p-t-micro)}
.rm-sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:var(--p-text-3);transition:transform var(--p-t-std) var(--p-ease),background var(--p-t-micro)}
.rm-sw[aria-checked="true"]{background:var(--p-accent-soft);border-color:var(--p-accent-line)}
.rm-sw[aria-checked="true"]::after{transform:translateX(20px);background:var(--p-accent)}

.rm-seg{display:inline-flex;border-radius:var(--p-rp);padding:3px;gap:2px;
  background:var(--p-raised);border:1px solid var(--p-line)}
.rm-seg button{
  min-height:34px;padding:0 var(--p-4);border-radius:var(--p-rp);
  font-size:var(--p-fs-micro);font-weight:600;letter-spacing:var(--p-track-micro);
  text-transform:uppercase;color:var(--p-text-3);
  transition:color var(--p-t-micro),background var(--p-t-micro)}
.rm-seg button[aria-pressed="true"]{color:var(--p-accent);background:var(--p-accent-soft);
  box-shadow:inset 0 0 0 1px var(--p-accent-line)}

/* action pills — a room's momentary buttons */
.rm-pills{display:flex;flex-wrap:wrap;gap:var(--p-2);padding:var(--p-4) var(--p-5)}
.rm-pill{
  display:inline-flex;align-items:center;gap:var(--p-2);
  min-height:46px;padding:0 var(--p-4);border-radius:var(--p-rp);
  border:1px solid var(--p-line-hi);background:var(--p-raised);
  color:var(--p-text-1);font-size:var(--p-fs-ui);font-weight:500;
  transition:transform var(--p-t-micro),background var(--p-t-micro),border-color var(--p-t-micro)}
.rm-pill:active{transform:scale(.95);border-color:var(--p-accent);background:var(--p-accent-soft)}
.rm-pill .ico{font-size:15px;line-height:1}
.rm-pill.danger{color:var(--p-bad);border-color:rgba(255,122,138,.34)}

/* quick actions — four square tiles, icon over label, no prose */
.rm-quad{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--p-2)}
.rm-quad button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:76px;border-radius:var(--p-r2);
  border:1px solid var(--p-line);background:var(--p-surface);
  color:var(--p-text-2);font-size:10.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;text-align:center;
  transition:transform var(--p-t-micro),border-color var(--p-t-micro),color var(--p-t-micro)}
.rm-quad button:active{transform:scale(.95);border-color:var(--p-accent);color:var(--p-text-1)}
.rm-quad svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;color:var(--p-accent)}

/* ═══ HERO 3 · the D-pad ═══════════════════════════════════════════════
   A cross, not a 3×3 grid with two dead corners. The centre is a distinct
   shape because it does a distinct thing. */

.rm-padwrap{display:grid;place-items:center;padding:var(--p-4) 0 var(--p-2)}
#dpad{
  position:relative;width:min(272px,72vw);aspect-ratio:1;
  border-radius:34%;border:1px solid var(--p-line);
  background:radial-gradient(circle at 50% 42%,var(--p-raised),var(--p-surface) 74%);
  box-shadow:var(--p-e2),inset 0 1px 0 rgba(255,255,255,.04)}
/* the seams that make four zones read as four buttons */
#dpad::before{content:"";position:absolute;inset:14%;pointer-events:none;
  background:
    linear-gradient(45deg,transparent calc(50% - .5px),var(--p-line) 50%,transparent calc(50% + .5px)),
    linear-gradient(-45deg,transparent calc(50% - .5px),var(--p-line) 50%,transparent calc(50% + .5px));
  mask:radial-gradient(circle at 50% 50%,transparent 46%,#000 47%);
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent 46%,#000 47%)}
#dpad button{
  position:absolute;display:grid;place-items:center;
  color:var(--p-text-2);border-radius:22px;
  transition:color var(--p-t-micro),background var(--p-t-micro),transform var(--p-t-micro)}
#dpad button{color:var(--p-text-1)}
#dpad button svg{width:30px;height:30px;fill:currentColor;opacity:.62;
  transition:opacity var(--p-t-micro),transform var(--p-t-micro)}
#dpad button.hot svg,#dpad button:active svg{opacity:1;transform:scale(1.08)}
#dpad .up,#dpad .down{left:26%;right:26%;height:30%}
#dpad .up{top:2%} #dpad .down{bottom:2%}
#dpad .left,#dpad .right{top:26%;bottom:26%;width:30%}
#dpad .left{left:2%} #dpad .right{right:2%}
#dpad button.hot,#dpad button:active{
  color:var(--p-accent);background:var(--p-accent-soft);transform:scale(.94)}
#dpad .ok{
  left:29%;right:29%;top:29%;bottom:29%;border-radius:50%;
  border:1px solid var(--p-line-hi);background:var(--p-surface);
  font-family:var(--p-display);font-size:15px;font-weight:600;letter-spacing:.14em;
  color:var(--p-text-1);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),var(--p-e1)}
#dpad .ok.hot,#dpad .ok:active{
  border-color:var(--p-accent);color:var(--p-accent);background:var(--p-accent-soft)}

/* shortcut chips — one line each, key badge then what it does. The old
   version gave each a two-line 52px block and filled the screen with six. */
.rm-chips{display:flex;flex-wrap:wrap;gap:var(--p-2)}
.rm-chip{
  display:inline-flex;align-items:center;gap:var(--p-3);
  min-height:44px;padding:0 var(--p-4) 0 6px;border-radius:var(--p-rp);
  border:1px solid var(--p-line);background:var(--p-surface);
  color:var(--p-text-2);font-size:var(--p-fs-ui);
  transition:transform var(--p-t-micro),border-color var(--p-t-micro),color var(--p-t-micro)}
.rm-chip:active{transform:scale(.95);border-color:var(--p-accent);color:var(--p-text-1)}
.rm-chip kbd{
  font-family:var(--p-mono);font-size:11px;font-weight:500;line-height:1;
  min-width:32px;height:32px;padding:0 8px;border-radius:var(--p-rp);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--p-raised);border:1px solid var(--p-line-hi);color:var(--p-accent)}

/* ═══ HERO 4 · the trackpad ════════════════════════════════════════════ */

#pane-pad{padding-bottom:var(--p-3)}
.rm-seg.wide{display:grid;grid-template-columns:1fr 1fr;width:100%;margin-bottom:var(--p-4)}
.rm-seg.wide button{min-height:42px}
#padSurf{
  flex:1;min-height:240px;position:relative;overflow:hidden;
  border-radius:var(--p-r4);border:1px solid var(--p-line);
  background:radial-gradient(circle at 50% 42%,var(--p-raised),var(--p-ground) 78%);
  touch-action:none;display:grid;place-items:center;
  transition:border-color var(--p-t-std)}
/* In precision the pad *is* the wall, so it gets a grid: a spatial cue that
   this corner is that corner. Glide is relative and has no such mapping. */
#padSurf::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity var(--p-t-std);
  background:
    linear-gradient(var(--p-line-hi) 1px,transparent 1px) 0 0/100% 25%,
    linear-gradient(90deg,var(--p-line-hi) 1px,transparent 1px) 0 0/25% 100%}
#padSurf.precise::before{opacity:.5}
#padSurf.armed{border-color:var(--p-accent)}
#padSurf .ph{
  font-size:var(--p-fs-small);color:var(--p-text-3);text-align:center;line-height:1.7;
  padding:var(--p-5);pointer-events:none;transition:opacity var(--p-t-std)}
#padSurf.used .ph{opacity:0}
#padPip{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  border:2px solid var(--p-accent);background:var(--p-accent-soft);
  opacity:0;pointer-events:none;transition:opacity var(--p-t-std),background var(--p-t-micro)}
#padPip.on{opacity:1}
#padPip.down{background:var(--p-accent)}
#padHint{
  flex:none;min-height:18px;margin-top:var(--p-3);text-align:center;
  font-size:var(--p-fs-small);color:var(--p-text-3);
  transition:color var(--p-t-micro)}
#padHint.hot{color:var(--p-accent)}

/* ═══ rooms ════════════════════════════════════════════════════════════ */

.rm-room{
  display:flex;align-items:center;gap:var(--p-4);width:100%;
  min-height:64px;padding:var(--p-3) var(--p-5);text-align:left;
  border-bottom:1px solid var(--p-line)}
.rm-room:last-child{border-bottom:0}
.rm-room .ico{flex:none;width:26px;font-size:19px;text-align:center;line-height:1}
.rm-room .tx{flex:1;min-width:0}
.rm-room .tx b{display:block;font-family:var(--p-display);font-size:16px;font-weight:500;
  color:var(--p-text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-room .tx span{display:block;font-size:var(--p-fs-small);color:var(--p-text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-room .go{flex:none;color:var(--p-text-3);font-size:18px}
.rm-room[aria-current="true"]{background:var(--p-accent-soft)}
.rm-room[aria-current="true"] .go{color:var(--p-accent)}
.rm-room:active{background:var(--p-overlay)}

/* ═══ bottom tabs ══════════════════════════════════════════════════════
   Where the thumb already is. */

.rm-tabs{
  flex:none;display:grid;grid-template-columns:repeat(4,1fr);
  height:calc(var(--rm-tabs) + var(--p-bot));
  padding-bottom:var(--p-bot);
  border-top:1px solid var(--p-line);background:var(--p-surface)}
.rm-tabs button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--p-text-3);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  transition:color var(--p-t-micro)}
.rm-tabs svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.rm-tabs button[aria-selected="true"]{color:var(--p-accent)}
.rm-tabs button:active{color:var(--p-text-1)}

/* ═══ join ═════════════════════════════════════════════════════════════ */

#join{
  position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:center;
  gap:var(--p-4);background:var(--p-ground);
  padding:calc(var(--p-7) + var(--p-top)) calc(var(--p-6) + var(--p-rgt))
          calc(var(--p-7) + var(--p-bot)) calc(var(--p-6) + var(--p-lft));
  transition:opacity var(--p-t-enter),transform var(--p-t-enter)}
#join::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 420px at 50% 22%,rgba(109,155,255,.13),transparent 70%)}
#join.gone{opacity:0;transform:scale(1.04);pointer-events:none}
#join > *{position:relative}
#joinMark{display:flex;align-items:center;gap:var(--p-3);margin-bottom:var(--p-2)}
#joinMark .art{display:grid;place-items:center;width:34px;height:34px;flex:none}
#joinMark svg,#joinMark img{display:block}
#joinMark b{font-family:var(--p-display);font-size:26px;font-weight:400;letter-spacing:.2em;
  color:var(--p-text-1)}
#join h1{font-family:var(--p-display);font-size:24px;font-weight:300;color:var(--p-text-1);
  line-height:1.25;margin-bottom:var(--p-1)}
#join .lede{font-size:var(--p-fs-body);color:var(--p-text-3);margin-bottom:var(--p-5)}
#join label{display:block;font-size:var(--p-fs-micro);font-weight:600;
  letter-spacing:var(--p-track-micro);text-transform:uppercase;color:var(--p-text-3);
  margin-bottom:var(--p-2)}
#join input{
  width:100%;height:66px;border-radius:var(--p-r2);
  border:1px solid var(--p-line-hi);background:var(--p-surface);
  font-family:var(--p-mono);font-size:30px;font-weight:500;letter-spacing:.34em;
  text-align:center;text-indent:.34em;color:var(--p-text-1);text-transform:uppercase;
  outline:none;transition:border-color var(--p-t-micro),box-shadow var(--p-t-micro)}
#join input::placeholder{color:var(--p-line-hi);letter-spacing:.3em}
#join input:focus{border-color:var(--p-accent);box-shadow:0 0 0 3px var(--p-accent-soft)}
#pinwrap{margin-top:var(--p-4)}
#pinwrap input{height:56px;font-size:24px}
#go{
  width:100%;min-height:56px;margin-top:var(--p-5);border-radius:var(--p-r2);
  background:var(--p-accent);color:var(--p-ground);
  font-family:var(--p-display);font-size:16px;font-weight:600;letter-spacing:.14em;
  transition:opacity var(--p-t-micro),transform var(--p-t-micro)}
#go:active{transform:scale(.98)}
#go:disabled{opacity:.45}
#err{min-height:20px;margin-top:var(--p-3);text-align:center;
  font-size:var(--p-fs-ui);color:var(--p-bad)}
#join .fine{margin-top:var(--p-5);text-align:center;
  font-size:var(--p-fs-small);color:var(--p-text-3);line-height:1.7}
#joinGear{position:absolute;top:calc(var(--p-4) + var(--p-top));right:calc(var(--p-4) + var(--p-rgt));z-index:2}
@keyframes rm-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* ═══ sheet ════════════════════════════════════════════════════════════ */

.rm-scrim{position:fixed;inset:0;z-index:80;background:var(--p-scrim);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:flex-end;opacity:0;transition:opacity var(--p-t-enter)}
.rm-scrim.on{opacity:1}
.rm-sheet{
  width:100%;max-height:86dvh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--p-surface);border-top:1px solid var(--p-line-hi);
  border-radius:var(--p-r4) var(--p-r4) 0 0;box-shadow:var(--p-e3);
  padding-bottom:calc(var(--p-6) + var(--p-bot));
  transform:translateY(28px);transition:transform var(--p-t-enter) var(--p-ease)}
.rm-scrim.on .rm-sheet{transform:none}
.rm-sheet header{
  position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:var(--p-3);
  padding:var(--p-4) var(--p-3) var(--p-4) var(--p-5);
  background:var(--p-surface);border-bottom:1px solid var(--p-line)}
.rm-sheet header h2{flex:1;font-family:var(--p-display);font-size:19px;font-weight:500;
  color:var(--p-text-1)}
.rm-sheet .body{padding:var(--p-5)}
.rm-sheet .body > .rm-sec:first-child{margin-top:0}
.rm-sheet p{font-size:var(--p-fs-ui);line-height:1.7;color:var(--p-text-2);margin-bottom:var(--p-3)}
.rm-sheet p:last-child{margin-bottom:0}
.rm-sheet dl{display:grid;grid-template-columns:auto 1fr;gap:var(--p-2) var(--p-4);align-items:center}
.rm-sheet dd{font-size:var(--p-fs-ui)}
.rm-log{font-family:var(--p-mono);font-size:11px;line-height:1.8;color:var(--p-text-3);
  max-height:180px;overflow-y:auto;background:var(--p-ground);
  border:1px solid var(--p-line);border-radius:var(--p-r1);padding:var(--p-3)}
.rm-log b{color:var(--p-text-2);font-weight:500}
.rm-log .bad{color:var(--p-bad)}
.rm-log .warn{color:var(--p-warn)}

/* ═══ toast ════════════════════════════════════════════════════════════ */

.rm-toast{
  position:fixed;left:50%;bottom:calc(var(--rm-tabs) + var(--p-bot) + 16px);
  transform:translate(-50%,10px);z-index:90;
  max-width:min(360px,86vw);padding:var(--p-3) var(--p-5);border-radius:var(--p-rp);
  background:var(--p-overlay);border:1px solid var(--p-line-hi);box-shadow:var(--p-e2);
  color:var(--p-text-1);font-size:var(--p-fs-ui);text-align:center;
  opacity:0;pointer-events:none;
  transition:opacity var(--p-t-std),transform var(--p-t-std) var(--p-ease)}
.rm-toast.on{opacity:1;transform:translate(-50%,0)}

.rm-empty{color:var(--p-text-3);font-size:var(--p-fs-ui);text-align:center;
  padding:var(--p-7) var(--p-5);line-height:1.7}
.rm-empty b{color:var(--p-text-2)}

/* ═══ left-handed ══════════════════════════════════════════════════════
   Mirrors the reading direction of every row, so the thumb reaches the
   control rather than the label. */
html[data-hand="l"] .rm-row,
html[data-hand="l"] .rm-room,
html[data-hand="l"] .rm-black{flex-direction:row-reverse;text-align:right}
html[data-hand="l"] .rm-sec{flex-direction:row-reverse}
html[data-hand="l"] .rm-pills,
html[data-hand="l"] .rm-chips{justify-content:flex-end}
html[data-hand="l"] .rm-chip{flex-direction:row-reverse;padding:0 6px 0 var(--p-4)}

/* An iOS haptic needs a real checkbox in the layout — display:none kills
   it — so it is parked off-screen instead. */
#pui-ios-haptic{position:fixed;left:-9999px;top:0;opacity:0;pointer-events:none}