/* KEH design tokens and MudBlazor overrides. Served by the host as /keh.css (Keh.Client/wwwroot).
 * Load after MudBlazor.min.css and app.css (see App.razor). Docs/Design-System.md is the spec.
 * Every colour, size and radius used by a screen comes from a --keh-* token; no hex in .razor files.
 * Overrides are scoped under .keh-shell (the wrapper in MainLayout); only the base element block below is global. */

/* Noto Sans, self-hosted (SIL OFL 1.1, see fonts/OFL.txt). No external font requests. */
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/NotoSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/NotoSans-Bold.ttf') format('truetype');
}

:root {
    /* Ink (sidebar) */
    --keh-ink-900: #0b1220;
    --keh-ink-800: #111a2e;
    --keh-ink-700: #18243d;
    --keh-ink-600: #22304d;

    /* Paper */
    --keh-paper: #f6f8fb;
    --keh-paper-2: #eef2f8;
    --keh-card: #ffffff;
    --keh-line: #e4e9f2;
    --keh-line-strong: #ccd4e1;

    /* Text */
    --keh-txt: #080c14;
    --keh-txt-2: #232a37;
    --keh-txt-3: #4e5768;
    --keh-txt-4: #646c7b;
    --keh-txt-inv: #eef2fc;

    /* Primary (navy) */
    --keh-primary: #1b3c74;
    --keh-primary-h: #132c57;
    --keh-primary-soft: #e8eefa;
    --keh-primary-line: #c1d1ec;

    /* Status: meaning only, never decoration */
    --keh-green: #23a06b;
    --keh-green-soft: #dcf3e8;
    --keh-green-ink: #14684a;
    --keh-amber: #f0a020;
    --keh-amber-soft: #fdf2dc;
    --keh-amber-ink: #8a5a06;
    --keh-rose: #9b1c1c;
    --keh-rose-soft: #fce4e8;
    --keh-rose-ink: #7a1515;
    --keh-blue: #2f74d0;
    --keh-slate: #64748b;

    /* Shape and elevation */
    --keh-radius-sm: 2px;
    --keh-radius: 3px;
    --keh-radius-lg: 4px;
    --keh-shadow: 0 1px 2px rgba(11, 18, 32, .06), 0 4px 16px rgba(11, 18, 32, .06);
    --keh-shadow-lg: 0 8px 40px rgba(11, 18, 32, .16);

    /* Type: one base size drives everything below. Tune --keh-fs to re-proportion the app. */
    --keh-sys: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --keh-font: 'Noto Sans', var(--keh-sys);
    --keh-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
    --keh-fs: 13px;
    --keh-fs-sm: calc(var(--keh-fs) - 1px);
    --keh-fs-xs: calc(var(--keh-fs) - 2px);
    --keh-fs-lg: calc(var(--keh-fs) + 1px);
    --keh-fs-h1: calc(var(--keh-fs) + 7px);
    --keh-w-reg: 400;
    --keh-w-med: 500;
    --keh-w-semi: 600;
    --keh-w-bold: 700;

    /* Layout */
    --keh-drawer-w: 248px;
    --keh-topbar-h: 50px;
    --keh-gutter: 20px;
    --keh-row-h: 40px;

    /* Density. Mouse and keyboard get the compact values; a phone or a touch screen gets the 44px set (see the media query below).
       Chips, buttons, inputs, section headers and rows all read these, so tuning the density is one edit. */
    --keh-gap: 8px;
    --keh-ctl-h: 32px;
    --keh-ctl-sm-h: 28px;
    --keh-chip-h: 28px;
    --keh-chip-gap: 6px;
    --keh-section-h: 36px;
    --keh-section-gap: 8px;
    --keh-pad: 12px;
}

/* Touch: below 960px (the drawer breakpoint) or a coarse pointer. 44px targets, a little more air. */
@media (max-width: 959.98px), (pointer: coarse) {
    :root {
        --keh-ctl-h: 44px;
        --keh-ctl-sm-h: 44px;
        --keh-chip-h: 44px;
        --keh-chip-gap: 8px;
        --keh-section-h: 44px;
    }
}

body {
    background: var(--keh-paper);
    font-family: var(--keh-font);
    font-size: var(--keh-fs);
    color: var(--keh-txt);
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------------
   Base elements: what MudBlazor's reset (margin 0 on everything) leaves to the page. Bootstrap's reboot gave these until it
   was dropped; element selectors only, so every class rule still wins.
   ------------------------------------------------------------------------- */
body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

ol, ul {
    padding-left: 2rem;
}

dl, ol, ul {
    margin-top: 0;
    margin-bottom: 1rem;
}

ol ol, ol ul, ul ol, ul ul {
    margin-bottom: 0;
}

dt {
    font-weight: 700;
}

dd {
    margin-bottom: 0.5rem;
    margin-left: 0;
}

small {
    font-size: 0.875em;
}

img, svg {
    vertical-align: middle;
}

table {
    caption-side: bottom;
    border-collapse: collapse;
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent;
}

hr {
    margin: 1rem 0;
    color: inherit;
    background-color: currentColor;
    border: 0;
    opacity: 0.25;
}

hr:not([size]) {
    height: 1px;
}

textarea {
    resize: vertical;
}

/* ---------------------------------------------------------------------------
   Shell wrapper: Mud typography sizes resolve from the one base token.
   ------------------------------------------------------------------------- */
.keh-shell {
    --mud-typography-default-size: var(--keh-fs);
    --mud-typography-body1-size: var(--keh-fs);
    --mud-typography-body2-size: var(--keh-fs);
    --mud-typography-subtitle1-size: var(--keh-fs-lg);
    --mud-typography-subtitle2-size: var(--keh-fs);
    --mud-typography-button-size: var(--keh-fs);
    --mud-typography-caption-size: var(--keh-fs-xs);
    --mud-typography-overline-size: var(--keh-fs-xs);
    --mud-typography-h6-size: var(--keh-fs-lg);
    --mud-typography-h5-size: calc(var(--keh-fs) + 3px);
    --mud-typography-h4-size: var(--keh-fs-h1);
    --mud-palette-action-disabled-background: var(--keh-paper-2);
    --mud-palette-action-disabled: var(--keh-txt-4);
    font-family: var(--keh-font);
    font-size: var(--keh-fs);
    color: var(--keh-txt);
}

.keh-mono {
    font-family: var(--keh-mono);
}

/* --- Topbar --------------------------------------------------------------- */
.keh-shell .mud-appbar {
    border-bottom: 1px solid var(--keh-line);
}

.keh-shell .mud-appbar .mud-toolbar {
    min-height: var(--keh-topbar-h);
    height: var(--keh-topbar-h);
    padding: 0 var(--keh-gutter);
}

.keh-crumb {
    font-size: var(--keh-fs-sm);
    color: var(--keh-txt-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.keh-crumb strong {
    color: var(--keh-txt);
    font-weight: var(--keh-w-semi);
}

/* The user menu on the top bar: the name as plain near-black text with a small arrow, not a shouting button. */
.keh-user-menu .mud-button-root {
    color: var(--keh-txt);
    font-size: var(--keh-fs);
    font-weight: var(--keh-w-med);
    text-transform: none;
    max-width: 40vw;
}

.keh-user-menu .mud-button-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.keh-user {
    font-size: var(--keh-fs);
    font-weight: var(--keh-w-med);
    color: var(--keh-txt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40vw;
}

/* --- Drawer (dark ink) ----------------------------------------------------- */
.keh-shell .mud-drawer {
    background: var(--keh-ink-900);
    color: var(--keh-txt-inv);
}

/* A closed drawer must be unreachable, not just moved: the tab order skips it. */
.keh-shell .mud-drawer.mud-drawer--closed {
    visibility: hidden;
}

.keh-brand {
    display: flex;
    align-items: center;
    height: var(--keh-topbar-h);
    padding: 0 20px;
    border-bottom: 1px solid var(--keh-ink-600);
    color: var(--keh-txt-inv);
    font-size: var(--keh-fs-lg);
    font-weight: var(--keh-w-bold);
    letter-spacing: .08em;
    text-decoration: none;
}

.keh-shell .mud-drawer .mud-nav-link {
    align-items: center; /* MudBlazor starts the icon at the top of a taller text line */
    margin: 2px 10px;
    padding: 8px 12px;
    border-radius: var(--keh-radius);
    color: var(--keh-txt-inv);
    font-size: var(--keh-fs);
    font-weight: var(--keh-w-med);
}

.keh-shell .mud-drawer .mud-nav-link .mud-icon-root {
    color: var(--keh-txt-inv);
    opacity: .75;
    font-size: 18px;
}

.keh-shell .mud-drawer .mud-nav-link:hover {
    background: var(--keh-ink-700);
}

/* Space between the brand's line and the first item. */
.keh-shell .mud-drawer .mud-navmenu {
    padding-top: 10px;
}

/* The selected item: one flat, slightly lighter fill and white text; no edge line, border or shadow. */
.keh-shell .mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: var(--keh-ink-600);
    color: var(--keh-card);
    font-weight: var(--keh-w-semi);
    border: 0;
    box-shadow: none;
}

.keh-shell .mud-drawer .mud-nav-link.active .mud-icon-root {
    opacity: 1;
}

/* Logout: a plain form button styled like a nav item (not a nav link: never active, one tab stop). */
.keh-logout button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    width: calc(100% - 20px);
    margin: 2px 10px;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--keh-radius);
    background: none;
    color: var(--keh-txt-inv);
    font: inherit;
    font-weight: var(--keh-w-med);
    text-align: left;
    cursor: pointer;
}

.keh-logout button .mud-icon-root {
    opacity: .75;
    font-size: 18px;
}

.keh-logout button:hover {
    background: var(--keh-ink-700);
}

/* --- Main column ----------------------------------------------------------- */
.keh-shell .keh-main {
    padding: var(--keh-topbar-h) var(--keh-gutter) var(--keh-gutter);
    min-width: 0;
}

.keh-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

/* --- Page head -------------------------------------------------------------- */
.keh-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 14px 0 8px;
}

