/* APP-REDESIGN (owner 10 Oct 2026, from docs/design/prototype-2026-10-09): the member app and
   the provider kiosk. Its own file so it never collides with hirms.css edits; loaded after it by
   the four app hosts. Tokens only (tokens.css): tenant branding and dark mode follow by
   themselves. Brand rules held here: one Pulse primary per screen (.hs-btn-primary), no text
   under 12 px on a phone, status = dot + word (StatusPill Dot), touch targets >= 44 px. */

/* ── Member app: chrome ─────────────────────────────────────────────────────────────── */
.hm-topbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--s1);
  height: 56px; padding: 0 var(--s2) 0 var(--s3); margin: 0;
  background: var(--surface-2, var(--surface)); border-bottom: 1px solid var(--rule);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.hm-topbar-title { flex: 1; min-width: 0; font-size: 17px; font-weight: var(--w-semi); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-topbar-logo { width: 30px; height: 30px; margin: 0 var(--s1); flex: none; }
.hm-iconbtn { width: 44px; height: 44px; border-radius: var(--r-full); border: none; background: transparent;
  color: var(--ink); display: inline-grid; place-items: center; cursor: pointer; flex: none; }
.hm-iconbtn:hover { background: var(--brand-soft); }
.hm-iconbtn:focus-visible, .hm-tab:focus-visible, .hm-row:focus-visible, .hm-tile:focus-visible,
.hm-person:focus-visible, .hm-card-btn:focus-visible { outline: 3px solid var(--ring, var(--brand)); outline-offset: 2px; }
.hm-topbar .hs-bell-corner { position: static; }

.hm-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr);
  padding-bottom: env(safe-area-inset-bottom, 0); border-top: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.hm-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 60px; padding: var(--s2) 0 var(--s1);
  border: none; background: none; color: var(--ink-3); font: inherit; font-size: 12px; font-weight: var(--w-semi);
  cursor: pointer; text-decoration: none; }
.hm-tab-ico { width: 56px; height: 30px; border-radius: 15px; display: grid; place-items: center; }
.hm-tab.is-on { color: var(--brand); }
.hm-tab.is-on .hm-tab-ico { background: var(--brand-soft); }
/* Room for the fixed tab bar under the last action (the 76 px in hirms.css hid a 52 px button). */
.hs-app .hs-main.hs-main-narrow { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0)); }
/* The 64 px strip hirms.css reserves under the old floating corner cluster is not needed under the bar. */
.hs-app:has(> .hm-topbar) > .hs-main { padding-top: var(--s4); }

/* ── Member app: building blocks ────────────────────────────────────────────────────── */
.hm-section-title { font-size: 14px; font-weight: var(--w-semi); color: var(--ink); margin: var(--s5) 0 var(--s2); }
.hm-lede { font-size: 15px; color: var(--ink-2); margin: 0 0 var(--s4); }
.hm-h2 { font-size: 22px; font-weight: var(--w-bold); margin: 0 0 var(--s1); color: var(--ink); letter-spacing: -.01em; }
.hm-small { font-size: 13px; color: var(--ink-2); }
.hm-money { font-family: var(--f-mono); font-weight: var(--w-semi); }
.hm-big-money { font-family: var(--f-mono); font-weight: var(--w-bold); font-size: 30px; line-height: 1.2; color: var(--ink); }

.hm-chips { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; padding: 2px 0 var(--s1); margin-bottom: var(--s3); }
.hm-chips::-webkit-scrollbar { display: none; }
.hm-person { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px 4px 4px; flex: none;
  border-radius: var(--r-full); border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 15px; font-weight: var(--w-semi); cursor: pointer; white-space: nowrap; }
.hm-person.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.hm-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--g-depth); color: #fff; font-size: 13px; font-weight: var(--w-bold); }
.hm-avatar-lg { width: 64px; height: 64px; font-size: 22px; }
.hm-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; flex: none;
  border-radius: var(--r-full); border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 15px; font-weight: var(--w-med); cursor: pointer; white-space: nowrap; }
.hm-chip.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: var(--w-semi); }

