/* =========================================================================
   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}

/* ============================ 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. */
.rm-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
/* 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}
.rm-vid-bar{display:flex;align-items:center;gap:10px;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);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.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)}}
.rm-side-h{display:flex;align-items:flex-start;gap:10px;padding:15px 16px 12px}
.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-roles{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px 13px;
  border-bottom:1px solid var(--line-2)}
.rm-roles .k{display:block;font-size:var(--fs-2xs);font-weight:900;letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--ink-3)}
.rm-roles .v{display:block;font-size:var(--fs-sm);font-weight:800;margin-top:2px;line-height:1.3}
.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)}
.rm-vt .vt-v{font-size:var(--fs-xl);font-weight:900;letter-spacing:-.03em;line-height:1.15;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)}
.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-vid-ctl,.rm-tele,.rm-img-actions,.rm-cams{display:none !important}
  .rm-grid{grid-template-columns:1fr;padding:0}
}