.keh-page-title {
    margin: 0;
    font-size: var(--keh-fs-h1);
    font-weight: var(--keh-w-semi);
    letter-spacing: -.01em;
    line-height: 1.25;
    color: var(--keh-txt);
}

.keh-page-purpose {
    margin: 1px 0 0;
    font-size: var(--keh-fs);
    color: var(--keh-txt-3);
}

.keh-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* --- Field row: label left 3/9 at >= md (960px), stacked below --------------- */
.keh-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px 16px;
    padding: 3px 0;
}

.keh-field-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: var(--keh-fs);
    font-weight: var(--keh-w-bold);
    color: var(--keh-txt);
    line-height: 1.3;
}

.keh-req {
    color: var(--keh-rose-ink);
    font-weight: var(--keh-w-bold);
}

.keh-help {
    display: inline-flex;
    color: var(--keh-txt-3);
    cursor: help;
}

.keh-help .mud-icon-root {
    font-size: 15px;
}

/* A tap target of 44px on a phone without making the label row taller (negative margins take the extra space back). */
@media (max-width: 959.98px) {
    .keh-help {
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        margin: -14px -10px;
    }
}

.keh-field-hint {
    margin-top: 2px;
    font-size: var(--keh-fs-xs);
    font-style: italic;
    color: var(--keh-txt-3);
}

@media (min-width: 960px) {
    .keh-field-row {
        grid-template-columns: 3fr 9fr;
        align-items: start;
    }

    .keh-field-label {
        justify-content: flex-end;
        text-align: right;
        min-height: var(--keh-ctl-h);
    }
}

/* --- Status chip -------------------------------------------------------------- */
.keh-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    border-radius: var(--keh-radius);
    font-size: var(--keh-fs-xs);
    font-weight: var(--keh-w-semi);
    line-height: 1.5;
    vertical-align: middle;
    white-space: nowrap;
}

.keh-chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.keh-chip-green { background: var(--keh-green-soft); color: var(--keh-green-ink); }
.keh-chip-amber { background: var(--keh-amber-soft); color: var(--keh-amber-ink); }
.keh-chip-rose { background: var(--keh-rose-soft); color: var(--keh-rose-ink); }
.keh-chip-slate { background: var(--keh-paper-2); color: var(--keh-txt-2); }

/* --- MudBlazor density layer ---------------------------------------------------- */
.keh-shell .mud-button-root {
    letter-spacing: 0;
    text-transform: none;
    font-weight: var(--keh-w-med);
}

.keh-shell .mud-button-root:disabled,
.keh-shell .mud-button-root.mud-disabled {
    box-shadow: none;
    border-color: transparent;
}

.keh-shell .mud-button-root.mud-button-filled {
    box-shadow: none;
}

/* Buttons: one height from the density token (32px with a mouse, 44px on touch); small buttons are 28px. */
.keh-shell .mud-button-root.mud-button:not([class*="-size-small"]):not([class*="-size-large"]) {
    min-height: var(--keh-ctl-h);
    padding-top: 0;
    padding-bottom: 0;
}

.keh-shell .mud-button-root.mud-button[class*="-size-small"] {
    min-height: var(--keh-ctl-sm-h);
}

/* Checkboxes and switches: MudBlazor draws them with a 12px ring of padding (about 42px tall). A mouse gets a compact row; touch keeps the 44px target. */
@media (min-width: 960px) and (pointer: fine) {
    .keh-shell .mud-checkbox .mud-icon-button {
        padding: 5px;
    }

    /* The row height only: the switch's own padding is left alone, because MudBlazor places the track against it
       (a smaller padding moves the thumb off the track). */
    .keh-shell .mud-switch {
        min-height: 28px;
    }
}

/* Outlined text inputs: tighter than MudBlazor's dense (the fields carry no floating label, so nothing needs the extra room); the height is the control token, so an input matches the buttons beside it (32px with a mouse, 44px on touch). */
.keh-shell .mud-input.mud-input-outlined.mud-input-margin-dense > input.mud-input-root-outlined {
    padding: 6px 10px;
    min-height: var(--keh-ctl-h);
    box-sizing: border-box;
}

.keh-shell .mud-input.mud-input-outlined.mud-input-margin-dense > textarea.mud-input-root-outlined {
    padding: 6px 10px;
}

/* Tables: header sentence case, cells never wrap, wide content scrolls in the container. */
.keh-shell .mud-table-container {
    overflow-x: auto;
}

.keh-shell .mud-table-root {
    font-size: var(--keh-fs);
}

.keh-shell .mud-table-head .mud-table-cell {
    background: var(--keh-card);
    color: var(--keh-txt-2);
    font-size: var(--keh-fs-sm);
    font-weight: var(--keh-w-semi);
    white-space: nowrap;
}

.keh-shell .mud-table-body .mud-table-cell {
    color: var(--keh-txt);
    border-bottom: 1px solid var(--keh-paper-2);
    white-space: nowrap;
}

.keh-shell .mud-table-body .mud-table-row:hover .mud-table-cell {
    background: var(--keh-primary-soft);
}

@media (max-width: 599.98px) {
    .keh-shell .mud-table-body .mud-table-cell {
        white-space: normal;
    }
}

/* Inputs: font and colour only; the padding and height of outlined text inputs are set with the density rules above. */
.keh-shell .mud-input.mud-input-outlined > input,
.keh-shell .mud-input.mud-input-outlined > .mud-input-slot {
    color: var(--keh-txt);
}

.keh-shell .mud-input-outlined-border {
    border-color: var(--keh-line-strong);
}

.keh-shell .mud-input-helper-text {
    color: var(--keh-txt-3);
}

/* Fields carry no Mud floating label (FieldRow supplies the label), so drop the space reserved for it. */
.keh-shell .mud-input-control-input-container {
    padding-top: 0;
}

.keh-shell .mud-tabs-panels {
    background: var(--keh-card);
}

.keh-shell .mud-tab {
    text-transform: none;
    font-weight: var(--keh-w-med);
}

.keh-shell .mud-paper-outlined {
    border-color: var(--keh-line);
}

/* Dialogs and snackbars */
.keh-shell .mud-dialog {
    border-radius: var(--keh-radius-lg);
    box-shadow: var(--keh-shadow-lg);
}

.keh-shell .mud-dialog .mud-dialog-title {
    padding: 12px 16px 4px;
    font-size: var(--keh-fs-lg);
    font-weight: var(--keh-w-semi);
}

.keh-shell .mud-dialog .mud-dialog-content {
    padding: 4px 16px 8px;
}

.keh-shell .mud-dialog .mud-dialog-actions {
    padding: 8px 16px 12px;
}

/* --- Phone ------------------------------------------------------------------------ */
@media (max-width: 639.98px) {
    :root {
        --keh-gutter: 12px;
    }

    .keh-crumb {
        display: none;
    }
}

