/* =========================================================================
   room.css — the encounter room's stage (P23).

   v1's dark consultation room, ported onto v3's tokens. Two rules govern the whole file:

   1. **The dark palette is SCOPED to `.room`.** v1 flipped its tokens on `body.encounter-mode`,
      which meant a class on the document could reach anything — including, in principle, a
      printed slip. Here the whole flip is a token block on the room's own root element, so it
      cascades to the room's subtree and to nothing else. There is no `body` class, no
      `:root` override, and no rule outside `.room …` in this file (D-114).
   2. **Nothing here is Annex-H geometry, and nothing here animates on paper.** The print block
      at the bottom hides the room's chrome; it sets no transform, no opacity and no `@page` —
      `tests/ui-motion.test.mjs` holds every app stylesheet to that, and this one joins the
      list. The animations are cancelled for paper by theme.css's one universal rule (D-116).

   Radii, curves and durations are the theme's own tokens; the colours are v1's dark surfaces,
   which have no light-mode counterpart to alias to and are therefore stated once, here, as the
   room's own token block — and USED as tokens below (D-108, finished in D-116: the 22 places
   that repeated one of those hex values now say `var(--teal-ink)` and mean the same pixel).
   ========================================================================= */

/* ============================ THE DARK FLIP ============================ */
.room{
  /* v1's dark surfaces. Every value below is `truemed-yakap/public/css/theme.css`'s
     `body.encounter-mode` block, and the ones that are not (`--r`, `--pill`, the motion
     tokens) are deliberately NOT redeclared: the room bends the app's colour, not its shape. */
  --bg:#11151D; --surface:#1C222D; --surface-2:#232936;
  --ink:#F2F4F7; --ink-2:#B9C1CD; --ink-3:#8A94A4;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
  --brand-soft:rgba(229,96,59,.12); --teal-soft:rgba(91,191,181,.14);
  --warn-soft:rgba(234,179,8,.12); --danger-soft:rgba(239,68,68,.12);
  --ok-soft:rgba(34,197,94,.12);
  --warn:#F0CF6D; --danger:#FF9B9B; --ok:#7DE0A3; --teal-ink:#8FDED4; --brand-ink:#FF9D7C;
  --hi-soft:inset 0 1px 0 rgba(255,255,255,.06);
  --shadow:0 10px 26px rgba(0,0,0,.36);
  /* The RAISED surface of this room: the gradient a `.btn` and the segment's selected thumb
     both stand on. It was written out twice as `#2A3140,#222836`, which is two chances for a
     dark-theme surface to drift from itself one refactor apart (D-120). */
  --room-raised:linear-gradient(180deg,#2A3140,#222836);

  display:flex; flex-direction:column; gap:0; min-width:0;
  color:var(--ink);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:
    radial-gradient(900px 480px at 8% -6%,rgba(91,191,181,.13),transparent 62%),
    radial-gradient(820px 440px at 94% -4%,rgba(229,96,59,.11),transparent 58%),
    var(--bg);
  box-shadow:0 24px 60px rgba(23,28,38,.22);
  animation:roomIn var(--t-enter) var(--ease-out) both;
}
@keyframes roomIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* The shared primitives, re-grounded. They are token-driven everywhere except for the two
   literal gradients `.btn` carries, which are what these three rules replace. */
.room .btn{background:var(--room-raised);color:var(--ink);
  border-color:var(--line);box-shadow:var(--hi-soft),0 2px 6px rgba(0,0,0,.3)}
.room .btn:hover{border-color:rgba(91,191,181,.5);box-shadow:0 8px 20px rgba(0,0,0,.4)}
.room .btn.primary{background:linear-gradient(180deg,var(--brand-hi),var(--brand));color:#fff;
  border-color:transparent}
.room .btn.teal{background:linear-gradient(180deg,rgba(91,191,181,.2),rgba(91,191,181,.1));
  color:var(--teal-ink);border-color:rgba(91,191,181,.45)}
.room .btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2);box-shadow:none}
.room .btn.ghost:hover{background:rgba(255,255,255,.07);color:var(--ink);box-shadow:none}
.room .btn[disabled],.room .btn:disabled{opacity:.45}
.room .pill{background:rgba(255,255,255,.07);color:var(--ink-2)}
.room .pill.ok{background:rgba(34,197,94,.14);color:var(--ok)}
.room .pill.warn{background:rgba(234,179,8,.14);color:var(--warn)}
.room .pill.danger{background:rgba(239,68,68,.14);color:var(--danger)}
.room .pill.teal{background:rgba(91,191,181,.16);color:var(--teal-ink)}
.room .pill.brand{background:rgba(229,96,59,.16);color:var(--brand-ink)}
.room .pill.muted{background:rgba(255,255,255,.07);color:var(--ink-2)}
/* The segment's "on" thumb is a WHITE gradient in the light theme; in here it has to be the
   raised dark surface, or the selected tab reads as an empty slot. */
