/* CBS — the signed-in application shell.
 *
 * Top bar plus left rail on the desktop, drawer on the tablet, bottom tab bar
 * on the phone. One shell for all three modes; the edition colour is the only
 * thing that changes between them.
 *
 * Built on tokens.css, like the public site, so the two surfaces are one
 * product. Where the public site is generous, this is dense: a clinician reads
 * a ward board at arm's length and needs rows, not whitespace. The density
 * difference is the --cbs-space scale used at a lower step, not a second set of
 * values.
 *
 * Load order: tokens.css, then this. hms.css is NOT required — the four
 * existing operational screens keep their own stylesheet and are hosted inside
 * this shell, which is why nothing here styles a .hms- class.
 */

/* ===================================================================
 * Ground
 * =============================================================== */

*, *::before, *::after { box-sizing: border-box; }

body.app {
    margin: 0;
    min-height: 100vh;
    background: var(--cbs-surface);
    color: var(--cbs-ink);
    font-family: var(--cbs-font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* The edition accent. One shape across all three modes, tinted per mode —
   the same three hues hms.css already gives the login doors, so a clinician
   who signed in through the purple door stays in a purple-accented app. */
body.app { --edition: var(--cbs-navy); --edition-tint: var(--cbs-navy-tint); }
body.app.edition-dock   { --edition: #0F5C86; --edition-tint: #E2EFF6; }
body.app.edition-medico { --edition: #55299F; --edition-tint: #EDE4FD; }
body.app.edition-care   { --edition: #0A5D4C; --edition-tint: #DDF3ED; }

.app h1, .app h2, .app h3 { margin: 0; line-height: 1.25; font-weight: 650; }
.app p { margin: 0; }
.app a { color: var(--cbs-teal-deep); text-decoration: none; }
.app a:hover { text-decoration: underline; }

.app :focus-visible {
    outline: 3px solid var(--cbs-teal);
    outline-offset: 2px;
    border-radius: var(--cbs-radius-sm);
}

.app-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 400;
    padding: var(--cbs-space-3) var(--cbs-space-4);
    background: var(--cbs-navy);
    color: var(--cbs-ink-inverse);
    font-weight: 600;
}
.app-skip:focus { left: 0; }

.app-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ===================================================================
 * Frame
 * =============================================================== */

.app-frame {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
        "bar  bar"
        "rail main";
    min-height: 100vh;
}

body.app[data-rail="collapsed"] .app-frame { grid-template-columns: 64px minmax(0, 1fr); }

/* ===================================================================
 * Top bar — context and identity, never destinations
 * =============================================================== */

.app-bar {
    grid-area: bar;
    position: sticky;
    top: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    gap: var(--cbs-space-3);
    min-height: 56px;
    padding: 0 var(--cbs-space-4);
    background: var(--cbs-navy);
    color: var(--cbs-ink-inverse);
}

.app-bar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--cbs-space-3);
    color: inherit;
    font-weight: 700;
    white-space: nowrap;
    flex: none;
}
.app-bar__brand:hover { text-decoration: none; }

.app-bar__mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--edition);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.app-bar__name { font-size: 15px; letter-spacing: -.01em; }

/* Context switcher — organisation and facility. The clinician who practises at
   three hospitals has to know which one they are writing into. */
.app-context {
    display: inline-flex;
    align-items: center;
    gap: var(--cbs-space-2);
    max-width: 34ch;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--cbs-radius-sm);
    background: rgba(255, 255, 255, .07);
    color: inherit;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-context:hover { background: rgba(255, 255, 255, .13); }
.app-context__label { color: rgba(255, 255, 255, .62); }
.app-context__value { font-weight: 600; }

/* The search control opens the command palette; it is not a form. */
.app-search {
    flex: 1;
    max-width: 460px;
    display: flex;
    align-items: center;
    gap: var(--cbs-space-2);
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--cbs-radius-sm);
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .72);
    font: inherit;
    font-size: 13px;
    text-align: start;
    cursor: pointer;
}
.app-search:hover { background: rgba(255, 255, 255, .13); }
.app-search kbd {
    margin-inline-start: auto;
    padding: 1px 5px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 4px;
    font-family: var(--cbs-font-mono);
    font-size: 10.5px;
}