/* --- Auth card (login) and inline validation ------------------------------------------ */
.keh-auth-card {
    width: 100%;
    max-width: 440px;
}

.keh-auth-logo {
    display: block;
    width: 100%;
    max-height: 110px;
    object-fit: cover;
    border-radius: var(--keh-radius-lg);
    margin-bottom: 16px;
}

.keh-shell .keh-auth-panel {
    padding: 24px;
    border-radius: var(--keh-radius-lg);
    box-shadow: var(--keh-shadow);
}

.keh-auth-title {
    margin-bottom: 12px;
}

.keh-validation,
.keh-shell .validation-message {
    display: block;
    margin-top: 2px;
    font-size: var(--keh-fs-xs);
    color: var(--keh-rose-ink);
}

h1:focus {
    outline: none;
}

/* --- Focus ring (keyboard) and contrast-safe filled status colours ---------------------- */
.keh-shell a:focus-visible,
.keh-shell button:focus-visible,
.keh-shell select:focus-visible,
.keh-shell input:focus-visible,
.keh-shell [tabindex]:focus-visible,
.keh-shell .mud-nav-link:focus-visible {
    outline: 2px solid var(--keh-blue);
    outline-offset: 2px;
}

.keh-shell .mud-drawer a:focus-visible,
.keh-shell .mud-drawer button:focus-visible,
.keh-shell .mud-drawer .mud-nav-link:focus-visible {
    outline-color: var(--keh-primary-line);
}

/* White text on the status colours is under 4.5:1; use the darker ink variants for filled surfaces. */
.keh-shell .mud-button-filled.mud-button-filled-error {
    background-color: var(--keh-rose-ink);
}

.keh-shell .mud-alert-filled-success {
    background-color: var(--keh-green-ink);
}

.keh-shell .mud-alert-filled-error {
    background-color: var(--keh-rose-ink);
}

.keh-shell .mud-alert-filled-warning {
    background-color: var(--keh-amber-ink);
}

/* The default (text) alert draws its words in MudBlazor's own darker status shade: 2.6:1 for warning and 4.1:1 for error. The ink variants are 5.7:1 and 6.7:1. */
.keh-shell .mud-alert-text-warning {
    color: var(--keh-amber-ink);
}

.keh-shell .mud-alert-text-error {
    color: var(--keh-rose-ink);
}

/* Static splash shown while the WebAssembly client downloads and boots (App.razor); hidden once the shell renders. */
.keh-splash {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--keh-paper);
    color: var(--keh-txt-3);
    font-family: var(--keh-font);
}

.keh-splash-brand {
    color: var(--keh-primary);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

body:has(.keh-shell) .keh-splash {
    display: none;
}

/* Appears only if the client has not booted after ~15 s (slow or dropped connection). */
.keh-splash-hint {
    opacity: 0;
    animation: keh-splash-hint 0s linear 15s forwards;
}

@keyframes keh-splash-hint {
    to { opacity: 1; }
}

/* --- Appointments queue -------------------------------------------------------------------
   A table at every width (never cards; owner decision); a narrow screen scrolls it inside its own container. QueueList.razor has the row template; QueueRules.cs the logic. */
.keh-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--keh-primary);
    font: inherit;
    font-weight: var(--keh-w-semi);
    text-align: left;
    cursor: pointer;
}

.keh-link:hover,
.keh-tel:hover {
    text-decoration: underline;
}

.keh-tel {
    color: var(--keh-primary);
    text-decoration: none;
}

.keh-muted {
    margin-left: 6px;
    color: var(--keh-txt-3);
    font-size: var(--keh-fs-sm);
}

.keh-panel {
    background: var(--keh-card);
    border: 1px solid var(--keh-line);
    border-radius: var(--keh-radius-lg);
    overflow: hidden;
}

.keh-queue-scroll {
    overflow-x: auto;
}

.keh-queue {
    width: 100%;
    border-collapse: collapse;
}

.keh-queue th {
    padding: 8px 12px;
    border-bottom: 1px solid var(--keh-line);
    color: var(--keh-txt-2);
    font-size: var(--keh-fs-sm);
    font-weight: var(--keh-w-semi);
    text-align: left;
    white-space: nowrap;
}

.keh-queue td {
    padding: 4px 12px;
    border-bottom: 1px solid var(--keh-paper-2);
    vertical-align: middle;
    white-space: nowrap;
}

.keh-queue tbody tr:last-child td {
    border-bottom: 0;
}

.keh-queue tbody tr:hover td {
    background: var(--keh-primary-soft);
}

.keh-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.keh-queue-tools {
    position: sticky;
    top: var(--keh-topbar-h);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    padding: 6px 0;
    background: var(--keh-paper);
}

.keh-search {
    flex: 1 1 320px;
    max-width: 560px;
}

/* The tool strip sits on the page colour; the search field itself stays white like every other field. */
.keh-shell .keh-search .mud-input-outlined {
    background: var(--keh-card);
    border-radius: var(--keh-radius);
}

.keh-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    color: var(--keh-txt-3);
    font-size: var(--keh-fs-sm);
}

.keh-count strong {
    color: var(--keh-txt);
}

.keh-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--keh-txt-3);
}

.keh-pager {
    display: flex;
    justify-content: center;
    padding: 8px;
    border-top: 1px solid var(--keh-line);
}

.keh-shell .keh-queue-tabs .mud-tabs-toolbar {
    background: transparent;
}

/* Touch: 44px targets below 960px (the main button already is, through the density tokens). */
@media (max-width: 959.98px) {
    .keh-shell .keh-q-icon {
        width: 44px;
        height: 44px;
    }

    .keh-shell .keh-queue .keh-link,
    .keh-shell .keh-queue .keh-tel {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* --- Masters ------------------------------------------------------------------------------
   One real <table> at every width (like the queue); a narrow screen scrolls it inside its own container.
   Masters.razor holds the one row template; MasterDefinition.cs says which columns each list has. */
.keh-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.keh-m-tools {
    position: static;
    padding-top: 12px;
}

@media (max-width: 959.98px) {
    .keh-shell .keh-m-tools .mud-switch {
        min-height: 44px;
    }
}

.keh-master-scroll {
    overflow-x: auto;
}

.keh-master {
    width: 100%;
    border-collapse: collapse;
}

.keh-master th {
    padding: 8px;
    border-bottom: 1px solid var(--keh-line);
    color: var(--keh-txt-2);
    font-size: var(--keh-fs-sm);
    font-weight: var(--keh-w-semi);
    text-align: left;
    white-space: nowrap;
}

.keh-master td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--keh-paper-2);
    vertical-align: middle;
    white-space: nowrap;
}

/* Text cells wrap when the list is short of room (a 1024px screen with the drawer open), so every column stays in view; a long word stays whole. */
.keh-master td.m-name,
.keh-master td.m-cell {
    white-space: normal;
}

.keh-master tbody tr:last-child td {
    border-bottom: 0;
}

.keh-master tbody tr:hover td {
    background: var(--keh-primary-soft);
}

.keh-master tr.is-archived td {
    color: var(--keh-txt-3);
}