.room .seg{background:rgba(0,0,0,.28);border-color:var(--line);box-shadow:none}
.room .seg button{color:var(--ink-3)}
.room .seg button.on{color:var(--teal-ink);background:var(--room-raised);
  box-shadow:0 2px 8px rgba(0,0,0,.4),var(--hi-soft)}
.room .mono{font-family:var(--font-mono)}
.room .spacer{flex:1}

/* ============================ TOP BAR ============================ */
.rm-top{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:11px 18px;border-bottom:1px solid var(--line);
  background:rgba(17,21,29,.72);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
.rm-status{display:inline-flex;align-items:center;gap:9px;padding:6px 14px;border-radius:var(--pill);
  font-size:var(--fs-sm);font-weight:800;
  background:rgba(234,179,8,.12);color:var(--warn);border:1px solid rgba(234,179,8,.28)}
.rm-status.live{background:rgba(91,191,181,.14);color:var(--teal-ink);border-color:rgba(91,191,181,.36)}
.rm-status .waitdot,.rm-status .livedot{width:8px;height:8px;border-radius:50%;flex:none;background:currentColor}
.rm-status .livedot{animation:roomPulse 2.1s infinite}
@keyframes roomPulse{
  0%{box-shadow:0 0 0 0 rgba(91,191,181,.55)}
  70%{box-shadow:0 0 0 9px rgba(91,191,181,0)}
  100%{box-shadow:0 0 0 0 rgba(91,191,181,0)}
}
.rm-meta{display:flex;align-items:center;gap:20px}
.rm-meta-i{display:flex;flex-direction:column;gap:1px;text-align:right}
.rm-meta-i .k{font-size:var(--fs-2xs);font-weight:900;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ink-3)}
.rm-meta-i .v{font-size:var(--fs-sm);font-weight:800;color:var(--ink);white-space:nowrap}
.rm-meta-i.tim .v{font-size:var(--fs-lg);font-weight:700;color:var(--teal-ink);letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
/* Wave 4, #22 — the clock after Finalize. It is a number that is no longer moving, so it stops
   wearing the live teal the running clock wears and reads as the record it now is. The tile keeps
   its size and its tabular figures: only the colour says the counting is over. */
.rm-meta-i.tim.stopped .v{color:var(--ink-2)}

/* ============================ THE THREE ZONES ============================ */
.rm-grid{
  flex:1;display:grid;gap:16px;align-items:start;
  grid-template-columns:290px minmax(0,1fr) 372px;
  padding:18px;
}
.rm-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow),var(--hi-soft)}
.rm-rail{display:flex;flex-direction:column;gap:11px;min-width:0}

/* ---- the patient card ---- */
.rm-pcard{padding:20px 18px 16px;text-align:center;position:relative;overflow:hidden}
.rm-pcard::before{content:"";position:absolute;inset:0 0 auto;height:74px;
  background:linear-gradient(180deg,rgba(91,191,181,.14),transparent)}
.rm-photo{position:relative;display:grid;place-items:center;width:92px;height:92px;margin:0 auto 12px;
  border-radius:26px;color:#fff;font-size:var(--fs-3xl);font-weight:900;letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--teal-500),var(--teal-700));
  border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 30px rgba(0,0,0,.45)}
.rm-pname{position:relative;font-size:var(--fs-lg);font-weight:900;letter-spacing:-.02em;line-height:1.2}
.rm-psub{font-size:var(--fs-xs);font-weight:700;color:var(--ink-2);margin-top:3px}
.rm-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:11px 0 2px}
.rm-kvs{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);
  display:flex;flex-direction:column;gap:9px;text-align:left}