.app-bar__end {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--cbs-space-2);
    flex: none;
}

.app-iconbtn {
    display: grid;
    place-items: center;
    position: relative;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--cbs-radius-sm);
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.app-iconbtn:hover { background: rgba(255, 255, 255, .13); }

.app-iconbtn__count {
    position: absolute;
    top: 2px; inset-inline-end: 2px;
    min-width: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--cbs-alert);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

.app-user {
    display: inline-flex;
    align-items: center;
    gap: var(--cbs-space-2);
    padding: 4px 8px;
    border: 0;
    border-radius: var(--cbs-radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-user:hover { background: rgba(255, 255, 255, .13); }

.app-locale {
    max-width: 12ch;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--cbs-radius-sm);
    background: rgba(255, 255, 255, .07);
    color: var(--cbs-ink-inverse);
    /* Nine scripts. Inherit the page stack rather than a form-control default
       that may not carry Kannada or Malayalam. */
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
}
/* The dropdown list itself is painted by the OS, which on Windows renders it on
   a light ground — white-on-white without this. */
.app-locale option { color: var(--cbs-ink); background: var(--cbs-surface-raised); }

.app-avatar {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--edition);
    font-size: 11px;
    font-weight: 700;
    flex: none;
}

/* ===================================================================
 * Left rail — destinations
 * =============================================================== */

.app-rail {
    grid-area: rail;
    position: sticky;
    top: 56px;
    align-self: start;
    height: calc(100vh - 56px);
    overflow-y: auto;
    padding: var(--cbs-space-3) var(--cbs-space-2) var(--cbs-space-5);
    background: var(--cbs-surface-raised);
    border-inline-end: 1px solid var(--cbs-line);
}

.app-rail__group + .app-rail__group { margin-top: var(--cbs-space-4); }

.app-rail__heading {
    padding: 0 var(--cbs-space-3) var(--cbs-space-2);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cbs-ink-faint);
}
/* Uppercasing and tracking are Latin conventions; they damage conjuncts. */
html:not([lang="en"]):not([lang="ms"]) .app-rail__heading {
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
}

.app-rail__list { margin: 0; padding: 0; list-style: none; }

.app-nav {
    display: flex;
    align-items: center;
    gap: var(--cbs-space-3);
    padding: 8px var(--cbs-space-3);
    border-radius: var(--cbs-radius-sm);
    color: var(--cbs-ink-muted);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}
.app-nav:hover { background: var(--cbs-surface-sunken); color: var(--cbs-ink); text-decoration: none; }

.app-nav[aria-current="page"] {
    background: var(--edition-tint);
    color: var(--edition);
    font-weight: 650;
}

.app-nav__icon { flex: none; width: 18px; height: 18px; }
.app-nav__text { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.app-nav__count {
    flex: none;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--cbs-surface-sunken);
    color: var(--cbs-ink-muted);
    font-family: var(--cbs-font-mono);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.app-nav__count--alert { background: var(--cbs-alert-tint); color: var(--cbs-alert-ink); }

/* The status dot. A destination whose API does not exist yet is still reachable
   — the screen behind it says what is missing — but the rail admits it up
   front rather than letting a clinician discover it by clicking. */
.app-nav__dot {
    flex: none;
    width: 6px; height: 6px;
    border-radius: 50%;
}
.app-nav__dot--unguarded { background: var(--cbs-warn); }
.app-nav__dot--stub      { background: var(--cbs-ink-faint); }
.app-nav__dot--blocked   { background: var(--cbs-alert); }

.app-rail__toggle {
    display: flex;
    align-items: center;
    gap: var(--cbs-space-3);
    width: 100%;
    margin-top: var(--cbs-space-4);
    padding: 8px var(--cbs-space-3);
    border: 0;
    border-radius: var(--cbs-radius-sm);
    background: transparent;
    color: var(--cbs-ink-faint);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.app-rail__toggle:hover { background: var(--cbs-surface-sunken); color: var(--cbs-ink); }

/* --- collapsed --- */

body.app[data-rail="collapsed"] .app-nav { justify-content: center; padding-inline: 0; }
body.app[data-rail="collapsed"] .app-nav__text,
body.app[data-rail="collapsed"] .app-nav__count,
body.app[data-rail="collapsed"] .app-nav__dot,
body.app[data-rail="collapsed"] .app-rail__heading,
body.app[data-rail="collapsed"] .app-rail__toggle span { display: none; }
body.app[data-rail="collapsed"] .app-rail__toggle { justify-content: center; }

/* ===================================================================
 * Main
 * =============================================================== */

.app-main {
    grid-area: main;
    min-width: 0;
    padding: var(--cbs-space-5) var(--cbs-space-5) var(--cbs-space-8);
}

.app-page {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
}

.app-pagehead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--cbs-space-3) var(--cbs-space-5);
    margin-bottom: var(--cbs-space-5);
    padding-bottom: var(--cbs-space-4);
    border-bottom: 1px solid var(--cbs-line);
}
.app-pagehead h1 { font-size: 21px; }
.app-pagehead__sub {
    width: 100%;
    font-size: 14px;
    color: var(--cbs-ink-muted);
}
.app-pagehead__end { margin-inline-start: auto; display: flex; gap: var(--cbs-space-2); }

