/* CBS HMS — hospital operations screens.
 *
 * Builds on the tokens in styles.css rather than redefining colours, so these
 * screens stay in step with the rest of the platform.
 *
 * Indic scripts sit taller than Latin: Devanagari, Telugu, Kannada, Tamil and
 * Malayalam carry matras above and below the baseline, which clips at the
 * line-heights the rest of the platform uses. Every text surface here is given
 * room for them, so switching to Telugu, Kannada, Tamil or Malayalam does not
 * shave the top off a heading.
 */

:root {
    --hms-line-height: 1.75;
    --hms-gap: 16px;
    --hms-radius: 10px;
}

/* Script-aware typography. The font stacks name faces that actually ship on
 * Windows, macOS, Android and common Linux distributions, so a nurse station
 * renders Kannada without anybody installing anything. */
body.hms {
    line-height: var(--hms-line-height);
}

html[lang="hi"] body.hms,
html[lang="mr"] body.hms {
    font-family: 'Nirmala UI', 'Noto Sans Devanagari', 'Mangal', 'Kohinoor Devanagari', sans-serif;
}

html[lang="te"] body.hms {
    font-family: 'Nirmala UI', 'Noto Sans Telugu', 'Gautami', 'Kohinoor Telugu', sans-serif;
}

html[lang="kn"] body.hms {
    font-family: 'Nirmala UI', 'Noto Sans Kannada', 'Tunga', 'Kohinoor Kannada', sans-serif;
}

html[lang="ta"] body.hms {
    font-family: 'Nirmala UI', 'Noto Sans Tamil', 'Latha', 'Kohinoor Tamil', 'Tamil Sangam MN', sans-serif;
}

html[lang="ml"] body.hms {
    font-family: 'Nirmala UI', 'Noto Sans Malayalam', 'Kartika', 'Kohinoor Malayalam', 'Malayalam Sangam MN', sans-serif;
}

/* ===== Shell ===== */

.hms-shell {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.hms-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hms-gap);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}

.hms-header h1 {
    font-size: 22px;
    font-weight: 600;
    /* Room for Devanagari and Telugu ascenders/descenders in headings. */
    line-height: 1.6;
    margin-right: auto;
}

.hms-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hms-nav a {
    padding: 7px 14px;
    border-radius: var(--hms-radius);
    border: 1px solid var(--border);
    background: var(--bg-white);
    color: var(--text-secondary);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.hms-nav a:hover {
    border-color: var(--primary-light);
    color: var(--primary);
    text-decoration: none;
}

.hms-nav a.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ===== Language picker ===== */

.hms-locale {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hms-locale label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hms-locale select {
    padding: 6px 10px;
    /* Generous vertical padding so a Kannada option is not clipped in the
     * closed state of the select, which some browsers size tightly. */
    padding-top: 7px;
    padding-bottom: 7px;
    border: 1px solid var(--border);
    border-radius: var(--hms-radius);
    background: var(--bg-white);
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
    font-family: inherit;
    min-width: 120px;
}

/* ===== Stat tiles ===== */

.hms-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--hms-gap);
    margin-bottom: 24px;
}

.hms-stat {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--hms-radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
}

.hms-stat .value {
    font-size: 26px;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.3;
    /* Numerals are Latin in every locale here, so they need no extra room. */
    font-variant-numeric: tabular-nums;
}

.hms-stat .label {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.hms-stat.warn .value { color: var(--warning); }
.hms-stat.danger .value { color: var(--danger); }
.hms-stat.ok .value { color: var(--success); }

/* ===== Cards and sections ===== */

.hms-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--hms-radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    overflow: hidden;
}

.hms-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg);
}

.hms-card-head h2 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    margin-right: auto;
}

.hms-card-body {
    padding: 16px;
}

/* ===== Ward board ===== */

.ward-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--hms-gap);
}

.ward-card {
    border: 1px solid var(--border);
    border-radius: var(--hms-radius);
    background: var(--bg-white);
    padding: 14px;
}

.ward-card h3 {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 2px;
}

.ward-card .ward-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
    line-height: 1.6;
}