.rm-kv{display:flex;flex-direction:column;gap:1px}
.rm-kv .k{font-size:var(--fs-2xs);font-weight:900;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ink-3)}
.rm-kv .v{font-size:var(--fs-sm);font-weight:800;color:var(--ink);line-height:1.35;overflow-wrap:anywhere}
.rm-kv.coral .v{color:var(--brand-ink)}

/* ---- tools ---- */
.rm-sec-t{font-size:var(--fs-2xs);font-weight:900;letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--ink-3);margin:9px 2px 2px}
/* Three tools, three columns. v1 had six in two — the row is full either way, and a lone
   Evaluate under two siblings would read as a tile that lost its pair.

   `auto-fit` rather than a fixed 3, since D-146: a first encounter carries no prescription, so
   its grid has two tiles on it and a third empty track would have left a hole where the button
   that was removed used to be — which is the greyed tile again, wearing no label. Empty tracks
   collapse and the tiles that are there share the row. */
.rm-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:9px}
/* What this encounter TYPE does not carry, and where it is carried instead (D-146). It is a
   sentence, not a disabled control: `--ink-2` rather than `--ink-3` because the rail is dark and
   this is the only place the room explains a button that is not on it. */
.rm-tools-note{margin:9px 2px 0;font-size:var(--fs-xs);font-weight:700;line-height:1.45;
  color:var(--ink-2)}
/* The hint wrapper (`room.js`'s `hintable`). A disabled button swallows the tap that would
   read its `data-hint`, so the hint sits on this box instead — which is a plain grid cell that
   stretches its one child, so the control keeps exactly the space it had in the rail, the
   camera controls or the images column. It is never a control itself. */
.rm-hw{display:grid;min-width:0}
.rm-hw>*{width:100%}
.rm-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:13px 6px;border-radius:13px;cursor:pointer;font-family:var(--font-sans);
  border:1px solid var(--line);background:linear-gradient(180deg,#252C3A,#1E2430);color:var(--ink);
  box-shadow:var(--hi-soft),0 2px 6px rgba(0,0,0,.3);transition:transform var(--t-press),
  border-color var(--t-state),box-shadow var(--t-state)}
.rm-tool:hover{transform:translateY(-2px);border-color:rgba(91,191,181,.5);
  box-shadow:0 10px 24px rgba(0,0,0,.42)}
.rm-tool:active{transform:none}
.rm-tool:focus-visible{outline:2px solid var(--teal-500);outline-offset:2px}
.rm-tool.off,.rm-tool[disabled]{opacity:.42;cursor:not-allowed}
.rm-tool.off:hover,.rm-tool[disabled]:hover{transform:none;border-color:var(--line);box-shadow:var(--hi-soft)}
.rm-tool .ti{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:rgba(91,191,181,.14);color:var(--teal-ink);border:1px solid rgba(91,191,181,.26)}
.rm-tool .ti .i{width:17px;height:17px}
.rm-tool.off .ti,.rm-tool[disabled] .ti{background:rgba(255,255,255,.05);color:var(--ink-3);
  border-color:var(--line)}
.rm-tool .tl{font-size:var(--fs-xs);font-weight:800}
.rm-legal{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;border-radius:var(--r);
  border:1px dashed rgba(91,191,181,.32);background:rgba(91,191,181,.06);
  color:var(--ink-2);font-size:var(--fs-xs);font-weight:700;line-height:1.45}
.rm-legal .i{width:15px;height:15px;flex:none;margin-top:1px;color:var(--teal-ink)}

/* ============================ CENTRE STAGE ============================ */
.rm-stage{display:flex;flex-direction:column;gap:14px;min-width:0}
.rm-video{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:
    radial-gradient(700px 340px at 50% 30%,rgba(91,191,181,.09),transparent 62%),
    linear-gradient(180deg,#161B25,#10141C);
  box-shadow:0 26px 60px rgba(0,0,0,.5);display:flex;flex-direction:column;min-height:430px}
/* Three items on one row and only ONE of them could shrink. Both pills are the theme's
   `white-space:nowrap`, so their min-content width is their whole label and they refuse to
   give ground; the name's `overflow:hidden` set its automatic minimum size to ZERO, so it
   absorbed the entire shortfall — at 375px a 377px name went into a 32px box and the bar read
   `TR…`, two letters, over a clinic of 104 people whose names differ only in the tail. It was
   truncated at 1440 too, by 117px.
   This bar is the one that says WHO is being photographed (PC 2024-0013 §V.D.2), so the name
   is the thing that must survive, not the thing that gets spent: the row wraps, and the name
   wraps inside it. The same reading as the allergies pill — a person's name is not a chip. */
.rm-vid-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;row-gap:6px;padding:11px 15px;
  border-bottom:1px solid var(--line-2);background:rgba(255,255,255,.02)}