/* A table at every width (never cards); a narrow screen scrolls it inside `keh-master-scroll`. Touch widths get 44px targets. */
@media (max-width: 959.98px) {
    .keh-shell .keh-m-icon {
        width: 44px;
        height: 44px;
    }

    .keh-shell .keh-master .keh-link,
    .keh-shell .keh-master .keh-tel {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

@media (max-width: 959.98px) {
    .keh-shell .keh-touch {
        min-height: 44px;
    }

    .keh-shell .mud-icon-button.keh-touch {
        width: 44px;
        height: 44px;
    }

    .keh-shell .keh-search .mud-input-slot,
    .keh-shell .keh-search input {
        min-height: 44px;
    }

    .keh-shell .keh-dialog .mud-input-slot,
    .keh-shell .keh-profile .mud-input-slot,
    .keh-shell .keh-auth-panel .mud-input-slot {
        min-height: 44px;
        box-sizing: border-box;
    }

    .keh-shell .mud-dialog .mud-dialog-actions .mud-button-root {
        min-height: 44px;
    }
}

/* --- Users, Activity, Settings and My Profile ------------------------------------
   Users and Activity reuse the Masters list above (`keh-master-scroll` / `keh-master`, a table at every width). */
.keh-master td.a-wrap {
    max-width: 44ch;
    white-space: normal;
}

/* A table cell stays a table cell on a wide screen (display:flex on the td broke the row: its divider and chip sat off the row's line); several chips sit side by side. */
.keh-master td.m-status .keh-chip + .keh-chip {
    margin-left: 4px;
}

.keh-muted-text {
    color: var(--keh-txt-4);
}

.keh-roles-help {
    margin: 4px 0 8px;
    padding: 8px 12px;
    border: 1px solid var(--keh-line);
    border-radius: var(--keh-radius-lg);
    background: var(--keh-card);
}

.keh-roles-help summary {
    cursor: pointer;
    color: var(--keh-primary);
    font-weight: var(--keh-w-semi);
}

.keh-role-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.keh-roles-help dt {
    margin-top: 8px;
    font-weight: var(--keh-w-bold);
}

.keh-roles-help dd {
    margin: 0;
    color: var(--keh-txt-2);
}

.keh-shell .keh-activity-filters .mud-input-control {
    flex: 1 1 170px;
    min-width: 150px;
    max-width: 260px;
}

@media (max-width: 639.98px) {
    .keh-shell .keh-activity-filters .mud-input-control {
        flex-basis: 100%;
        max-width: none;
    }
}

/* Touch: the filters and the settings fields are 44px below 960px, like the dialogs and the search boxes. */
@media (max-width: 959.98px) {
    .keh-shell .keh-activity-filters .mud-input-slot,
    .keh-shell .keh-activity-filters input,
    .keh-shell .keh-settings-form .mud-input-slot:not(textarea),
    .keh-shell .keh-settings-form input {
        min-height: 44px;
        box-sizing: border-box;
    }
}

.keh-activity-pager {
    align-items: center;
    gap: 12px;
    color: var(--keh-txt-3);
}

.keh-password-once {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.keh-password-once code {
    padding: 8px 12px;
    border: 1px solid var(--keh-line-strong);
    border-radius: var(--keh-radius);
    background: var(--keh-paper-2);
    font-size: var(--keh-fs-lg);
    letter-spacing: .04em;
    user-select: all;
    overflow-wrap: anywhere;
}

/* My Profile and Change password: a panel of field rows, and the notice under the page head. */
.keh-profile {
    max-width: 880px;
    padding: 12px 16px;
}

.keh-form-buttons {
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
}

@media (min-width: 960px) {
    .keh-form-buttons {
        padding-left: 25%;
        justify-content: flex-start;
    }
}

.keh-status {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: var(--keh-radius);
    border: 1px solid transparent;
}

.keh-status-ok {
    background: var(--keh-green-soft);
    border-color: var(--keh-green);
    color: var(--keh-green-ink);
}

.keh-status-warn {
    background: var(--keh-amber-soft);
    border-color: var(--keh-amber);
    color: var(--keh-amber-ink);
}

.keh-status-error {
    background: var(--keh-rose-soft);
    border-color: var(--keh-rose);
    color: var(--keh-rose-ink);
}

/* Settings: the form and a preview of the printed header and footer, side by side when there is room. */
.keh-settings {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "preview" "form";
    gap: 16px;
    align-items: start;
}

.keh-settings-preview { grid-area: preview; }
.keh-settings-form { grid-area: form; min-width: 0; }

@media (min-width: 1200px) {
    .keh-settings {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        grid-template-areas: "form preview";
    }

    .keh-settings-preview {
        position: sticky;
        top: calc(var(--keh-topbar-h) + 12px);
    }
}

.keh-settings-preview-h {
    margin: 0 0 8px;
    font-size: var(--keh-fs-lg);
    font-weight: var(--keh-w-bold);
}

.keh-rx {
    padding: 16px;
    border: 1px solid var(--keh-line-strong);
    border-radius: var(--keh-radius-lg);
    background: var(--keh-card);
    color: var(--keh-txt);
    box-shadow: var(--keh-shadow);
}

.keh-rx-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
}

/* Each printed line keeps the line breaks typed into it (pre-line on the line, not on the block, so the markup between lines adds none). */
.keh-rx-left > div,
.keh-rx-right > div,
.keh-rx-foot > div {
    white-space: pre-line;
}

.keh-rx-left,
.keh-rx-right,
.keh-rx-body,
.keh-rx-foot {
    overflow-wrap: anywhere;
}

.keh-rx-left { flex: 7 1 220px; }
.keh-rx-right { flex: 5 1 180px; text-align: right; }
.keh-rx-big { font-size: var(--keh-fs-h1); font-weight: var(--keh-w-bold); margin-bottom: 3px; }
.keh-rx-gap { margin-bottom: 6px; }
.keh-rx hr { margin: 10px 0; border: 0; border-top: 1px solid var(--keh-txt); }
.keh-rx-body { color: var(--keh-txt-3); padding: 10px 0; }
.keh-rx-foot { text-align: center; }
.keh-rx-small { font-size: var(--keh-fs-sm); }

/* --- Dialog form rows --------------------------------------------------------------------- */
.keh-inline-fields,
.keh-history {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.keh-fee-amount {
    max-width: 130px;
}

.keh-readonly {
    display: inline-block;
    padding: 8px 0;
}

/* A dialog fills the phone screen: the form scrolls, the buttons stay at the bottom. */
@media (max-width: 639.98px) {
    .keh-shell .mud-dialog.keh-dialog {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: 0;
    }
}

/* --- Form pages and the consultation ------------------------------------------------------------
   FormPageHeader, FormSection, PickList (toggle chips), DosageInput and ConsultationSummary. One panel per section; on a
   phone the same panels are an accordion (the page opens only the first) and the action bar is fixed to the bottom. */
.keh-form-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 8px 0 6px;
}

.keh-form-head-main {
    min-width: 0;
    flex: 1 1 320px;
}

.keh-back {
    color: var(--keh-primary);
    font-size: var(--keh-fs-sm);
    text-decoration: none;
}

.keh-back:hover {
    text-decoration: underline;
}

.keh-form-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.keh-form-title {
    margin: 0;
    font-size: calc(var(--keh-fs) + 5px);
    font-weight: var(--keh-w-semi);
    line-height: 1.3;
    color: var(--keh-txt);
    overflow-wrap: anywhere;
}

.keh-form-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 14px;
    color: var(--keh-txt-3);
    font-size: var(--keh-fs-sm);
}

.keh-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.keh-save-state.is-unsaved,
.keh-save-state.is-failed {
    color: var(--keh-amber-ink);
    font-weight: var(--keh-w-semi);
}

/* The consultation: patient header and section nav stay under the topbar while the sections scroll. */
.keh-consult {
    --keh-consult-top-h: 132px;
}

.keh-consult-top {
    position: sticky;
    top: var(--keh-topbar-h);
    z-index: 6;
    background: var(--keh-paper);
    border-bottom: 1px solid var(--keh-line);
    margin-bottom: var(--keh-section-gap);
}

.keh-secnav {
    display: flex;
    gap: 4px;
    padding: 0 0 6px;
    overflow-x: auto;
}

.keh-secnav button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--keh-chip-h);
    padding: 1px 10px;
    border: 1px solid var(--keh-line-strong);
    border-radius: var(--keh-radius);
    background: var(--keh-card);
    color: var(--keh-txt-2);
    font: inherit;
    cursor: pointer;
}

.keh-secnav button:hover {
    border-color: var(--keh-primary-line);
    color: var(--keh-primary);
}

.keh-secnav .keh-badge {
    padding: 3px 6px;
}

.keh-section {
    background: var(--keh-card);
    border: 1px solid var(--keh-line);
    border-radius: var(--keh-radius-lg);
    margin-bottom: var(--keh-section-gap);
    scroll-margin-top: calc(var(--keh-topbar-h) + var(--keh-consult-top-h));
}

.keh-section-h {
    margin: 0;
    font-size: inherit;
}

.keh-section-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: var(--keh-section-h);
    padding: 4px var(--keh-pad);
    border: 0;
    border-radius: var(--keh-radius-lg);
    background: none;
    color: var(--keh-txt);
    font: inherit;
    font-weight: var(--keh-w-semi);
    text-align: left;
    cursor: pointer;
}

.keh-section-icon {
    color: var(--keh-primary);
}

.keh-section-title {
    font-size: var(--keh-fs-lg);
}

.keh-chevron {
    margin-left: auto;
    color: var(--keh-txt-3);
    transition: transform .15s;
}

.keh-section:not(.is-closed) .keh-chevron {
    transform: rotate(180deg);
}

.keh-section-body {
    padding: 10px var(--keh-pad) 12px;
    border-top: 1px solid var(--keh-line);
}