.hm-card-btn { display: block; width: 100%; padding: 0; border: none; background: none; text-align: left; cursor: pointer; border-radius: var(--r-lg); }
.hm-card-hint { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); margin: var(--s2) 0 0; }
.hm-stamp { font-size: 13px; color: var(--st-pend); margin-top: var(--s1); }
.hm-offline { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); margin-bottom: var(--s3);
  border-radius: var(--r-md); font-size: 14px; font-weight: var(--w-semi); background: var(--st-pend-bg); color: var(--st-pend); }

.hm-list { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.hm-row { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 56px; padding: var(--s3) 14px;
  border: none; border-bottom: 1px solid var(--rule); background: transparent; color: var(--ink); font: inherit; font-size: 15px;
  text-align: left; cursor: pointer; text-decoration: none; }
.hm-row:last-child { border-bottom: none; }
button.hm-row:hover, a.hm-row:hover { background: var(--brand-soft); }
.hm-row-static { cursor: default; }
/* A row that informs and offers nothing to tap (face check-in before it is enabled): quieter ink,
   and its sentence wraps instead of being cut. */
.hm-row-quiet .hm-row-title { color: var(--ink-2); font-weight: var(--w-med); }
.hm-row-quiet .hm-row-main > .hm-small { white-space: normal; overflow: visible; }
.hm-row-quiet .hm-row-ico { color: var(--ink-3); }
.hm-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hm-row-title { font-weight: var(--w-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-row-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin-top: 4px; }
.hm-chev { color: var(--ink-3); flex: none; }
.hm-row-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: var(--brand-soft); color: var(--brand); }
.hm-row-ico.is-ok { background: var(--st-redy-bg); color: var(--st-redy); }
.hm-row-ico.is-info { background: var(--st-eval-bg); color: var(--st-eval); }
.hm-row-danger { color: var(--st-rejt); justify-content: center; font-weight: var(--w-semi); }

.hm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.hm-tile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); min-height: 100px; padding: 14px 12px;
  border-radius: var(--r-lg); border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: var(--w-semi); line-height: 1.25; text-align: left; cursor: pointer;
  box-shadow: var(--e-1); text-decoration: none; }
.hm-tile-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }

.hm-panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--s4); }
.hm-kv { display: flex; justify-content: space-between; gap: var(--s3); padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.hm-kv:last-child { border-bottom: none; }
.hm-kv > span:first-child { color: var(--ink-2); }
.hm-stack { display: flex; flex-direction: column; gap: var(--s3); }
.hm-row-2 { display: flex; gap: var(--s3); }
.hm-row-2 > * { flex: 1; min-width: 0; }
.hm-actions { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s5); }
.hm-actions .hs-btn { width: 100%; min-height: 52px; font-size: 16px; }
.hm-note { font-size: 13px; color: var(--st-pend); }

.hm-steps { display: flex; gap: 6px; margin: 0 0 var(--s4); }
.hm-steps span { flex: 1; height: 4px; border-radius: 2px; background: var(--rule-2); }
.hm-steps span.is-on { background: var(--brand); }

.hm-tracker { display: flex; flex-direction: column; }
.hm-tracker-step { display: flex; gap: var(--s3); align-items: flex-start; padding-bottom: 14px; position: relative; }
.hm-tracker-step::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--rule-2); }
.hm-tracker-step:last-child::before { display: none; }
.hm-tracker-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--rule-2); background: var(--surface);
  display: grid; place-items: center; flex: none; color: #fff; z-index: 1; }
.hm-tracker-step.is-done .hm-tracker-dot { background: var(--st-redy); border-color: var(--st-redy); }
.hm-tracker-step.is-now .hm-tracker-dot { border-color: var(--brand); }

.hm-done { text-align: center; padding: var(--s3) 0 var(--s2); }
.hm-done-mark { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center;
  background: var(--st-redy-bg); color: var(--st-redy); }