/* Occupancy bar. Width is set inline from the computed rate. */
.occupancy-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--border-light);
    overflow: hidden;
    margin: 10px 0 6px;
}

.occupancy-bar > span {
    display: block;
    height: 100%;
    background: var(--primary);
    transition: width var(--transition);
}

.occupancy-bar.high > span { background: var(--warning); }
.occupancy-bar.full > span { background: var(--danger); }

.ward-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: var(--text-secondary);
}

.ward-counts span { white-space: nowrap; }

/* Bed chips */
.bed-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.bed-chip {
    min-width: 44px;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg);
    font-size: 12px;
    text-align: center;
    cursor: default;
    font-variant-numeric: tabular-nums;
}

.bed-chip.available { background: var(--success-bg); border-color: var(--success); color: #0a6b4d; }
.bed-chip.occupied { background: var(--danger-bg); border-color: var(--danger); color: #9b2226; }
.bed-chip.cleaning { background: var(--warning-bg); border-color: var(--warning); color: #8a5a00; }
.bed-chip.maintenance { background: var(--border-light); border-color: var(--text-muted); color: var(--text-secondary); }
.bed-chip.reserved { background: var(--accent-pale); border-color: var(--accent); color: #045c73; }

.bed-chip .device-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
    margin-left: 4px;
    vertical-align: middle;
}

/* ===== Tables ===== */

.hms-table-wrap {
    /* Wide tables scroll inside their own box; the page must never scroll
     * sideways, especially on a ward tablet. */
    overflow-x: auto;
}

table.hms-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

table.hms-table th,
table.hms-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
    line-height: 1.6;
    vertical-align: top;
}

table.hms-table th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    white-space: nowrap;
    background: var(--bg);
}

/* Indic scripts do not have a meaningful uppercase, and forcing the transform
 * on them does nothing useful while making headings harder to scan. */
html[lang="hi"] table.hms-table th,
html[lang="mr"] table.hms-table th,
html[lang="te"] table.hms-table th,
html[lang="kn"] table.hms-table th,
html[lang="ta"] table.hms-table th,
html[lang="ml"] table.hms-table th {
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
}

html[lang="hi"] .hms-locale label,
html[lang="mr"] .hms-locale label,
html[lang="te"] .hms-locale label,
html[lang="kn"] .hms-locale label,
html[lang="ta"] .hms-locale label,
html[lang="ml"] .hms-locale label {
    text-transform: none;
    letter-spacing: 0;
}

table.hms-table tbody tr:hover { background: var(--bg); }

table.hms-table td.num { font-variant-numeric: tabular-nums; }

/* ===== Badges ===== */

.badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.7;
    white-space: nowrap;
}

.badge.neutral { background: var(--border-light); color: var(--text-secondary); }
.badge.ok { background: var(--success-bg); color: #0a6b4d; }
.badge.warn { background: var(--warning-bg); color: #8a5a00; }
.badge.danger { background: var(--danger-bg); color: #9b2226; }
.badge.info { background: var(--accent-pale); color: #045c73; }

/* ===== Forms ===== */

.hms-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: end;
}

.hms-field label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    line-height: 1.6;
}

.hms-field input,
.hms-field select,
.hms-field textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg-white);
}

.hms-field textarea { min-height: 70px; resize: vertical; }

.hms-field input:focus,
.hms-field select:focus,
.hms-field textarea:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px var(--accent-pale);
}

.hms-btn {
    padding: 9px 16px;
    border: 1px solid var(--primary);
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    cursor: pointer;
    white-space: nowrap;
}

.hms-btn:hover { background: var(--primary-dark); }
.hms-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.hms-btn.secondary {
    background: var(--bg-white);
    color: var(--primary);
}

.hms-btn.secondary:hover { background: var(--accent-pale); }

.hms-btn.small { padding: 5px 10px; font-size: 13px; }

.hms-btn.quiet {
    background: transparent;
    border-color: var(--border);
    color: var(--text-secondary);
}

/* ===== Messages ===== */

.hms-msg {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 14px;
    display: none;
}

