/* ============================================================
   app-shell.css — global styles extracted from interactive
   component markup to fix Blazor double-mount (klyncexam-72a3).
   Inline <style> inside interactive components breaks Blazor's
   DOM diffing; moving them here is zero-visual-risk because they
   were already un-scoped (no ::deep, no @scope attribute).
   Origin comments mark which .razor file each block came from.
   ============================================================ */

/* Global reset — the browser default body margin (8px) shows the white <body> as a
   frame around the whole app shell. Zero it and let the shell own the viewport. */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* ===== from MainLayout.razor ===== */

/* Definite-height chain root (D6 / Codex R1 P2).
   .ke-shell-root  : viewport root (100dvh / 100vh fallback)
   .ke-shell-drawer: drawer itself fills shell root height
   .ke-target-column: TargetContent stacks bar + body as column
   .ke-body-region : @Body container — flex:1 min-height:0 (critical for height:100% pages)
   .ke-nav-menu    : strip panel padding so menu items are flush */

.ke-shell-root {
    --ke-wash-side: linear-gradient(165deg, #e4f6fb 0%, #eeeffc 46%, #fdf0e6 100%);
    --ke-wash-bar: linear-gradient(90deg, #e4f6fb 0%, #eeeffc 46%, #fdf0e6 100%);
    --ke-wash-page: linear-gradient(165deg, color-mix(in srgb, #e4f6fb 75%, #fff) 0%, color-mix(in srgb, #eeeffc 75%, #fff) 46%, color-mix(in srgb, #fdf0e6 75%, #fff) 100%);
    --ke-wash-header: linear-gradient(90deg, color-mix(in srgb, #e4f6fb 60%, #fff) 0%, color-mix(in srgb, #eeeffc 60%, #fff) 46%, color-mix(in srgb, #fdf0e6 60%, #fff) 100%);
    --ke-wash-glow: #fadcc8;
    --ke-display: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
    height: 100dvh;
    height: 100vh; /* fallback for browsers without dvh */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[data-theme="dark"] .ke-shell-root {
    --ke-wash-side: linear-gradient(165deg, #14284a 0%, #1c1e45 50%, #2c1c3c 100%);
    --ke-wash-bar: linear-gradient(90deg, #14284a 0%, #1c1e45 50%, #2c1c3c 100%);
    --ke-wash-page: linear-gradient(165deg, color-mix(in srgb, #14284a 55%, #0e0e14) 0%, color-mix(in srgb, #1c1e45 55%, #0e0e14) 50%, color-mix(in srgb, #2c1c3c 55%, #0e0e14) 100%);
    --ke-wash-header: linear-gradient(90deg, color-mix(in srgb, #14284a 75%, #0e0e14) 0%, color-mix(in srgb, #1c1e45 75%, #0e0e14) 50%, color-mix(in srgb, #2c1c3c 75%, #0e0e14) 100%);
    --ke-wash-glow: #3d2152;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .ke-shell-root {
        --ke-wash-side: linear-gradient(165deg, #14284a 0%, #1c1e45 50%, #2c1c3c 100%);
        --ke-wash-bar: linear-gradient(90deg, #14284a 0%, #1c1e45 50%, #2c1c3c 100%);
        --ke-wash-page: linear-gradient(165deg, color-mix(in srgb, #14284a 55%, #0e0e14) 0%, color-mix(in srgb, #1c1e45 55%, #0e0e14) 50%, color-mix(in srgb, #2c1c3c 55%, #0e0e14) 100%);
        --ke-wash-header: linear-gradient(90deg, color-mix(in srgb, #14284a 75%, #0e0e14) 0%, color-mix(in srgb, #1c1e45 75%, #0e0e14) 50%, color-mix(in srgb, #2c1c3c 75%, #0e0e14) 100%);
        --ke-wash-glow: #3d2152;
    }
}

/* Make the DxDrawer fill the shell root.
   .dxbl-drawer is the root element DxDrawer renders; we also target
   the CssClass host element. Using the CssClass hook per the DX docs
   (docs.devexpress.com/Blazor/DevExpress.Blazor.DxDrawer.CssClass). */
.ke-shell-drawer,
.ke-shell-drawer.dxbl-drawer {
    flex: 1;
    min-height: 0;
    height: 100%;
}

/* DxDrawer renders an inner container with class dxbl-drawer-panel-container
   and dxbl-drawer-target that also need height propagation. */
.ke-shell-drawer .dxbl-drawer-target,
.ke-shell-drawer > div {
    height: 100%;
}

/* Drawer carries the same colour wash as the setup screen's rail (--ke-wash-side, with its own
   dark variant on .ke-shell-root). Zero the drawer-body
   padding so the nav panel sits flush. DX drives this padding through its own CSS vars
   (--dxbl-drawer-panel-body-padding-*) whose themed stylesheet loads AFTER app-shell.css and
   wins over a bare `padding:0` on equal specificity — so we must zero the vars, not just the
   property. In the 56px mini rail the stock 10px padding cramped + clipped the logo/chevron. */
.ke-shell-drawer .dxbl-drawer-body {
    --dxbl-drawer-panel-body-padding-x: 0px;
    --dxbl-drawer-panel-body-padding-y: 0px;
    padding: 0;
}

.ke-shell-drawer .dxbl-drawer-panel {
    background: url("../images/klyncexam-logo-mini.svg") no-repeat right -78px bottom -44px / 270px auto,
                var(--ke-wash-side);
}

.ke-shell-drawer.ke-drawer-mini .dxbl-drawer-panel {
    background: url("../images/klyncexam-logo-mini.svg") no-repeat right -34px bottom -20px / 104px auto,
                var(--ke-wash-side);
}

.ke-target-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.ke-beta-strip {
    flex-shrink: 0;
    padding: 4px 16px;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--dxds-color-surface-warning-default-rest);
    color: var(--dxds-color-content-neutral-default-rest);
    border-bottom: 1px solid var(--dxds-color-border-warning-default-rest);
}

.ke-app-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--ke-wash-bar);
    color: var(--dxds-color-content-neutral-default-rest);
    border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest);
    padding: 8px 16px;
    min-height: 56px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.ke-app-bar-left,
.ke-app-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ke-app-bar-left {
    flex: 0 1 auto;
}

.ke-app-bar-right {
    flex: 0 0 auto;
    justify-content: flex-end;
}

.ke-app-bar-center {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 0;
    min-width: 160px;
    max-width: 520px;
    margin: 0 auto;
}

.ke-drawer-header {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 8px 12px 6px 16px;
    color: var(--dxds-color-content-neutral-default-rest);
}

.ke-shell-drawer.ke-drawer-open > dxbl-drawer-panel {
    transition-property: width;
}

.ke-drawer-mini .ke-drawer-header {
    justify-content: center;
    box-sizing: border-box;
    padding: 10px 4px;
}

.ke-app-bar-divider {
    width: 1px;
    height: 24px;
    flex-shrink: 0;
    background: var(--dxds-color-border-neutral-default-rest);
}

.ke-unfinished-count {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    white-space: nowrap;
    text-decoration: none;
    color: var(--dxds-color-content-warning-default-rest);
    border: 1px solid var(--dxds-color-border-warning-default-rest);
}

.ke-unfinished-count:hover {
    background: var(--dxds-color-surface-neutral-deep-hovered);
}

.ke-unfinished-count.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ke-unfinished-count.is-disabled:hover {
    background: none;
}

.ke-red-flags-count {
    font-weight: 600;
    color: var(--dxds-color-content-neutral-default-static-dark-rest);
    background: var(--dxds-color-surface-danger-default-rest);
    border-color: var(--dxds-color-surface-danger-default-rest);
}

.ke-red-flags-count:hover {
    background: var(--dxds-color-surface-danger-default-hovered);
}

.ob-layer {
    height: 100dvh;
    overflow: auto;
    background: var(--dxds-color-surface-neutral-default-rest);
}

.ob-logout-form {
    margin: 0;
}

.ob-topbar-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ob-logout {
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    text-decoration: underline;
    color: var(--dxds-color-content-neutral-deep-rest);
}

.ke-home-card--highlight {
    border: 2px solid var(--dxds-color-content-primary-default-rest);
    background: var(--dxds-color-surface-primary-subdued-rest);
}

.ke-home-first-form {
    margin-bottom: 24px;
}

.ke-hint-host {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.ke-hint-host--fill {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.ke-hint-host--fill > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.ke-app-bar-actions .ke-app-bar-overflow-label {
    display: none;
}

.ke-app-bar-overflow-label {
    margin-left: 8px;
}

.ke-app-bar-btn-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.ke-hint-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 2;
    width: 16px;
    height: 16px;
    padding: 0;
    box-sizing: border-box;
    border: 1.5px solid var(--dxds-color-content-primary-default-rest);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
    cursor: pointer;
    color: var(--dxds-color-content-primary-default-rest);
    background: var(--dxds-color-surface-neutral-deep-rest);
}

.ke-hint-badge--start {
    right: auto;
    left: -4px;
}

.ke-hint-badge::after {
    content: "";
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
}

.ke-hint-badge--start::after {
    right: auto;
    left: -8px;
}

.ke-hint-badge:focus-visible {
    outline: 2px solid var(--dxds-color-content-primary-default-rest);
    outline-offset: 2px;
}

h1:focus {
    outline: none;
}

.ke-app-bar-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ke-app-bar-title:has(.ke-business-logo) {
    align-items: center;
}

.ke-business-logo {
    align-self: center;
    flex: 0 0 auto;
    height: 28px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

.ke-app-bar-title-sep,
.ke-location-name {
    font-size: 0.9rem;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ke-location-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ke-app-bar-right > .ke-app-bar-actions {
    flex: 0 0 auto;
    width: 160px;
    background: transparent;
    min-width: 0;
}

@media (max-width: 700px) {
    .ke-app-bar-right > .ke-app-bar-actions {
        flex: 0 1 auto;
        width: auto;
    }
}

@media (max-width: 520px) {
    .ke-app-bar {
        gap: 8px;
        padding: 8px;
    }

    .ke-app-bar-left {
        flex: 0 0 auto;
    }

    .ke-app-bar-title,
    .ke-unfinished-word {
        display: none;
    }

    .ke-app-bar-center {
        min-width: 56px;
    }

    .ke-app-bar-title-sep,
    .ke-location-name {
        display: none;
    }
}

.ke-patient-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.ke-add-patient-btn {
    flex: 0 0 auto;
}

.ke-patient-search-box {
    width: 100%;
}

.ke-patient-search.ke-has-patient input::placeholder {
    color: var(--dxds-color-content-neutral-default-rest);
    opacity: 1;
}

.ke-patient-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: min(360px, calc(100vw - 16px));
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    background: var(--dxds-color-surface-neutral-default-rest);
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.ke-patient-search-results .ke-demo-result-list {
    max-height: 320px;
}

.ke-patient-search-icon {
    display: none;
}

@media (max-width: 575.98px) {
    .ke-add-patient-btn {
        display: none;
    }
}

@media (max-width: 520px) {
    .ke-patient-search-results {
        position: fixed;
        top: 60px;
        left: 8px;
        right: 8px;
    }

    .ke-app-bar-center {
        flex: 0 0 auto;
        min-width: 0;
        margin: 0;
    }

    .ke-app-bar-right {
        flex: 1 1 auto;
    }

    .ke-app-bar-right > .ke-app-bar-more,
    .ke-app-bar-right > :has(.ke-app-bar-more) {
        margin-left: auto;
    }

    .ke-patient-search {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
    }

    .ke-patient-search-icon {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        pointer-events: none;
        color: var(--dxds-color-content-neutral-default-rest);
    }

    .ke-search-locked .ke-patient-search-icon {
        opacity: 0.4;
    }

    .ke-patient-search:not(.ke-search-open) {
        overflow: hidden;
    }

    .ke-patient-search:not(.ke-search-open) .ke-patient-search-box {
        opacity: 0;
    }

    .ke-patient-search.ke-search-open {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1051;
        width: auto;
        height: auto;
        min-height: 56px;
        padding: 8px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        background: var(--ke-wash-bar);
        border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest);
    }

    .ke-patient-search.ke-search-open .ke-patient-search-icon {
        display: none;
    }
}

.ke-demo-result-item.ke-highlighted {
    background: var(--dxds-color-surface-neutral-deep-hovered);
}

.ke-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--dxds-color-content-neutral-default-rest);
    background: var(--dxds-color-surface-neutral-subdued-rest);
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
}

.ke-avatar-photo {
    object-fit: cover;
    flex-shrink: 0;
}

.ke-avatar-md {
    width: 48px;
    height: 48px;
    font-size: 1rem;
}

.ke-avatar-lg {
    width: 96px;
    height: 96px;
    font-size: 1.75rem;
}

.ke-photo-window {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.ke-photo-stage {
    position: relative;
    width: min(280px, 100%);
    aspect-ratio: 1;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    cursor: grab;
    border-radius: var(--radius-md);
    background: var(--dxds-color-surface-neutral-subdued-rest);
}

.ke-photo-stage img {
    position: absolute;
    max-width: none;
    pointer-events: none;
}

.ke-photo-stage video {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.ke-photo-stage.is-live video {
    display: block;
}

.ke-photo-stage video.is-mirrored {
    transform: scaleX(-1);
}

.ke-photo-frame {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.45);
    pointer-events: none;
}

.settings-tile-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* App-bar plain icon buttons (no DX component, no JS interop — U9), themed against the neutral
   app-bar with DX Fluent tokens (U10):
     .ke-drawer-toggle  — app-shell-drawer manual hamburger toggle
     .ke-user-menu-btn  — user-menu avatar (klyncexam-69xk)
   ONE rule for both rather than a copy each (A12).
   History: klyncexam-cwzk added .ke-logout-btn here when logout was a standalone bar icon;
   klyncexam-69xk moved logout INSIDE the user menu, where it renders as .ke-user-menu-item, so
   .ke-logout-btn was dropped rather than left as dead CSS (A4). */
.ke-drawer-toggle,
.ke-user-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--dxds-color-content-neutral-default-rest);
    font-size: 1.35rem;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: var(--radius-md);
}

.ke-drawer-toggle:hover,
.ke-user-menu-btn:hover {
    background: var(--dxds-color-surface-neutral-deep-hovered);
}

/* The logout <form> is a flex item of its container; make it a flex box too so the button inside
   inherits the surrounding vertical centring instead of sitting on the form's block baseline.
   (In the app bar pre-69xk; now inside the user menu, where it also keeps the item full-width.) */
.ke-logout-form {
    display: flex;
    align-items: center;
}

/* ── User menu (klyncexam-69xk) ────────────────────────────────────────────────────────────────
   Body of the DxFlyout anchored to #ke-user-menu-anchor. Colours are DX Fluent tokens (U10); the
   flyout supplies its own surface/border/shadow, so only the inner layout lives here. */
.ke-user-menu {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
}

.ke-user-menu-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px 10px;
}

.ke-user-menu-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--dxds-color-content-neutral-default-rest);
}

.ke-user-menu-practice {
    font-size: 0.8rem;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ke-user-menu-sep {
    height: 1px;
    margin: 4px 0;
    background: var(--dxds-color-border-neutral-default-rest);
}

/* Items are <a> (navigation) and one <button> (the logout submit — B-auth-3 keeps it a form POST),
   so the rule must normalise BOTH element defaults: no underline for the anchors, no border/
   background/font inheritance for the button. Full width so the hover band spans the menu. */
.ke-user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    background: transparent;
    border: none;
    text-align: left;
    font: inherit;
    font-size: 0.875rem;
    color: var(--dxds-color-content-neutral-default-rest);
    text-decoration: none;
    cursor: pointer;
}

.ke-user-menu-item:hover {
    background: var(--dxds-color-surface-neutral-deep-hovered);
    color: var(--dxds-color-content-neutral-default-rest);
    text-decoration: none;
}

.ke-user-menu-item i {
    font-size: 1rem;
    line-height: 1;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ke-practice-name {
    font-family: var(--ke-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--dxds-color-content-neutral-default-rest);
    letter-spacing: 0.01em;
}

.ke-brand-logo {
    --ke-brand-insight: #1c91c5;
    height: 61px;
    width: auto;
    max-width: 120px;
    display: block;
}

.ke-brand-logo-mini {
    height: 30px;
    width: auto;
    max-width: 40px;
    display: block;
    margin: 0 auto;
}

.ke-brand-toggle {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    padding: 2px;
    cursor: pointer;
    border-radius: var(--radius-md);
}

.ke-brand-toggle:hover {
    background: var(--dxds-color-surface-neutral-deep-hovered);
}

.ke-app-bar-logo {
    height: 26px;
    width: auto;
    display: block;
}

.ke-collapse-btn,
.ke-collapse-btn .dxbl-btn,
.ke-collapse-btn.dxbl-btn {
    color: var(--dxds-color-content-neutral-subdued-rest);
    background: transparent;
    border: none;
    padding: 4px 6px;
    line-height: 1;
}

.ke-collapse-btn:hover,
.ke-collapse-btn.dxbl-btn:hover {
    background: var(--dxds-color-surface-neutral-deep-hovered);
    border-radius: var(--radius-md);
}

/* Nav panel — transparent, so the drawer panel's wash shows through unbroken from the header
   down. The menu foreground still uses DX's themed content tokens. */
.ke-nav-panel {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background: transparent;
}

/* @Body container — the critical flex:1 min-height:0 pair (D6 / Codex R1 P2).
   Without min-height:0 a flex child cannot be shorter than its content height,
   so height:100% pages would collapse or overflow instead of filling. */
.ke-body-region {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    background: var(--ke-wash-page);
}

/* Nav menu — transparent surface so the themed panel shows through; DX themes the menu item
   text + icons (and hover/active highlight) natively via its content tokens, so they flip with
   the theme. We only strip DX's panel padding so items sit flush. */
.ke-nav-menu,
.ke-nav-menu.dxbl-menu {
    background: transparent;
    border: none;
    --dxbl-drawer-panel-body-padding-x: 0;
    --dxbl-drawer-panel-body-padding-y: 0;
}

.ke-nav-menu .dxbl-menu-item-text {
    white-space: nowrap;
    overflow: hidden;
}

/* Expanded: indent items from the drawer edge (the drawer-body padding was zeroed to kill
   the white frame, so the indent lives here — on the gradient — not from DX's panel padding). */
.ke-nav-menu .dxbl-menu-item {
    padding-left: 16px;
}

.ke-nav-menu .ke-nav-item-active .dxbl-btn {
    background: var(--dxds-color-surface-primary-subdued-rest);
    color: var(--dxds-color-content-neutral-default-rest);
    font-weight: 600;
}

/* Mini (collapsed) rail — drop the text container so the icon centres, hide expand chevrons.
   Using display:none on the container (not visibility on the text) lets the icon sit centred.
   Scoped under .ke-shell-drawer.ke-drawer-mini to avoid !important. */
.ke-shell-drawer.ke-drawer-mini .dxbl-menu-item-text-container {
    display: none;
}

.ke-shell-drawer.ke-drawer-mini .dxbl-menu-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* The menu-item link/button is full-width with justify-content:flex-start, so the lone icon
   (text + dropdown-arrow hidden in mini) hugged the left. Centre the button content so the
   icon sits in the middle of the 56px rail. */
.ke-shell-drawer.ke-drawer-mini .ke-nav-menu .dxbl-menu-item > .dxbl-btn {
    justify-content: center;
}

/* Hide the submenu drop-down arrow in the mini rail (the "Forms" item has children). DX renders
   it INSIDE the item button as <svg class="dxbl-menu-dropdown-toggle"> — target exactly that so
   the clipboard icon (and its tap-to-open flyout) stays intact; this only drops the stray ">"
   chevron that crowded the 56px rail. (.dxbl-menu-item-expand-btn kept as a defensive alias.) */
.ke-shell-drawer.ke-drawer-mini .ke-nav-menu .dxbl-menu-dropdown-toggle,
.ke-shell-drawer.ke-drawer-mini .dxbl-menu-item-expand-btn {
    display: none;
}


/* ===== from ExamForm.razor ===== */

/* Scoped styles — hamburger icon must read against the dark (#343a40) header. */
.exam-hamburger-menu .dxbl-menu-hamburger-button {
    color: #fff;
}

/* ===== from Results.razor ===== */

.ke-results-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    gap: 12px;
    overflow: hidden;
    background: var(--dxds-color-surface-neutral-default-rest);
}

.ke-results-patient {
    flex-shrink: 0;
}

.ke-results-patient-name {
    font-size: 18px;
    font-weight: 600;
}

.ke-results-patient-dob {
    font-size: 12px;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ke-results-recent-bar {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.ke-results-recent-period {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 220px;
}

.ke-patient-tabs {
    margin-top: 16px;
    max-width: 1400px;
}

.ke-patient-results {
    margin-top: 16px;
    max-width: 1400px;
}

.ke-unfinished-phone-name {
    font-weight: 600;
}

.ke-unfinished-phone-meta {
    font-size: 12px;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ke-unfinished-phone-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ke-unfinished-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ke-patient-dob-part {
    white-space: nowrap;
}

/* Grid fills available height (D6 pattern). */
.ke-results-grid {
    flex: 1;
    min-height: 0;
}

.ke-answers-score {
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 6px;
    background: var(--dxds-color-surface-neutral-subdued-rest);
}

.ke-answers-score-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
}

.ke-answers-score-total {
    font-size: 20px;
    font-weight: 600;
    color: var(--dxds-color-content-neutral-default-rest);
}

.ke-answers-score-pct {
    font-size: 14px;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ke-answers-score-band {
    font-size: 14px;
    font-weight: 600;
    color: var(--dxds-color-content-neutral-default-rest);
}

.ke-answers-score-change {
    margin-top: 4px;
    font-size: 13px;
    color: var(--dxds-color-content-neutral-default-rest);
}

.ke-answers-note {
    font-size: 13px;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

/* Status badges */
.ke-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.ke-badge-draft {
    background: var(--dxds-color-surface-neutral-deep-rest);
    color: var(--dxds-color-content-neutral-default-rest);
}

.ke-badge-completed {
    background: var(--dxds-color-surface-success-deep-rest);
    color: var(--dxds-color-content-success-default-rest);
}

/* patient-practitioner-signoff-lifecycle: frozen-but-unreviewed state (Decision 4). */
.ke-badge-awaiting-review {
    background: var(--dxds-color-surface-warning-deep-rest);
    color: var(--dxds-color-content-warning-default-rest);
}

/* Patient-submitted indicator */
.ke-patient-yes {
    color: var(--dxds-color-content-success-default-rest);
    font-size: 14px;
}

.ke-patient-no {
    color: var(--dxds-color-content-neutral-subdued-rest);
    font-size: 16px;
}

/* CENTER — grey "desk" the form sits on (v1: #f0f0f0, 12px pad) */
.designer-desk {
    flex: 1;
    overflow-y: auto;
    /* klqo: reserve the vertical-scrollbar gutter always, so the measured client width
       is invariant whether or not the scrollbar is showing. Without this, the canvas is
       sized (cssWidth = host.clientWidth) before tall content (e.g. the spine widget)
       forces the scrollbar; the scrollbar then steals ~15px and the canvas — plus every
       DOM overlay / selection box anchored to it — overflows the section box by that
       gutter width ("combo outside the box"). Reserving the gutter pins the width. */
    scrollbar-gutter: stable;
    background: var(--dxds-color-surface-neutral-subdued-rest);
    padding: 12px;
}

.ke-new-field {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
}
.ke-new-field-label {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
}
.ke-new-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}
.ke-new-field-error {
    color: var(--dxds-color-content-danger-default-rest);
    font-size: 13px;
    margin: 0;
}
.ke-new-field-locked {
    font-size: 13px;
    margin: 0;
}
/* ===== from DemoIdentityPicker (demo-identity-shim) ===== */

.ke-demo-sep {
    width: 1px;
    height: 20px;
    background: var(--dxds-color-border-neutral-default-rest);
    margin: 0 4px;
}

/* ── Modal / popup body styles (rendered in DxPopup portal, not in this shadow DOM) ── */

/* Modal body wrapper — gives consistent internal padding */
.ke-demo-modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
    min-width: 280px;
}

/* Field row: label above combo */
.ke-demo-field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ke-demo-field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

/* ComboBox in the sign-in modal */
.ke-demo-modal-combo {
    width: 100%;
}

/* Search input in patient popup */
.ke-demo-search-input {
    width: 100%;
}

/* Loading / empty state text */
.ke-demo-loading,
.ke-demo-empty {
    font-size: 13px;
    color: var(--dxds-color-content-neutral-subdued-rest);
    padding: 4px 0;
}

/* Patient search results list */
.ke-demo-result-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 200px;
    overflow-y: auto;
}

.ke-demo-result-item {
    background: none;
    border: none;
    text-align: left;
    padding: 6px 8px;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    font-size: 14px;
    color: var(--dxds-color-content-neutral-default-rest);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* 2-line patient results (patient-lookup-polish 6xdc):
   line 1 = name (inherits button font-size/colour);
   line 2 = DOB · age · contact (muted, smaller, DX tokens per U10). */
.ke-demo-result-item-name {
    display: block;
}

.ke-demo-result-item.ke-patient-result {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.ke-demo-result-item.ke-add-from-search {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
    color: var(--dxds-color-content-primary-default-rest);
}

.ke-patient-result-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ke-demo-result-item-context {
    display: block;
    font-size: 11px;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ke-demo-result-item:hover {
    background: var(--dxds-color-surface-neutral-deep-hovered);
}

/* "+ new clinician" / "+ Add patient" link-style button */
.ke-demo-add-link {
    background: none;
    border: none;
    color: var(--dxds-color-content-primary-default-rest);
    font-size: 13px;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.ke-demo-add-link:hover {
    text-decoration: underline;
}

/* Inline add form inside modals */
.ke-demo-adder {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    background: var(--dxds-color-surface-neutral-subdued-rest);
    border-radius: var(--radius-sm, 4px);
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
}

.ke-demo-add-input {
    width: 100%;
}

.ke-demo-adder-btns {
    display: flex;
    gap: 8px;
}

.ke-demo-add-confirm {
    min-width: 60px;
}

/* Modal footer — Continue / Cancel buttons right-aligned */
.ke-demo-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 4px 0;
}

/* Generic dialog footer — Secondary (Cancel) left, Primary/Danger right (BTN2 / U10) */
.ke-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 4px 0;
}

.ke-dialog-footer.ke-dialog-footer-primary-first {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

@media (max-width: 576px) {
    .dxbl-popup.dxbl-popup-adaptivity { --dxbl-popup-justify-self: stretch; }
}

/* ── Sign-in gate screen (shown when !IsSignedIn — Decision 11) ── */
.ke-signin-screen {
    height: 100dvh;
    height: 100vh; /* fallback */
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, var(--dxds-color-surface-primary-default-rest) 0%, var(--dxds-color-surface-primary-default-active) 100%);
    padding: 16px;
}

.ke-signin-card {
    background: var(--dxds-color-surface-neutral-default-rest);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
    padding: 28px 28px 22px;
    width: 380px;
    max-width: 94vw;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ke-signin-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--dxds-color-content-neutral-default-rest);
}

.ke-signin-sub {
    font-size: 13px;
    color: var(--dxds-color-content-neutral-subdued-rest);
    margin: 0 0 8px;
}

.ke-signin-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.ke-signin-continue {
    min-width: 96px;
}

/* ===== from ThemeSettings.razor (dx-theme-editor brick 4/5) ===== */
/* Moved here from component markup to avoid Blazor double-mount (klyncexam-72a3). */

/* Custom hex text box */
.ts-custom-hex {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ts-label {
    font-size: 0.8125rem;
    color: var(--dxds-color-content-neutral-default-rest);
    white-space: nowrap;
}

.ts-hex-field {
    width: 160px;
}

/* Live preview swatch */
.ts-preview-swatch {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
    display: inline-block;
    margin-top: 12px;
}

/* Default accent reset button */
.ts-default-accent {
    margin-top: 8px;
}

/* Save row */
.ts-actions {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ts-status {
    font-size: 0.8125rem;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

/* ── Onboarding (/onboarding, B4) ─────────────────────────────────────────────────
   DX Fluent schema only — colour/border via var(--dxds-color-*), spacing on the
   8-point grid (U10). Mirrors the .ts-* conventions above; in component markup would
   double-mount (klyncexam-72a3), so it lives here. */

.ob-page {
    padding: 24px;
    max-width: 600px;
}

.ob-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 24px;
    color: var(--dxds-color-content-neutral-default-rest);
}

.ob-error {
    color: var(--dxds-color-content-danger-default-rest);
    margin: 0 0 16px;
}

.ob-section {
    margin-bottom: 32px;
}

.ob-section-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--dxds-color-content-neutral-default-rest);
}

.ob-hint {
    font-size: 0.8125rem;
    color: var(--dxds-color-content-neutral-subdued-rest);
    margin: 0 0 16px;
}

.ob-field-group {
    margin-bottom: 16px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ob-label {
    font-size: 0.8125rem;
    color: var(--dxds-color-content-neutral-default-rest);
}

.ob-required {
    color: var(--dxds-color-content-danger-default-rest);
}

.ob-field {
    width: 100%;
}

.ob-validation {
    font-size: 0.8125rem;
    color: var(--dxds-color-content-danger-default-rest);
}

/* Suburb (grow) + Post Code (fixed) on one row */
.ob-field-row {
    display: flex;
    gap: 16px;
    max-width: 360px;
}

.ob-field-row .ob-field-group {
    margin-bottom: 16px;
    max-width: none;
}

.ob-field-group--grow {
    flex: 1;
}

.ob-field-group--narrow {
    width: 96px;
    flex: none;
}

.ob-actions {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ob-status {
    font-size: 0.8125rem;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

/* ── Exam-form chrome — LIGHT DEFAULTS (exam-canvas-dark-theme brick) ──────────────
   These classes hold the EXACT pre-brick inline-hex values so light mode is byte-for-byte
   unchanged. The hardcoded ExamForm.razor / ComparisonBaselineTabs.razor inline styles
   (background:#fff, #343a40 header, #f8f9fa tab bar, body text/borders) never responded to
   the DX theme — in dark the canvas sections rendered on a WHITE form base. The dark-mode
   overrides live in elevation-dark.css (the dark-only layer); this file is the light SSOT.
   Colours are externalised to a stylesheet (not an inline <style> in interactive markup) to
   avoid the Blazor double-mount trap (klyncexam-72a3). */
.ke-exam-root         { background: #fff; }
.ke-exam-title        { color: #343a40; }
.ke-exam-body-text    { color: #212529; }
.ke-exam-muted        { color: #6c757d; }
.ke-exam-template-row { border-bottom: 1px solid #dee2e6; color: #212529; }
.ke-exam-notice       { background: #fff3cd; border-top: 1px solid #ffc107; }
.ke-exam-notice-text  { color: #856404; }
.ke-red-flags-notice  { background: var(--dxds-color-surface-danger-deep-rest); border-top: 1px solid var(--dxds-color-border-danger-default-rest); }
.ke-red-flags-notice-text { color: var(--dxds-color-content-danger-default-rest); }
.ke-red-flag-answer   { color: var(--dxds-color-content-danger-default-rest); }
.ke-exam-header       { padding: 8px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; flex-shrink: 0; position: relative; }
.ke-exam-patient      { min-width: 180px; flex-shrink: 0; }
.ke-exam-patient-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.ke-exam-save-state   { font-size: 11px; font-weight: 400; }
.ke-exam-form-name    { font-weight: 600; color: var(--dxds-color-content-neutral-default-rest); }
.ke-exam-header-status      { flex: 1000 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 13px; color: var(--dxds-color-content-neutral-subdued-rest); }
.ke-exam-header-status > .ke-amended-label { flex-shrink: 0; }
.ke-exam-header-status-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 575.98px) {
    .ke-exam-header       { flex-wrap: nowrap; padding: 8px 12px; }
    .ke-exam-patient      { min-width: 0; flex: 1 1 auto; }
    .ke-exam-patient-name { flex-wrap: wrap; row-gap: 2px; }
    .ke-exam-patient-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
}

/* ── voice-surface-rejected-fields (klyncexam-6rc1) badge + detail list — CHROME, so DX Fluent
   --dxds-* design tokens ONLY (U10); never --color-* (reserved for the clinical substrate) and
   never hardcoded hex. Net-new classes — deliberately NOT merged into .ke-exam-notice/
   .ke-exam-notice-text above, which drive the separate Complete-commit "_rejections" list. */
.ke-voice-reject-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    height: 20px;
    min-width: 20px;
    border: none;
    border-radius: 10px;
    background: var(--dxds-color-surface-danger-default-rest);
    color: var(--dxds-color-content-neutral-default-static-dark-rest);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}
.ke-voice-reject-badge i { font-size: 11px; }


/* ── Unified exam-history tab strip ─────────────────────────────────────────────────────────── */
/* Themed via --color-* tokens; no hardcoded hex (app flips light↔dark). */
.ke-cmp-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    flex-shrink: 0;
    padding: 8px 16px;
    background: var(--dxds-color-surface-neutral-subdued-rest);
    border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest);
}
.ke-cmp-exams,
.ke-cmp-baseline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.ke-cmp-baseline {
    gap: 8px;
}
.ke-cmp-tabs .ke-cmp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--dxds-color-content-neutral-default-rest);
}
.ke-cmp-tabs .ke-cmp-chip:not(.ke-cmp-chip-active) {
    background: var(--dxds-color-surface-neutral-default-rest);
    border-color: var(--dxds-color-border-neutral-default-rest);
    font-weight: 400;
}
.ke-cmp-tabs .ke-cmp-chip-active {
    background: var(--dxds-color-surface-primary-subdued-rest);
    border-color: var(--dxds-color-border-primary-default-rest);
    color: var(--dxds-color-content-primary-default-rest);
    font-weight: 600;
}
.ke-cmp-baseline-label {
    font-size: 12px;
    color: var(--dxds-color-content-neutral-subdued-rest);
}
.ke-fill-page {
    background: var(--dxds-color-surface-neutral-subdued-rest);
}
.ke-fill-section {
    margin: 16px;
    background: var(--dxds-color-surface-neutral-default-rest);
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
.ke-fill-block {
    margin-top: 8px;
    border-top: 2px solid var(--dxds-color-border-neutral-default-rest);
}
.ke-fill-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px 0;
}
.ke-fill-block-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--dxds-color-content-neutral-default-rest);
}
.ke-amended-label {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dxds-color-content-primary-default-rest);
    background: var(--dxds-color-surface-primary-subdued-rest);
}
.ke-answer-list {
    list-style: none;
    margin: 16px;
    padding: 0;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
    border-radius: 8px;
    background: var(--dxds-color-surface-neutral-default-rest);
    font-size: 0.9375rem;
}
.ke-answer-list-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) minmax(64px, max-content);
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--dxds-color-border-neutral-subdued-rest);
    color: var(--dxds-color-content-neutral-default-rest);
}
.ke-answer-list-row:last-child { border-bottom: none; }
.ke-answer-list-quiet { color: var(--dxds-color-content-neutral-subdued-rest); }
.ke-answer-list-number { color: var(--dxds-color-content-neutral-subdued-rest); }
.ke-answer-list-yes { font-weight: 700; }
.ke-answer-list-none { font-style: italic; }
.ke-amend-history-title {
    margin: 0;
    padding: 10px 24px;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: var(--dxds-color-content-neutral-default-rest);
    border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest);
}
.ke-amend-history > .settings-error {
    margin: 12px 24px;
}
.ke-amend-entry {
    padding: 12px 24px;
}
.ke-amend-entry-form {
    margin-right: 6px;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: var(--dxds-color-content-neutral-default-rest);
    background: var(--dxds-color-surface-neutral-subdued-rest);
}
.ke-amend-entry + .ke-amend-entry {
    border-top: 1px solid var(--dxds-color-border-neutral-default-rest);
}
.ke-amend-entry-when {
    font-size: 12px;
    color: var(--dxds-color-content-neutral-subdued-rest);
}
.ke-amend-entry-reason {
    margin: 4px 0 8px;
    font-size: 14px;
    color: var(--dxds-color-content-neutral-default-rest);
}
.ke-amend-entry-changes {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: var(--dxds-color-content-neutral-default-rest);
}
.ke-amend-change-label {
    font-weight: 600;
}
.ke-amend-entry-none {
    margin: 0;
    font-size: 13px;
    font-style: italic;
    color: var(--dxds-color-content-neutral-subdued-rest);
}
.ke-cmp-mark {
    color: var(--dxds-color-content-success-default-rest);
}
.ke-cmp-tabs .ke-cmp-baseline-btn {
    height: 32px;
    border-radius: 6px;
    border-color: var(--dxds-color-border-success-default-rest);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ===== from PostureSettings.razor (posture-appearance brick 2) ===== */

/* 3-column responsive grid: settings | anterior preview | lateral preview.
   D-3a: single-column on mobile, 3-column on wide (>1100px). */
.ps-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    /* The app-shell @Body region is overflow:hidden (full-bleed canvas host), so this
       page must be its own scroll container: height:100% + overflow-y:auto. */
    height: 100%;
    overflow-y: auto;
    /* No top padding: the sticky .ps-header pins to the scroll container's content-box top, so a
       top padding would leave an uncovered strip that scrolled content peeks through. The header's
       own padding supplies the top spacing. Sides + bottom keep 1rem. */
    padding: 0 24px 1rem;
    box-sizing: border-box;
    align-items: flex-start;
    background: inherit;
}

@media (min-width: 1100px) {
    .ps-page {
        /* Settings column CAPPED (was 1fr → stretched the controls full-width); previews get
           more room. A trailing 1fr track absorbs the leftover width so the grid tracks fill the
           container: the full-width .ps-header (grid-column 1/-1) then spans the whole page, while
           the three content columns still pack left with the empty 1fr as trailing space. */
        grid-template-columns: minmax(300px, 400px) minmax(260px, 360px) minmax(260px, 360px) 1fr;
        overflow-y: unset; /* grid cols own their own overflow at wide widths */
    }
    .ps-settings-col {
        overflow-y: auto;
        max-height: 100vh;
    }
    /* Previews stay visible while the settings column scrolls — desktop only. At narrow widths the
       grid is a single column, so two sticky-top:0 preview panels would stack and overlap on scroll
       (klyncexam-6xqp): keep them in normal flow below 1100px. */
    .ps-preview-col {
        position: sticky;
        top: 0;
        align-self: start;
    }
}

.ps-settings-col {
    /* Settings column — all controls live here. */
}

.ps-controls {
    /* Inner wrapper — retains existing max-width guard. */
    max-width: 520px;
}

.ps-preview-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Sticky-visible on desktop only — see the @media (min-width: 1100px) rule above. Below that
       the panels flow normally so they don't overlap when the single-column page scrolls. */
}

.ps-heading {
    margin: 0 0 1rem;
    font-weight: 700;
}

/* Full-width sticky header (klyncexam-6xqp): pins the page title + Save/Reset above the
   scrolling settings column so the actions never fall below the fold on a tablet. Spans all
   grid columns; bleeds over the .ps-page 1rem padding so the background reaches the page edges
   and no scrolled content peeks past it. Chrome — DX Fluent tokens only (U10). */
.ps-header {
    grid-column: 1 / -1;
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    flex-wrap: wrap;
    /* Span the grid content-box (grid-column 1/-1) with NO side bleed: bleeding -1rem pushed the bar
       past the content-box into the scroll container's scrollbar gutter, clipping the Reset button.
       Staying within the content-box keeps Save/Reset clear of the scrollbar with a real right margin. */
    margin: 0;
    padding: 8px 0;
    background: inherit;
}

/* Neutralise the standalone spacing the heading/actions carried inside the scroll column so
   both sit centred on the header row. */
.ps-header .ps-heading {
    margin: 0;
}

.ps-header .ps-actions {
    margin-top: 0;
}

.ps-section {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
    border-radius: 4px;
}

.ps-section-title {
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: var(--dxds-color-content-neutral-subdued-rest);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.ps-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}

.ps-hint {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ps-label {
    min-width: 180px;
    font-size: 0.875rem;
}

.ps-rgba-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.ps-opacity-label {
    font-size: 0.8rem;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ps-opacity-spin {
    width: 120px;
}

.ps-color-input {
    width: 36px;
    height: 28px;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
    border-radius: 4px;
    cursor: pointer;
    padding: 1px 2px;
}

.ps-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.ps-reset-btn {
    margin-left: auto;
}

.ps-status {
    font-size: 0.8125rem;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ps-error {
    font-size: 0.8125rem;
    color: var(--dxds-color-content-danger-default-rest);
}

.ps-preview-pane {
    /* Kept for backward-compat; new layout uses .ps-preview-col instead. */
    display: none;
}

.ps-preview-title {
    font-weight: 600;
    font-size: 0.875rem;
    margin: 0;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ps-preview-col-label {
    font-weight: 600;
    font-size: 0.875rem;
    margin: 0;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ps-drag-hint {
    font-size: 0.75rem;
    display: block;
}

.ps-preview-canvas {
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
    border-radius: 4px;
    background: var(--dxds-color-surface-neutral-subdued-rest);
    width: 100%;
    max-width: 280px;
    height: auto;
    cursor: crosshair; /* hint that pills are draggable */
    display: block;
}

/* ── Export Settings page (/export-settings) ───────────────────────────────────────────────── */
/* Mirrors ps-* pattern; prefix es-* to avoid collisions. D-12: no inline <style> in razor. */

.es-page {
    padding: 1.5rem;
    max-width: 640px;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .es-page { padding: 1rem; }
}

.es-controls {
    max-width: 520px;
}

.es-heading {
    margin: 0 0 1rem;
    font-weight: 700;
}

.es-section {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
    border-radius: 6px;
}

.es-section-title {
    font-weight: 600;
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--dxds-color-content-neutral-subdued-rest);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.es-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.es-field:last-child {
    margin-bottom: 0;
}

.es-label {
    min-width: 160px;
    font-size: 0.875rem;
    color: var(--dxds-color-content-neutral-default-rest);
}

.es-hint {
    font-size: 0.8125rem;
    color: var(--dxds-color-content-neutral-subdued-rest);
    margin: 0.5rem 0 0;
}

.es-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.es-reset-btn {
    margin-left: auto;
}

.es-status {
    font-size: 0.8125rem;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.es-error {
    font-size: 0.8125rem;
    color: var(--dxds-color-content-danger-default-rest);
}

/* patient-fill-give-and-fill (klyncexam-7z3s) — bare /fill/{token} patient layout.
   Centered single-column card; no clinic chrome. DX tokens so it themes with the rest. */
.ke-patientfill-root {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    background: var(--dxds-color-surface-neutral-subdued-rest);
}

.ke-patientfill-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--dxds-color-border-neutral-subdued-rest);
    background: var(--dxds-color-surface-neutral-default-rest);
}

.ke-patientfill-body {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 24px 16px 48px;
}

.ke-patientfill-card {
    width: 100%;
    max-width: 760px;
    background: var(--dxds-color-surface-neutral-default-rest);
    border: 1px solid var(--dxds-color-border-neutral-subdued-rest);
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.ke-patientfill-practice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--dxds-color-border-neutral-subdued-rest);
}

.ke-patientfill-practice-logo {
    max-height: 48px;
    max-width: 200px;
    object-fit: contain;
}

.ke-patientfill-practice-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--dxds-color-content-neutral-default-rest);
}

.ke-patientfill-message {
    text-align: center;
    padding: 32px 16px;
}

.ke-terms-inline {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ke-terms-inline h1 {
    font-size: 20px;
    margin: 0;
}

.ke-patientfill-dob {
    width: 100%;
    max-width: 220px;
}

.ke-patientfill-message h1 {
    font-size: 20px;
    margin-bottom: 8px;
    color: var(--dxds-color-content-neutral-default-rest);
}

.ke-patientfill-message p {
    color: var(--dxds-color-content-neutral-subdued-rest);
}

/* /give-form: SearchAsync returns up to 50 patients; an uncapped list ran ~1649px tall (49ym #1). */
.ke-giveform-link {
    --dxbl-text-edit-font-family: monospace;
}

.ke-giveform-patient {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ke-giveform-patient-dob {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ke-giveform-ways {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.ke-giveform-way {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--dxds-color-border-neutral-subdued-rest);
    border-radius: 8px;
    background: var(--dxds-color-surface-neutral-default-rest);
}

.ke-giveform-way-icon {
    font-size: 24px;
    color: var(--dxds-color-content-neutral-default-rest);
}

.ke-giveform-way-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.ke-giveform-way-text {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

/* danger-if-redflags (klyncexam-5ul8) — DOM-overlay widgets (e.g. dropdown's native
   <select>) paint over the canvas row, so the canvas danger rect can't tint them.
   canvas-section.ts adds .klx-component-danger to the overlay host when its
   component's answer matches its danger_if. Colours from the substrate danger tokens
   (U10 — no hardcoded hex); v1 parity: exam-canvas.css .klx-component-danger. */
.klx-component-danger {
    outline: 2px solid var(--color-border-danger);
    outline-offset: 1px;
    background: var(--color-bg-danger-subtle);
}


.ke-voice-consent-problem {
    margin: 16px 0 0;
    color: var(--dxds-color-content-danger-default-rest);
}

/* ── Home.razor (shell-ia-flow Task 2) — task-first landing hub. Plain <a>/NavLink cards
   (no DX action-card primitive exists), themed entirely via --dxds-* tokens (U10) so it flips
   light↔dark with the rest of the chrome. Responsive grid: cards wrap at narrow widths. ── */
.ke-home-page {
    height: 100%;
    overflow-y: auto;
    padding: 2rem;
    box-sizing: border-box;
}

.ke-home-heading {
    margin: 0 0 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dxds-color-content-neutral-default-rest);
}

.ke-home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    max-width: 960px;
}

.ke-home-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.25rem;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
    border-radius: var(--radius-lg, 8px);
    background: var(--dxds-color-surface-neutral-default-rest);
    color: var(--dxds-color-content-neutral-default-rest);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ke-home-card:hover {
    background: var(--dxds-color-surface-neutral-deep-hovered);
    border-color: var(--dxds-color-border-primary-default-rest);
}

.ke-home-card-icon {
    font-size: 1.75rem;
    color: var(--dxds-color-content-primary-default-rest);
}

.ke-home-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dxds-color-content-neutral-default-rest);
}

.ke-home-card-desc {
    font-size: 0.8125rem;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

/* quick-launch-pins: pinned-forms grid (D24). DX-composed — no DxCardView primitive exists in
   DevExpress Blazor (confirmed via dxdocs search); reuses the .ke-home-card visual language,
   with a small DxButton unpin action layered top-right of each card. */
.ke-home-pinned-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    max-width: 960px;
    margin-bottom: 2rem;
}

.ke-home-pinned-card {
    position: relative;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
    border-radius: var(--radius-lg, 8px);
    background: var(--dxds-color-surface-neutral-default-rest);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ke-home-pinned-card:hover {
    background: var(--dxds-color-surface-neutral-deep-hovered);
    border-color: var(--dxds-color-border-primary-default-rest);
}

.ke-home-pinned-card-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.25rem;
    padding-right: 2.5rem;
    color: var(--dxds-color-content-neutral-default-rest);
    text-decoration: none;
}

.ke-home-pinned-card-icon {
    font-size: 1.75rem;
    color: var(--dxds-color-content-primary-default-rest);
}

.ke-home-pinned-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dxds-color-content-neutral-default-rest);
}

.ke-home-pinned-card-unpin {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.ke-home-pinned-empty {
    margin-bottom: 2rem;
    padding: 1rem 1.25rem;
    max-width: 960px;
    border: 1px dashed var(--dxds-color-border-neutral-default-rest);
    border-radius: var(--radius-lg, 8px);
    color: var(--dxds-color-content-neutral-subdued-rest);
    font-size: 0.875rem;
}

/* Blazor reconnect banner (App.razor #components-reconnect-modal). Hidden until Blazor adds its
   own components-reconnect-show class. A deploy-killed circuit ('rejected') reloads itself via
   blazor-reconnect.ts, so this is only ever seen during a real network drop.
   U10: DX Fluent tokens only, 8-point spacing. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 2147483647;
    padding: 8px 16px;
    text-align: center;
    font-size: 0.875rem;
    background: var(--dxds-color-surface-warning-subdued-rest);
    color: var(--dxds-color-content-warning-default-rest);
    border-bottom: 1px solid var(--dxds-color-border-warning-default-rest);
}

#components-reconnect-modal.components-reconnect-show {
    display: block;
}

/* ── Terms & Privacy page (/terms) — terms-acceptance / klyncexam-3cu1.1 ──
   Typography only. Width and padding come from .ke-patientfill-card (the page uses
   PatientFillLayout), so nothing here re-declares a measure — a second max-width would fight the
   card rather than compose with it. U10: colours from --dxds-* only; 8-point spacing scale.

   TOKEN NOTE (verified in-browser, not assumed): body text is
   --dxds-color-content-neutral-default-rest (#161616). It is NOT
   --dxds-color-content-neutral-default-rest's near-namesake
   --dxds-color-content-PRIMARY-default-rest, which is DX's brand BLUE (#0f6cbd) and turned this
   whole page blue on the first attempt. "Primary" in DX Fluent means brand, not primary text. */
.ke-terms {
    color: var(--dxds-color-content-neutral-default-rest);
    line-height: 1.6;
}

.ke-terms h1 { margin: 0 0 8px; }
.ke-terms h2 { margin: 40px 0 8px; }
.ke-terms h3 { margin: 24px 0 8px; font-size: 1.05rem; }
.ke-terms p  { margin: 0 0 16px; }
.ke-terms ul { margin: 0 0 16px; padding-left: 24px; }
.ke-terms li { margin-bottom: 8px; }

.ke-terms hr {
    margin: 40px 0;
    border: 0;
    /* --dxds-color-border-default-rest is UNDEFINED in this theme (verified). The real
       hairline token is --dxds-color-border-neutral-default-rest (#d3d3d2). */
    border-top: 1px solid var(--dxds-color-border-neutral-default-rest);
}

.ke-terms-version {
    margin: 0 0 24px;
    font-size: 0.875rem;
    color: var(--dxds-color-content-neutral-deep-rest);
}

/* ── onboarding-wizard (O2) — /onboarding page. U10: --dxds-* tokens directly. ─────────────── */

.ob-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
}

.ob-shell {
    --ob-wash: linear-gradient(165deg, #e4f6fb 0%, #eeeffc 46%, #fdf0e6 100%);
    --ob-done: #30c1a6;
    --ob-display: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
    min-height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
}

[data-theme="dark"] .ob-shell {
    --ob-wash: linear-gradient(165deg, #14284a 0%, #1c1e45 50%, #2c1c3c 100%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .ob-shell {
        --ob-wash: linear-gradient(165deg, #14284a 0%, #1c1e45 50%, #2c1c3c 100%);
    }
}

.ob-work {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
    padding: 20px clamp(16px, 6vw, 72px) 32px;
}

.ob-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ob-brand {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    font-family: var(--ob-display);
    font-weight: 700;
    font-size: 30px;
    line-height: 0.9;
    color: var(--dxds-color-content-neutral-default-rest);
}

.ob-brand .ke-brand-wordmark {
    height: 41px;
    width: auto;
    display: block;
}

.ob-brand span {
    font-weight: 400;
    font-size: 20px;
    line-height: 1.1;
    margin-left: 6px;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ob-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 880px;
    margin-inline: auto;
}

.ob-eyebrow {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ob-back {
    margin-right: 14px;
    padding: 4px 10px;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    text-transform: none;
    color: var(--dxds-color-content-neutral-default-rest);
}

.ob-back:disabled {
    cursor: default;
    opacity: 0.5;
}

.ob-heading {
    margin: 6px 0 0;
    font-family: var(--ob-display);
    font-weight: 700;
    font-size: clamp(28px, 4.2vw, 40px);
    line-height: 1.1;
    text-wrap: balance;
}

.ob-rail {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 16px;
    padding: 28px 28px 32px;
    border-radius: 28px;
    background: var(--ob-wash);
}

.ob-rail-art {
    position: absolute;
    right: -110px;
    bottom: -60px;
    width: min(430px, 46vh);
    max-width: none;
    height: auto;
    pointer-events: none;
}

.ob-rail-brand {
    display: none;
}

.ob-rail-title {
    position: relative;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ob-steps {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ob-steps li {
    display: flex;
}

.ob-step-btn {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    width: 100%;
    padding: 0 0 22px;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: var(--dxds-color-content-neutral-subdued-rest);
    cursor: default;
}

.ob-step-btn::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 30px;
    bottom: 0;
    width: 2px;
    background: var(--dxds-color-border-neutral-default-rest);
}

.ob-steps li:last-child .ob-step-btn {
    padding-bottom: 0;
}

.ob-steps li:last-child .ob-step-btn::before {
    display: none;
}

.ob-step-dot {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--dxds-color-border-neutral-default-rest);
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
    background: var(--dxds-color-surface-neutral-default-rest);
}

.ob-step-name {
    font-weight: 600;
    padding-top: 4px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ob-step-note {
    display: block;
    font-weight: 400;
    font-size: 13px;
}

.ob-step-btn--done {
    color: var(--dxds-color-content-neutral-default-rest);
}

.ob-step-btn--done:not(:disabled) {
    cursor: pointer;
}

.ob-step-btn--done .ob-step-dot {
    background: var(--ob-done);
    border-color: var(--ob-done);
    color: var(--dxds-color-surface-neutral-default-rest);
}

.ob-step-btn--done::before {
    background: var(--ob-done);
}

.ob-step-btn--done:not(:disabled):hover .ob-step-name {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ob-step-btn--shown {
    color: var(--dxds-color-content-neutral-default-rest);
}

.ob-step-btn--shown:not(.ob-step-btn--done) .ob-step-dot {
    border-color: var(--dxds-color-content-primary-default-rest);
    color: var(--dxds-color-content-primary-default-rest);
}

.ob-step-btn--shown.ob-step-btn--done .ob-step-dot {
    outline: 2px solid var(--dxds-color-content-primary-default-rest);
    outline-offset: 2px;
}

.ob-step-btn:focus-visible {
    outline: 2px solid var(--dxds-color-content-primary-default-rest);
    outline-offset: 2px;
}

.ob-rail-foot {
    position: relative;
    margin: 6px 0 0;
    font-size: 13px;
    max-width: 24ch;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ob-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.ob-tile {
    justify-content: flex-start;
    min-height: 72px;
    padding: 14px 16px;
    border-radius: 16px;
    text-align: left;
}

.ob-tile--selected {
    border-color: var(--dxds-color-content-primary-default-rest);
    background: var(--dxds-color-surface-primary-subdued-rest);
}

.ob-tile-code {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--dxds-color-surface-primary-subdued-rest);
    color: var(--dxds-color-content-primary-default-rest);
}

.ob-tile--selected .ob-tile-code {
    background: var(--dxds-color-surface-primary-default-rest);
    color: var(--dxds-color-content-neutral-default-static-dark-rest);
}

.ob-tile-name {
    font-weight: 600;
}

@media (max-width: 860px) {
    .ob-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }

    .ob-rail {
        order: -1;
        margin: 12px 16px 0;
        padding: 18px 20px 20px;
        gap: 14px;
        border-radius: 22px;
    }

    .ob-rail-art {
        width: 170px;
        right: -56px;
        bottom: -58px;
        opacity: 0.3;
    }

    .ob-rail-brand {
        display: flex;
        position: relative;
        font-size: 34px;
    }

    .ob-rail-brand .ke-brand-wordmark {
        height: 48px;
    }

    .ob-rail-brand span {
        font-size: 22px;
    }

    .ob-rail-foot,
    .ob-topbar .ob-brand {
        display: none;
    }

    .ob-step-name {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .ob-topbar {
        justify-content: flex-end;
    }

    .ob-steps {
        flex-direction: row;
        max-width: calc(100% - 104px);
    }

    .ob-steps li {
        flex: 1 1 0;
        min-width: 0;
    }

    .ob-steps li:last-child {
        flex: 0 0 auto;
    }

    .ob-step-btn {
        grid-template-columns: minmax(0, 1fr);
        padding: 0;
    }

    .ob-step-btn::before {
        left: 34px;
        right: 4px;
        top: 14px;
        bottom: auto;
        width: auto;
        height: 2px;
    }

    .ob-work {
        padding-top: 12px;
        gap: 20px;
    }
}

.ob-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.ob-choice-card {
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.ob-choice-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px;
}

.ob-choice-text {
    font-size: 13px;
    color: var(--dxds-color-content-neutral-subdued-rest);
    margin: 0 0 10px;
}

.ob-list {
    font-size: 13px;
    margin: 0 0 12px;
    padding-left: 18px;
}

.ob-review-block {
    margin-bottom: 14px;
}

.ob-review-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--dxds-color-content-neutral-subdued-rest);
    margin: 0 0 4px;
}

.ob-review-item {
    font-size: 14px;
    margin: 0 0 2px;
}

.ob-step {
    padding: 8px 0 16px;
}

.ob-step-lead {
    color: var(--dxds-color-content-neutral-subdued-rest);
    font-size: 13px;
    margin-bottom: 16px;
}

.ob-field {
    margin-bottom: 12px;
}

.ob-field-row {
    display: flex;
    gap: 12px;
}

.ob-field-row .ob-field {
    flex: 1;
}

@media (max-width: 600px) {
    .ob-field-row { flex-wrap: wrap; }
    .ob-field-row .ob-field { flex: 1 1 0; min-width: 0; }
    .ob-field-row > .ob-field:first-child:not(:only-child) { flex-basis: 100%; }
}

.ob-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--dxds-color-content-neutral-subdued-rest);
    margin-bottom: 4px;
}

.ob-carryover {
    background: var(--dxds-color-surface-neutral-default-rest);
    border: 1.5px solid var(--dxds-color-surface-primary-subdued-rest);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}

.ob-carryover-heading {
    font-size: 14px;
    font-weight: 600;
    color: var(--dxds-color-content-neutral-default-rest);
    margin: 0 0 4px;
}

.ob-carryover-sub {
    font-size: 12px;
    color: var(--dxds-color-content-neutral-subdued-rest);
    margin: 0 0 12px;
}

.ob-carryover-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.ob-error {
    color: var(--dxds-color-content-danger-default-rest);
    font-size: 12px;
    margin-bottom: 12px;
}

.ob-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.ob-note {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--dxds-color-content-neutral-subdued-rest);
    font-size: 12px;
    width: 100%;
    max-width: 880px;
    margin: 16px auto 0;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   Settings surface — practice-settings brick (klyncexam-fwtm.2)

   Ported from main Klync v0.2: app-shell.css:47-64 (.settings-page/-head/-toolbar),
   Components/Shared/FormSection.razor.css (.settings-card*), and
   Modules/Settings/Components/LocationsSettingsPage.razor.css (the card-grid tile).

   Three deliberate departures from the source (brick decisions D10, A1, A3):

   1. HEX FALLBACKS STRIPPED. Klync writes var(--dxds-color-…, #ffffff). U10 names that pattern:
      the fallback masks an undefined token instead of failing visibly. Every token used below is
      already in service elsewhere in this file, so there is nothing to fall back to.
   2. .settings-tile IS A NEW NAME. Klync calls both the FormSection panel and the clickable
      location tile `.settings-card`, in two scoped stylesheets that never meet. In one global
      sheet they collide. Panel keeps the name; tile gets its own (A3).
   3. SPACING ON THE 8-POINT GRID, RADIUS FROM --radius-* (U10). Klync's 20px/24px padding,
      12px radius and 1px/10px pill padding are off-grid; KE has no 12px radius token.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.settings-page {
    padding: 8px 24px 32px;
    max-width: 1400px;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .settings-page { padding: 8px 16px 32px; }
}

.ke-designer-gate { display: none; }

@media (max-width: 767.98px) {
    .ke-body-region:has(> .ke-designer-gate) > :not(.ke-designer-gate) { display: none; }
    .ke-body-region > .ke-designer-gate {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 100%;
        padding: 24px;
        box-sizing: border-box;
        text-align: center;
        color: var(--dxds-color-content-neutral-default-rest);
    }
    .ke-designer-gate .bi { font-size: 2.5rem; color: var(--dxds-color-content-neutral-subdued-rest); }
    .ke-designer-gate h2 { font-size: 1.125rem; font-weight: 600; margin: 0; }
    .ke-designer-gate p { margin: 0; color: var(--dxds-color-content-neutral-subdued-rest); }
}

.settings-page-head { margin-bottom: 16px; }
/* margin-bottom 0, not Klync's 2px: U10 allows the 4px sub-grid only for in-button padding and
   icon-label gaps, so a 2px nudge is off-grid. The heading's own line-height already separates it
   from the sub-line — the nudge was never load-bearing. Same for the two rules below. */
.settings-page-head h4 { font-weight: 700; margin: 0; }
.settings-page-head h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }
.settings-page-toolbar:focus { outline: none; }
.settings-page-head p {
    color: var(--dxds-color-content-neutral-subdued-rest);
    margin: 0;
    font-size: 0.875rem;
}

.settings-page-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

/* ── FormSection panel ───────────────────────────────────────────────────────────────────────── */

.settings-card {
    background: var(--dxds-color-surface-neutral-default-rest);
    border: var(--stroke-regular) solid var(--dxds-color-border-neutral-default-rest);
    border-radius: var(--radius-xl);
    padding: 16px 24px;
    margin-bottom: 16px;
}

.settings-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.settings-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dxds-color-content-neutral-default-rest);
    line-height: 1.3;
    margin: 0;
}

.settings-card-desc {
    font-size: 0.8125rem;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.settings-card-actions {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
}

.settings-tile-meta + .settings-card-actions {
    margin-top: 8px;
}

@media (max-width: 600px) {
    .settings-page-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .settings-card-actions {
        flex-wrap: wrap;
    }
}

/* ── Location tile grid ──────────────────────────────────────────────────────────────────────── */

/* Klync builds this grid from DxFormLayout + ColSpanMd/ColSpanXl. Ported as-is, its tiles came out
   BOTTOM-aligned — a tile with a one-line description sat lower than its two-line neighbour —
   because the form-layout item is not a stretch container, so `height: 100%` on the tile has
   nothing to fill. The DX-side fix would be `::deep .dxbl-fl`, which Klync's own
   LocationsSettingsPage.razor.css header forbids ("PUBLIC selectors only — no ::deep/.dxbl-*").

   A CSS grid stretches by default, needs no media queries, and drops the DX dependency. auto-fill
   + minmax reproduces the ported breakpoints closely enough: 1 column narrow, 2 mid, 3 wide. */
.settings-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 16px;
    width: 100%;
}

/* The tile is an <a>, so it needs the link defaults reset: no underline, inherit the text colour
   instead of the link colour, and become a block so padding/height apply. Anchors (not divs with
   @onclick) so navigation survives a dropped Blazor circuit or an overlay. */
.settings-tile {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--dxds-color-surface-neutral-default-rest);
    border: var(--stroke-regular) solid var(--dxds-color-border-neutral-default-rest);
    border-radius: var(--radius-xl);
    padding: 16px 24px;
    cursor: pointer;
    height: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
    /* Contains inner flex children so long names cannot overflow the tile boundary. */
    overflow: hidden;
}

.settings-tile:hover { text-decoration: none; color: inherit; }

/* Klync uses --dxds-color-border-neutral-accessible-rest here; that token has zero prior uses in
   KE, and with the hex fallback stripped (D10) an undefined token would silently drop the hover
   affordance. -default-hovered is already in service in this file and is the semantic pair of
   -default-rest above. */
.settings-tile:hover,
.settings-tile:focus-visible {
    border-color: var(--dxds-color-border-neutral-default-hovered);
}

.settings-tile-name {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* min-width:0 is required on a flex child for text-overflow to fire. */
    min-width: 0;
    display: block;
}

.settings-tile-meta {
    color: var(--dxds-color-content-neutral-subdued-rest);
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Empty state ─────────────────────────────────────────────────────────────────────────────── */

.settings-empty {
    text-align: center;
    padding: 40px 0;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.settings-empty i {
    font-size: 2rem;
    display: block;
    margin-bottom: 8px;
}

.settings-empty p { margin: 0; }

/* ── Status line under a save button ─────────────────────────────────────────────────────────── */

.settings-status {
    font-size: 0.8125rem;
    color: var(--dxds-color-content-neutral-subdued-rest);
    margin-left: 8px;
}

.settings-error {
    font-size: 0.8125rem;
    color: var(--dxds-color-content-danger-default-rest);
    margin-top: 8px;
}

.settings-warning {
    font-size: 0.8125rem;
    color: var(--dxds-color-content-warning-default-rest, var(--dxds-color-content-danger-default-rest));
    margin: 0 0 12px;
}

/* ── Collision block: somebody else saved first ─────────────────────────────── */
/* Set apart from the ordinary actions row because it REPLACES it: what the form holds is stale, so
   an ordinary Save would be refused identically. DX tokens only — no hardcoded hex, 8-point grid. */

.settings-collision {
    border: 1px solid var(--dxds-color-border-danger-default-rest);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-top: 16px;
    background: var(--dxds-color-surface-danger-subdued-rest);
}

.settings-collision .settings-error {
    margin-top: 0;
}

/* ── Form validation messages (Blazor ValidationMessage under a DX editor) ───────────────────── */

.validation-message {
    font-size: 0.8125rem;
    color: var(--dxds-color-content-danger-default-rest);
    margin-top: 4px;
}

/* ── Email settings (/settings/email) ────────────────────────────────────────────────────────── */

.email-location-list,
.email-log-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.email-location-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest);
}

.email-location-text,
.email-log-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.email-location-editor {
    padding: 16px;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
    border-radius: var(--radius-md);
}

.email-log-row {
    padding: 8px 0;
    border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest);
}

.email-log-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.email-log-sent,
.email-log-failed {
    font-size: 0.8125rem;
    white-space: nowrap;
}

.email-log-sent { color: var(--dxds-color-content-success-default-rest, var(--dxds-color-content-neutral-subdued-rest)); }
.email-log-failed { color: var(--dxds-color-content-danger-default-rest); }

/* ── Settings hub tile (/settings) ───────────────────────────────────────────────────────────── */

.settings-tile--home { cursor: pointer; }

.settings-tile-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.settings-tile-icon {
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--dxds-color-content-primary-default-rest);
    flex-shrink: 0;
}

.settings-tile-text {
    display: flex;
    flex-direction: column;
    /* min-width:0 lets the name's ellipsis fire inside this flex child. */
    min-width: 0;
}

/* ── Back link on a settings detail page ─────────────────────────────────────────────────────── */

.settings-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--dxds-color-content-primary-default-rest);
    font-size: 0.8125rem;
    text-decoration: none;
    margin-bottom: 8px;
}

.settings-back-link:hover { text-decoration: underline; }

/* ── Branding logo upload (report-clinic-logo, klyncexam-ztaq) ───────────────────────────────── */

.settings-logo-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.settings-logo-preview,
.settings-logo-placeholder {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-xl);
    background: var(--dxds-color-surface-neutral-default-rest);
}

.settings-logo-preview {
    /* contain, not cover: a clinic's logo must not be cropped to fit a square. */
    object-fit: contain;
    border: var(--stroke-regular) solid var(--dxds-color-border-neutral-default-rest);
    padding: 8px;
}

.settings-logo-placeholder {
    border: var(--stroke-regular) dashed var(--dxds-color-border-neutral-default-rest);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dxds-color-content-neutral-subdued-rest);
    font-size: 1.5rem;
}