.hm-stars { display: flex; gap: 4px; }
.hm-stars button { width: 44px; height: 44px; border: none; background: none; cursor: pointer; color: var(--rule-2); padding: 0; }
.hm-stars button.is-on { color: #E8A33D; }

.hm-search { position: relative; }
.hm-search svg { position: absolute; left: 12px; top: 13px; color: var(--ink-3); pointer-events: none; }
.hm-search .hs-input { padding-left: 42px; }

/* Bottom sheet (MudDrawer anchored bottom). */
.hm-sheet.mud-drawer { border-radius: var(--r-xl) var(--r-xl) 0 0 !important; max-height: 88vh; height: auto !important; }
/* MEMBER-SHEET-FIX (owner, 21 Oct 2026; measured on UAT): the sheet was laid out against the PAGE, not the screen.
   Opened after the member scrolled (a clinic tapped half-way down Care), it landed above the screen and nothing
   seemed to happen; closed, its strip (grab bar and close button) sat at the first screen's bottom and scrolled over
   the clinic list. Pinned to the screen, and a closed sheet is not drawn (MudBlazor parks a closed bottom drawer at
   bottom: -(its default height), which the content height above does not match) - at once on the first render, and
   after a close only once its 225 ms slide down has run, so closing still animates. The delayed rule names every
   class MudBlazor's own bottom transition does, or that rule would win and drop the delay (P45's side panel). */
.hm-sheet.mud-drawer { position: fixed !important; }
.mud-drawer.hm-sheet.mud-drawer--closed { visibility: hidden; }
.mud-drawer.mud-drawer-temporary.mud-drawer-pos-bottom.hm-sheet.mud-drawer--closed:not(.mud-drawer--initial) {
  transition: bottom 225ms cubic-bezier(0, 0, 0.2, 1), visibility 0s linear 225ms; }
.hm-sheet .mud-drawer-content { padding: var(--s2) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom, 0)); overflow-y: auto; }
.hm-sheet-bar { position: relative; height: 28px; }
.hm-sheet-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--rule-2); margin: 4px auto 0; }
.hm-sheet-close { position: absolute; top: -6px; right: -12px; }
.hm-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.hm-sheet-head h3 { margin: 0 0 4px; font-size: 19px; color: var(--ink); }

/* Full-screen card: always white and Midnight so the QR scans in any theme. */
.hm-full { position: fixed; inset: 0; z-index: 1400; background: #fff; color: #08143A; display: flex; flex-direction: column;
  align-items: center; text-align: center; padding: calc(var(--s5) + env(safe-area-inset-top, 0)) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom, 0)); overflow-y: auto; }
