/* Q4HMS: the design pack's @import of Google Fonts is removed here; fonts are self-hosted in fonts.css (decision Q15, 3 Oct 2026).
   This is the only change to the design system's stylesheet. Re-apply it when bundle.css is updated from a new design pack. */
/* Q4HMS component stylesheet. Plain HTML + CSS: server-rendered views (CodeIgniter 4) use these classes directly. */
.hms, .hms * { box-sizing: border-box; }
.hms { font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink); -webkit-font-smoothing: antialiased; }
.hms :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hms-mono { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.hms-muted { color: var(--ink-muted); }
.hms-label { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.hms-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.hms-icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Button */
.hms-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-4); font: inherit; font-weight: 600; border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; text-decoration: none; }
.hms-btn:hover { background: var(--surface-sunken); }
.hms-btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.hms-btn--primary:hover { background: var(--primary-strong); border-color: var(--primary-strong); }
.hms-btn--done { background: var(--teal); border-color: var(--teal); color: var(--on-primary); }
.hms-btn--done:hover { background: var(--teal); filter: brightness(.92); }
.hms-btn--danger { background: var(--surface); border-color: var(--danger); color: var(--danger); }
.hms-btn--ghost { border-color: var(--surface); background: var(--surface); color: var(--primary-strong); }
.hms-btn--sm { height: 28px; padding: 0 var(--space-3); font-size: 12px; }
.hms-btn--block { width: 100%; }
.hms-btn[disabled] { background: var(--surface-sunken); border-color: var(--border); color: var(--ink-muted); cursor: not-allowed; }

/* Badge */
.hms-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--space-2); font-size: 12px; line-height: 16px; font-weight: 600; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink); white-space: nowrap; }
.hms-badge::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }
.hms-badge--plain::before { display: none; }
.hms-badge--success { background: var(--success-soft); color: var(--success); }
.hms-badge--warning { background: var(--amber-soft); color: var(--amber); }
.hms-badge--danger { background: var(--danger-soft); color: var(--danger); }
.hms-badge--info { background: var(--primary-soft); color: var(--primary-strong); }
.hms-badge--teal { background: var(--teal-soft); color: var(--teal); }
.hms-badge--purple { background: var(--purple-soft); color: var(--purple); }
.hms-badge--amber { background: var(--amber-soft); color: var(--amber); }
/* shapes back up the colour: warning is a square, danger a hollow ring */
.hms-badge--warning::before { border-radius: 1px; }
.hms-badge--danger::before { background: var(--danger-soft); box-shadow: inset 0 0 0 1.5px currentColor; width: 7px; height: 7px; }

/* Allergy alert */
.hms-alert { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--danger); color: var(--on-primary); font-weight: 600; }
.hms-alert small { display: block; font-size: 11px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.hms-alert .hms-icon { margin-top: 2px; }

/* Card */
.hms-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.hms-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-4) 0; }
.hms-card__title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.hms-card__body { padding: var(--space-4); }

/* Tabs */
.hms-tabs { display: flex; overflow-x: auto; gap: var(--space-4); border-bottom: 1px solid var(--border); padding: 0 var(--space-4); }
.hms-tab { white-space: nowrap; flex: none; appearance: none; background: none; border: 0; border-bottom: 2px solid var(--surface); margin-bottom: -1px; padding: var(--space-3) 0; font: inherit; font-weight: 500; color: var(--ink-muted); cursor: pointer; }
.hms-tab:hover { color: var(--ink); }
.hms-tab[aria-selected="true"] { color: var(--primary-strong); font-weight: 600; border-bottom-color: var(--primary); }
.hms-tab__count { margin-left: 6px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-muted); font-size: 12px; font-weight: 600; }

/* Stat tile */
.hms-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.hms-stat { padding: var(--space-4); display: grid; gap: var(--space-1); }
.hms-stat__value { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.hms-stat__foot { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.hms-stat__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 22px; }
.hms-stat__top .hms-label { white-space: nowrap; }

/* Inputs */
.hms-input { display: flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink-muted); }
.hms-input input { border: 0; outline: 0; background: none; font: inherit; color: var(--ink); width: 100%; min-width: 0; }
.hms-input input::placeholder { color: var(--ink-muted); opacity: 1; }
.hms-input:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.hms-select { height: 36px; padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; }
.hms-toolbar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4); flex-wrap: wrap; }
.hms-toolbar .hms-input { flex: 1 1 260px; max-width: 380px; }
.hms-toolbar__end { margin-left: auto; display: flex; gap: var(--space-2); }

/* Data table */
.hms-table-wrap { overflow-x: auto; }
.hms-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hms-table th { text-align: left; padding: var(--space-2) var(--space-3); background: var(--surface-sunken); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 11px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.hms-table td { padding: var(--space-3); border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.hms-table tbody tr:hover td { background: var(--bg); }
.hms-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.hms-table th:first-child, .hms-table td:first-child { padding-left: var(--space-4); }
.hms-table th:last-child, .hms-table td:last-child { padding-right: var(--space-4); }
.hms-table__sub { display: block; font-size: 12px; line-height: 16px; color: var(--ink-muted); font-weight: 500; }
.hms-table__warn { color: var(--amber); font-weight: 600; }
.hms-table__bad { color: var(--danger); font-weight: 600; }
.hms-table__foot { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); color: var(--ink-muted); font-size: 12px; font-weight: 500; }

/* App shell */
.hms-app { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 100%; background: var(--bg); }
.hms-side { background: var(--shell); color: var(--on-shell); padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.hms-side__brand { font-size: 18px; line-height: 28px; font-weight: 600; padding: 0 var(--space-2) var(--space-4); letter-spacing: -.01em; }
.hms-side__brand span { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--on-shell-muted); letter-spacing: 0; }
.hms-side__label { padding: var(--space-4) var(--space-2) var(--space-1); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--on-shell-muted); }
.hms-nav { display: flex; align-items: center; gap: var(--space-3); height: 36px; padding: 0 var(--space-2); border-radius: var(--radius-md); color: var(--on-shell-muted); text-decoration: none; font-weight: 500; }
.hms-nav:hover { background: var(--shell-raised); color: var(--on-shell); }
.hms-nav[aria-current="page"] { background: var(--shell-raised); color: var(--on-shell); font-weight: 600; }
.hms-nav__count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--on-shell); }
.hms-main { display: flex; flex-direction: column; min-width: 0; }
.hms-top { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); background: var(--surface); border-bottom: 1px solid var(--border); }
.hms-top__title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.hms-top__crumb { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.hms-top__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.hms-content { padding: var(--space-5); display: grid; gap: var(--space-4); align-content: start; }

/* Avatar */
.hms-avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary-strong); font-weight: 600; font-size: 13px; flex: none; }
.hms-avatar--lg { width: 64px; height: 64px; font-size: 20px; }