/* ===================================================================
 * Buttons
 * =============================================================== */

.app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cbs-space-2);
    padding: 7px 13px;
    border: 1px solid var(--cbs-line);
    border-radius: var(--cbs-radius-sm);
    background: var(--cbs-surface-raised);
    color: var(--cbs-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.app-btn:hover { background: var(--cbs-surface-sunken); text-decoration: none; }

.app-btn--primary {
    background: var(--edition);
    border-color: var(--edition);
    color: var(--cbs-ink-inverse);
}
.app-btn--primary:hover { filter: brightness(1.12); background: var(--edition); }

.app-btn[disabled],
.app-btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===================================================================
 * Cards, metrics, tables
 * =============================================================== */

.app-card {
    background: var(--cbs-surface-raised);
    border: 1px solid var(--cbs-line);
    border-radius: var(--cbs-radius);
    padding: var(--cbs-space-4);
}

.app-cardhead {
    display: flex;
    align-items: baseline;
    gap: var(--cbs-space-3);
    margin-bottom: var(--cbs-space-3);
}
.app-cardhead h2 { font-size: 15px; }
.app-cardhead__end { margin-inline-start: auto; font-size: 13px; }

.app-grid {
    display: grid;
    gap: var(--cbs-space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.app-metrics {
    display: grid;
    gap: var(--cbs-space-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}

.app-metric {
    padding: var(--cbs-space-4);
    background: var(--cbs-surface-raised);
    border: 1px solid var(--cbs-line);
    border-radius: var(--cbs-radius);
}
.app-metric__n {
    display: block;
    font-family: var(--cbs-font-mono);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--cbs-navy);
}
.app-metric__l {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--cbs-ink-faint);
}
.app-metric--warn  .app-metric__n { color: var(--cbs-warn); }
.app-metric--alert .app-metric__n { color: var(--cbs-alert); }

.app-tablewrap { overflow-x: auto; }

.app-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.app-table th {
    padding: 8px 12px;
    background: var(--cbs-surface-sunken);
    color: var(--cbs-ink-faint);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-align: start;
    white-space: nowrap;
    border-bottom: 1px solid var(--cbs-line);
}
.app-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--cbs-line-soft);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.app-table tbody tr:hover { background: var(--cbs-surface); }
.app-table td:first-child { font-weight: 600; }

.app-id { font-family: var(--cbs-font-mono); white-space: nowrap; }

.app-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 650;
    white-space: nowrap;
}
.app-badge--ok    { background: var(--cbs-ok-tint);    color: var(--cbs-ok-ink); }
.app-badge--warn  { background: var(--cbs-warn-tint);  color: var(--cbs-warn-ink); }
.app-badge--alert { background: var(--cbs-alert-tint); color: var(--cbs-alert-ink); }
.app-badge--info  { background: var(--cbs-teal-tint);  color: var(--cbs-teal-deep); }
.app-badge--muted { background: var(--cbs-surface-sunken); color: var(--cbs-ink-muted); }