.settings-logo-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.settings-logo-hint {
    font-size: 0.8125rem;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

/* ── Provider numbers (practitioner-provider-numbers, klyncexam-fwtm.11) ─────────────────────────
   A repeatable list on /my-account: type, value, scope, remove. Grid rather than a table because
   U3 forbids raw <table> in chrome, and a DxGrid would be heavy furniture for four columns of
   read-only text plus one action.

   U10: colour comes from DEFINED --dxds-* tokens with no hex fallbacks — an undefined token
   silently falling through to a hardcoded hex is what put a light backdrop under a dark card
   (klyncexam-f520) and white rows under near-white text (klyncexam-49ym #1). Spacing is the
   8-point scale. */
.ke-provider-number-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.ke-provider-number-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--dxds-color-border-neutral-subdued-rest);
}
.ke-provider-number-row:last-child { border-bottom: none; }

.ke-provider-number-type {
    font-weight: 500;
    color: var(--dxds-color-content-neutral-default-rest);
}

/* The number itself is the thing being looked up, so it is monospaced — a Medicare number is read
   character by character when it is being checked against a payer's record. */
.ke-provider-number-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--dxds-color-content-neutral-default-rest);
    overflow-wrap: anywhere;
}

.ke-provider-number-scope {
    font-size: 0.8125rem;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

@media (max-width: 767px) {
    .ke-provider-number-row {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 4px;
    }
    .ke-provider-number-scope { grid-column: 1 / -1; }
}

.ke-patient-page {
    height: 100%;
    overflow-y: auto;
    padding: 0 24px 32px;
    scroll-padding-top: 240px;
    color: var(--dxds-color-content-neutral-default-rest);
}

.ke-patient-top {
    position: sticky;
    top: 0;
    z-index: 5;
    max-width: 1400px;
    padding-bottom: 16px;
}

.ke-patient-top.is-editing {
    padding-bottom: 0;
}

.ke-patient-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    max-width: 1400px;
    background: var(--dxds-color-surface-neutral-default-rest);
    border-bottom: var(--stroke-regular) solid var(--dxds-color-border-neutral-default-rest);
}