.rm-vid-name{font-size:var(--fs-sm);font-weight:800;color:var(--ink-2);
  flex:1 1 40%;min-width:0;line-height:1.3}
.rm-vid-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:34px 24px;position:relative}
.rm-vid-body::before{content:"";position:absolute;inset:18px;border-radius:18px;pointer-events:none;
  border:1px dashed rgba(255,255,255,.07)}
.rm-vid-ic{width:74px;height:74px;border-radius:24px;display:grid;place-items:center;margin-bottom:15px;
  background:rgba(229,96,59,.1);border:1px solid rgba(229,96,59,.24);color:var(--brand-ink)}
.rm-vid-ic .i{width:33px;height:33px}
.rm-vid-msg{font-size:var(--fs-xl);font-weight:900;letter-spacing:-.02em;color:#FF8A62}
.rm-vid-sub{font-size:var(--fs-sm);font-weight:650;color:var(--ink-3);max-width:52ch;margin-top:7px;line-height:1.55}
.rm-vid-ctl{position:relative;z-index:2;display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.rm-vid-ctl.idle{margin-top:16px}
.rm-vid-hint{display:inline-flex;gap:8px;align-items:center;margin-top:14px;padding:8px 13px;
  border-radius:var(--pill);max-width:52ch;text-align:left;
  border:1px solid rgba(234,179,8,.28);background:rgba(234,179,8,.1);
  color:var(--warn);font-size:var(--fs-xs);font-weight:750;line-height:1.4}
.rm-vid-hint .i{width:14px;height:14px;flex:none}

/* the live preview: the stage becomes the picture and the controls float over it */
.rm-vid-body.live{padding:0;justify-content:flex-end;align-items:stretch;overflow:hidden}
.rm-vid-body.live::before{display:none}
.rm-vid-live{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0B0E14}
.rm-vid-body.live .rm-vid-ctl{padding:34px 16px 15px;
  background:linear-gradient(180deg,rgba(9,12,17,0),rgba(9,12,17,.78))}

/* the camera chooser, opened from Devices */
.rm-cams{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(320px,86%);display:flex;flex-direction:column;gap:8px;padding:14px;
  border-radius:var(--r);border:1px solid var(--line);background:#1B212C;
  box-shadow:0 22px 50px rgba(0,0,0,.6)}
.rm-cams-t{font-size:var(--fs-2xs);font-weight:900;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ink-3)}
.rm-cam{display:block;width:100%;text-align:left;padding:10px 13px;cursor:pointer;
  border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(0,0,0,.2);
  color:var(--ink);font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:800}
.rm-cam:hover{border-color:rgba(91,191,181,.5);background:rgba(91,191,181,.1)}
.rm-cam.on{border-color:rgba(91,191,181,.55);background:rgba(91,191,181,.14)}

/* teleconsult, under the camera controls — P12's own buttons, in the stage's frame */
.rm-tele{position:relative;z-index:2;margin-top:16px;width:min(520px,100%);
  display:flex;flex-direction:column;align-items:center;gap:9px;padding:13px 15px;
  border-radius:16px;border:1px solid rgba(91,191,181,.28);background:rgba(91,191,181,.07)}
.rm-vid-body.live .rm-tele{margin:0 16px 14px;width:auto;background:rgba(9,12,17,.72);
  border-color:rgba(255,255,255,.08)}
.rm-tele-h{display:flex;align-items:center;gap:8px;font-size:var(--fs-2xs);font-weight:900;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--teal-ink)}
.rm-tele-h .i{width:15px;height:15px;flex:none}
.rm-tele-ctl{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}

/* ---- the four info cards ---- */
/* Four cards when the stage is wide enough for four, three and a wrap when it is not — the
   alternative at 1440px with the sidebar out is a 90px card breaking "PhilHealth" in half. */