/* Patient summary */
.hms-patient { padding: var(--space-4); display: grid; gap: var(--space-4); }
.hms-patient__id { display: flex; align-items: center; gap: var(--space-3); }
.hms-patient__name { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.hms-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); margin: 0; }
.hms-facts div { min-width: 0; }
.hms-facts dt { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.hms-facts dd { margin: 0; font-weight: 500; }
.hms-facts .wide { grid-column: 1 / -1; }
.hms-divider { height: 1px; background: var(--border); border: 0; margin: 0; }

/* Timeline */
.hms-timeline { list-style: none; margin: 0; padding: var(--space-4); display: grid; gap: var(--space-3); }
.hms-timeline li { display: grid; grid-template-columns: 84px 16px minmax(0, 1fr); gap: var(--space-3); }
.hms-timeline__date { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); padding-top: var(--space-3); text-align: right; }
.hms-timeline__date span { display: block; font-weight: 500; }
.hms-timeline__rail { position: relative; }
.hms-timeline__rail::before { content: ""; position: absolute; left: 7px; top: 0; bottom: calc(-1 * var(--space-3)); width: 2px; background: var(--border); }
.hms-timeline li:last-child .hms-timeline__rail::before { bottom: 0; }
.hms-timeline__rail::after { content: ""; position: absolute; left: 2px; top: 14px; width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--surface); border: 2px solid var(--primary); box-sizing: border-box; }
.hms-note { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.hms-note summary { list-style: none; cursor: pointer; padding: var(--space-3); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); align-items: center; border-radius: var(--radius-md); }
.hms-note summary::-webkit-details-marker { display: none; }
.hms-note__title { font-weight: 600; }
.hms-note__by { grid-column: 1 / -1; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.hms-note__chev { transition: none; color: var(--ink-muted); }
.hms-note[open] .hms-note__chev { transform: rotate(180deg); }
.hms-note__body { padding: 0 var(--space-3) var(--space-3); display: grid; gap: var(--space-2); }
.hms-note__body p { margin: 0; }
.hms-note[open] summary { border-bottom: 1px solid var(--border); margin-bottom: var(--space-3); border-radius: var(--radius-md) var(--radius-md) 0 0; }

/* Prescription list */
.hms-rx { list-style: none; margin: 0; padding: 0; }
.hms-rx li { display: grid; justify-items: start; gap: 2px; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); align-items: center; }
.hms-rx__name { font-weight: 600; }
.hms-rx__dose { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.hms-rx .hms-badge { margin-top: var(--space-1); }

/* Week calendar */
.hms-cal { display: grid; grid-template-columns: 64px repeat(6, minmax(0, 1fr)); grid-template-rows: 48px repeat(20, 30px); position: relative; }
.hms-cal__day { grid-row: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--space-3); border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); font-weight: 600; }
.hms-cal__day small { font-size: 11px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--ink-muted); }
.hms-cal__day[aria-current="date"] { color: var(--primary-strong); background: var(--primary-soft); }
.hms-cal__day[aria-current="date"] small { color: var(--primary-strong); }
.hms-cal__corner { grid-row: 1; grid-column: 1; border-bottom: 1px solid var(--border); background: var(--surface-sunken); border-radius: 0; }
.hms-cal__time { grid-column: 1; padding: 2px var(--space-2) 0 0; text-align: right; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); background: var(--surface-sunken); border-top: 1px solid var(--border); }
.hms-cal__line { grid-column: 2 / -1; border-top: 1px solid var(--border); pointer-events: none; }
.hms-cal__col { grid-row: 2 / -1; border-left: 1px solid var(--border); pointer-events: none; }
.hms-cal__col--today { background: var(--primary-soft); opacity: .45; }
.hms-event { position: relative; z-index: 1; margin: 2px 4px 2px 5px; padding: 4px var(--space-2); border-radius: var(--radius-sm); border: 1px solid; overflow: hidden; font-size: 12px; line-height: 16px; font-weight: 500; text-align: left; cursor: pointer; font-family: inherit; display: block; }
.hms-event b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hms-event span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hms-event--inperson { background: var(--teal-soft); border-color: var(--teal); color: var(--teal); }
.hms-event--tele { background: var(--purple-soft); border-color: var(--purple); color: var(--purple); border-style: dashed; }
.hms-event--surgery { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); border-width: 2px; }
.hms-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.hms-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid; margin-right: 6px; vertical-align: -2px; }
.hms-legend .inperson { background: var(--teal-soft); border-color: var(--teal); }
.hms-legend .tele { background: var(--purple-soft); border-color: var(--purple); border-style: dashed; }
.hms-legend .surgery { background: var(--amber-soft); border-color: var(--amber); border-width: 2px; }
.hms-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; }
.hms-seg button { appearance: none; border: 0; background: var(--surface); font: inherit; font-weight: 500; height: 34px; padding: 0 var(--space-3); color: var(--ink-muted); cursor: pointer; }
.hms-seg button + button { border-left: 1px solid var(--border-strong); }
.hms-seg button[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary-strong); font-weight: 600; }