.keh-section.is-closed .keh-section-body {
    display: none;
}

.keh-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    line-height: 1;
    border-radius: var(--keh-radius);
    background: var(--keh-primary-soft);
    color: var(--keh-primary);
    font-size: var(--keh-fs-xs);
    font-weight: var(--keh-w-semi);
    white-space: nowrap;
}

/* Toggle chips (PickList and the medicine type filter) */
.keh-pick-chips,
.keh-pick-wall,
.keh-picked,
.keh-type-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--keh-chip-gap);
}

.keh-picked {
    margin: 0 0 var(--keh-gap);
}

.keh-type-filter {
    margin-bottom: var(--keh-gap);
}

.keh-pick-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: var(--keh-chip-h);
    padding: 1px 10px;
    border: 1px solid var(--keh-line-strong);
    border-radius: var(--keh-radius);
    background: var(--keh-card);
    color: var(--keh-txt);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.keh-pick-chip:hover {
    border-color: var(--keh-primary-line);
}

.keh-pick-chip:disabled,
.keh-pick-chip[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.7;
}

.keh-pick-chip.is-on {
    border-color: var(--keh-primary-line);
    background: var(--keh-primary-soft);
    color: var(--keh-primary);
    font-weight: var(--keh-w-semi);
}

.keh-pick-chip.is-on:not(.is-picked)::before {
    content: "\2713";
}

.keh-pick-x {
    font-size: var(--keh-fs-lg);
    line-height: 1;
}

.keh-pick-filter {
    max-width: 420px;
    margin-bottom: var(--keh-gap);
}

.keh-pick-group + .keh-pick-group {
    margin-top: var(--keh-gap);
}

.keh-pick-group-name {
    margin-bottom: 4px;
    color: var(--keh-txt-3);
    font-size: var(--keh-fs-sm);
    font-weight: var(--keh-w-bold);
}

.keh-pick-empty {
    margin: 0;
    color: var(--keh-txt-3);
}

/* Add new (short list): the action under the chips. */
.keh-pick-add {
    margin-top: var(--keh-gap);
}

.keh-pick-addchip {
    border-style: dashed;
    color: var(--keh-primary);
}

/* Long list (PickList, more than 20 active items): search-first. The suggestions, the frequent chips and "Browse all". */
.keh-suggest {
    max-width: 640px;
    max-height: min(50vh, 420px);
    margin: -4px 0 var(--keh-gap);
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--keh-line-strong);
    border-radius: var(--keh-radius);
    background: var(--keh-card);
}

.keh-suggest-row,
.keh-browse-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    box-sizing: border-box;
    min-height: 44px;
    width: 100%;
    padding: 4px 10px;
    border: 0;
    border-radius: var(--keh-radius);
    background: none;
    color: var(--keh-txt);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.keh-suggest-row:hover,
.keh-browse-row:hover {
    background: var(--keh-paper-2);
}

.keh-suggest-row.is-active {
    background: var(--keh-primary-soft);
    outline: 2px solid var(--keh-blue);
    outline-offset: -2px;
}

.keh-suggest-row.is-on,
.keh-browse-row.is-on {
    color: var(--keh-primary);
    font-weight: var(--keh-w-semi);
}

.keh-suggest-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.keh-suggest-detail {
    margin-left: 8px;
    color: var(--keh-txt-3);
    font-size: var(--keh-fs-xs);
    font-weight: var(--keh-w-reg);
}

.keh-suggest-tick {
    flex: none;
}

.keh-suggest-more {
    padding: 6px 10px;
    color: var(--keh-txt-3);
    font-size: var(--keh-fs-sm);
}

.keh-suggest-add {
    border-top: 1px solid var(--keh-paper-2);
    border-radius: 0 0 var(--keh-radius) var(--keh-radius);
    color: var(--keh-primary);
    font-weight: var(--keh-w-semi);
}

.keh-freq {
    margin-bottom: var(--keh-gap);
}

.keh-freq .keh-pick-group-name {
    margin-bottom: 6px;
}

.keh-browse-bar {
    margin: 0 0 6px;
}

.keh-browse-toggle {
    min-height: 32px;
}

.keh-az {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.keh-az-letter {
    min-width: 32px;
    min-height: 32px;
    padding: 0 6px;
    border: 1px solid var(--keh-line-strong);
    border-radius: var(--keh-radius);
    background: var(--keh-card);
    color: var(--keh-primary);
    font: inherit;
    font-weight: var(--keh-w-semi);
    cursor: pointer;
}

.keh-az-letter:hover {
    border-color: var(--keh-primary-line);
    background: var(--keh-primary-soft);
}

/* The full list scrolls in its own box; every row is 44px so the window can be rendered without measuring. */
.keh-browse-scroll {
    max-width: 640px;
    max-height: 352px;
    overflow-y: auto;
    border: 1px solid var(--keh-line-strong);
    border-radius: var(--keh-radius);
    background: var(--keh-card);
}

.keh-browse-row {
    height: 44px;
    border-bottom: 1px solid var(--keh-paper-2);
    border-radius: 0;
}

/* A Browse row is one line: a long name is cut with an ellipsis (the full name is the row's title), so the 44px rows never overlap. */
.keh-browse-row .keh-suggest-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.keh-pick-toolong {
    margin: 0 0 8px;
}

.keh-new-note {
    margin-top: 8px;
}

.keh-new-types {
    margin-bottom: 0;
}

@media (max-width: 959.98px) {
    .keh-az-letter,
    .keh-browse-toggle {
        min-width: 44px;
        min-height: 44px;
    }

    .keh-suggest,
    .keh-browse-scroll {
        max-width: none;
    }
}

/* Medicines: each picked medicine is one wrapping row (the same markup is a row on a wide screen and a card on a phone). */
.keh-med-rows {
    margin: 0 0 var(--keh-gap);
    padding: 0;
    list-style: none;
}

.keh-med-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
    grid-template-areas: "name dose remove";
    align-items: center;
    gap: 6px 16px;
    padding: 5px 0;
    border-bottom: 1px solid var(--keh-paper-2);
}

.keh-med-name {
    grid-area: name;
    min-width: 0;
    font-weight: var(--keh-w-semi);
    overflow-wrap: anywhere;
}

.keh-med-type {
    display: block;
    color: var(--keh-txt-3);
    font-size: var(--keh-fs-xs);
    font-weight: var(--keh-w-reg);
}

.keh-med-dose {
    grid-area: dose;
    min-width: 0;
}

.keh-med-remove {
    grid-area: remove;
}

@media (max-width: 639.98px) {
    .keh-med-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "name remove" "dose dose";
    }
}

.keh-dosage-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.keh-select {
    min-height: var(--keh-ctl-h);
    padding: 0 10px;
    border: 1px solid var(--keh-line-strong);
    border-radius: var(--keh-radius-sm);
    background: var(--keh-card);
    color: var(--keh-txt);
    font: inherit;
}

.keh-dosage-key {
    flex: 1 1 180px;
    min-width: 0;
}

.keh-dosage-days {
    flex: 0 0 84px;
}

.keh-dosage-unit {
    color: var(--keh-txt-3);
}

.keh-dosage-warn {
    margin: 4px 0 0;
    color: var(--keh-amber-ink);
    font-size: var(--keh-fs-sm);
}

.keh-switch-row {
    margin-bottom: 8px;
}

/* Previous visit summary */
.keh-summary-line {
    margin: 4px 0;
}

.keh-summary-h {
    margin: 12px 0 4px;
    font-size: var(--keh-fs);
    font-weight: var(--keh-w-bold);
}

.keh-summary-list {
    margin: 0;
    padding-left: 18px;
}

.keh-summary-scroll {
    overflow-x: auto;
}

/* Wide screens show every section and have the section nav; a phone gets the accordion and a fixed action bar. */
@media (max-width: 959.98px) {
    .keh-consult {
        --keh-consult-top-h: 76px;
        padding-bottom: 76px;
    }

    .keh-secnav {
        display: none;
    }

    .keh-consult .keh-form-head {
        padding: 6px 0;
    }

    .keh-consult .keh-back,
    .keh-hide-narrow {
        display: none;
    }

    .keh-consult .keh-form-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 6;
        flex-wrap: nowrap;
        align-items: stretch;
        padding: 8px 12px;
        background: var(--keh-card);
        border-top: 1px solid var(--keh-line);
    }

    .keh-consult .keh-form-actions .mud-button-root {
        flex: 1 1 0;
        min-height: 44px;
    }

    .keh-secnav button,
    .keh-select {
        min-height: 44px;
    }

    .keh-shell .keh-consult .mud-input-slot {
        min-height: 44px;
        box-sizing: border-box;
    }
}