.ke-patient-avatar {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700;
    background: var(--dxds-color-surface-primary-default-rest);
    color: var(--dxds-color-content-neutral-default-on-surface-rest);
}

.ke-patient-avatar-photo {
    object-fit: cover;
    background: var(--dxds-color-surface-neutral-subdued-rest);
}

.ke-patient-photos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ke-patient-photo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.ke-patient-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 8px;
}

.ke-patient-grid .ke-patient-card-head .settings-card-title {
    margin: 0;
}

.ke-patient-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ke-hinted {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ke-info-hint {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--dxds-color-content-neutral-subdued-rest);
    cursor: help;
}

.ke-info-hint:hover,
.ke-info-hint:focus-visible {
    color: var(--dxds-color-content-primary-default-rest);
}

.ke-info-hint:focus-visible {
    outline: var(--stroke-emphasis) solid var(--dxds-color-border-primary-default-rest);
    outline-offset: 2px;
}

.ke-info-hint::after {
    content: attr(data-hint);
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    width: max-content;
    max-width: min(280px, calc(100vw - 32px));
    padding: 8px 12px;
    border: var(--stroke-regular) solid var(--dxds-color-border-neutral-default-rest);
    border-radius: var(--radius-md);
    background: var(--dxds-color-surface-neutral-default-rest);
    color: var(--dxds-color-content-neutral-default-rest);
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.18);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    visibility: hidden;
    pointer-events: none;
}