/* Queue */
.hms-queue { list-style: none; margin: 0; padding: 0; }
.hms-queue li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
.hms-queue__no { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.hms-queue__name { font-weight: 600; }
.hms-queue__meta { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.hms-queue li[aria-current="true"] { background: var(--primary-soft); }
.hms-queue__wait { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Nurse chat */
.hms-chat { display: grid; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }
.hms-msg { max-width: 85%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); justify-self: start; }
.hms-msg--me { background: var(--primary-soft); justify-self: end; }
.hms-msg small { display: block; font-size: 11px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.hms-chat__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); margin-top: var(--space-1); }
.hms-online { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--success); }
.hms-online::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--success); }
/* Form fields */
.hms-field { display: grid; gap: var(--space-1); align-content: start; }
.hms-field__label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink); }
.hms-field__label i { font-style: normal; color: var(--danger); }
.hms-field__help { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.hms-field__error { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--danger); }
.hms-control { width: 100%; height: 36px; padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; }
.hms-control::placeholder { color: var(--ink-muted); opacity: 1; }
textarea.hms-control { height: auto; min-height: 96px; padding: var(--space-2) var(--space-3); resize: vertical; line-height: 20px; }
.hms-control[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.hms-control[disabled] { background: var(--surface-sunken); color: var(--ink-muted); border-color: var(--border); }
.hms-check { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 500; cursor: pointer; }
.hms-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.hms-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.hms-form .wide { grid-column: 1 / -1; }

/* Modal */
.hms-scrim { position: relative; display: grid; place-items: center; padding: var(--space-5); min-height: 100%; }
.hms-scrim::before { content: ""; position: absolute; inset: 0; background: var(--shell); opacity: .55; }
.hms-modal { position: relative; width: 100%; max-width: 480px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.hms-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-4) 0; }
.hms-modal__title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.hms-modal__sub { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.hms-modal__body { padding: var(--space-4); }
.hms-modal__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }

/* Totals (invoice summary) */
.hms-totals { margin: 0; display: grid; gap: var(--space-2); }
.hms-totals div { display: flex; justify-content: space-between; gap: var(--space-3); }
.hms-totals dt { color: var(--ink-muted); }
.hms-totals dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; }
.hms-totals .total { padding-top: var(--space-2); border-top: 1px solid var(--border); }
.hms-totals .total dt, .hms-totals .total dd { color: var(--ink); font-weight: 600; font-size: 16px; line-height: 24px; }
.hms-lines { width: 100%; border-collapse: collapse; }
.hms-lines td { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.hms-lines td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: var(--space-3); }
.hms-table tr[aria-selected="true"] td { background: var(--primary-soft); }

/* Video consultation */
.hms-video { position: relative; background: var(--shell); color: var(--on-shell); border-radius: var(--radius-lg); min-height: 560px; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.hms-video__bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.hms-video__bar strong { font-weight: 600; }
.hms-video__meta { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); font-size: 12px; font-weight: 600; }
.hms-video__timer { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.hms-video__signal { display: inline-flex; align-items: center; gap: 6px; }
.hms-video__signal::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--on-shell); }
.hms-video__who { display: grid; place-items: center; align-content: center; gap: var(--space-3); color: var(--on-shell-muted); font-weight: 500; }
.hms-video__who .hms-avatar { width: 112px; height: 112px; font-size: 36px; background: var(--shell-raised); color: var(--on-shell); }
.hms-video__self { position: absolute; right: var(--space-4); bottom: 84px; width: 176px; height: 112px; border-radius: var(--radius-md); background: var(--shell-raised); border: 1px solid var(--on-shell-muted); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--on-shell); }
.hms-video__controls { display: flex; justify-content: center; gap: var(--space-2); padding: var(--space-4); }
.hms-callbtn { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--on-shell-muted); background: var(--shell-raised); color: var(--on-shell); font: inherit; font-weight: 600; cursor: pointer; }
.hms-callbtn[aria-pressed="true"] { background: var(--on-shell); color: var(--shell); border-color: var(--on-shell); }
.hms-callbtn--end { background: var(--danger); border-color: var(--danger); color: var(--on-primary); }
.hms-actions { display: grid; gap: var(--space-2); }
/* Bar chart (single series) */
.hms-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-3); height: 200px; align-items: end; border-bottom: 1px solid var(--border-strong); padding: var(--space-5) var(--space-2) 0; }
.hms-bar { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; outline-offset: 2px; }
.hms-bar i { display: block; width: 100%; max-width: 40px; background: var(--primary); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.hms-bar:hover i, .hms-bar:focus-visible i { background: var(--primary-strong); }
.hms-bar b { position: absolute; left: 0; right: 0; text-align: center; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink); transform: translateY(-20px); }
.hms-bar::after { content: attr(data-tip); position: absolute; left: 50%; top: 0; transform: translate(-50%, -8px); padding: 4px var(--space-2); border-radius: var(--radius-sm); background: var(--shell); color: var(--on-shell); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-pop); opacity: 0; pointer-events: none; z-index: 2; }
.hms-bar:hover::after, .hms-bar:focus-visible::after { opacity: 1; }
.hms-bars__x { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-1) var(--space-2) 0; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); text-align: center; }
.hms-bars__x .now { color: var(--ink); font-weight: 600; }

