.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

/* The nubo health logo ahead of the app's name, in the sidebar or, without one, the top bar. */
.brand-logo {
    height: 1.4rem;
    width: auto;
    margin-right: 0.6rem;
    vertical-align: -0.2rem;
    flex-shrink: 0;
}

/* The app's name beside it. A name too long for the room it has wraps onto another line, beside the
   logo, rather than being cut short: it is never clipped or ellipsised. */
/* How tall the sidebar's brand row is, and the top bar beside it, so that their lower edges line up. */
:root {
    --app-brand-row-height: 3.5rem;
}

/* Mediphany's logo, the app's only mark in the sidebar and the top bar. The file is 21px tall and
   is shown at that height, never larger, so it stays crisp. It is drawn
   for a dark ground, in light blue (#30AAE0) and white - the "Y" and the trade mark are white - so it
   is never recoloured and never put straight on a light surface: on the Azure sidebar it is 4.3:1 and
   white 7:1 or more, and in the top bar it sits on --app-partner-logo-bg (MainLayout.razor.css). */
.partner-logo {
    display: block;
    height: 1.3125rem;
    width: auto;
    max-width: 100%;
}

.notice {
    max-width: 48rem;
}

/* A chart from ReportChart. A chart of bars across is given the height of its rows by charts.js. */
.report-chart {
    max-width: 60rem;
    margin-bottom: 1rem;
}

app-chart {
    display: block;
    position: relative;
    height: 16rem;
}

/* A button at work, from BusyButton or js/progress.js. The wave takes the size of the button's text. */
.btn[aria-busy="true"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

    .btn[aria-busy="true"]:disabled {
        cursor: progress;
        opacity: 0.92;
    }

    .btn[aria-busy="true"] .nubo-wave {
        flex: none;
        width: 1.4em;
        height: 1.4em;
    }

.loading-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bs-secondary-color);
}

/* While the browser waits for the next page. js/progress.js adds is-visible. It never takes a click:
   somebody who gives up waiting can still go somewhere else. */
.page-progress {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--bs-body-bg) 55%, transparent);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s;
}

    .page-progress.is-visible {
        opacity: 1;
        visibility: visible;
    }

.page-progress-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
}

.session-bar {
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 0.5rem;
}

.patient-banner {
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 0.75rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

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

/* The case review: the summary on the left; the source, the conversation and the report draft beside it. */
.companion-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

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

    .companion-side {
        position: sticky;
        top: 4rem;
        max-height: calc(100vh - 5rem);
        overflow-y: auto;
    }
}

.companion-side > * + * {
    margin-top: 1rem;
}

.statements {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0.5rem;
}

.statement {
    padding: 0.5rem 0.5rem 0.4rem 0.75rem;
    border-left: 3px solid var(--app-border-soft);
    margin-bottom: 0.5rem;
}

.statement-abnormal {
    background-color: var(--app-attention-bg);
    border-left-color: var(--app-critical);
}

.statement-flag {
    background-color: var(--app-critical);
    color: #ffffff;
}

[data-bs-theme="dark"] .statement-flag {
    color: var(--app-accent-contrast);
}

.statement-match {
    background-color: var(--app-positive-soft);
    color: var(--app-text);
    font-weight: 500;
}

.statement-meta {
    margin-top: 0.2rem;
}

.citation {
    display: inline;
    border: 0;
    background: none;
    padding: 0;
    margin-right: 0.75rem;
    font-size: 0.8rem;
    color: var(--app-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-align: left;
}

    .citation:hover,
    .citation:focus-visible {
        color: var(--app-heading);
    }

.statement-actions .btn-link {
    padding: 0 0.5rem 0 0;
    font-size: 0.8rem;
}

.feedback-thanks {
    display: inline-block;
    font-size: 0.8rem;
    padding: 0 0.4rem;
    border-radius: 0.25rem;
    background-color: var(--app-positive-soft);
    color: var(--app-text);
}

.key-findings {
    border-left: 4px solid var(--app-accent);
}

.overview-card {
    border-left: 4px solid var(--app-secondary-swatch);
}

.exam-card {
    border-left: 4px solid var(--app-accent);
}

.source-panel {
    border-left: 4px solid var(--app-secondary-swatch);
}

    .source-panel:focus {
        outline: 2px solid var(--app-secondary-swatch);
        outline-offset: 2px;
    }

.source-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 0.75rem;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

    .source-facts dt {
        font-weight: 600;
    }

    .source-facts dd {
        margin-bottom: 0;
        overflow-wrap: anywhere;
    }

.source-text {
    white-space: pre-wrap;
    max-height: 50vh;
    overflow-y: auto;
    font-size: 0.875rem;
    padding: 0.5rem;
    border: 1px solid var(--app-border-soft);
    border-radius: 0.25rem;
    background-color: var(--app-surface);
}

.chat-log {
    max-height: 50vh;
    overflow-y: auto;
}

.chat-turn {
    border-bottom: 1px solid var(--app-border-soft);
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}

.chat-note {
    background-color: var(--app-attention-bg);
    padding: 0.4rem 0.6rem;
    border-radius: 0.25rem;
}

.filtered summary {
    cursor: pointer;
}

.case-status {
    color: var(--app-text);
    background-color: var(--app-border-soft);
}

.case-ready {
    background-color: var(--app-positive-bg);
    color: #0B2A1A;
}

.case-failed {
    background-color: var(--app-attention-bg);
    border: 1px solid var(--app-critical);
}

.profile-card .learned {
    background-color: var(--app-surface);
    padding: 0.4rem 0.6rem;
    border-radius: 0.25rem;
}

.adjust-panel {
    border-top: 1px solid var(--app-border-soft);
    padding-top: 0.75rem;
}