/*Global Variables*/
:root {
    --card-border-color: var(--border);
}

h1:focus {
    outline: none;
}

.table-header {
    font-weight: 500;
    line-height: 1.5rem;
    position: sticky;
    left: 0;
    background-color: white;
}

#blazor-error-ui {
    background: lightyellow;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    right: 0;
    left: auto;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 25rem;
    z-index: 1000;
    color: initial;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.bread-crumb {
    color: #0369a1
}

    .bread-crumb:hover {
        color: #0ea5e9;
        text-decoration: underline;
    }

/* Custom App CSS */

body {
    background-color: var(--surface-page);
}

.pulse-error {
    animation-name: transition-to-red;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    animation-timing-function: ease;
}

@keyframes transition-to-red {
    from {
    }

    to {
        color: red;
    }
}

@keyframes blink {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.8);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(255, 0, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
}

@keyframes blink-warning {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.8);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(255, 152, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0);
    }
}

.strong {
    font-weight: 700;
}

.flowsheet-label-cell {
    height: 57px;
    align-content: center;
    text-align: center;
    border-bottom: 1px solid var(--border);
    border-left: none;
    padding: 0 16px;
    border-right: 1px solid var(--border);
}

.medication-flowsheet-label-cell {
    height: 77px;
    align-content: center;
    text-align: center;
    border-bottom: 1px solid rgba(6, 6, 6, 0.84);
    border-left: none;
    padding: 0 16px;
    border-right: 1px solid rgba(6, 6, 6, 0.84);
}

.center-cell {
    text-align: center;
    vertical-align: middle;
}

.bordered-table {
    border-collapse: collapse;
    width: 10%;
}

    .bordered-table th,
    .bordered-table td {
        border: 1px solid var(--border);
        padding: 1rem;
    }

    .bordered-table th {
        background-color: #F0F2F5;
        min-width: 250px;
    }

.horizontal-spin {
    animation: spin-y 1s infinite linear; /* Adjust duration and timing function as needed */
}