/* ===================================================================
 * The gap notice
 *
 * The design manual's rule, as a component: a screen with no backend renders
 * its real frame and states plainly what is missing and under which identifier.
 * It never shows an empty table that looks like "no patients today".
 * =============================================================== */

.app-gap {
    display: flex;
    gap: var(--cbs-space-4);
    padding: var(--cbs-space-5);
    background: var(--cbs-surface-raised);
    border: 1px dashed var(--cbs-line);
    border-radius: var(--cbs-radius);
}
.app-gap__icon { flex: none; color: var(--cbs-ink-faint); }
.app-gap h2 { font-size: 15px; margin-bottom: var(--cbs-space-2); }
.app-gap p { font-size: 14px; color: var(--cbs-ink-muted); max-width: 62ch; }
.app-gap p + p { margin-top: var(--cbs-space-3); }
.app-gap code {
    font-family: var(--cbs-font-mono);
    font-size: 12.5px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--cbs-surface-sunken);
}

.app-gap--blocked { border-style: solid; border-color: var(--cbs-alert); }
.app-gap--blocked .app-gap__icon { color: var(--cbs-alert); }

/* A real empty state — nothing is wrong, there is simply nothing to do. */
.app-empty {
    padding: var(--cbs-space-7) var(--cbs-space-5);
    text-align: center;
    color: var(--cbs-ink-muted);
}
.app-empty strong { display: block; margin-bottom: var(--cbs-space-2); color: var(--cbs-ink); }

/* The banner that says the API behind this screen enforces no role check. */
.app-unguarded {
    display: flex;
    align-items: flex-start;
    gap: var(--cbs-space-3);
    margin-bottom: var(--cbs-space-4);
    padding: var(--cbs-space-3) var(--cbs-space-4);
    background: var(--cbs-warn-tint);
    border: 1px solid var(--cbs-warn);
    border-radius: var(--cbs-radius-sm);
    color: var(--cbs-warn-ink);
    font-size: 13px;
    line-height: 1.5;
}
.app-unguarded svg { flex: none; margin-top: 2px; }

/* The machine-translation tag. Small and muted: it informs, it does not alarm.
   hms-i18n.js fills and un-hides it only for a machine-translated language. */
.app-mt-tag {
    margin: 0 0 var(--cbs-space-3);
    font-size: var(--cbs-text-xs);
    color: var(--cbs-ink-faint);
}
.app-mt-tag[hidden] { display: none; }

/* Demo mode, and synthetic data. Permanent and visible — the manual permits a
   mock only when it cannot be mistaken for real. */
.app-synthetic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--cbs-navy-tint);
    color: var(--cbs-navy);
    font-size: 11.5px;
    font-weight: 650;
    white-space: nowrap;
}

/* ===================================================================
 * Screen number
 *
 * Ruled by VKG on 2026-09-09: a screen number is permanent and a bug is
 * reported by number only. Quiet enough to ignore while reading the screen,
 * findable the moment somebody needs to name it.
 * =============================================================== */

.app-screenref {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--cbs-radius-sm);
    background: var(--edition-tint);
    color: var(--edition);
    font-family: var(--cbs-font-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
    cursor: help;
}

/* ===================================================================
 * Forms
 *
 * Every screen built on these takes real input at a hospital desk, so the
 * controls are sized for a gloved finger on a ward tablet: 40px tall on the
 * desktop, 44px and full width below 900px, which is the WCAG target size and
 * what tests/test_mobile_responsive.py measures.
 * =============================================================== */

.app-form {
    display: grid;
    gap: var(--cbs-space-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    align-items: end;
}

.app-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.app-field--wide { grid-column: 1 / -1; }
.app-field label {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--cbs-ink-muted);
}
.app-field__hint { font-size: 12px; color: var(--cbs-ink-faint); }

.app-input, .app-select, .app-textarea {
    width: 100%;
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid var(--cbs-line);
    border-radius: var(--cbs-radius-sm);
    background: var(--cbs-surface-raised);
    color: var(--cbs-ink);
    font: inherit;
    font-size: 14px;
}
.app-textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.app-input[type="checkbox"] { width: 22px; height: 22px; min-height: 22px; }