/* === SPECIALTY: OPHTHALMOLOGY (start) ==========================================================================
   The optical prescription styles, used only by Specialty/Ophthalmology/OpticalGrid.razor. A general-clinic branch deletes this
   block with that folder (Docs/Ophthalmology-and-Generalisation.md). Nothing outside it may use these classes. */
/* Optical prescription (OpticalGrid): an eye block each, side by side, stacked on a phone. */
.keh-optical {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.keh-eye {
    min-width: 0;
    padding: 10px 12px 12px;
    border: 1px solid var(--keh-line);
    border-radius: var(--keh-radius-lg);
}

.keh-eye-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    margin-bottom: 8px;
}

.keh-eye-title {
    margin: 0;
    font-size: var(--keh-fs);
    font-weight: var(--keh-w-bold);
    text-transform: uppercase;
    color: var(--keh-txt-2);
}

.keh-eye-bva {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--keh-txt-3);
}

.keh-eye-grid {
    display: grid;
    grid-template-columns: auto repeat(3, minmax(0, 1fr));
    gap: 6px 8px;
    align-items: center;
}

.keh-eye-col {
    text-align: center;
    color: var(--keh-txt-3);
    font-size: var(--keh-fs-sm);
    font-weight: var(--keh-w-bold);
}

.keh-eye-row {
    color: var(--keh-txt-3);
    font-size: var(--keh-fs-sm);
}

.keh-eye-grid .keh-select {
    width: 100%;
    min-width: 0;
    padding: 0 4px;
}

.keh-eye-near {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.keh-eye-calc {
    color: var(--keh-txt-3);
    font-size: var(--keh-fs-xs);
}

.keh-optical-value {
    text-align: center;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.keh-optical-uses {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

@media (max-width: 639.98px) {
    .keh-optical {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* === SPECIALTY: OPHTHALMOLOGY (end) ============================================================================ */

/* A popup-blocked print shows this link instead of a browser alert (keh.js kehPrintPdf). */
.keh-toast {
    position: fixed;
    right: 16px;
    bottom: 88px;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 32px);
    padding: 10px 14px;
    border-radius: var(--keh-radius-lg);
    background: var(--keh-ink-800);
    color: var(--keh-txt-inv);
    box-shadow: var(--keh-shadow-lg);
}

.keh-toast a {
    color: var(--keh-txt-inv);
    font-weight: var(--keh-w-bold);
}

.keh-toast button {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: none;
    color: var(--keh-txt-inv);
    font: inherit;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .keh-chevron {
        transition: none;
    }
}

/* Reduced motion: no animation or transition anywhere (MudBlazor's ripple, collapse and progress bars, the splash, drawer and dialogs). */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* The page error boundary (MainLayout): shown in place of a page that failed. */
.keh-error-card {
    width: min(40rem, 100% - 2rem); /* a 1rem gutter on each side on a phone */
    margin: 2rem auto;
    padding: 1.5rem;
    background: var(--keh-card);
    border: 1px solid var(--keh-line);
    border-left: 4px solid var(--keh-rose);
    border-radius: var(--keh-radius-lg);
    color: var(--keh-txt);
}

.keh-error-card h1 {
    font-size: 1.25rem;
    margin: 0 0 0.75rem;
}

.keh-error-card a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* A plain link (not a MudButton rendered as a link) shows it is one on hover. */
.keh-error-card a:not(.mud-button-root):hover {
    color: var(--keh-primary);
    text-decoration: underline;
}

.keh-error-card code {
    font-family: var(--keh-mono);
    color: var(--keh-txt);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
}

/* --- Wizard consultation (/consultation/{id}/wizard) ---------------------------------------------------------
   Reuses the consultation header (.keh-consult, .keh-consult-top). The container query is on the wizard itself, so a 1024px window
   with the drawer open behaves like a narrow screen. Wide: every step with its name. Medium: names for the current step and its
   neighbours. Narrow: a step line with a native "Go to step" select. */
.keh-wizard {
    container-type: inline-size;
    padding-bottom: 0;
}

.keh-wz {
    padding-bottom: 8px;
}

.keh-wz-steps {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
}

.keh-wz-step button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 2px 10px;
    border: 1px solid var(--keh-line-strong);
    border-radius: var(--keh-radius);
    background: var(--keh-card);
    color: var(--keh-txt-2);
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.keh-wz-step button:hover {
    border-color: var(--keh-primary-line);
    color: var(--keh-primary);
}

.keh-wz-step.is-current button {
    border-color: var(--keh-primary);
    background: var(--keh-primary-soft);
    color: var(--keh-primary);
    font-weight: var(--keh-w-semi);
}

.keh-wz-num {
    font-weight: var(--keh-w-semi);
}

.keh-wz-step .keh-badge {
    padding: 3px 6px;
}

.keh-wz-line,
.keh-wz-progress {
    display: none;
}

.keh-wz-progress {
    height: 4px;
    margin-top: 6px;
    border-radius: 2px;
    background: var(--keh-line);
    overflow: hidden;
}

.keh-wz-progress span {
    display: block;
    height: 100%;
    background: var(--keh-primary);
}

.keh-wz-heading {
    margin: 4px 0 12px;
    font-size: calc(var(--keh-fs) + 4px);
    font-weight: var(--keh-w-semi);
    scroll-margin-top: calc(var(--keh-topbar-h) + var(--keh-consult-top-h));
}

.keh-wz-heading:focus {
    outline: none;
}

.keh-wz-heading:focus-visible {
    outline: 2px solid var(--keh-primary);
    outline-offset: 2px;
}

.keh-wz-none {
    display: flex;
    justify-content: center;
    margin: 16px 0 4px;
}

/* The bar with Back and Next stays at the bottom of the window while the step scrolls. */
.keh-wz-nav {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 0;
    background: var(--keh-paper);
    border-top: 1px solid var(--keh-line);
}

.keh-wz-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.keh-wizard .keh-back {
    display: inline;
}

/* Optical: two large choices instead of a switch. */
.keh-choice-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.keh-choice {
    min-height: 56px;
    padding: 8px 14px;
    border: 1px solid var(--keh-line-strong);
    border-radius: var(--keh-radius-lg);
    background: var(--keh-card);
    color: var(--keh-txt);
    font: inherit;
    font-weight: var(--keh-w-semi);
    cursor: pointer;
}

.keh-choice:hover {
    border-color: var(--keh-primary-line);
}

.keh-choice.is-on {
    border-color: var(--keh-primary);
    background: var(--keh-primary-soft);
    color: var(--keh-primary);
}

/* Review */
.keh-review-warn {
    margin-bottom: 12px;
}

.keh-review-block {
    padding: 10px 14px;
}

.keh-review-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}

.keh-review-title {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--keh-fs);
    font-weight: var(--keh-w-semi);
}

.keh-review-unvisited {
    color: var(--keh-txt-3);
    font-size: var(--keh-fs-sm);
}

.keh-review-body {
    margin-top: 4px;
    overflow-wrap: anywhere;
}

@container (max-width: 899.98px) {
    .keh-wz-step:not(.is-near):not(.is-current) .keh-wz-name,
    .keh-wz-step:not(.is-near):not(.is-current) .keh-badge {
        display: none;
    }
}

@container (max-width: 639.98px) {
    .keh-wz-steps {
        display: none;
    }

    .keh-wz-line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .keh-wz-progress {
        display: block;
    }

    .keh-choice-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .keh-wz-nav {
        flex-wrap: nowrap;
    }

    .keh-wz-nav .mud-button-root {
        flex: 1 1 0;
    }

    .keh-wz-actions {
        flex: 1 1 100%;
        flex-direction: column;
    }

    .keh-wz-nav:has(.keh-wz-actions) {
        position: static; /* the Review actions stack: in the flow, so they never cover the review */
        flex-wrap: wrap;
    }

    .keh-wz-nav:has(.keh-wz-actions) .keh-wz-back {
        flex: 1 1 100%;
    }
}

/* Touch: 44px controls below 960px. */
@media (max-width: 959.98px) {
    .keh-wizard .keh-form-actions {
        position: static;
        padding: 0;
        background: none;
        border-top: 0;
    }

    .keh-wz-nav .mud-button-root,
    .keh-wz-actions .mud-button-root,
    .keh-wizard .keh-form-actions .mud-button-root,
    .keh-wz-none .mud-button-root,
    .keh-wz-step button,
    .keh-review-edit {
        min-height: 44px;
    }

    .keh-choice {
        min-height: 56px;
    }
}

.keh-wz-heading .keh-badge {
    margin-left: 8px;
    vertical-align: middle;
}

/* Wizard header: Save sits beside the name instead of on a row of its own. */
.keh-wizard .keh-form-head {
    flex-wrap: nowrap;
    align-items: flex-start;
}

.keh-wizard .keh-form-head-main {
    flex: 1 1 0;
}

.keh-wizard .keh-form-actions {
    flex: 0 0 auto;
}

/* Touch: Review Edit buttons and the switch links are 44px targets below 960px. */
@media (max-width: 959.98px) {
    .keh-review-edit {
        min-width: 44px;
    }

    .keh-wizard .keh-form-meta .keh-link,
    .keh-consult .keh-form-meta .keh-link,
    .keh-wizard .keh-form-meta .keh-tel,
    .keh-consult .keh-form-meta .keh-tel,
    .keh-wizard .keh-back {
        min-height: 44px;
        padding: 0 8px;
        display: inline-flex;
        align-items: center;
    }
}

/* --- Patient files: PatientDocuments -------------------------------------------------
   Add controls on top, then one list. A row is icon, main text and actions; it wraps on a narrow container, so there is one
   markup for every width. The file inputs are visually hidden but stay in the tab order; their label is the button. */
.keh-docs-add {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--keh-line);
}

.keh-docs-pick {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.keh-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    clip-path: inset(50%);
}

.keh-file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid var(--keh-primary-line);
    border-radius: var(--keh-radius-sm);
    background: var(--keh-card);
    color: var(--keh-primary);
    font-weight: var(--keh-w-semi);
    cursor: pointer;
    user-select: none;
}