/* Occupancy meter */
.hms-meters { display: grid; gap: var(--space-3); }
.hms-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); align-items: baseline; }
.hms-meter__name { font-weight: 500; }
.hms-meter__val { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hms-meter__val span { color: var(--ink-muted); font-weight: 500; }
.hms-meter__track { grid-column: 1 / -1; height: 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.hms-meter__fill { height: 100%; background: var(--primary); border-radius: var(--radius-pill); }

/* Bed board */
.hms-beds { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: var(--space-3); padding: var(--space-4); }
.hms-bed { display: grid; gap: 2px; align-content: start; min-height: 84px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.hms-bed__no { font-family: var(--font-mono); font-size: 13px; font-weight: 500; display: flex; justify-content: space-between; gap: var(--space-2); }
.hms-bed__no span { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hms-bed__who { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hms-bed__meta { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.hms-bed--available { background: var(--success-soft); border-color: var(--success); }
.hms-bed--available .hms-bed__no span, .hms-bed--available .hms-bed__who { color: var(--success); }
.hms-bed--cleaning { background: var(--amber-soft); border-color: var(--amber); border-style: dashed; }
.hms-bed--cleaning .hms-bed__no span, .hms-bed--cleaning .hms-bed__who { color: var(--amber); }
.hms-bed--reserved { background: var(--primary-soft); border-color: var(--primary); }
.hms-bed--reserved .hms-bed__no span { color: var(--primary-strong); }
.hms-bed[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--primary); border-color: var(--primary); }

/* Lists and page furniture */
.hms-list { list-style: none; margin: 0; padding: 0; }
.hms-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
.hms-list a { color: var(--primary-strong); font-weight: 600; text-decoration: none; }
.hms-list small { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.hms-section { margin: 0 0 var(--space-3); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.hms-pagefoot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
.hms-control--sm { height: 28px; padding: 0 var(--space-2); width: 88px; text-align: right; font-variant-numeric: tabular-nums; }
.hms-link { color: var(--primary-strong); font-weight: 600; text-decoration: none; }

/* Sign in */
.hms-login { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100%; background: var(--bg); }
.hms-login__side { background: var(--shell); color: var(--on-shell); padding: var(--space-6); display: flex; flex-direction: column; justify-content: space-between; }
.hms-login__name { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.01em; }
.hms-login__tag { color: var(--on-shell-muted); font-weight: 500; max-width: 320px; }
.hms-login__main { display: grid; place-items: center; padding: var(--space-6); }
.hms-login__card { width: 100%; max-width: 400px; padding: var(--space-5); display: grid; gap: var(--space-4); }
/* Banner (inline message) */
.hms-banner { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--primary); background: var(--primary-soft); color: var(--ink); }
.hms-banner .hms-icon { margin-top: 2px; color: var(--primary-strong); }
.hms-banner strong { display: block; font-weight: 600; }
.hms-banner--success { border-color: var(--success); background: var(--success-soft); }
.hms-banner--success .hms-icon { color: var(--success); }
.hms-banner--warning { border-color: var(--amber); background: var(--amber-soft); }
.hms-banner--warning .hms-icon { color: var(--amber); }
.hms-banner--danger { border-color: var(--danger); background: var(--danger-soft); }
.hms-banner--danger .hms-icon { color: var(--danger); }

/* Empty state */
.hms-empty { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); text-align: center; }
.hms-empty__title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.hms-empty p { margin: 0 0 var(--space-2); max-width: 360px; color: var(--ink-muted); }

/* Slot picker */
.hms-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--space-2); }
.hms-slot { height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; }
.hms-slot:hover { background: var(--surface-sunken); }
.hms-slot[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; }
.hms-slot[disabled] { background: var(--surface-sunken); border-color: var(--border); color: var(--ink-muted); text-decoration: line-through; cursor: not-allowed; }
.hms-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); }
.hms-day { display: grid; gap: 2px; padding: var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; text-align: center; cursor: pointer; }
.hms-day small { font-size: 11px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--ink-muted); }
.hms-day span { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.hms-day[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary-strong); }

/* Steps (checklist / status history) */
.hms-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.hms-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 2px var(--space-3); padding-bottom: var(--space-4); position: relative; align-items: start; }
.hms-steps li::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--border); }
.hms-steps li:last-child { padding-bottom: 0; }
.hms-steps li:last-child::before { display: none; }
.hms-steps__mark { width: 24px; height: 24px; border-radius: var(--radius-pill); display: grid; place-items: center; border: 2px solid var(--border-strong); background: var(--surface); color: var(--ink-muted); font-size: 12px; font-weight: 600; grid-row: 1 / span 2; }
.hms-steps__title { font-weight: 600; }
.hms-steps__meta { grid-column: 2; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.hms-steps__end { grid-row: 1 / span 2; grid-column: 3; align-self: center; }
.hms-steps li[data-state="done"] .hms-steps__mark { background: var(--success); border-color: var(--success); color: var(--on-primary); }
.hms-steps li[data-state="current"] .hms-steps__mark { border-color: var(--primary); color: var(--primary-strong); box-shadow: 0 0 0 3px var(--primary-soft); }
.hms-steps li[data-state="blocked"] .hms-steps__mark { border-color: var(--danger); color: var(--danger); }

/* Sub navigation (settings) */
.hms-subnav { display: grid; gap: 2px; padding: var(--space-2); }
.hms-subnav a { display: flex; align-items: center; height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--ink-muted); font-weight: 500; text-decoration: none; }
.hms-subnav a:hover { background: var(--surface-sunken); color: var(--ink); }
.hms-subnav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary-strong); font-weight: 600; }