.ke-info-hint:hover::after,
.ke-info-hint:focus-visible::after,
.ke-info-hint.is-open::after {
    visibility: visible;
}

.ke-patient-photo-thumb {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: var(--stroke-regular) solid var(--dxds-color-border-neutral-default-rest);
}

.ke-patient-photo-main {
    flex: 1 1 140px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ke-file-pick-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 4px 12px;
    font-size: 0.875rem;
    font-weight: 600;
    border: var(--stroke-regular) solid var(--dxds-color-border-neutral-default-rest);
    border-radius: var(--radius-md);
    background: var(--dxds-color-surface-neutral-default-rest);
    color: var(--dxds-color-content-neutral-default-rest);
    cursor: pointer;
    margin: 0;
}

.ke-file-pick-button:hover {
    background: var(--dxds-color-surface-neutral-deep-hovered);
}

.ke-file-pick:has(input:focus-visible) .ke-file-pick-button {
    outline: var(--stroke-emphasis) solid var(--dxds-color-border-primary-default-rest);
    outline-offset: 2px;
}

.ke-file-pick:has(input:disabled) .ke-file-pick-button {
    opacity: 0.5;
    cursor: default;
}

.ke-patient-photo-who {
    font-size: 0.8125rem;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ke-patient-header-main {
    flex: 1 1 200px;
    min-width: 0;
}

.ke-patient-header-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 1.25rem;
    font-weight: 700;
}