.rm-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:11px}
.rm-strip-c{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow),var(--hi-soft);min-width:0}
.rm-strip-c .si{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;margin-bottom:4px;
  background:rgba(255,255,255,.05);color:var(--teal-ink);border:1px solid var(--line)}
.rm-strip-c .si .i{width:14px;height:14px}
.rm-strip-c .sk{font-size:var(--fs-2xs);font-weight:900;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ink-3)}
/* These four wrap rather than ellipsing: "PhilHealth · WAL…" is a card that has given up on
   saying the one thing it exists to say. */
.rm-strip-c .sv{font-size:var(--fs-sm);font-weight:800;color:var(--ink);line-height:1.35;
  overflow-wrap:break-word}

/* ============================ RIGHT RAIL ============================ */
.rm-side{min-width:0;position:sticky;top:18px}
.rm-side.flash .rm-card{animation:roomFlash .7s ease}
@keyframes roomFlash{0%{box-shadow:0 0 0 0 rgba(91,191,181,.5)}100%{box-shadow:0 0 0 16px rgba(91,191,181,0)}}
/* The head carries the rule that `.rm-roles` used to carry under it: D-146 took the second
   Presenter/Clinician pair off this card (the fact-card strip keeps the one), and the divider
   between the visit's identity and the panel tabs went with the block, not with the pair. */
.rm-side-h{display:flex;align-items:flex-start;gap:10px;padding:15px 16px 13px;
  border-bottom:1px solid var(--line-2)}
.rm-side-t{font-size:var(--fs-2xs);font-weight:900;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--teal-ink)}
.rm-side-s{font-size:var(--fs-2xs);font-weight:700;color:var(--ink-3);margin-top:3px;overflow-wrap:anywhere}
.rm-side-h .pill{margin-left:auto;flex:none}
.rm-side-seg{padding:13px 16px 4px}
.rm-side-seg .seg{width:100%}
.rm-side-seg .seg button{flex:1;font-size:var(--fs-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase}

/* ---- measurement tiles ---- */
.rm-vt-head{display:flex;align-items:center;gap:8px;padding:12px 16px 8px;
  font-size:var(--fs-2xs);font-weight:800;color:var(--ink-3)}
.rm-vt-hint{margin-left:auto;display:inline-flex;align-items:center;gap:5px;color:var(--ink-3)}
.rm-vt-hint .i{width:12px;height:12px}
.rm-vt-band{display:flex;align-items:center;gap:8px;padding:4px 16px 7px;font-size:var(--fs-2xs);
  font-weight:900;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ink-3)}
.rm-vt-band-n{font-weight:700;letter-spacing:0;text-transform:none;opacity:.75}
.rm-vt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 14px 12px}
.rm-vt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:11px 11px 9px;border-radius:12px;cursor:pointer;text-align:left;
  font-family:var(--font-sans);min-width:0;
  border:1px solid var(--line);background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:var(--hi-soft);transition:transform var(--t-press),border-color var(--t-state),
  box-shadow var(--t-state)}
.rm-vt:hover{border-color:rgba(91,191,181,.5);transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.35)}
.rm-vt:focus-visible{outline:2px solid var(--teal-500);outline-offset:2px}
.rm-vt .vt-k{font-size:var(--fs-2xs);font-weight:900;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ink-3)}
/* Wave 6's §6 sweep, third time of asking. D-146 measured this and listed it, D-147 listed it
   again: every measurement tile's value box overflows itself by 2px vertically, in a box that
   `overflow:hidden` really does clip. Both waves left it because the only thing in it was an em
   dash, which sits mid-height and loses nothing — and this sweep confirms the shape of that
   exactly, finding the 2px on the NINE empty tiles and on no filled one.

   It is `line-height:1.15` against a face whose own line box is a shade over 1.24 em, and the
   two pixels are the difference. `overflow:hidden` is not the thing to remove: it is what makes
   `text-overflow:ellipsis` work on a long value. So the box is given the room the font asks for.
   Each tile grows 2px, which on the FPE room's three rows is six pixels of panel — and `120/80`
   keeps the tail of its solidus, which is the character the two earlier notes said would be the
   one to lose something. */