.app-check {
    display: flex;
    align-items: center;
    gap: var(--cbs-space-2);
    min-height: 40px;
    font-size: 13.5px;
}
.app-check input { flex: none; }
/* The label may carry a second line explaining the box — a consent class, say
   — so it stacks rather than running the explanation into the label. */
.app-check label { display: flex; flex-direction: column; gap: 1px; font-weight: 500; }
.app-check label .app-field__hint { font-weight: 400; }
/* A long multi-select as ticks in columns (DK-27's specialties, treatments). */
.app-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 0 var(--cbs-space-4);
}

.app-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cbs-space-2);
    margin-top: var(--cbs-space-3);
}

.app-btn { min-height: 40px; }

/* A row of controls above a table — filters, a refresh, a facility. */
.app-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cbs-space-3);
    align-items: end;
    margin-bottom: var(--cbs-space-4);
}
.app-toolbar .app-field { flex: 1 1 190px; }
.app-toolbar .app-field--facility { flex: 0 1 210px; }

/* ===================================================================
 * What just happened
 *
 * One notice per screen. Errors stay until the next action; a confirmation
 * fades, because a clerk who has registered forty patients does not need forty
 * confirmations on the page.
 * =============================================================== */

.app-notice {
    display: flex;
    gap: var(--cbs-space-2);
    margin-bottom: var(--cbs-space-4);
    padding: var(--cbs-space-3) var(--cbs-space-4);
    border: 1px solid var(--cbs-line);
    border-radius: var(--cbs-radius-sm);
    background: var(--cbs-surface-raised);
    font-size: 13.5px;
    line-height: 1.5;
}
.app-notice[hidden] { display: none; }
.app-notice--ok {
    background: var(--cbs-ok-tint);
    border-color: var(--cbs-ok);
    color: var(--cbs-ok-ink);
}
.app-notice--error {
    background: var(--cbs-alert-tint);
    border-color: var(--cbs-alert);
    color: var(--cbs-alert-ink);
}
.app-notice--info {
    background: var(--cbs-teal-tint);
    border-color: var(--cbs-teal);
    color: var(--cbs-teal-deep);
}

/* ===================================================================
 * Read-only detail — the letterhead block, an invoice header
 * =============================================================== */

.app-kv {
    display: grid;
    gap: var(--cbs-space-3) var(--cbs-space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    margin: 0;
}
.app-kv div { min-width: 0; }
.app-kv dt {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--cbs-ink-faint);
}
.app-kv dd {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--cbs-ink);
    overflow-wrap: anywhere;
}

/* Money. Right-aligned and tabular, so a column of rupees reads as a column. */
.app-money {
    font-family: var(--cbs-font-mono);
    font-variant-numeric: tabular-nums;
    text-align: end;
    white-space: nowrap;
}
.app-table th.app-money, .app-table td.app-money { text-align: end; }

.app-stack > * + * { margin-top: var(--cbs-space-4); }

/* Prose on a screen that is mostly words — the help screen. */
.app-prose { max-width: var(--cbs-measure); font-size: 14.5px; color: var(--cbs-ink-muted); }
.app-prose h3 { font-size: 14px; margin-top: var(--cbs-space-4); color: var(--cbs-ink); }
.app-prose p, .app-prose ul, .app-prose ol { margin: var(--cbs-space-2) 0 0; }
.app-prose li + li { margin-top: 4px; }
.app-prose code {
    font-family: var(--cbs-font-mono);
    font-size: 12.5px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--cbs-surface-sunken);
}

@media (max-width: 900px) {
    /* A gloved finger on a ward tablet. 44px is the WCAG target size. */
    .app-input, .app-select, .app-textarea, .app-btn, .app-check { min-height: 44px; }
    .app-form { grid-template-columns: minmax(0, 1fr); }
    .app-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); }
    .app-toolbar .app-field, .app-toolbar .app-field--facility { flex: none; }
    .app-actions .app-btn { flex: 1 1 auto; }
}

/* ===================================================================
 * Compatibility with the legacy ward renderers
 *
 * hms-care.js and the four operational screens emit `.num` and
 * `.badge ok|warn|danger`, which are hms.css classes. Hosting one of those
 * renderers inside this shell would otherwise mean loading a second, much
 * larger stylesheet for three rules. These are those three rules, mapped onto
 * the token set so a hosted table looks like the rest of the application
 * rather than like a transplant.
 * =============================================================== */