.ke-patient-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
    font-size: 0.8125rem;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ke-patient-header-meta > span {
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ke-patient-header-actions {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.ke-patient-tasks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
}

.ke-patient-pill {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: var(--radius-lg);
    white-space: nowrap;
    background: var(--dxds-color-surface-neutral-subdued-rest);
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ke-patient-pill-active {
    color: var(--dxds-color-content-success-default-rest);
}

.ke-inactive-tag {
    margin-left: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0 8px;
    border-radius: var(--radius-lg);
    white-space: nowrap;
    border: var(--stroke-regular) solid var(--dxds-color-border-neutral-default-rest);
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ke-patient-message {
    max-width: 1400px;
}

.ke-patient-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
    gap: 16px;
    max-width: 1400px;
    margin-top: 16px;
}

@media (max-width: 640px) {
    .ke-patient-page {
        padding: 0 16px 24px;
    }

    .ke-patient-top {
        position: static;
    }

    .ke-patient-top.is-editing {
        position: sticky;
    }

    .ke-patient-header {
        padding: 16px 0;
    }

    .ke-patient-header.is-editing {
        padding: 12px 0;
    }

    .ke-patient-header.is-editing .ke-patient-avatar,
    .ke-patient-header.is-editing .ke-patient-header-meta {
        display: none;
    }

    .ke-patient-header-actions {
        flex-basis: 100%;
        margin-left: 0;
        position: relative;
    }

    .ke-patient-header-actions .ke-info-hint {
        position: static;
    }

    .ke-patient-header-actions .ke-info-hint::after {
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
    }
}

.ke-patient-grid .settings-card {
    margin-bottom: 0;
}

.ke-patient-grid .ke-patient-open-forms {
    grid-column: 1 / -1;
}

.ke-patient-open-forms-head {
    margin: 12px 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.ke-patient-open-forms-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ke-patient-open-forms-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    padding: 6px 0;
    border-top: 1px solid var(--color-border-default);
}

.ke-patient-open-forms-name {
    flex: 1 1 200px;
    font-weight: 500;
}

.ke-patient-open-forms-when {
    color: var(--color-text-secondary);
}

.ke-patient-grid .settings-card-title {
    margin: 0 0 8px;
}

.ke-patient-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 32px;
    padding: 4px 0;
}

.ke-patient-row label,
.ke-patient-label {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ke-patient-row label {
    font-weight: 500;
}

.ke-patient-value {
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

.ke-patient-empty {
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ke-patient-actions {
    display: flex;
    gap: 8px;
    padding: 8px 0;
}

.ke-patient-editing .ke-patient-row:has(label) {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.ke-handover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 16px;
    min-height: 64px;
    border-bottom: 1px solid var(--dxds-color-border-neutral-subdued-rest);
    background: var(--dxds-color-surface-neutral-default-rest);
}

.ke-patientfill-intro {
    margin-bottom: 16px;
}

.ke-patientfill-intro h1 {
    font-size: 20px;
    margin: 0 0 4px;
    color: var(--dxds-color-content-neutral-default-rest);
}

.ke-patientfill-intro p {
    margin: 0;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ke-handover-voice {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.ke-handover-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.ke-handover-logo {
    max-height: 48px;
    max-width: 200px;
    object-fit: contain;
}

.ke-handover-practice {
    font-weight: 600;
    color: var(--dxds-color-content-neutral-default-rest);
}

.ke-handover-patient {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--dxds-color-content-neutral-default-rest);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ke-handover-k {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    padding: 8px;
    border: none;
    border-radius: 24px;
    background: transparent;
    cursor: pointer;
}

.ke-handover-k:hover,
.ke-handover-k:focus-visible {
    background: var(--dxds-color-surface-neutral-subdued-hover);
}

.ke-handover-k img {
    width: 100%;
    height: 100%;
}

.ke-handover-lock {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 16px;
    background: var(--dxds-color-surface-neutral-subdued-rest);
}

.ke-handover-lock-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 480px;
    padding: 32px 24px;
    text-align: center;
    background: var(--dxds-color-surface-neutral-default-rest);
    border: 1px solid var(--dxds-color-border-neutral-subdued-rest);
    border-radius: 8px;
}

.ke-handover-lock-card h1 {
    font-size: 20px;
    margin: 0;
    color: var(--dxds-color-content-neutral-default-rest);
}

.ke-handover-lock-card p {
    margin: 0;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.ke-handover-lock-icon {
    width: 56px;
    height: 56px;
}

.ke-exam-section-nav {
    position: sticky;
    bottom: 0;
    z-index: 101;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    background: var(--dxds-color-surface-neutral-default-rest);
    border-top: 1px solid var(--dxds-color-border-neutral-default-rest);
}

.ke-exam-section-nav-label {
    font-weight: 600;
    white-space: nowrap;
    color: var(--dxds-color-content-neutral-default-rest);
}

@media (max-width: 520px) {
    .ke-exam-section-nav-word {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (pointer: coarse) {
    .ke-posture-stepper button {
        min-height: 44px;
        min-width: 44px;
    }

    .ke-posture-stepper input[type="range"] {
        min-height: 44px;
    }

    .ke-posture-stepper .drawing-overlay-tb-swatch {
        min-width: 36px;
        min-height: 36px;
    }
}

.ke-fill-canvas-host:focus {
    outline: none;
}

.drawing-overlay-tb-swatch {
    box-shadow: 0 0 0 1px var(--color-border-default);
}

.drawing-overlay-tb-swatch.drawing-overlay-tb-swatch-active {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* ── Light: frosted surfaces over the page wash ─────────────────────────────────────────────────
   Last in the file so these single-class rules beat the base rules above. Dark mode overrides
   every one of them from elevation-dark.css with higher specificity. */

.ke-body-region {
    background: radial-gradient(ellipse 80% 70% at 100% 100%, var(--ke-wash-glow), transparent), var(--ke-wash-page);
}

.settings-card,
.settings-tile,
.ke-home-card,
.ke-home-pinned-card,
.ps-section,
.es-section {
    background: rgb(255 255 255 / 0.62);
}

.ke-grid {
    --dxds-color-surface-neutral-default-rest: transparent;
    --dxds-color-surface-neutral-default-hovered: color-mix(in srgb, var(--dxds-color-content-neutral-default-rest) 4%, transparent);
    --dxds-color-surface-neutral-subdued-rest: rgb(255 255 255 / 0.5);
    --dxbl-grid-focus-frame-color: var(--dxds-color-border-primary-default-rest);
    background: rgb(255 255 255 / 0.62);
}

.ke-results-page,
.designer-desk {
    background: transparent;
}

.ke-patient-top,
.ke-patient-header,
.ps-header,
.ke-exam-section-nav {
    background: rgb(255 255 255 / 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.ke-exam-header {
    background: var(--ke-wash-header);
}