/* Check list (test catalogue) and matrix */
.hms-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-4); }
.hms-pick { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2); border-radius: var(--radius-md); cursor: pointer; }
.hms-pick:hover { background: var(--surface-sunken); }
.hms-pick input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.hms-pick span { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.hms-table td.c, .hms-table th.c { text-align: center; }
.hms-hbar { display: inline-block; vertical-align: middle; height: 8px; border-radius: var(--radius-pill); background: var(--primary); margin-right: var(--space-2); }
/* Shell: grouped navigation, global search, language, notifications */
.hms-nav--group { width: 100%; border: 0; background: none; font: inherit; font-weight: 500; cursor: pointer; text-align: left; }
.hms-nav__chev { margin-left: auto; display: inline-flex; }
.hms-nav--group[aria-expanded="true"] { color: var(--on-shell); }
.hms-nav--group[aria-expanded="true"] .hms-nav__chev { transform: rotate(180deg); }
.hms-nav__kids { display: grid; gap: 2px; padding: 2px 0 var(--space-2); }
.hms-nav--kid { height: 32px; padding-left: 36px; font-size: 13px; }
.hms-top__menu { display: none; width: 36px; padding: 0; }
.hms-top__head { min-width: 0; }
.hms-top__search { width: 220px; }
.hms-lang button { height: 34px; padding: 0 10px; }
.hms-bell { position: relative; width: 36px; padding: 0; }
.hms-bell__n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--danger); color: var(--on-primary); font-size: 11px; line-height: 18px; font-weight: 600; text-align: center; }

/* Page layouts */
.hms-split { display: grid; grid-template-columns: minmax(0, 1fr) var(--side, 340px); gap: var(--space-4); align-items: start; }
.hms-split--start { grid-template-columns: var(--side, 340px) minmax(0, 1fr); }
.hms-split--32 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.hms-stack { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.hms-form[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hms-form[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Patient header card */
.hms-phead { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); flex-wrap: wrap; }
.hms-phead__who { display: flex; align-items: center; gap: var(--space-3); min-width: 220px; }
.hms-phead__name { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.hms-phead__facts { display: flex; gap: var(--space-5); flex-wrap: wrap; margin: 0; }
.hms-phead__facts dt { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.hms-phead__facts dd { margin: 0; font-weight: 500; }
.hms-phead__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.hms-phead .hms-alert { padding: 6px var(--space-3); }

/* Step heading for sequenced forms */
.hms-stepno { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: var(--space-2); border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 600; }

/* Event stream */
.hms-events { list-style: none; margin: 0; padding: 0; }
.hms-events li { display: grid; grid-template-columns: 92px 132px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); align-items: start; }
.hms-events time { font-size: 12px; line-height: 20px; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.hms-events small { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.hms-events__day { grid-column: 1 / -1; padding: 0; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }

/* Chips for month grids and medication record */
.hms-chip { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 4px; border-radius: var(--radius-sm); font-size: 11px; line-height: 16px; font-weight: 600; background: var(--surface-sunken); color: var(--ink-muted); }
.hms-chip--ok { background: var(--success-soft); color: var(--success); }
.hms-chip--bad { background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.hms-chip--warn { background: var(--amber-soft); color: var(--amber); }
.hms-chip--info { background: var(--primary-soft); color: var(--primary-strong); }
.hms-chip--teal { background: var(--teal-soft); color: var(--teal); }
.hms-chip--purple { background: var(--purple-soft); color: var(--purple); }
.hms-chip--none { background: none; }
.hms-mgrid { border-collapse: collapse; font-size: 12px; width: 100%; }
.hms-mgrid th { padding: 4px 2px; font-size: 11px; font-weight: 600; color: var(--ink-muted); text-align: center; background: var(--surface-sunken); border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); }
.hms-mgrid th small { display: block; font-weight: 500; }
.hms-mgrid td { padding: 3px 2px; text-align: center; border-bottom: 1px solid var(--border); }
.hms-mgrid th:first-child, .hms-mgrid td:first-child { text-align: left; padding-left: var(--space-4); white-space: nowrap; min-width: 190px; }
.hms-mgrid td:first-child strong { display: block; font-size: 13px; }
.hms-mgrid td:first-child span { color: var(--ink-muted); font-weight: 500; }
.hms-mgrid .off { background: var(--bg); }

/* Month calendar */
.hms-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.hms-month__dow { padding: var(--space-2); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-sunken); border-bottom: 1px solid var(--border); }
.hms-month__day { min-height: 72px; padding: var(--space-2); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--surface); font: inherit; text-align: left; color: var(--ink); display: grid; align-content: start; gap: 4px; cursor: pointer; border-top: 0; border-left: 0; }
.hms-month__day b { font-weight: 600; }
.hms-month__day[disabled] { background: var(--bg); color: var(--ink-muted); cursor: default; }
.hms-month__day[aria-pressed="true"] { background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); }

/* Lanes (triage) */
.hms-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.hms-lane { display: grid; gap: var(--space-3); }
.hms-lane__head { display: flex; align-items: center; justify-content: space-between; }
.hms-case { padding: var(--space-3); display: grid; gap: var(--space-2); }
.hms-case__top { display: flex; justify-content: space-between; gap: var(--space-2); align-items: start; }
.hms-case strong { display: block; }
.hms-case small { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }

/* Signature and code placeholders */
.hms-sign { display: grid; place-items: center; height: 96px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--ink-muted); font-size: 12px; font-weight: 500; background: var(--surface); }
.hms-otp { display: flex; gap: var(--space-2); }
.hms-otp input { width: 40px; height: 44px; text-align: center; font-family: var(--font-mono); font-size: 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); }
.hms-matrix th, .hms-matrix td { padding: var(--space-2); }
.hms-matrix .grp { border-left: 1px solid var(--border); }
.hms-matrix th.pay { text-align: center; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--ink); }
.hms-control--xs { height: 28px; padding: 0 6px; width: 76px; text-align: right; font-variant-numeric: tabular-nums; }
.hms-control--code { width: 64px; text-align: left; font-family: var(--font-mono); font-size: 12px; }
.hms-hi { font-family: "Noto Sans Devanagari", var(--font-sans); }