.app .num { font-family: var(--cbs-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

.app .badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 650;
    white-space: nowrap;
    background: var(--cbs-surface-sunken);
    color: var(--cbs-ink-muted);
}
.app .badge.ok     { background: var(--cbs-ok-tint);    color: var(--cbs-ok-ink); }
.app .badge.warn   { background: var(--cbs-warn-tint);  color: var(--cbs-warn-ink); }
.app .badge.danger { background: var(--cbs-alert-tint); color: var(--cbs-alert-ink); }

/* ===================================================================
 * Command palette
 * =============================================================== */

.app-palette {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: start center;
    padding-top: 12vh;
    background: rgba(16, 42, 77, .45);
}
.app-palette[hidden] { display: none; }

.app-palette__box {
    width: min(600px, calc(100vw - 2rem));
    background: var(--cbs-surface-raised);
    border: 1px solid var(--cbs-line);
    border-radius: var(--cbs-radius-lg);
    box-shadow: var(--cbs-shadow-lg);
    overflow: hidden;
}

.app-palette__input {
    width: 100%;
    padding: var(--cbs-space-4);
    border: 0;
    border-bottom: 1px solid var(--cbs-line);
    background: transparent;
    color: var(--cbs-ink);
    font: inherit;
    font-size: 16px;
}
.app-palette__input:focus { outline: none; }

.app-palette__list {
    margin: 0;
    padding: var(--cbs-space-2);
    list-style: none;
    max-height: 46vh;
    overflow-y: auto;
}

.app-palette__item {
    display: flex;
    align-items: center;
    gap: var(--cbs-space-3);
    padding: 9px var(--cbs-space-3);
    border-radius: var(--cbs-radius-sm);
    color: var(--cbs-ink);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}
.app-palette__item:hover,
.app-palette__item[aria-selected="true"] {
    background: var(--edition-tint);
    color: var(--edition);
    text-decoration: none;
}
.app-palette__where { margin-inline-start: auto; font-size: 12px; color: var(--cbs-ink-faint); }

.app-palette__none { padding: var(--cbs-space-5); text-align: center; color: var(--cbs-ink-faint); font-size: 14px; }

/* ===================================================================
 * Phone — bottom tab bar
 * =============================================================== */

.app-tabs { display: none; }

@media (max-width: 900px) {
    .app-frame {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "bar" "main";
    }

    /* The rail becomes a drawer. It ships `hidden`, so a blocked bundle leaves
       it shut rather than dumping the whole menu above the page. */
    .app-rail {
        position: fixed;
        inset: 56px auto 0 0;
        z-index: 200;
        width: min(300px, 84vw);
        height: auto;
        box-shadow: var(--cbs-shadow-lg);
    }
    .app-rail[hidden] { display: none; }

    .app-scrim {
        position: fixed;
        inset: 56px 0 0 0;
        z-index: 190;
        background: rgba(16, 42, 77, .4);
    }
    .app-scrim[hidden] { display: none; }

    .app-main { padding: var(--cbs-space-4) var(--cbs-space-4) 76px; }

    .app-search { max-width: none; }
    .app-search span { display: none; }
    .app-search kbd { display: none; }
    .app-context { max-width: 16ch; }
    .app-bar__name { display: none; }

    .app-rail__toggle { display: none; }

    /* Four items, thumb-reachable. */
    .app-tabs {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 150;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        background: var(--cbs-surface-raised);
        border-top: 1px solid var(--cbs-line);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .app-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 56px;
        padding: 6px 4px;
        border: 0;
        background: transparent;
        color: var(--cbs-ink-faint);
        font: inherit;
        font-size: 11px;
        text-decoration: none;
        cursor: pointer;
    }
    .app-tab[aria-current="page"] { color: var(--edition); font-weight: 650; }
    .app-tab:hover { text-decoration: none; }
    .app-tab__icon { position: relative; }
    .app-tab__count {
        position: absolute;
        top: -4px; inset-inline-end: -8px;
        min-width: 15px;
        padding: 0 3px;
        border-radius: 999px;
        background: var(--cbs-alert);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 15px;
        text-align: center;
    }
}

@media (min-width: 901px) {
    .app-rail[hidden] { display: block; }
    .app-scrim { display: none; }
    .app-burger { display: none; }
}

/* ===================================================================
 * Motion
 * =============================================================== */

@media (prefers-reduced-motion: reduce) {
    .app *, .app *::before, .app *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ===================================================================
 * The public wall — a hospital's own domain, a hospital's own page
 *
 * Not part of `.app`. This is served at cbs.abchospital.com to that
 * hospital's patients, and it deliberately inherits none of the
 * application chrome: a visitor came to see doctors, not a hospital
 * information system. Wide type, high contrast, and it has to read on
 * a telephone held at arm's length in a waiting room.
 * =============================================================== */

.pubwall {
    margin: 0;
    padding: 0;
    font-family: var(--cbs-font);
    color: var(--cbs-ink);
    background: var(--cbs-surface);
}

.pubwall__head {
    padding: var(--cbs-space-8) var(--cbs-space-5) var(--cbs-space-5);
    text-align: center;
    border-bottom: 1px solid var(--cbs-line);
}

.pubwall__hospital {
    margin: 0;
    font-size: clamp(24px, 5vw, 38px);
    line-height: 1.15;
    color: var(--cbs-navy);
}

.pubwall__place {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--cbs-ink-muted);
}

.pubwall__lede {
    margin: var(--cbs-space-5) 0 0;
    font-size: 15px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cbs-ink-faint);
}