.hm-full .hm-iconbtn { color: #08143A; position: absolute; top: calc(var(--s3) + env(safe-area-inset-top, 0)); left: var(--s3); }
.hm-full-name { font-size: 19px; font-weight: var(--w-bold); margin-top: var(--s3); }
.hm-full-sub { font-size: 14px; color: #4A5570; }
.hm-full-qr { margin-top: var(--s5); padding: var(--s3); background: #fff; border-radius: var(--r-lg); }
.hm-full-qr .hs-qr { margin: 0; }
.hm-full-num { font-family: var(--f-mono); font-size: 26px; font-weight: var(--w-semi); letter-spacing: .04em; margin-top: var(--s4); }
.hm-full-status { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s3); padding: 4px 12px; border-radius: var(--r-full);
  font-size: 14px; font-weight: var(--w-semi); background: #E4F7F0; color: #0A7A56; }
.hm-full-status.is-off { background: #FDF2E3; color: #8A5A0F; }
.hm-full-back { width: 100%; max-width: 420px; text-align: left; border: 1px solid #E4E8F2; border-radius: var(--r-lg); padding: var(--s4); margin-top: var(--s4); font-size: 15px; }
.hm-full-back .hm-kv { border-color: #E4E8F2; }
.hm-full-back .hm-kv > span:first-child { color: #4A5570; }
.hm-full-pager { display: flex; gap: 8px; margin-top: var(--s4); }
.hm-full-pager span { width: 8px; height: 8px; border-radius: 50%; background: #D5DCEB; }
.hm-full-pager span.is-on { background: #2D6BFF; width: 22px; border-radius: 4px; }
.hm-full-actions { display: flex; gap: var(--s2); width: 100%; max-width: 420px; margin-top: auto; padding-top: var(--s5); flex-wrap: wrap; }
.hm-full-actions .hs-btn { flex: 1; min-height: 48px; background: #fff; color: #08143A; border-color: #D5DCEB; }
.hm-full-hint { font-size: 12px; color: #4A5570; margin: var(--s2) 0 0; }
.hm-big-money .hs-money, .hm-money .hs-money { font-size: inherit; font-weight: inherit; }
.hm-row-main { overflow: hidden; }
.hm-row-main > .hm-small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Kiosk: the desk ───────────────────────────────────────────────────────────────────
   Two panes from 1024 px (today's lists beside the stage), one column below with today's
   lists as a sheet from the bar. Same tokens, same rules. */
.hk-topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--s2);
  min-height: 60px; padding: var(--s2) var(--s3) var(--s2) var(--s4); background: var(--paper);
  border-bottom: 1px solid var(--rule); }
.hk-logo { width: 32px; height: 32px; flex: none; }
.hk-place { flex: 1; min-width: 0; }
.hk-place-name { font-weight: var(--w-semi); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-place-sub { font-size: 12px; color: var(--ink-2); }
.hk-net { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-full);
  font-size: 13px; font-weight: var(--w-semi); white-space: nowrap; }
.hk-net::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hk-net.is-on { color: var(--st-redy); background: var(--st-redy-bg); }
.hk-net.is-off { color: var(--st-pend); background: var(--st-pend-bg); }
.hk-today-btn { display: none; white-space: nowrap; }
.hk-op { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 4px 12px 4px 4px;
  border: 1px solid var(--rule-2); border-radius: var(--r-full); background: var(--surface); color: var(--ink);
  font: inherit; font-weight: var(--w-semi); cursor: pointer; }
.hk-topbar .hs-bell-corner, .hk-topbar .hs-corner-cluster { position: static; }

.hk-desk { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--s5); align-items: start; }
.hs-app:has(> .hk-topbar) > .hs-main { padding-top: var(--s4); }
.hk-stage-col { min-width: 0; }
.hk-today { position: sticky; top: 76px; display: flex; flex-direction: column; max-height: calc(100vh - 100px);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--e-1); overflow: hidden; }
.hk-today-head { padding: var(--s3) var(--s3) var(--s2); border-bottom: 1px solid var(--rule); }
.hk-today-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); font-size: 17px; color: var(--ink); }
.hk-today-close { display: none; }
.hk-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: var(--s2); }
.hk-tabs button { display: flex; flex-direction: column; align-items: center; padding: var(--s2) 4px; min-height: 60px;
  border: 1px solid var(--rule-2); border-radius: var(--r-md); background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 13px; font-weight: var(--w-semi); cursor: pointer; }
.hk-tabs button b { font-family: var(--f-mono); font-size: 20px; color: var(--ink); }
.hk-tabs button.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.hk-tabs button.is-on b { color: var(--brand); }
.hk-today-list { flex: 1; overflow-y: auto; padding: var(--s1) var(--s2); }
.hk-row { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 64px; padding: var(--s2) var(--s2);
  border: none; border-radius: var(--r-md); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.hk-row:hover:not(:disabled) { background: var(--brand-soft); }
.hk-row:disabled { cursor: default; opacity: .75; }
.hk-row.is-current { background: var(--brand-soft); }
.hk-row-av { background: var(--surface-2); color: var(--ink-2); }
.hk-wait { font-family: var(--f-mono); font-size: 13px; font-weight: var(--w-semi); white-space: nowrap; }
.hk-wait.is-long { color: var(--st-rejt); }
.hk-row-action { font-size: 13px; font-weight: var(--w-semi); color: var(--brand); white-space: nowrap; }
.hk-empty { padding: var(--s3) var(--s2); margin: 0; }
.hk-today-foot { padding: var(--s3); border-top: 1px solid var(--rule); }

/* Capture: one search, shortcuts at the clinic's price, the visit's acts, a sticky footer. */
.hk-patient-reason { display: inline-flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
/* On the card's gradient the ghost button takes the card's own ink (white), outlined — Blue on
   the gradient is unreadable. */
.hk-patient-reason .hs-btn { color: inherit; background: transparent; border: 1px solid currentColor; min-height: 32px; }
.hk-search { margin: var(--s4) 0 var(--s2); }
/* Face check-in before it is enabled: a quiet line under the identify actions, and a pill with its
   sentence in the desk settings. Words carry the state; the icon only marks the subject. */
.hk-face-note { display: inline-flex; align-items: center; gap: 6px; margin: var(--s4) 0 0; font-size: 13px; color: var(--ink-2); }
.hk-face-note svg { color: var(--ink-3); flex: none; }
.hk-face-setting { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.hk-shortcuts-label { font-size: 13px; color: var(--ink-2); margin: var(--s3) 0 var(--s2); }
.hk-shortcuts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.hk-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--r-full);
  border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: var(--w-med); cursor: pointer; }
.hk-chip:hover:not(:disabled) { border-color: var(--brand); }
.hk-chip .mono { font-weight: var(--w-semi); }
.hk-tools { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.hk-acts-title { display: flex; align-items: baseline; justify-content: space-between; margin: var(--s5) 0 var(--s2); font-size: 17px; font-weight: var(--w-semi); color: var(--ink); }
.hk-footer { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-lg); border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: var(--glass-blur); box-shadow: var(--e-2); }
.hk-footer-total { flex: 1; min-width: 180px; font-size: 15px; color: var(--ink); }
.hk-footer .hs-btn { min-height: 48px; }
.hk-gate-rule summary { cursor: pointer; font-size: 13px; color: var(--ink-2); margin-top: var(--s2); }
.hk-close-list { border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.hk-close-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--rule); }
.hk-close-row:last-child { border-bottom: none; }
.hk-close-total { display: flex; justify-content: space-between; padding: var(--s3); font-weight: var(--w-bold); color: var(--ink); }
.hk-presence { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border: 1px solid var(--rule); border-radius: var(--r-lg); margin-top: var(--s3); }
.hk-presence .hm-row-main > .hm-small { white-space: normal; }
/* Amounts that carry the decision read at the size of their line, not .mono's 2xs. */
.hk-chip .mono { font-size: 13px; color: var(--ink-2); }
.hk-footer-total strong { font-family: var(--f-mono); font-size: 19px; }
.hk-footer-total .hs-money, .hk-close-total .hs-money, .hk-close-row .hs-money { font-size: inherit; font-weight: inherit; }
.hk-close-total { font-size: 17px; }
/* The desk's settings read at the apps' floor (12 px), not the workbench's 10 px labels. */
.hs-label.hk-setting-label { font-size: 12px; }
.mono.hk-setting-value { font-size: 14px; }
.hk-close-row { font-size: 15px; }
.hs-done-amount { font-size: 48px !important; font-weight: var(--w-bold); }
.hs-done-amount .hs-money { font-size: inherit; font-weight: inherit; }

@media (max-width: 1023px) {
  .hk-desk { grid-template-columns: minmax(0, 1fr); }
  .hk-today { display: none; position: fixed; inset: 60px 0 0 0; z-index: 60; max-height: none; border-radius: 0; }
  .hk-today.is-open { display: flex; }
  .hk-today-close { display: inline-grid; }
  .hk-today-btn { display: inline-flex; }
  .hk-place-sub, .hk-op-name { display: none; }
  .hk-topbar { padding-left: var(--s3); gap: var(--s1); }
  .hk-footer { padding: var(--s2) var(--s3); }
  .hk-footer .hs-btn { flex: 1; }
}
/* A phone: the facility keeps the room (it ellipsises last); the mark goes, the operator is
   the avatar alone, and the connection keeps its word. */
@media (max-width: 560px) {
  .hk-logo, .hk-today-word { display: none; }
  .hk-op { padding: 2px; border: none; background: transparent; }
  .hk-net { padding: 4px 8px; }
  .hk-today-btn { padding-inline: 10px; gap: 4px; }
}
.hk-today-btn { gap: 6px; align-items: center; }
/* The phone's sheet is opaque: the stage under it must not read through. */
@media (max-width: 1023px) { .hk-today { background: var(--paper); } }