/* Phone frame (mobile apps) */
.hms-phones { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: flex-start; }
.hms-phone { width: 300px; height: 620px; border-radius: 32px; border: 8px solid var(--shell); background: var(--bg); overflow: hidden; display: flex; flex-direction: column; flex: none; }
.hms-phone__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3); background: var(--surface); border-bottom: 1px solid var(--border); font-weight: 600; }
.hms-phone__body { flex: 1; overflow: hidden; padding: var(--space-3); display: grid; gap: var(--space-3); align-content: start; }
.hms-phone__tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface); border-top: 1px solid var(--border); }
.hms-phone__tabs span { display: grid; justify-items: center; gap: 2px; padding: var(--space-2) 0; font-size: 11px; font-weight: 500; color: var(--ink-muted); }
.hms-phone__tabs span[aria-current="page"] { color: var(--primary-strong); font-weight: 600; }
.hms-phone .hms-card__body, .hms-phone .hms-card { font-size: 13px; }
.hms-phone__cap { font-size: 12px; font-weight: 600; color: var(--ink-muted); text-align: center; margin-top: var(--space-2); width: 300px; }
.hms-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.hms-tile { display: grid; gap: 4px; justify-items: start; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); font-weight: 600; font-size: 13px; color: var(--ink); }
.hms-tile .hms-icon { color: var(--primary-strong); width: 20px; height: 20px; }