.pubwall__main {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--cbs-space-7) var(--cbs-space-5);
}

.pubwall__grid {
    display: grid;
    gap: var(--cbs-space-5);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.pubwall__card {
    padding: var(--cbs-space-5);
    text-align: center;
    background: var(--cbs-surface-raised);
    border: 1px solid var(--cbs-line);
    border-radius: var(--cbs-radius);
}

.pubwall__name {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--cbs-ink);
}

.pubwall__grade {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--cbs-navy);
}

.pubwall__qual {
    margin: 8px 0 0;
    font-size: 14.5px;
    color: var(--cbs-ink-muted);
}

.pubwall__spec {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--cbs-ink-muted);
}

/* The number a patient may check against the council's own register. Small,
 * because it is a reference and not a boast, and monospaced so it can be
 * read out over a telephone without transcription errors. */
.pubwall__reg {
    margin: var(--cbs-space-3) 0 0;
    font-family: var(--cbs-font-mono);
    font-size: 12px;
    color: var(--cbs-ink-faint);
}

.pubwall__note {
    max-width: var(--cbs-measure);
    margin: var(--cbs-space-7) auto 0;
    font-size: 13.5px;
    line-height: 1.6;
    text-align: center;
    color: var(--cbs-ink-muted);
}

/* What the facility offers -- specialties, and an Ayurvedic hospital's
   treatments -- as a row of plain chips above the doctors. */
.pubwall__offer {
    max-width: var(--cbs-measure);
    margin: 0 auto var(--cbs-space-7);
    text-align: center;
}
.pubwall__offer .pubwall__note { margin-top: var(--cbs-space-3); }
.pubwall__offer-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--cbs-space-2);
    margin: var(--cbs-space-3) 0 var(--cbs-space-5);
    padding: 0;
    list-style: none;
}
.pubwall__offer-list li {
    padding: 4px 12px;
    border: 1px solid var(--cbs-border, currentColor);
    border-radius: 999px;
    font-size: 13.5px;
}

.pubwall__empty {
    max-width: var(--cbs-measure);
    margin: 0 auto;
    padding: var(--cbs-space-7) var(--cbs-space-5);
    text-align: center;
    line-height: 1.6;
    color: var(--cbs-ink-muted);
    background: var(--cbs-surface-sunken);
    border: 1px dashed var(--cbs-line);
    border-radius: var(--cbs-radius);
}

.pubwall__foot {
    margin-top: var(--cbs-space-8);
    padding: var(--cbs-space-5);
    text-align: center;
    font-size: 11.5px;
    color: var(--cbs-ink-faint);
    border-top: 1px solid var(--cbs-line-soft);
}