.hms-msg.show { display: block; }
.hms-msg.error { background: var(--danger-bg); color: #9b2226; border: 1px solid var(--danger); }
.hms-msg.ok { background: var(--success-bg); color: #0a6b4d; border: 1px solid var(--success); }

/* Neither a success nor a failure. The login doors need this: "you were let in
 * without anything being checked" must not be dressed in the green that means
 * a credential was accepted. */
.hms-msg.warn { background: var(--warning-bg); color: #7A4A00; border: 1px solid var(--warning); }

.hms-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.7;
}

.hms-loading {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* ===== Responsive ===== */

@media (max-width: 720px) {
    .hms-shell { padding: 14px; }

    .hms-header {
        flex-direction: column;
        align-items: stretch;
    }

    .hms-header h1 { margin-right: 0; }

    .hms-nav { overflow-x: auto; }

    .hms-form { grid-template-columns: 1fr; }
}

/* ===== Front doors: the three product editions =====
 *
 * One layout, three identities. Dock, Medico and Care share this markup and
 * these rules; each sets an edition class on the body and gets its own accent,
 * brand rail and mark colour. Three different layouts would have made the
 * three products harder to support without making them easier to tell apart.
 *
 * Classes here are prefixed hms- because styles.css already owns .login-card
 * and .login-logo for the older demo shell, and both stylesheets load together.
 *
 * Every label is translated at runtime, so nothing may be sized to the English
 * string: buttons wrap and grow rather than clip, because "ಸೈನ್ ಇನ್ ಮಾಡಿ" is
 * both taller and wider than "Sign in".
 */

body.hms-login {
    --edition: var(--primary);
    --edition-dark: var(--primary-dark);
    --edition-pale: var(--accent-pale);
    background: var(--bg);
    min-height: 100vh;
}

/* Dock — hospital staff, inside one facility. Platform blue: this door opens
 * onto the ward board and should feel continuous with it. */
body.hms-login.edition-dock,
body.hms-portal.edition-dock {
    --edition: #005B8F;
    --edition-dark: #004266;
    --edition-pale: #CAF0F8;
}

/* Medico — the empanelled clinician, who belongs to no single hospital. */
body.hms-login.edition-medico,
body.hms-portal.edition-medico {
    --edition: #5A29B8;
    --edition-dark: #421E8C;
    --edition-pale: #EDE4FD;
}

/* Care — device estate and caregiver support. */
body.hms-login.edition-care,
body.hms-portal.edition-care {
    --edition: #0A6151;
    --edition-dark: #07453A;
    --edition-pale: #DDF3ED;
}

/* Counter — the medical shop. Amber rather than a fourth cool hue: the shop is
 * a different kind of place from a ward, and a shopkeeper glancing at a phone
 * behind a counter should be able to tell in one look that this is not the
 * hospital screen. It had no hue at all until this rule, so the door rendered
 * in the platform blue and looked like Dock. */
body.hms-login.edition-counter,
body.hms-portal.edition-counter {
    --edition: #8F4C12;
    --edition-dark: #68370B;
    --edition-pale: #FBEBDC;
}

.hms-login-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px 16px;
}

.hms-login-card {
    width: 100%;
    max-width: 460px;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* The brand rail. Colour is the fastest way to tell the three doors apart —
 * it lands before a single word has been read. */
.hms-login-rail {
    height: 6px;
    background: linear-gradient(90deg, var(--edition), var(--edition-dark));
}

.hms-login-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 22px 4px;
}

/* The CBS mark. One shape across all three editions, tinted per edition. */
/* The CBS mark itself, not a lettered tile standing in for it. It carries its
 * own ground and corners, so neither is set here. The edition colour has not
 * gone anywhere -- it is still the card's rail, its pills and its button,
 * which is where a signed-in user reads "which door am I at" from. */
.hms-mark {
    flex: 0 0 auto;
    display: block;
    width: 46px;
    height: 46px;
}

.hms-login-titles { min-width: 0; }

.hms-login-titles h1 {
    font-size: 21px;
    font-weight: 650;
    line-height: 1.55;
    color: var(--text);
}

/* The subtitle is the second differentiator: it says which product this is and
 * who it is for, in the reader's own language. */
.hms-login-sub {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-top: 2px;
}

.hms-login-body { padding: 4px 22px 22px; }

.hms-login-locale {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 22px 0;
}

/* ===== Demo-mode banner =====
 *
 * Rendered whenever CBS_AUTH_ENABLED is off, which is the default. In that
 * state the platform authenticates nobody, so the door has to say so instead of
 * letting a password box imply otherwise. Deliberately loud: warning colours, a
 * rule down the leading edge, full-size body text — not small grey print. */
.hms-demo-banner {
    margin: 14px 22px 0;
    padding: 12px 14px;
    border: 1px solid var(--warning);
    border-left-width: 5px;
    border-radius: 8px;
    background: var(--warning-bg);
    color: #7A4A00;
    font-size: 14px;
    line-height: 1.7;
}

.hms-demo-banner strong {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
}

/* ===== Login form ===== */

.hms-login-form {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.hms-login-form .hms-field label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
}

.hms-login-form .hms-field input:focus,
.hms-login-form .hms-field select:focus {
    border-color: var(--edition);
    box-shadow: 0 0 0 3px var(--edition-pale);
}

/* Keyboard focus must be visible on every interactive element, including the
 * ones a pointer user never sees an outline on. */
body.hms-login *:focus-visible,
body.hms-portal *:focus-visible {
    outline: 3px solid var(--edition);
    outline-offset: 2px;
}

.hms-btn.hms-login-btn {
    width: 100%;
    background: var(--edition);
    border-color: var(--edition);
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 600;
    /* No fixed height, and wrapping allowed: a Kannada or Tamil label is both
     * taller and longer than the English one and must not be clipped. */
    height: auto;
    min-height: 46px;
    line-height: var(--hms-line-height);
    white-space: normal;
}

.hms-btn.hms-login-btn:hover:not(:disabled) {
    background: var(--edition-dark);
    border-color: var(--edition-dark);
}

.hms-btn.hms-otp-btn {
    width: 100%;
    background: var(--bg-white);
    color: var(--edition);
    border-color: var(--edition);
    padding: 10px 16px;
    height: auto;
    line-height: var(--hms-line-height);
    white-space: normal;
}

.hms-btn.hms-otp-btn:hover:not(:disabled) { background: var(--edition-pale); }

/* "or" divider between the password route and the phone route. */
.hms-login-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 4px;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hms-login-or::before,
.hms-login-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Indic scripts have no meaningful uppercase; forcing the transform only makes
 * the divider harder to read. */
html[lang="hi"] .hms-login-or,
html[lang="mr"] .hms-login-or,
html[lang="te"] .hms-login-or,
html[lang="kn"] .hms-login-or,
html[lang="ta"] .hms-login-or,
html[lang="ml"] .hms-login-or {
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
}

/* Cross-links to the other two front doors. A hospital that bought two editions
 * should not have to be told the other URL. */
.hms-login-switch {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hms-login-switch a {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
    text-decoration: none;
    background: var(--bg-white);
}

.hms-login-switch a:hover {
    border-color: var(--edition);
    color: var(--edition);
    text-decoration: none;
}

.hms-login-switch a[aria-current="page"] {
    background: var(--edition-pale);
    border-color: var(--edition);
    color: var(--edition-dark);
}

.hms-login-card .hms-msg { margin: 14px 0 0; }

/* ===== The door chooser at /signin =====
 *
 * Ruled by VKG on 2026-09-13. This page used to wear the marketing design
 * system while the four doors it hands you to wore this one, so the handover
 * looked like a jump between two products. It now shares the login card, the
 * rail, the mark and the locale picker with them.
 *
 * The edition colours above are declared on `body.hms-login.edition-*`,
 * because a login page belongs to exactly one edition. This page belongs to
 * none and shows all four at once, so each door carries its own colour on its
 * own anchor instead — same hues, re-declared at the element. */

.hms-login-card--wide { max-width: 620px; }

.hms-doors {
    display: grid;
    gap: 10px;
}

.hms-door {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 0 16px 0 0;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--bg-white);
    text-decoration: none;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* The same 4px rail the login card wears, so a door reads as a smaller
 * instance of the page it opens rather than as a list item. */
.hms-door__rail {
    flex: none;
    width: 4px;
    background: var(--edition, var(--primary));
}

/* The module's own app icon, at the size a phone home screen draws it. The
 * PNG carries its own navy ground and rounded corners, so it needs no tile
 * and no radius here — a second rounded box behind it would read as a frame
 * around the icon rather than as the icon. */
.hms-door__icon {
    flex: none;
    align-self: center;
    width: 40px;
    height: 40px;
}

.hms-door__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 0;
    min-width: 0;
}

.hms-door__text strong {
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.4;
}

.hms-door__sub {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.hms-door__go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: center;
    margin-left: auto;
    padding-left: 12px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--edition, var(--primary));
}

.hms-door__arrow {
    font-size: 16px;
    transition: transform .15s ease;
}

.hms-door:hover,
.hms-door:focus-visible {
    border-color: var(--edition, var(--primary));
    box-shadow: var(--shadow-md, 0 4px 14px rgba(0, 0, 0, .08));
}

.hms-door:hover .hms-door__arrow { transform: translateX(3px); }

/* Per-door colour, matching the body-level editions above exactly. */
.hms-door.edition-dock    { --edition: #005B8F; }
.hms-door.edition-medico  { --edition: #5A29B8; }
.hms-door.edition-care    { --edition: #0A6151; }
.hms-door.edition-counter { --edition: #8F4C12; }

.hms-login-note {
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--border-light);
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--text-secondary);
}

.hms-login-note strong { color: var(--text-primary); }

/* The standing credit line, on the sign-in family.
 *
 * Outside the card rather than inside it: it is a statement about who made the
 * product, not part of the act of signing in, and putting it under the card
 * keeps the card itself the same object on all five pages. */
.hms-login-colophon {
    max-width: 620px;
    margin: 16px auto 0;
    padding: 0 4px;
    text-align: center;
}

.hms-login-colophon__credit {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.hms-login-colophon__note {
    margin: 4px 0 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--text-muted, var(--text-secondary));
}

@media (prefers-reduced-motion: reduce) {
    .hms-door,
    .hms-door__arrow { transition: none; }
    .hms-door:hover .hms-door__arrow { transform: none; }
}

/* ===== Landing pages (Medico, Care) ===== */

body.hms-portal {
    --edition: var(--primary);
    --edition-dark: var(--primary-dark);
    --edition-pale: var(--accent-pale);
}

body.hms-portal .hms-header { border-bottom-color: var(--edition-pale); }

body.hms-portal .hms-header h1 {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* The mark sits in a header here rather than above a card, so it is scaled to
 * the heading beside it. */
body.hms-portal .hms-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 12px;
}

body.hms-portal .hms-demo-banner { margin: 0 0 18px; }

.hms-greeting {
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-secondary);
    margin-bottom: 18px;
}

.hms-greeting strong { color: var(--text); }

/* Anything on these pages that is not real data yet says so here, in a box that
 * cannot be mistaken for the product. */
.hms-placeholder-note {
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px dashed var(--text-muted);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.7;
}

.hms-facility-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--hms-gap);
}

.hms-facility-card {
    border: 1px solid var(--border);
    border-radius: var(--hms-radius);
    padding: 14px;
    background: var(--bg-white);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hms-facility-card h3 {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
}

.hms-facility-card .hms-facility-meta {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-right: auto;
}

.hms-facility-card .hms-btn {
    align-self: flex-start;
    background: var(--edition);
    border-color: var(--edition);
    height: auto;
    line-height: var(--hms-line-height);
    white-space: normal;
}

.hms-btn.hms-signout {
    background: var(--bg-white);
    color: var(--edition);
    border-color: var(--edition);
    height: auto;
    line-height: var(--hms-line-height);
    white-space: normal;
}

.hms-btn.hms-signout:hover { background: var(--edition-pale); }

@media (max-width: 720px) {
    .hms-login-wrap { padding: 12px 10px; }
    .hms-login-card { max-width: 100%; }
    .hms-login-head { padding: 18px 16px 4px; }
    .hms-login-body { padding: 4px 16px 18px; }
    .hms-login-locale { padding: 10px 16px 0; }
    .hms-demo-banner { margin: 12px 16px 0; }
    .hms-facility-list { grid-template-columns: 1fr; }
}