/* Print sheet: paper is the same in both themes */
.hms-sheet { width: 794px; padding: 40px; background: var(--paper); color: var(--paper-ink); font-family: var(--font-sans); font-size: 12px; line-height: 16px; box-shadow: var(--shadow-card); box-sizing: border-box; }
.hms-sheet * { box-sizing: border-box; }
.hms-sheet h1 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: .04em; text-align: center; }
.hms-sheet h2 { margin: 16px 0 4px; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hms-sheet__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--paper-ink); margin-bottom: 12px; }
.hms-sheet__org { font-size: 16px; line-height: 24px; font-weight: 600; }
.hms-sheet__muted { color: var(--paper-muted); }
.hms-sheet__box { display: grid; place-items: center; border: 1px dashed var(--paper-muted); color: var(--paper-muted); font-size: 10px; text-align: center; }
.hms-sheet__kv { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; margin: 12px 0; }
.hms-sheet__kv div { display: grid; grid-template-columns: 112px 1fr; gap: 8px; }
.hms-sheet__kv dt, .hms-sheet__kv span:first-child { color: var(--paper-muted); }
.hms-sheet table { width: 100%; border-collapse: collapse; }
.hms-sheet th { text-align: left; padding: 4px 6px; border-top: 1px solid var(--paper-ink); border-bottom: 1px solid var(--paper-ink); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.hms-sheet td { padding: 3px 6px; vertical-align: top; }
.hms-sheet .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hms-sheet tr.cat td { padding-top: 8px; font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
.hms-sheet tr.sub td { border-top: 1px solid var(--paper-rule); font-weight: 600; }
.hms-sheet__totals { margin: 12px 0 0 auto; width: 340px; }
.hms-sheet__totals td { padding: 2px 6px; }
.hms-sheet__totals tr.grand td { border-top: 1px solid var(--paper-ink); border-bottom: 2px solid var(--paper-ink); font-weight: 600; font-size: 13px; padding: 4px 6px; }
.hms-sheet__foot { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 8px; border-top: 1px solid var(--paper-rule); color: var(--paper-muted); font-size: 10px; }
.hms-sheet__mono { font-family: var(--font-mono); }

.hms-content > *, .hms-split > *, .hms-stack > *, .hms-card { min-width: 0; }
.hms-table--wrap td { white-space: normal; }
.hms-seg { max-width: 100%; overflow-x: auto; }
.hms-seg button { flex: none; white-space: nowrap; }
.hms-mgrid th:first-child, .hms-mgrid td:first-child { position: sticky; left: 0; background: var(--surface); }
.hms-mgrid th:first-child { background: var(--surface-sunken); }
.hms-field > .hms-seg { justify-self: start; }
.hms-nowrap { white-space: nowrap; }
/* Responsive: one application reflows for tablet and phone */
@media (max-width: 1100px) {
  .hms-split, .hms-split--start, .hms-split--32 { grid-template-columns: minmax(0, 1fr); }
  .hms-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hms-lanes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .hms-app { grid-template-columns: minmax(0, 1fr); }
  .hms-side { display: none; }
  .hms-top__menu { display: inline-flex; }
  .hms-top__crumb { display: none; }
  .hms-top { padding: var(--space-2) var(--space-3); gap: var(--space-2); flex-wrap: wrap; }
  .hms-top__end { gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
  .hms-top__title { font-size: 18px; line-height: 24px; }
  .hms-top__search { width: 36px; padding: 0; justify-content: center; }
  .hms-top__search input { display: none; }
  .hms-content { padding: var(--space-3); gap: var(--space-3); }
  .hms-form[data-cols="3"], .hms-form[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .hms-form, .hms-form[data-cols="3"], .hms-form[data-cols="4"], .hms-picks { grid-template-columns: minmax(0, 1fr); }
  .hms-toolbar .hms-input { max-width: none; flex-basis: 100%; }
  .hms-toolbar__end { margin-left: 0; }
  .hms-phead__end { margin-left: 0; }
  .hms-events li { grid-template-columns: 72px minmax(0, 1fr); }
  .hms-events li > :nth-child(2) { grid-column: 2; }
  .hms-events li > :nth-child(3) { grid-column: 2; }
  .hms-pagefoot { flex-wrap: wrap; }
  .hms-stat__top { flex-wrap: wrap; }
  .hms-stat__top .hms-label { white-space: normal; }
  .hms-stat { padding: var(--space-3); }
  .hms-pagefoot .hms-btn { flex: 1 1 auto; }
}
/* Access and error pages */
.hms-center { display: grid; place-items: center; min-height: 100%; padding: var(--space-6); background: var(--bg); }
.hms-center__card { width: 100%; max-width: 400px; padding: var(--space-5); display: grid; gap: var(--space-4); }
.hms-linkbtn { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--primary-strong); cursor: pointer; white-space: nowrap; }
.hms-errcode { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink-muted); }
/* Switch */
.hms-switch { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 500; cursor: pointer; }
.hms-switch input { appearance: none; width: 36px; height: 20px; margin: 0; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border-strong); position: relative; cursor: pointer; flex: none; }
.hms-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--radius-pill); background: var(--border-strong); }
.hms-switch input:checked { background: var(--primary); border-color: var(--primary); }
.hms-switch input:checked::after { left: 18px; background: var(--on-primary); }
/* Messages */
.hms-threads { list-style: none; margin: 0; padding: 0; }
.hms-threads li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 2px var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); align-items: center; }
.hms-threads li[aria-current="true"] { background: var(--primary-soft); }
.hms-threads .hms-avatar { grid-row: 1 / span 2; }
.hms-threads strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hms-threads small { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hms-threads time { font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.hms-convo { display: grid; gap: var(--space-2); padding: var(--space-4); align-content: end; min-height: 360px; }
/* Files */
.hms-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--space-3); padding: var(--space-4); }
.hms-file { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.hms-file__thumb { display: grid; place-items: center; height: 88px; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink-muted); }
.hms-file__thumb .hms-icon { width: 28px; height: 28px; }
.hms-file strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hms-file small { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.hms-drop { display: grid; place-items: center; gap: var(--space-1); padding: var(--space-5); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--ink-muted); text-align: center; }
/* Person cards */
.hms-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.hms-person { padding: var(--space-4); display: grid; gap: var(--space-3); }
/* Waiting-area display */
.hms-board { background: var(--shell); color: var(--on-shell); min-height: 100%; padding: var(--space-6); display: grid; gap: var(--space-5); align-content: start; font-family: var(--font-sans); box-sizing: border-box; }
.hms-board * { box-sizing: border-box; }
.hms-board__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 28px; line-height: 34px; font-weight: 600; }
.hms-board__head span { color: var(--on-shell-muted); font-weight: 500; }
.hms-board__rows { display: grid; gap: var(--space-3); }
.hms-board__row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 240px minmax(0, 1fr); gap: var(--space-5); align-items: center; padding: var(--space-4) var(--space-5); background: var(--shell-raised); border-radius: var(--radius-lg); font-size: 28px; line-height: 34px; font-weight: 500; }
.hms-board__row small { display: block; font-size: 16px; line-height: 24px; color: var(--on-shell-muted); }
.hms-board__token { font-family: var(--font-mono); font-size: 64px; line-height: 72px; font-weight: 500; }
.hms-board__next { font-family: var(--font-mono); font-size: 24px; color: var(--on-shell-muted); }
/* Vitals line chart */
.hms-vchart { display: block; width: 100%; height: auto; }
.hms-vchart .grid { stroke: var(--border); stroke-width: 1; }
.hms-vchart .line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; }
.hms-vchart .pt { fill: var(--primary); stroke: var(--surface); stroke-width: 2; }
.hms-vchart .pt--bad { fill: var(--danger); }
.hms-vchart .limit { stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 6 4; }
.hms-vchart text { font-family: var(--font-sans); font-size: 12px; font-weight: 500; fill: var(--ink-muted); }
.hms-vchart text.val { fill: var(--ink); font-weight: 600; }
.hms-vchart text.lim { fill: var(--danger); font-weight: 600; }
.hms-ring { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-pill); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.hms-flow th, .hms-flow td { padding: 6px var(--space-2); text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hms-flow th:first-child, .hms-flow td:first-child { text-align: left; padding-left: var(--space-4); position: sticky; left: 0; background: var(--surface); }
.hms-flow thead th:first-child { background: var(--surface-sunken); }
.hms-flow tr.grp td { background: var(--surface-sunken); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); text-align: left; }
.hms-flow .now { background: var(--primary-soft); }
.hms-builder { display: grid; gap: var(--space-3); }
.hms-builder__row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 160px 100px auto; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.hms-builder__grip { color: var(--ink-muted); font-weight: 600; cursor: grab; }
.hms-sheet__sign { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 32px; }
.hms-sheet__sign div { border-top: 1px solid var(--paper-ink); padding-top: 4px; }
.hms-sheet__chk { display: grid; grid-template-columns: 16px 1fr; gap: 8px; margin: 4px 0; }
.hms-phone .hms-otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hms-phone .hms-otp input { width: 100%; }
.hms-sheet__chk i { width: 12px; height: 12px; border: 1px solid var(--paper-ink); display: block; margin-top: 2px; }
.hms-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.hms-rules li { display: flex; align-items: center; gap: var(--space-2); }
.hms-rules li[data-ok="true"] { color: var(--success); }
.hms-rules .hms-icon { width: 14px; height: 14px; }
.hms-rights th, .hms-rights td { padding: var(--space-2) var(--space-3); }
.hms-rights td.c input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); vertical-align: middle; }
.hms-rights tr.mod td { background: var(--surface-sunken); font-weight: 600; }
.hms-rights tr.fn td:first-child { padding-left: var(--space-6); }
/* Short (mini) month calendar */
.hms-mini { display: grid; gap: var(--space-2); }
.hms-mini__head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.hms-mini__head button { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); cursor: pointer; padding: 0; }
.hms-mini__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.hms-mini__dow { text-align: center; font-size: 11px; line-height: 24px; font-weight: 600; letter-spacing: .06em; color: var(--ink-muted); }
.hms-mini__day { position: relative; height: 36px; border: 1px solid var(--surface); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; padding: 0 0 6px; }
.hms-mini__day:hover { background: var(--surface-sunken); }
.hms-mini__day--out { color: var(--ink-muted); }
.hms-mini__day[data-events]::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: var(--radius-pill); background: var(--primary); }
.hms-mini__day[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-strong); font-weight: 600; }
.hms-mini__day[aria-current="date"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; }
.hms-mini__day[aria-current="date"]::after { background: var(--on-primary); }
.hms-ev { display: block; min-width: 0; height: auto; padding: 2px 6px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hms-month__day--today b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); }
.hms-month--tall .hms-month__day { min-height: 104px; }
.hms-faq { border-top: 1px solid var(--border); }
.hms-faq summary { list-style: none; cursor: pointer; padding: var(--space-3) var(--space-4); font-weight: 600; display: flex; justify-content: space-between; gap: var(--space-3); }
.hms-faq summary::-webkit-details-marker { display: none; }
.hms-faq[open] summary .hms-icon { transform: rotate(180deg); }
.hms-faq p { margin: 0; padding: 0 var(--space-4) var(--space-4); color: var(--ink-muted); }
/* AI draft block */
.hms-ai { border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface-sunken); }
.hms-ai__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px dashed var(--border-strong); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.hms-ai__head span { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); }
.hms-ai__body { padding: var(--space-3); display: grid; gap: var(--space-2); }
.hms-ai__body p { margin: 0; }
.hms-ai__src { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.hms-ai__foot { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-3); border-top: 1px dashed var(--border-strong); }
.hms-ai__foot .end { margin-left: auto; display: flex; gap: var(--space-2); }
/* Tabs that wrap to a second row */
.hms-tabs--wrap { flex-wrap: wrap; overflow: visible; row-gap: 0; }
/* Kiosk */
.hms-kiosks { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: flex-start; }
.hms-kiosk { width: 400px; height: 760px; border: 8px solid var(--shell); border-radius: var(--radius-lg); background: var(--bg); display: flex; flex-direction: column; overflow: hidden; flex: none; font-size: 16px; line-height: 24px; }
.hms-kiosk__bar { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); background: var(--shell); color: var(--on-shell); font-weight: 600; }
.hms-kiosk__body { flex: 1; padding: var(--space-5); display: grid; gap: var(--space-4); align-content: start; }
.hms-kiosk h2 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; }
.hms-kiosk .hms-btn { height: 56px; font-size: 16px; }
.hms-kiosk .hms-control { height: 52px; font-size: 18px; }
.hms-kiosk__step { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.hms-kiosk__pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.hms-kiosk__pad button { height: 52px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; font-size: 20px; font-weight: 600; }
.hms-kiosk__cap { width: 400px; text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-muted); margin-top: var(--space-2); }
/* Active role in the top bar */
.hms-top__me { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-2) 0 2px; border: 1px solid transparent; border-radius: var(--radius-pill); background: none; color: var(--ink); font: inherit; cursor: pointer; flex: none; }
.hms-top__me:hover { background: var(--surface-sunken); }
.hms-top__me:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hms-top__me > .hms-icon { color: var(--ink-muted); }
.hms-top__role { display: block; text-align: left; font-size: 13px; line-height: 16px; font-weight: 600; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hms-top__role small { display: block; font-size: 11px; line-height: 14px; font-weight: 500; color: var(--ink-muted); }
@media (max-width: 1100px) { .hms-top__role, .hms-top__me > .hms-icon { display: none; } .hms-top__me { padding: 0; } }
/* Role choice */
.hms-roles { display: grid; gap: var(--space-2); }
.hms-rolebtn { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: 64px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.hms-rolebtn:hover { border-color: var(--primary); background: var(--primary-soft); }
.hms-rolebtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hms-rolebtn strong { display: block; font-size: 16px; line-height: 24px; }
.hms-rolebtn small { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.hms-rolebtn[aria-current="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.hms-menu { width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); overflow: hidden; }
.hms-menu__head { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.hms-menu__label { padding: var(--space-3) var(--space-4) var(--space-1); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.hms-menu a, .hms-menu button { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-4); border: 0; background: none; color: var(--ink); font: inherit; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.hms-menu a:hover, .hms-menu button:hover { background: var(--surface-sunken); }
.hms-menu hr { margin: var(--space-1) 0; border: 0; border-top: 1px solid var(--border); }
/* Support access strip */
.hms-strip { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--amber-soft); color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--amber); }
/* Stat tile: a long label wraps instead of pushing its badge out */
.hms-stat__top { align-items: flex-start; flex-wrap: wrap; }
.hms-stat__top .hms-label { white-space: normal; min-width: 0; }
.hms-stat__top .hms-badge { flex: none; }
/* Loading skeleton */
.hms-skel { display: block; height: 12px; border-radius: var(--radius-sm); background: var(--surface-sunken); }
.hms-skel + .hms-skel { margin-top: var(--space-2); }
/* Side-by-side compare */
.hms-compare { display: grid; grid-template-columns: 160px 1fr 1fr; }
.hms-compare > * { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border); min-width: 0; }
.hms-compare > .h { border-top: 0; font-weight: 600; background: var(--surface-sunken); }
.hms-compare > .k { color: var(--ink-muted); font-size: 12px; font-weight: 600; }
.hms-compare > .d { background: var(--amber-soft); }