.keh-file-btn:hover {
    background: var(--keh-primary-soft);
}

.keh-file-input:focus-visible + .keh-file-btn {
    outline: 2px solid var(--keh-primary);
    outline-offset: 2px;
}

.keh-file-btn.is-disabled {
    border-color: var(--keh-line-strong);
    background: var(--keh-paper-2);
    color: var(--keh-txt-4);
    cursor: default;
}

.keh-docs-busy {
    margin-top: 10px;
}

.keh-docs-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 6px;
}

.keh-docs-title {
    margin: 0;
    font-size: var(--keh-fs-lg);
    font-weight: var(--keh-w-bold);
}

.keh-docs-title .keh-badge {
    margin-left: 6px;
    vertical-align: middle;
}

.keh-docs-empty {
    margin: 12px 0;
    color: var(--keh-txt-3);
}

.keh-doc-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.keh-doc {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 12px;
    padding: 10px 0;
    border-top: 1px solid var(--keh-line);
}

.keh-doc:first-child {
    border-top: 0;
}

.keh-doc.is-archived {
    color: var(--keh-txt-3);
    background: var(--keh-paper);
}

.keh-doc-icon {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--keh-txt-3);
}

.keh-doc-main {
    flex: 1 1 260px;
    min-width: 0;
}

.keh-doc-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.keh-doc-name {
    flex: 1 1 12ch;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--keh-w-semi);
}

.keh-doc-note {
    margin-top: 2px;
    overflow-wrap: anywhere;
}

.keh-doc-meta {
    margin-top: 2px;
    color: var(--keh-txt-3);
    font-size: var(--keh-fs-sm);
}

.keh-doc-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px 8px;
}

.keh-doc-open {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    padding: 0 8px;
    color: var(--keh-primary);
    font-weight: var(--keh-w-semi);
    text-decoration: none;
}

.keh-doc-open:hover {
    text-decoration: underline;
}

.keh-docs-more {
    margin-top: 8px;
}

@media (max-width: 959.98px) {
    .keh-file-btn,
    .keh-doc-open {
        min-height: 44px;
    }

    .keh-file-btn {
        flex: 1 1 140px;
    }

    .keh-shell .keh-docs-head .mud-switch {
        min-height: 44px;
    }
}

@media (max-width: 639.98px) {
    /* A phone: the actions sit under the text, on the left. */
    .keh-doc-actions {
        flex: 1 1 100%;
        padding-left: 36px;
    }
}

/* --- Reports: Daily report, Follow-ups due, Referrals and towns --------------------------------------------
   The row lists reuse the Masters list (`keh-master-scroll` / `keh-master`: a table at every width). This block adds the
   tab links, the range controls, the totals strip and the paper layout. Print rules are at the end of the block. */
.keh-rtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--keh-line-strong);
}

.keh-rtab {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border-bottom: 3px solid transparent;
    color: var(--keh-txt-2);
    font-weight: var(--keh-w-semi);
    text-decoration: none;
}

.keh-rtab:hover {
    color: var(--keh-primary);
}

.keh-rtab.active {
    border-bottom-color: var(--keh-primary);
    color: var(--keh-primary);
}

.keh-report-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    padding: 4px 0 12px;
}

.keh-report-dates,
.keh-report-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.keh-shell .keh-report-dates .mud-input-control {
    flex: 1 1 150px;
    min-width: 140px;
    max-width: 200px;
}

.keh-report-problem {
    flex: 1 1 100%;
    margin: 0;
    color: var(--keh-rose-ink);
}

.keh-report-shown {
    margin: 0 0 8px;
    color: var(--keh-txt-3);
}

.keh-totals {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.keh-stat {
    padding: 10px 12px;
    border: 1px solid var(--keh-line);
    border-radius: var(--keh-radius-lg);
    background: var(--keh-card);
}

.keh-stat-label {
    color: var(--keh-txt-3);
    font-size: var(--keh-fs-sm);
}

.keh-stat-value {
    font-size: var(--keh-fs-h1);
    font-weight: var(--keh-w-bold);
    line-height: 1.3;
}

.keh-stat-note {
    color: var(--keh-txt-3);
    font-size: var(--keh-fs-sm);
}

.keh-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 24px;
    margin-bottom: 8px;
    color: var(--keh-txt-2);
}

.keh-report th,
.keh-report td {
    padding-left: 6px;
    padding-right: 6px;
}

.keh-report td.a-wrap {
    max-width: 26ch;
}

.keh-report td.num,
.keh-report th.num {
    text-align: right;
}

.keh-rsum {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 12px;
}

@media (min-width: 1200px) {
    .keh-rsum {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

/* The two summary tables have two or three narrow columns. */
.keh-rsum-scroll {
    overflow-x: auto;
}

.keh-rsum-table {
    width: 100%;
    border-collapse: collapse;
}

.keh-rsum-table th {
    padding: 8px 12px;
    border-bottom: 1px solid var(--keh-line);
    color: var(--keh-txt-2);
    font-size: var(--keh-fs-sm);
    font-weight: var(--keh-w-semi);
    text-align: left;
    white-space: nowrap;
}

.keh-rsum-table td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--keh-paper-2);
    overflow-wrap: anywhere;
}

.keh-rsum-table tbody tr:last-child td {
    border-bottom: 0;
}

.keh-rsum-table th.num,
.keh-rsum-table td.num {
    text-align: right;
}

.keh-rsum-caption {
    caption-side: top; /* the base reset puts a caption below the table */
    padding: 10px 12px 0;
    color: var(--keh-txt-2);
    font-weight: var(--keh-w-bold);
    text-align: left;
}