.rm-vt .vt-v{font-size:var(--fs-xl);font-weight:900;letter-spacing:-.03em;line-height:1.25;color:var(--teal-ink);
  font-variant-numeric:tabular-nums;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.rm-vt .vt-u{font-size:var(--fs-2xs);font-weight:800;color:var(--ink-3)}
.rm-vt.empty{border-style:dashed;border-color:rgba(255,255,255,.14)}
.rm-vt.empty .vt-v{color:var(--ink-3)}
.rm-vt.req::after{content:"";position:absolute;top:8px;right:8px;width:5px;height:5px;border-radius:50%;
  background:rgba(229,96,59,.75)}
.rm-vt.req:not(.empty)::after{background:rgba(91,191,181,.8)}
.rm-vt.req.empty{border-color:rgba(229,96,59,.34);background:rgba(229,96,59,.05)}
.rm-vt.req.empty .vt-v{color:#FF8A62}
.rm-vt.editing{border-color:var(--teal-500);background:#161B25}
/* A measurement whose write is in flight (D-116). The tile shows the value that is ON ITS WAY
   and stops taking presses; the room dims the rest of the panel's tiles rather than repainting
   them, which is what a full rebuild used to do to the whole screen for every saved number. */
.rm-vt.busy{opacity:.72;cursor:progress;pointer-events:none}
.room.busy .rm-vt{cursor:progress}
.rm-vt .vt-in{padding:2px 0;border:0;background:transparent;font-size:var(--fs-xl);font-weight:900;
  color:var(--teal-ink);letter-spacing:-.02em;width:100%;box-shadow:none}
.rm-vt .vt-in:focus{outline:none}
.rm-vt-foot{display:flex;gap:8px;align-items:flex-start;padding:11px 16px 14px;
  border-top:1px solid var(--line-2);font-size:var(--fs-2xs);font-weight:700;color:var(--ink-3);line-height:1.45}
.rm-vt-foot .i{width:14px;height:14px;flex:none;margin-top:1px}

/* ---- images ---- */
.rm-img-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;padding:4px 14px 12px}
.rm-img-c{position:relative;display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:var(--bg);aspect-ratio:4/3;box-shadow:var(--shadow)}
.rm-img-c img{width:100%;height:100%;object-fit:cover;display:block}
.rm-img-c:focus-visible{outline:2px solid var(--teal-500);outline-offset:2px}
.rm-img-n{position:absolute;left:7px;bottom:6px;font-size:var(--fs-2xs);font-weight:900;color:#fff;
  background:rgba(10,13,18,.6);padding:1px 7px;border-radius:var(--pill)}
.rm-img-empty{text-align:center;padding:28px 20px;color:var(--ink-3);font-size:var(--fs-xs);
  font-weight:650;line-height:1.5}
.rm-img-empty .i{width:30px;height:30px;margin-bottom:8px;color:#FF8A62}
.rm-img-empty .b{font-size:var(--fs-md);color:var(--ink);margin-bottom:4px}
.rm-img-actions{display:flex;flex-direction:column;gap:8px;padding:6px 14px 15px;
  border-top:1px solid var(--line-2)}
.rm-img-upload{cursor:pointer}
.rm-img-upload input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.rm-img-upload:focus-within{outline:2px solid var(--teal-500);outline-offset:2px}

/* ============================ THE DD-GROUP TIMELINE ============================ */
/* P25 — the rail moved onto the stage, so `app.css`'s light dressing for it needs its two
   grounded colours re-grounded here. Everything else it uses is already a token the room flips.
   The `.rm-panel` scroll cap is the same answer app.css gives on a phone: forty-three groups is
   longer than any rail, so the list scrolls inside itself rather than off the card. */
.room .rm-panel .enc-nav{margin:0;border:0;box-shadow:none;background:transparent;
  max-height:min(560px,52vh);overflow:auto;-webkit-overflow-scrolling:touch}
.room .nav-item:hover:not(:disabled){background:var(--teal-soft);color:var(--teal-ink)}
.room .rail-h:hover{background:rgba(255,255,255,.06)}
/* D-146's "not on this encounter" disclosure, re-grounded for the dark rail: `--ink-3` on this
   surface is the greyed-out tone the closed rows themselves wear, and the one row that IS
   pressable must not read as one of them. */
.room .rail-more{color:var(--ink-2)}
.room .rail-more:hover{background:var(--teal-soft);color:var(--teal-ink)}
.room .rm-tl-away{text-align:center;padding:26px 20px;color:var(--ink-3);font-size:var(--fs-xs);
  font-weight:650;line-height:1.5}
.room .rm-tl-away .b{font-size:var(--fs-md);font-weight:900;color:var(--ink);margin-bottom:4px}
.room .rm-tl-ic{display:grid;place-items:center;width:38px;height:38px;margin:0 auto 10px;
  border-radius:13px;background:var(--teal-soft);color:var(--teal-ink);
  border:1px solid rgba(91,191,181,.26)}
.room .rm-tl-ic .i{width:18px;height:18px}
/* Three tabs where v1 had two: the labels give up a little tracking rather than the seg giving
   up a tab. */
.rm-side-seg .seg button{padding-left:6px;padding-right:6px;letter-spacing:.03em}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1280px){
  .rm-grid{grid-template-columns:262px minmax(0,1fr) 330px;gap:13px;padding:15px}
  .rm-vt-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1080px){
  .rm-grid{grid-template-columns:minmax(0,1fr) 330px}
  .rm-rail{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .rm-rail .rm-pcard{grid-row:span 3}
  .rm-side{position:static}
  .rm-video{min-height:360px}
}
@media (max-width:880px){
  .rm-top{padding:10px 13px;gap:10px}
  .rm-meta{gap:14px;margin-left:auto}
  .rm-status{order:3;width:100%;justify-content:center}
  .rm-grid{grid-template-columns:1fr;padding:13px}
  .rm-rail{grid-template-columns:1fr}
  .rm-rail .rm-pcard{grid-row:auto}
  .rm-strip{grid-template-columns:1fr 1fr}
  .rm-video{min-height:300px}
  .rm-vid-body.live{min-height:300px}
}
@media (max-width:560px){
  .rm-vid-msg{font-size:var(--fs-lg)}
  .rm-vt-grid{grid-template-columns:repeat(2,1fr)}
  .rm-strip{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------- touch targets (P26) */

/* The encounter room's own controls, held to the 44px floor theme.css sets for every `.btn` on a
   coarse pointer. This file was the one screen the P26 sweep never reached, and it is the screen
   a nurse uses standing up with a phone in one hand (D-120):

     · `.rm-tool` — the nine tools in the left rail. The tile is tall already, but the floor is
       stated here rather than left to the padding, which is what a floor is for.
     · `.rm-vt` — a MEASUREMENT tile, which is a button that opens an input. This is the control
       the phase's own type test caught setting 9px labels; the tap target is the same story.
     · `.rm-cam` — a row in the camera picker, and `.rm-img-upload` the photo-upload label.
     · `.rm-hw` — the hint wrapper: it inherits the floor so the sentence behind a DISABLED
       control has a target of its own (see `hintable` in room.js).

   `pointer:coarse` is the fence, exactly as in the other three sheets: a room on a desktop stays
   as dense as it was. The rules live HERE rather than in theme.css because these classes are
   defined in this file, and an identical-specificity rule in the earlier stylesheet loses to
   them silently — the cascade trap app.css's own block documents. */
@media (pointer:coarse){
  .rm-tool,.rm-vt,.rm-cam,.rm-img-upload,.rm-hw{min-height:44px}
  .rm-side-seg .seg button{min-height:44px}
  /* The wrapper only helps if the tap reaches it, and a disabled control fills it — so on a
     touch screen the finger lands on a dead button and no event is generated at all. The
     disabled child is transparent to pointer events here, which hands the tap to the wrapper.
     Scoped to a coarse pointer because `pointer-events:none` also kills hover, and hover is how
     a MOUSE reads the `title` that is still on the control itself (D-120). */
  .rm-hw>[disabled]{pointer-events:none}
}

/* ============================ PRINT ============================ */
/* Nothing in the room belongs on paper: the eKAS and the ePresS are their own route and their
   own stylesheet. This block hides the room's chrome and takes the dark surfaces back to ink on
   white — it sets no transform, no opacity and no @page, so nothing here can reach Annex-H
   geometry. The entrance and the status pulse are cancelled by theme.css's universal print rule
   (D-116), so this file no longer names them. */
@media print{
  .room{box-shadow:none;background:#fff;color:#000}
  .rm-top,.rm-tools,.rm-tools-note,.rm-vid-ctl,.rm-tele,.rm-img-actions,.rm-cams{display:none !important}
  .rm-grid{grid-template-columns:1fr;padding:0}
}