@keyframes spin-y {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

.card-border {
    border-color: var(--card-border-color);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* ---- Referral detail header ---- */
.rh-data-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.rh-stat {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.rh-stat-label {
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.rh-stat-value {
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
}

.rh-vsep {
    align-self: stretch;
    width: 1px;
    min-height: 1.75rem;
    background: var(--border);
    flex: 0 0 auto;
}

.rh-org {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.rh-org-name {
    color: var(--foreground);
    font-weight: 500;
}

.rh-mini-row {
    container: rhmini / inline-size;
}

.rh-mini-cell {
    display: inline-flex;
    align-items: center;
}

@container rhmini (max-width: 1150px) {
    .rh-mini-t4 {
        display: none;
    }
}

@container rhmini (max-width: 900px) {
    .rh-mini-t3 {
        display: none;
    }
}

@container rhmini (max-width: 680px) {
    .rh-mini-t2 {
        display: none;
    }
}

.rh-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-top: 10px;
}

.rh-name {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Tags are tiered: facts read as quiet label/value pairs, and only errors and warnings stay as chips. */
.rh-fact {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    white-space: nowrap;
}

    .rh-fact-label {
        font-size: 0.66rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .rh-fact-success {
        color: var(--tone-success-fg);
        font-weight: 500;
    }

.rh-attention {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.rh-attention-label {
    margin-right: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-foreground);
}

/* EdgeTab: sideways-lr runs the label bottom-to-top without a transform, so the box's rounded, bordered side stays
   on the page side and its flat side on the edge. Rotating the box instead mirrors its corners and border too. */
.edge-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    writing-mode: sideways-lr;
    padding: 14px 7px;
    border: 1px solid var(--border);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    box-shadow: var(--shadow-card);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

    .edge-tab:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
    }

.edge-tab-quiet {
    background-color: var(--surface-raised);
    color: var(--muted-foreground);
}

    .edge-tab-quiet:hover {
        color: var(--primary);
    }

.edge-tab-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

    .edge-tab-primary:hover {
        background-color: color-mix(in srgb, var(--primary) 90%, black);
    }

/* The referral's right-edge rail: its tabs stack in one column, so they keep the same edge and never overlap. */
.edge-tabs {
    position: fixed;
    right: 0;
    top: 25%;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.selected {
    background-color: #1E88E5 !important;
}

    .selected > td {
        color: white !important;
    }

.error-count {
    color: #f44336;
    font-weight: bold;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.font-normal {
    font-weight: normal;
}

.app-main #miniHeader.referral-header-card {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 30;
    transition: opacity 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border);
    background-color: var(--surface-raised);
    box-shadow: var(--shadow-raised);
    border-top-right-radius: unset;
    border-top-left-radius: unset;
}

    .app-main #miniHeader.referral-header-card.visible {
        position: sticky;
        top: var(--app-header-height);
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

.invisible {
    display: none;
}

.text-under {
    text-decoration: underline;
}

.w-full {
    width: 100%;
}

/* No background-attachment: fixed. A fixed background repaints the whole page on every animation frame,
   which made the sidebar's width transition stutter and drag the page's layout with it. */
.env-local,
.env-development,
.env-staging,
.env-training,
.env-qa,
.env-support,
.env-unknown {
    min-height: 100vh;
    background-repeat: repeat;
}

.env-local {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Ctext%20x='20'%20y='180'%20transform='rotate(-45%2020%20180)'%20font-family='Arial,Helvetica,sans-serif'%20font-size='22'%20font-weight='700'%20fill='%23424242'%20fill-opacity='0.07'%3ELOCAL%3C/text%3E%3C/svg%3E");
}

.env-development {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Ctext%20x='20'%20y='180'%20transform='rotate(-45%2020%20180)'%20font-family='Arial,Helvetica,sans-serif'%20font-size='22'%20font-weight='700'%20fill='%232E7D32'%20fill-opacity='0.07'%3EDEV%3C/text%3E%3C/svg%3E");
}

.env-staging {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Ctext%20x='20'%20y='180'%20transform='rotate(-45%2020%20180)'%20font-family='Arial,Helvetica,sans-serif'%20font-size='22'%20font-weight='700'%20fill='%23EF6C00'%20fill-opacity='0.07'%3ESTAGING%3C/text%3E%3C/svg%3E");
}

.env-training {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Ctext%20x='20'%20y='180'%20transform='rotate(-45%2020%20180)'%20font-family='Arial,Helvetica,sans-serif'%20font-size='22'%20font-weight='700'%20fill='%236A1B9A'%20fill-opacity='0.07'%3ETRAINING%3C/text%3E%3C/svg%3E");
}

.env-qa {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Ctext%20x='20'%20y='180'%20transform='rotate(-45%2020%20180)'%20font-family='Arial,Helvetica,sans-serif'%20font-size='22'%20font-weight='700'%20fill='%236D4C41'%20fill-opacity='0.07'%3EQA%3C/text%3E%3C/svg%3E");
}

.env-support {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Ctext%20x='20'%20y='180'%20transform='rotate(-45%2020%20180)'%20font-family='Arial,Helvetica,sans-serif'%20font-size='22'%20font-weight='700'%20fill='%2300838F'%20fill-opacity='0.07'%3ESUPPORT%3C/text%3E%3C/svg%3E");
}

.env-unknown {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Ctext%20x='20'%20y='180'%20transform='rotate(-45%2020%20180)'%20font-family='Arial,Helvetica,sans-serif'%20font-size='22'%20font-weight='700'%20fill='%23AD1457'%20fill-opacity='0.07'%3EUNKNOWN%3C/text%3E%3C/svg%3E");
}

/* ---- App shell (MainLayout on Fleek's AppShell, AppHeaderActions and the referral phase bar) ----
   Layout only; colours come from theme.css tokens. AppShell owns the sidebar, the sticky header, the
   breadcrumb and the environment badge; these are only the pieces EDR puts in its slots. */
.app-main {
    padding-bottom: 1.5rem;
}

.app-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.impersonation-banner {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--tone-warning-bg);
    color: var(--tone-warning-fg);
    border-bottom: 1px solid var(--alert-warning);
    font-size: 0.875rem;
}

.impersonation-banner-text {
    flex: 1 1 auto;
    min-width: 0;
}

.impersonation-banner-core {
    opacity: 0.8;
    margin-left: 0.25rem;
}

.app-header-login {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
    height: 32px;
    border-radius: var(--radius-control);
    color: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

    .app-header-login:hover {
        background: var(--accent);
    }

.app-header-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* data-collapsible="icon" is on the sidebar only while it is collapsed to its rail. */
.app-header-brand {
    display: none;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.bb-scope:has([data-collapsible="icon"]) .app-header-brand {
    display: flex;
}

    .app-header-brand .app-brand-mark {
        display: none;
    }

.app-brand-name {
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.app-brand-mark {
    display: grid;
    place-items: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.375rem;
    border-radius: var(--radius-control);
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

@media (max-width: 767px) {
    .app-header-brand {
        display: flex;
    }

        .app-header-brand .app-brand-mark {
            display: grid;
        }
}

@media (max-width: 479px) {
    .app-brand-name {
        display: none;
    }
}

/* Reads as a search field, acts as a button: it opens the quick-search dialog. */
.app-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 32px;
    width: 240px;
    padding: 0 0.5rem 0 0.625rem;
    border: 1px solid var(--input);
    border-radius: 8px;
    background: var(--surface-card);
    color: var(--muted-foreground);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

    .app-search:hover {
        border-color: var(--primary);
    }

.app-kbd {
    margin-left: auto;
    padding: 0 0.3rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--muted);
    font-family: 'Cascadia Mono', Consolas, monospace;
    font-size: 0.65rem;
}

@media (max-width: 1023px) {
    .app-search {
        width: auto;
    }

    .app-search-text,
    .app-kbd {
        display: none;
    }
}

/* ---- Referral phase navigation (ReferralPhaseBar, ReferralPhaseTree) ----
   The bar links each phase; its pages live in the sidebar tree. */
.referral-phase-bar {
    margin-bottom: 12px;
}

.referral-phase-links {
    display: flex;
    justify-content: safe center;
    gap: 2px;
    padding: 4px;
    overflow-x: auto;
}

    .referral-phase-bar .phase-link {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        padding: 6px 12px;
        border-radius: var(--radius-control);
        color: var(--muted-foreground);
        font-size: 0.875rem;
        font-weight: 500;
        white-space: nowrap;
        text-decoration: none;
    }

        .referral-phase-bar .phase-link:hover {
            background: var(--accent);
        }

    .referral-phase-bar .phase-active {
        color: var(--primary);
        background: var(--tint-primary);
        font-weight: 600;
    }

    /* Phases the referral has not reached yet. Their pages still open, as they did before. */
    .referral-phase-bar .phase-unreached {
        opacity: 0.6;
    }

.phase-here {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--primary);
}

.phase-tree-label {
    padding: 8px 8px 2px;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.section-body {
    width: 100%;
    max-width: 2560px;
    margin: 0 auto;
    padding: 20px 24px 0;
}

.referral-content {
    padding-top: 28px;
    transition: margin 225ms cubic-bezier(0, 0, 0.2, 1);
}

.referral-body {
    width: 100%;
    max-width: 2560px;
    margin: 0 auto;
    padding: 0 40px 0 24px;
}

/* The notes drawer docks beside the page from 960px, so the page makes room for it. */
@media (min-width: 960px) {
    .referral-content.notes-open {
        margin-right: 500px;
    }
}

/* ---- UDRAI document form (fillable interview dialog + admin form-type editor preview) ---- */

/* Form and the notes panel side by side; the form takes whatever the panel leaves. */
.udrai-body {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 12px;
}

/* Places the UDRAI notes EdgeTab on the form's right edge while the notes panel is closed. */
.udrai-notes-tab {
    position: absolute;
    top: 14px;
    right: 0;
    z-index: 2;
}

.udrai-body > .udrai-doc-scroll {
    flex: 1 1 auto;
    min-width: 0;
}

/* Interview notes, docked beside the form. Scrolls independently so the note list never pushes the
   question list out of view. */
.udrai-notes {
    flex: 0 0 340px;
    max-width: 340px;
    max-height: 72vh;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--card);
}

.udrai-notes-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.udrai-notes-list {
    font-size: 0.875rem;
}

.udrai-doc-scroll {
    max-height: 72vh;
    overflow-y: auto;
    background: #e6e8eb;
    padding: 24px 16px;
}

.udrai-doc-page {
    background: #ffffff;
    max-width: 1140px;
    margin: 0 auto;
    box-shadow: 0 2px 14px rgba(15, 30, 45, 0.20);
    padding: 34px 40px;
    color: #1f2328;
    font-size: 18px;
    /* Split columns respond to the page's own width, not the viewport. */
    container: udrai-page / inline-size;
}

.udrai-table {
    border: 1px solid #b9bec4;
}

.udrai-row {
    display: flex;
    align-items: stretch;
    border-top: 1px solid #b9bec4;
}

.udrai-table > .udrai-row:first-child {
    border-top: none;
}

.udrai-cell {
    padding: 5px 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.udrai-cell-left {
    flex: 0 0 48%;
    max-width: 48%;
    border-right: 1px solid #b9bec4;
}

.udrai-cell-right {
    flex: 1 1 auto;
    min-width: 0;
}

@container udrai-page (max-width: 640px) {
    .udrai-row {
        flex-direction: column;
    }

    .udrai-cell-left {
        flex-basis: auto;
        max-width: none;
        border-right: none;
        border-bottom: 1px solid #b9bec4;
    }
}

.udrai-subfield {
    padding: 3px 0;
}

.udrai-q-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
}

.udrai-q-label {
    flex: 0 0 auto;
}

.udrai-yesno-box {
    flex: 0 0 auto;
    align-self: flex-end;
    display: flex;
    align-items: center;
    border: 1px solid #b9bec4;
    border-radius: 5px;
    padding: 3px 7px;
    background: #fbfcfd;
    max-width: 100%;
}

.udrai-toggle {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 3px 10px;
}

.udrai-toggle-opt {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: none;
    border-radius: 3px;
    background: none;
    color: inherit;
    font: inherit;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

    .udrai-toggle-opt:hover:not(:disabled) {
        background: rgba(0, 0, 0, 0.05);
    }

    .udrai-toggle-opt:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 1px;
    }

    .udrai-toggle-opt.is-selected {
        font-weight: 600;
    }

    .udrai-toggle-opt:disabled {
        cursor: default;
        color: #9aa0a6;
    }

/* Brief highlight after jumping to an outstanding question, so the interviewer can see which one. */
@keyframes udrai-flash {
    0% {
        background-color: #ffe9a8;
    }

    70% {
        background-color: #ffe9a8;
    }

    100% {
        background-color: transparent;
    }
}

.udrai-flash {
    animation: udrai-flash 1.6s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .udrai-flash {
        animation-duration: 1ms;
        background-color: #ffe9a8;
    }
}

.udrai-check-row {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}

.udrai-check-label {
    align-self: center;
    min-width: 0;
}

/* "Not asked" toggle on a skippable question — sits above the question it switches off. */
.udrai-skip {
    display: block;
    margin-bottom: 2px;
}

.udrai-disabled {
    background: #eceef0;
}

.udrai-demo-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--muted);
    /* Clears the dialog's close button, which is positioned over the top-right of the content. */
    margin-top: 6px;
}

.udrai-demo-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 18px;
    min-width: 0;
}

.udrai-demo-sep {
    align-self: stretch;
    width: 1px;
    min-height: 1.6rem;
    background: var(--border);
}

.udrai-demo-edit {
    flex: 0 0 100%;
    padding-top: 2px;
}

.udrai-demo-editable {
    cursor: pointer;
    border-radius: 3px;
    padding: 2px 6px;
    margin: -2px -6px;
    transition: background-color 120ms ease;
}

    .udrai-demo-editable:hover,
    .udrai-demo-editable:focus-visible {
        background: var(--accent);
    }

.udrai-demo-box {
    border: 1px solid #b9bec4;
    border-bottom: none;
    margin-bottom: 10px;
}

.udrai-demo-box-row {
    display: flex;
}

.udrai-demo-box-cell {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 8px;
    border-bottom: 1px solid #b9bec4;
    border-right: 1px solid #b9bec4;
    line-height: 1.2;
}

    .udrai-demo-box-cell:last-child {
        border-right: none;
    }

.udrai-demo-box-cell-2 {
    flex-grow: 2;
}

.udrai-demo-box .udrai-demo-label {
    font-size: 0.68em;
    font-weight: 400;
}

.udrai-demo-box .udrai-demo-value {
    font-size: 0.95em;
    font-weight: 400;
    min-height: 1.2em;
}

.udrai-demo-status {
    display: flex;
    align-items: center;
}

.udrai-demo-cell {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.udrai-demo-label {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.udrai-demo-value {
    font-size: 0.92rem;
    font-weight: 500;
}

.udrai-demo-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Secure share history renders messages authored in the rich text editor, so the cell has to style
   the editor's own markup. Blueprint's preflight zeroes margin and padding
   globally and drops list markers, so paragraph spacing and list indentation are restored here. */
.secure-share-message {
    max-width: 320px;
    max-height: 10em;
    overflow-y: auto;
    overflow-wrap: anywhere;
}

/* Older messages predate the editor and are plain text; their line breaks only survive via CSS. */
.secure-share-message-plain {
    white-space: pre-wrap;
}

.secure-share-message p {
    margin: 0 0 0.5em;
}

    .secure-share-message p:last-child {
        margin-bottom: 0;
    }

.secure-share-message ul,
.secure-share-message ol {
    margin: 0 0 0.5em;
    padding-left: 1.5em;
}

.secure-share-message ul {
    list-style: disc outside;
}

.secure-share-message ol {
    list-style: decimal outside;
}

.secure-share-message h1,
.secure-share-message h2,
.secure-share-message h3,
.secure-share-message h4,
.secure-share-message h5,
.secure-share-message h6 {
    margin: 0 0 0.25em;
    font-weight: 600;
}

.secure-share-message a {
    color: var(--primary);
}

/* ---- Referral summary layout ---- */
.rh-layout {
    display: flex;
    align-items: stretch;
    gap: 16px;
}

.rh-main {
    flex: 1 1 auto;
    min-width: 0;
}

.rh-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ---- Phones and small tablets (docs/design-language.md, Responsive) ----
   768px is Blueprint's sidebar breakpoint: below it the sidebar is a sheet that carries the referral's phases,
   so the phase bar gives way to a read-only label for the phase being viewed. */
.referral-phase-current {
    display: none;
}

@media (max-width: 767px) {
    .referral-phase-bar {
        display: none;
    }

    .referral-phase-current {
        display: block;
        margin-bottom: 12px;
    }

    .referral-phase-current-label {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        font-weight: 600;
    }

    .referral-content {
        padding-top: 12px;
    }

    .referral-body {
        padding: 0 12px;
    }

    /* The summary's actions become a row above the facts instead of a column beside them. */
    .rh-layout {
        flex-direction: column-reverse;
        gap: 4px;
    }

    .rh-vsep {
        display: none;
    }

    .rh-actions {
        align-self: flex-end;
        flex-direction: row;
    }
}

@media (max-width: 599px) {
    /* The rail moves to the bottom edge and its tabs read horizontally, clear of the page's content. */
    .edge-tabs {
        top: auto;
        bottom: 16px;
        flex-direction: row;
    }

        .edge-tabs .edge-tab {
            padding: 8px 14px;
            writing-mode: horizontal-tb;
        }

}