/* Touch: the range controls and the phone links are 44px below 960px, like the other filter rows. */
@media (max-width: 959.98px) {
    .keh-shell .keh-roles-help summary {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    .keh-shell .keh-report-dates .mud-input-slot,
    .keh-shell .keh-report-dates input {
        min-height: 44px;
        box-sizing: border-box;
    }
}

@media (max-width: 639.98px) {
    .keh-shell .keh-report-dates .mud-input-control {
        flex-basis: 100%;
        max-width: none;
    }
}

/* Paper. Only the report is printed: no shell, controls or tabs (`no-print` in the markup and the rules below), a header with the clinic
   and the days (`on-print`), landscape A4 so the table has the room of a wide screen, header row repeated on each page, rows never split. Prescriptions are PDFs and are not affected. */
.keh-print-head {
    margin-bottom: 8px;
}

.keh-print-title {
    font-size: var(--keh-fs-h1);
    font-weight: var(--keh-w-bold);
}

@page keh-report {
    size: A4 landscape;
    margin: 10mm;
}

@media print {
    body:has(.keh-report),
    body:has(.keh-totals) {
        page: keh-report;
    }

    body,
    .keh-shell,
    .keh-shell .mud-layout {
        background: #fff;
    }

    .mud-appbar,
    .mud-drawer,
    .mud-drawer-overlay,
    .keh-toast,
    .keh-page-head,
    .keh-report-tools,
    .keh-rtabs,
    .mud-snackbar-provider {
        display: none !important;
    }

    .keh-shell .keh-main,
    .keh-shell .mud-main-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    .keh-panel {
        border: 0;
        border-radius: 0;
        overflow: visible;
    }

    .keh-master-scroll {
        overflow: visible;
    }

    .keh-report {
        font-size: 10px;
    }

    .keh-report thead {
        display: table-header-group;
    }

    .keh-report tr,
    .keh-stat {
        break-inside: avoid;
    }

    .keh-report th,
    .keh-report td {
        padding: 3px 6px;
        white-space: normal !important;
        max-width: none !important;
        color: #000;
    }

    .keh-report a {
        color: #000;
        text-decoration: none;
    }

    .keh-totals {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 4px;
    }

    .keh-stat {
        padding: 3px 8px;
        box-shadow: none;
    }

    .keh-stat-value {
        font-size: var(--keh-fs-lg);
    }
}

.keh-pick-archived {
    color: var(--keh-txt-3);
    font-size: var(--keh-fs-xs);
    font-weight: var(--keh-w-reg);
    font-style: italic;
}

.keh-queue .q-slot {
    display: block;
    color: var(--keh-txt-3);
    font-size: var(--keh-fs-sm);
    white-space: nowrap;
}

.keh-med-name .keh-pick-archived {
    margin-left: 6px;
}


/* After a page change focus moves to the page's h1 (FocusOnNavigate, for screen readers). A heading is not a control, so no ring is drawn. */
.keh-shell h1:focus,
.keh-shell h1:focus-visible {
    outline: none;
}

/* Settings: the default fee box is as wide as an amount needs. */
.keh-fee-input {
    max-width: 10rem;
}

/* Settings: the prescription's print switches, a compact grid of checkboxes. */
.keh-print-switches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0 var(--keh-gap);
}

/* Row action icons (Masters, Users, files): outlined and a size smaller than MudBlazor's small, so a row of them reads light. */
.keh-shell .keh-m-icon .mud-icon-root {
    font-size: 1.125rem;
}

/* A compact strip of small labelled cells in one bordered box (the consultation's Visit section: fee | operation | follow-up),
   a label above each cell; wraps to stacked cells on touch widths. */
.keh-strip {
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    border: 1px solid var(--keh-line-strong);
    border-radius: var(--keh-radius);
    background: var(--keh-card);
}

.keh-strip-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 6px 14px 8px;
}

.keh-strip-cell + .keh-strip-cell {
    border-left: 1px solid var(--keh-line);
}

.keh-strip-label {
    font-size: var(--keh-fs-sm);
    font-weight: var(--keh-w-bold);
    color: var(--keh-txt);
}

.keh-strip-fields {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.keh-strip .mud-checkbox {
    margin: 0;
}

.keh-visit-date {
    width: 9.5rem;
}

.keh-visit-note {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: var(--keh-gap);
}

@media (max-width: 959.98px), (pointer: coarse) {
    .keh-strip {
        width: 100%;
        flex-direction: column;
    }

    .keh-strip-cell + .keh-strip-cell {
        border-left: 0;
        border-top: 1px solid var(--keh-line);
    }
}

/* === SPECIALTY: GENERAL (start) =================================================================================
   Styles of the general clinic's additions: the per-ticked-item detail table under a pick list (name | on medication |
   medication name, or name | note) and the vitals strip. Used only by the components in Keh.Client/Specialty/General and the PickList slot. */
.keh-pick-details {
    margin: 0 0 var(--keh-gap);
    padding: 0;
    list-style: none;
    border: 1px solid var(--keh-line-strong);
    border-radius: var(--keh-radius);
    background: var(--keh-card);
    overflow: hidden;
}

.keh-pick-detail + .keh-pick-detail {
    border-top: 1px solid var(--keh-line);
}

/* One row: name | switch | box. Fixed columns, so a row does not change width when the box appears. */
.keh-dr {
    display: grid;
    grid-template-columns: minmax(8rem, 22%) 10.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0 var(--keh-gap);
    min-height: 38px;
    padding: 3px 10px;
}

/* A two-cell row (no switch) keeps the three columns, so its box lines up with the other lists' boxes. */
.keh-dr.no-switch .keh-dr-box {
    grid-column: 3;
}

/* Column titles: decorative (the boxes have their own labels); not shown when the rows stack on a phone. */
.keh-dr-head {
    min-height: 26px;
    font-size: var(--keh-fs-sm);
    font-weight: var(--keh-w-semi);
    color: var(--keh-txt-3);
    background: var(--keh-paper);
}

.keh-dr-name {
    font-weight: var(--keh-w-semi);
    overflow-wrap: anywhere;
}

.keh-dr-switch .mud-switch {
    margin: 0;
}

.keh-dr-box {
    min-width: 0;
}

.keh-dr-box .keh-field-hint {
    margin: 1px 0 2px;
}

@media (max-width: 959.98px), (pointer: coarse) {
    .keh-dr {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "name name" "switch box";
        gap: 2px var(--keh-gap);
        padding: 6px 10px 8px;
    }

    .keh-dr.no-switch {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "name" "box";
    }

    .keh-dr.no-switch .keh-dr-box {
        grid-column: auto;
    }

    .keh-pick-detail-head {
        display: none;
    }

    .keh-dr-name { grid-area: name; }
    .keh-dr-switch { grid-area: switch; }
    .keh-dr-box { grid-area: box; }

    /* a 44px touch target for the row's switch (on medication, WNL; the MudBlazor switch is 38px) */
    .keh-dr-switch .mud-switch {
        min-height: 44px;
    }
}

/* Vitals: one strip (blood pressure | pulse | weight), a label above each group, the unit beside its box. It follows the room it gets (a container),
   so the narrow column of the appointment dialog stacks it like a phone does. */
.keh-vitals-section {
    container: keh-vitals / inline-size;
}

.keh-vitals {
    display: grid;
    grid-template-columns: auto auto auto;
    width: fit-content;
    max-width: 100%;
    border: 1px solid var(--keh-line-strong);
    border-radius: var(--keh-radius);
    background: var(--keh-card);
}

.keh-vital {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 14px 10px;
}

.keh-vital + .keh-vital {
    border-left: 1px solid var(--keh-line);
}

.keh-vital > label {
    font-size: var(--keh-fs-sm);
    font-weight: var(--keh-w-bold);
    color: var(--keh-txt);
}

.keh-vital-fields {
    display: flex;
    align-items: center;
    gap: 6px;
}

.keh-vital-input {
    width: 4rem; /* "120" or "105.5" fit */
}

.keh-vitals-problem {
    margin: 4px 0 0;
}

.keh-vitals-unit {
    color: var(--keh-txt-3);
    font-size: var(--keh-fs-sm);
    white-space: nowrap;
}

@media (max-width: 959.98px), (pointer: coarse) {
    .keh-vitals {
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .keh-vital-bp {
        grid-column: 1 / -1;
        border-bottom: 1px solid var(--keh-line);
    }

    .keh-vital-bp + .keh-vital {
        border-left: 0;
    }

    .keh-vital-input {
        width: 100%;
        max-width: 5rem;
    }
}

@container keh-vitals (max-width: 599.98px) {
    .keh-vitals {
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .keh-vital-bp {
        grid-column: 1 / -1;
        border-bottom: 1px solid var(--keh-line);
    }

    .keh-vital-bp + .keh-vital {
        border-left: 0;
    }

    .keh-vital {
        min-width: 0;
        padding: 8px 10px 10px;
    }

    .keh-vital-input {
        flex: 0 1 5rem;
        min-width: 0;
    }
}

@container keh-vitals (max-width: 359.98px) {
    .keh-vitals {
        grid-template-columns: 1fr;
    }

    .keh-vital + .keh-vital {
        border-left: 0;
        border-top: 1px solid var(--keh-line);
    }

    .keh-vital-bp {
        border-bottom: 0;
    }
}
/* === SPECIALTY: GENERAL (end) ================================================================================== */