/* Clinic dashboard — issue 1736.
 *
 * A calm, summary-first workspace distinct from the internal admin console.
 * Colours come exclusively from tokens.css so light/dark themes both work
 * (enforced by scripts/check_dark_mode.py --strict). */

.clin-shell {
    min-height: 100vh;
    background: var(--bg-secondary);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;

    /* --- List-row geometry, declared once for every clickable list row ---

       A row (appointment, recent intake) is a link that BLEEDS past its list
       box by --clin-row-bleed on each side, so its hover highlight reads as a
       full-width row rather than a floating chip. It eats into .clin-panel's
       own 1.4rem side padding, so the bleed must stay well under that.

       Its horizontal padding is therefore bleed + inset, NOT bleed alone.
       When the two were equal the row's content box landed exactly on the
       list's edge: text sat at x=0 of the <li>, which is where .clin-appt-next
       paints its 3px accent rail and where the <li>'s rounded corner curves
       in — so "Today 2:25 PM" collided with the rail. --clin-row-inset is
       that clearance, and it is the ONLY number to change to move row text. */
    --clin-row-bleed: 0.5rem;
    --clin-row-inset: 0.55rem;
    --clin-row-pad-x: calc(var(--clin-row-bleed) + var(--clin-row-inset));

    /* Width of the queue row's time column. A FIXED length, not `max-content`:
       each row is its own grid, so only a fixed track makes the patient names
       line up down the list. Wide enough for the longest label the formatter
       emits ("Tomorrow 10:30 AM"). Below 800px the time moves onto its own
       line and this stops applying. */
    --clin-row-time-col: 8.5rem;
}

/* ---- Header ---- */
.clin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.5rem;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 20;
}

/* ONE alignment mode for all three children (mark / wordmark / pill).
   This used to be `align-items: baseline` with the mark opting out via
   `align-self: center`. Those two modes only agree while the flex line's
   cross size equals the content height: baseline START-aligns the
   baseline-sharing group, while `center` centres against the LINE. The
   <=800px rule below gives .clin-brand a 44px touch target, which inflated
   the line past the ~31px content — so the swirl fell ~7px below the
   wordmark and pill on mobile. Centring everything is invariant to box
   height; do not reintroduce a per-child alignment override here. */
.clin-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--text-primary);
}

/* Audri swirl (base `.audri-mark` in base.css); 1em svg => sized here. */
.clin-brand-mark {
    font-size: 1.5rem;
}

.clin-brand-text {
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.01em;
}

.clin-brand-sub {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 0.1rem 0.5rem;
}

.clin-header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.clin-console-link {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-sm);
}

.clin-console-link:hover {
    color: var(--color-primary);
    background: var(--bg-tertiary);
}

/* Active nav state (spec 2026-07-21 D9, issue 1901, PR6): the Security link
   highlights on the device-management surface, consistent with the admin nav. */
.clin-console-link.is-active {
    color: var(--color-primary);
    background: var(--bg-tertiary);
    font-weight: 600;
}

/* Top padding is deliberately small: on the pages that have one, `.clin-back`
   is a 44px touch target whose internal leading already supplies ~11px above
   its text, so page-level padding on top of 2rem stacked into a visible gully
   under the header. This is the ONE number to change to move every clinic
   page's content up or down. */
.clin-main {
    flex: 1;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem 4rem;
    box-sizing: border-box;
}

/* ---- Hero + search ---- */
.clin-hero {
    background: var(--gradient-hero);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2.25rem 2rem;
    margin-bottom: 1.75rem;
    box-shadow: var(--shadow-sm);
}

.clin-hero-inner {
    max-width: 640px;
    margin: 0 auto;
}

/* Practice logo chip atop the hero. The logo sits on an always-light chip
   (clinic wordmarks are usually authored for white) so it reads on both the
   light and dark hero gradients. */
.clin-hero-brand {
    margin-bottom: 1rem;
}

.clin-hero-logo {
    display: block;
    max-height: 56px;
    max-width: 240px;
    width: auto;
    height: auto;
    object-fit: contain;
    padding: 0.5rem 0.65rem;
    background: var(--surface-logo-chip);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.clin-hero-titlerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.clin-hero-title {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.clin-hero-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.4rem 0 1.25rem;
}

.clin-hero-sub {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.clin-hero-stats {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.clin-stat {
    font-size: 0.82rem;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 0.15rem 0.65rem;
}

.clin-stat strong {
    color: var(--text-primary);
}

.clin-stat-review {
    color: var(--color-warning-text);
    background: var(--color-warning-bg);
    border-color: transparent;
}

.clin-stat-review strong {
    color: var(--color-warning-text);
}

/* "N ready to read" — the payoff count in the queue header (spec 2026-08-02
   D10). Success tone, because it is the only stat that is good news. */
.clin-stat-ready {
    color: var(--color-success);
    background: var(--color-success-bg);
    border-color: transparent;
}

.clin-stat-ready strong {
    color: var(--color-success);
}

/* Mine / All clinic segmented toggle. */
.clin-scope-toggle {
    display: inline-flex;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 0.15rem;
    gap: 0.1rem;
    flex-shrink: 0;
}

.clin-scope-opt {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.3rem 0.85rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.clin-scope-opt:hover {
    color: var(--text-primary);
}

.clin-scope-opt.is-active {
    color: var(--color-primary-dark);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-sm);
}

/* Calculated age chip on appointment / recent rows. */
.clin-appt-age {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    /* --text-tertiary on --bg-tertiary measures 2.3:1 (light) / 3.2:1 (dark) —
       below the 4.5:1 WCAG AA floor for text this size, and the chip repeats on
       every dashboard row. --text-secondary measures 5.7:1 / 6.8:1. */
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    padding: 0.02rem 0.45rem;
    vertical-align: middle;
}

/* Screen-reader-only utility (visible label collapsed to 1px). Shared by the
   day-tabs mobile select and any other icon-only control. */
.clin-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Upcoming per-day tabs (issue 1853) ---- */
.clin-upcoming-head {
    margin-bottom: 0.6rem;
}

.clin-daytabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.clin-daytabs-total {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    background: var(--color-primary-bg);
    border-radius: var(--radius-full);
    padding: 0.25rem 0.7rem;
    white-space: nowrap;
}

.clin-daytabs-total strong {
    font-weight: 700;
}

.clin-daytabs-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

/* One day tab: weekday over its appointment count. Clickable variant is a
   live <button>; the 0-count variant is a native disabled <button> — muted,
   dashed, non-interactive. */
.clin-daytab {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    min-width: 3rem;
    padding: 0.28rem 0.55rem;
    font: inherit;
    line-height: 1.1;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 120ms, border-color 120ms, color 120ms;
}

/* Hover affordance only on the clickable (non-empty) day buttons — a
   0-count ``.is-empty`` day is non-interactive, so it must not pick up the
   stronger hover border. */
.clin-daytab:not(.is-empty):hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.clin-daytab.is-active {
    color: var(--text-on-primary);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.clin-daytab.is-active .clin-daytab-count {
    color: var(--text-on-primary);
}

/* 0-appointment day: rendered (so the week reads at a glance) but not a
   target — muted and non-interactive (issue 1853). */
.clin-daytab.is-empty {
    color: var(--text-tertiary);
    background: transparent;
    border-style: dashed;
    cursor: default;
}

.clin-daytab-day {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.clin-daytab-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-tertiary);
}

/* Mobile select fallback for the day tabs — hidden on wide screens, shown
   (and the button row hidden) below the breakpoint. */
.clin-daytabs-select {
    display: none;
    flex: 1;
    min-width: 10rem;
}

.clin-daytabs-select select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

/* Day-grouped Upcoming queue. */
.clin-day-group + .clin-day-group {
    margin-top: 0.5rem;
}

.clin-day-label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    padding: 0.5rem 0 0.3rem;
    border-top: 1px solid var(--border-color-light);
}

.clin-day-group:first-child .clin-day-label {
    border-top: none;
    padding-top: 0;
}

.clin-search {
    position: relative;
    display: flex;
    align-items: center;
}

.clin-search-icon {
    position: absolute;
    left: 1rem;
    color: var(--text-tertiary);
    pointer-events: none;
}

.clin-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.95rem 2.75rem;
    font-size: 1.05rem;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: border-color 120ms, box-shadow 120ms;
}

.clin-search-input::placeholder {
    color: var(--text-tertiary);
}

.clin-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-bg);
}

.clin-search-spinner {
    position: absolute;
    right: 1rem;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: clin-spin 0.7s linear infinite;
}

@keyframes clin-spin {
    to {
        transform: rotate(360deg);
    }
}

.clin-search-results:not(:empty) {
    margin-top: 0.6rem;
}

.clin-results-list {
    list-style: none;
    margin: 0;
    padding: 0.35rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.clin-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-primary);
}

.clin-result:hover {
    background: var(--color-primary-bg);
}

.clin-result-name {
    font-weight: 600;
}

.clin-result-meta {
    display: flex;
    gap: 0.85rem;
    font-size: 0.82rem;
    color: var(--text-tertiary);
}

/* Issue 1929: badge for a QA/test-named patient. Clinician search is
   deliberately unfiltered (a real "Shadow" must stay findable), but the intake
   view/rail filter test-named rows (D4), so this tag signals WHY the row won't
   open an intake instead of dead-ending on the 404. */
.clin-result-testtag {
    margin-left: 0.5rem;
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
}

.clin-results-empty {
    margin-top: 0.6rem;
    padding: 0.85rem 1rem;
    background: var(--bg-elevated);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ---- The queue + panels ----

   Spec 2026-08-02 D10. The dashboard used to be a 1.5fr–1fr grid of three
   co-equal panels; a GP at 9am wants ONE ordered list of decisions, so it is
   now a single column: today's queue first, then the rest of the week, then
   what just landed. One column also means the phone and the desktop render the
   same reading order — there is no "side" panel to lose below the fold. */
.clin-queue-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.clin-panel {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.4rem;
    box-shadow: var(--shadow-sm);
}

.clin-panel-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

.clin-panel-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Muted qualifier on a panel title (e.g. the "next 7 days" horizon hint). */
.clin-panel-subtitle {
    margin-left: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-tertiary);
}

.clin-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    background: var(--color-primary-bg);
    border-radius: var(--radius-full);
    padding: 0.1rem 0.55rem;
}

.clin-empty {
    color: var(--text-tertiary);
    font-size: 0.9rem;
    padding: 0.85rem 0.25rem;
}

/* ---- Appointment rows ---- */
.clin-appts,
.clin-recent {
    list-style: none;
    margin: 0;
    padding: 0;
}

.clin-appt + .clin-appt,
.clin-recent-item + .clin-recent-item {
    border-top: 1px solid var(--border-color-light);
}

/* The queue row is a named-area GRID, not a horizontal flex row.

   The flex version reserved a fixed-basis time box beside a `flex: 1` body
   with NO `min-width: 0` — so a long patient name plus a couple of chips could
   not shrink below its content width and pushed the action/chevron off the
   right edge at phone widths. Grid tracks give the body an explicit
   `minmax(0, 1fr)`, which is the actual fix; the named areas then let the row
   re-flow to time-over-name below 800px without touching the markup. */
.clin-appt-link {
    display: grid;
    grid-template-columns: var(--clin-row-time-col) minmax(0, 1fr) auto auto;
    grid-template-areas: "when body action chevron";
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.2rem;
    padding: 0.7rem var(--clin-row-pad-x);
    margin: 0 calc(-1 * var(--clin-row-bleed));
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-primary);
}

.clin-appt-link:hover {
    background: var(--bg-tertiary);
}

.clin-appt-orphan:hover {
    background: none;
}

/* The orphan row has no `.clin-appt-body` wrapper — place its bare name in the
   body area so the row keeps the same geometry as a real one. */
.clin-appt-orphan .clin-appt-name {
    grid-area: body;
}

/* Time + the Now/Next tag. They travel together because the tag says WHEN, and
   on a phone the tag row under the name is the first thing that wraps out of
   the reader's eye-line. */
.clin-appt-when {
    grid-area: when;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.clin-appt-time {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-primary-dark);
}

.clin-appt-body {
    grid-area: body;
    /* The load-bearing half of the mobile fix: without it a grid item's
       automatic minimum size is its content, so a long name cannot shrink. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.clin-appt-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.clin-appt-action {
    grid-area: action;
    display: flex;
    align-items: center;
}

.clin-appt-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.clin-appt-chevron {
    grid-area: chevron;
    align-self: center;
    color: var(--text-tertiary);
    flex: 0 0 auto;
}

/* ---- The ONE action chip a queue row carries (spec 2026-08-02 D10) ----

   The row used to scatter its state across up to six chips in three
   vocabularies (status pill, "Summary ready", Review, Waived, Intake covered,
   Consult open) and leave the clinician to work out what to DO. The server now
   resolves exactly one action per row; these are its four tones. Sized like a
   chip, not a button, because the whole row is already the click target — a
   nested button inside an <a> would be a lie about what is clickable. */
.clin-action {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* Needs the clinician NOW: a safety escalation, or an unfinished consult. */
.clin-action-urgent {
    color: var(--color-warning-text);
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
}

/* The payoff: a finished summary waiting to be read. */
.clin-action-ready {
    color: var(--color-success);
    background: var(--color-success-bg);
}

/* Something is happening without the clinician (intake running, re-analysis
   pending) — information, not a task. */
.clin-action-info {
    color: var(--color-info);
    background: var(--color-info-bg);
}

/* Correctly nothing to do (waived / covered / not started). Deliberately the
   quietest thing on the row: it exists so the clinician's eye can SKIP it. */
.clin-action-muted {
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    font-weight: 500;
}

.clin-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.12rem 0.5rem;
    border-radius: var(--radius-full);
    text-transform: capitalize;
}

.clin-tag-ready {
    color: var(--color-success);
    background: var(--color-success-bg);
}

/* "Next" pill on the very next (upcoming) appointment of the day. */
.clin-tag-next {
    color: var(--text-on-primary);
    background: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.66rem;
}

/* Subtle highlight on the next appointment row: a left accent rail + faint
   tinted background so the doctor's eye lands on who's up, without shouting. */
.clin-appt-next {
    background: var(--color-primary-bg);
    border-radius: var(--radius-sm);
    box-shadow: inset 3px 0 0 0 var(--color-primary);
}

.clin-appt-next + .clin-appt {
    border-top: none;
}

/* Collapsed "N past appointments" group at the top of the Today panel. */
.clin-past {
    margin-bottom: 0.4rem;
}

.clin-past-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-tertiary);
    padding: 0.45rem 0.25rem;
    user-select: none;
}

.clin-past-summary::-webkit-details-marker {
    display: none;
}

.clin-past-summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.15s ease;
}

.clin-past[open] > .clin-past-summary::before {
    transform: rotate(90deg);
}

.clin-past-summary:hover {
    color: var(--text-secondary);
}

/* Past appointments read muted so the live (remaining) queue stays primary. */
.clin-appts-past {
    opacity: 0.72;
    border-top: 1px solid var(--border-color-light);
    margin-top: 0.2rem;
}

/* Assigned-practitioner tag on appointment rows (shown in "All clinic"). */
.clin-tag-prac {
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    text-transform: none;
}

/* Appointment-type tag (the linked appointment's PMS label). Muted metadata
   tone — ``--text-secondary`` (not tertiary) so it clears the 3:1 contrast
   floor on the tinted tag background; ``text-transform: none`` preserves the
   PMS casing ("Standard appt.", "24hr Blood Pressure Monitor") rather than
   title-casing it. */
.clin-tag-type {
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    text-transform: none;
    font-weight: 500;
}

/* "<type>: No Intake" chip for a deliberately-suppressed appointment
   (refill/recall/routine). The absence of an intake is CORRECT behaviour for
   these visits, so it reads as INFORMATION (calm info tone) — never the red
   error/"cancelled" tone. ``text-transform: none`` preserves the PMS casing. */
.clin-tag-no-intake {
    color: var(--color-info);
    background: var(--color-info-bg);
    text-transform: none;
    font-weight: 500;
}

/* Practitioner attribution on recently-completed rows ("All clinic"). */
.clin-recent-prac {
    color: var(--text-tertiary);
}

/* Empty-"Mine" notice card. */
.clin-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: var(--color-primary-bg);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.4rem;
    margin-bottom: 1.5rem;
}

/* The notice's text column. `min-width: 0` so a long summary sentence wraps
   inside the card instead of pushing the CTA off the edge on a phone. */
.clin-notice-body {
    min-width: 0;
}

.clin-notice-title {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

.clin-notice-text {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 46rem;
}

.clin-notice-cta {
    flex-shrink: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-on-primary);
    background: var(--color-primary);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    white-space: nowrap;
}

.clin-notice-cta:hover {
    background: var(--color-primary-dark);
}

/* ---- Recently completed ---- */
.clin-recent-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem var(--clin-row-pad-x);
    margin: 0 calc(-1 * var(--clin-row-bleed));
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-primary);
}

.clin-recent-link:hover {
    background: var(--bg-tertiary);
}

.clin-recent-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.clin-recent-action {
    flex: 0 0 auto;
}

.clin-recent-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.clin-recent-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

/* ---- Summary page ---- */
.clin-summary {
    max-width: 820px;
    margin: 0 auto;
}

/* ONE height at every width. The 44px touch target used to be a <=800px-only
   rule, so the link grew ~22px taller on mobile — and that extra height was
   the only thing giving the page top breathing room. Above 800px it collapsed
   to a bare 22px line and the content jammed under the header. Sizing it once
   here means the optical gap under the header no longer depends on viewport
   width (and the touch target holds on desktop too). The box's own leading is
   the spacing, hence the small margin-bottom. */
/* The back link's row. On views that put an action beside it (the public demo's
   tour cue) they sit on ONE line at every width — the back link keeps its own
   sizing, so a row with nothing else in it looks exactly as it did. */
.clin-backrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.clin-back {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target-min);
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 0.2rem;
}

.clin-back:hover {
    color: var(--color-primary);
}

.clin-summary-headrow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.clin-patient-name {
    margin: 0 0 0.4rem;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.clin-patient-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.clin-fact-label {
    color: var(--text-tertiary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.2rem;
}

/* Calculated age chip beside the DOB fact */
.clin-age-chip {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    background: var(--color-primary-bg);
    border-radius: var(--radius-full);
    padding: 0.05rem 0.5rem;
    vertical-align: middle;
}

.clin-summary-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    align-items: center;
}

/* Intake-needs (spec 2026-07-08, issue 1867): the D5 content-verdict badge, the
   SUPPRESSED_RECENT context line, and the clinician need-resolution actions. */
.clin-need-badge {
    margin-top: 0.4rem;
}

.clin-need-context {
    margin-top: 0.3rem;
    font-size: 0.82rem;
}

.clin-need-context a {
    color: var(--color-primary);
}

.clin-need-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

.clin-need-actions form {
    margin: 0;
}

/* The "Generate summary now" action bar (D5): a full-width row below the
   header (never crammed into the header action strip). Prompt on the left,
   buttons on the right; wraps gracefully on narrow viewports. */
#gen-summary {
    margin-bottom: 1rem;
}

.clin-gen-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.clin-gen-prompt {
    font-size: 0.9rem;
    color: var(--text-secondary);
    flex: 1 1 16rem;
}

.clin-gen-buttons {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
}

/* Global-admin-only deep link to the full admin conversation view. */
.clin-admin-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    white-space: nowrap;
}

.clin-admin-link:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: var(--bg-tertiary);
}

/* The actual appointment this intake is for (issue #3c). */
.clin-appt-for {
    margin-top: 0.65rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-primary-dark);
}

.clin-appt-for .clin-fact-label {
    color: var(--text-tertiary);
    font-weight: 400;
}

.clin-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.35rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.clin-card-title {
    margin: 0 0 0.85rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.clin-clinical-summary {
    margin: 0;
    line-height: 1.6;
    color: var(--text-primary);
}

/* ---- Collapsible sections (transcript, clinical detail) ---- */
.clin-collapse {
    padding: 0;
    overflow: hidden;
}

.clin-collapse-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.clin-collapse-summary::-webkit-details-marker {
    display: none;
}

.clin-collapse-summary::after {
    content: "›";
    color: var(--text-tertiary);
    font-size: 1.3rem;
    line-height: 1;
    transition: transform 120ms ease;
}

.clin-collapse[open] > .clin-collapse-summary::after {
    transform: rotate(90deg);
}

.clin-collapse-summary:hover {
    background: var(--bg-tertiary);
}

.clin-collapse-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.clin-collapse-hint {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.clin-collapse[open] > .clin-transcript,
.clin-collapse-body {
    padding: 0.5rem 1.5rem 1.5rem;
}

/* Sub-cards inside the clinical-detail collapse */
.clin-subcard {
    margin-top: 1.25rem;
}

.clin-subcard:first-child {
    margin-top: 0.5rem;
}

.clin-subcard-title {
    margin: 0 0 0.7rem;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* GP-summary footnote references (parity with admin conversation view) */
sup.turn-ref {
    font-size: 0.7em;
    color: var(--color-primary);
    cursor: pointer;
    margin: 0 1px;
    font-weight: 600;
}

sup.turn-ref:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.turn-ref-tooltip {
    max-width: 300px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 10px 12px;
    font-size: 0.85rem;
    line-height: 1.4;
    z-index: 1000;
}

.turn-ref-tooltip-quote {
    font-style: italic;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.turn-ref-tooltip-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.turn-ref-tooltip-link {
    font-size: 0.8rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.turn-ref-tooltip-link:hover {
    text-decoration: underline;
}

@keyframes clin-turn-highlight-flash {
    0% {
        background-color: var(--color-primary-bg);
    }

    100% {
        background-color: transparent;
    }
}

.clin-msg.turn-highlight {
    animation: clin-turn-highlight-flash 2s ease-out;
}

.clin-msg-turn {
    margin-left: 0.4rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-tertiary);
}

/* Red flags — leads the page when present */
.clin-redflags {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.4rem;
    margin-bottom: 1.25rem;
}

.clin-redflags-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-error);
    margin-bottom: 0.5rem;
}

.clin-redflags-head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.clin-redflags-list {
    margin: 0;
    padding-left: 1.2rem;
    line-height: 1.55;
    color: var(--text-primary);
}

/* Differential diagnoses */
.clin-dx-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: dx;
}

.clin-dx {
    position: relative;
    padding: 0.85rem 0.95rem 0.85rem 2.6rem;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 0.7rem;
}

.clin-dx::before {
    counter-increment: dx;
    content: counter(dx);
    position: absolute;
    left: 0.85rem;
    top: 0.85rem;
    font-weight: 700;
    color: var(--text-tertiary);
}

.clin-dx-high {
    border-left-color: var(--color-error);
}

.clin-dx-medium {
    border-left-color: var(--color-warning);
}

.clin-dx-low {
    border-left-color: var(--text-tertiary);
}

.clin-dx-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.clin-dx-name {
    font-weight: 700;
}

.clin-like {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.12rem 0.55rem;
    border-radius: var(--radius-full);
}

.clin-like-high {
    color: var(--color-error);
    background: var(--color-error-bg);
}

.clin-like-medium {
    color: var(--color-warning-text);
    background: var(--color-warning-bg);
}

.clin-like-low {
    color: var(--text-secondary);
    background: var(--bg-tertiary);
}

.clin-dx-desc {
    margin: 0.4rem 0 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.clin-dx-findings {
    margin: 0.55rem 0 0;
    padding-left: 1.1rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.5;
}

/* Investigations */
.clin-inv-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.clin-inv {
    padding: 0.7rem 0;
}

.clin-inv + .clin-inv {
    border-top: 1px solid var(--border-color-light);
}

.clin-inv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.clin-inv-name {
    font-weight: 600;
}

.clin-inv-tags {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.clin-tag-purpose {
    color: var(--color-accent);
    background: var(--bg-tertiary);
}

.clin-tag-urg {
    color: var(--color-warning-text);
    background: var(--color-warning-bg);
}

.clin-urg-urgent {
    color: var(--text-on-danger);
    background: var(--color-error);
}

.clin-inv-rationale {
    margin: 0.35rem 0 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.5;
}

/* GP narrative */
/* Issue #3b: the AI-generated notice is a quiet inline chip beside the
   "GP summary" title, not a striking warning banner. */
.clin-card-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.clin-card-summary-head-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    min-width: 0;
}

/* The card title inside the head row carries no bottom margin (the flex
   row owns the spacing). */
.clin-card-summary-head .clin-card-title {
    margin: 0;
}

.clin-ai-chip {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    /* text-secondary, not tertiary: the chip is small text on a tinted
       background — tertiary lands under the 3:1 contrast floor (flow-audit
       finding on the consult card). */
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 0.1rem 0.55rem;
    white-space: nowrap;
}

.clin-summary-text {
    line-height: 1.65;
    color: var(--text-primary);
    white-space: pre-wrap;
}

.clin-summary-meta {
    margin-top: 0.9rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border-color-light);
    font-size: 0.8rem;
    color: var(--text-tertiary);
    display: flex;
    gap: 0.5rem;
}

/* Empty states on the summary page */
.clin-empty-block {
    background: var(--bg-elevated);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.clin-empty-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.clin-empty-text {
    color: var(--text-secondary);
    margin: 0 auto;
    max-width: 30rem;
    line-height: 1.55;
}

/* ---- Intake feedback ---- */
.clin-feedback-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.clin-feedback-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.clin-feedback-head .clin-card-title {
    margin-bottom: 0.25rem;
}

.clin-feedback-subtitle {
    color: var(--text-tertiary);
    font-size: 0.84rem;
}

.clin-feedback-pins {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.clin-stale-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.55rem;
    white-space: nowrap;
}

.clin-feedback-stale {
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.7rem;
    font-size: 0.82rem;
}

.clin-feedback-alert,
.clin-feedback-saved {
    border-radius: var(--radius-md);
    padding: 0.65rem 0.75rem;
    font-size: 0.88rem;
    font-weight: 600;
}

.clin-feedback-alert {
    color: var(--color-warning-text);
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
}

.clin-feedback-saved {
    color: var(--color-success);
    background: var(--color-success-bg);
    border: 1px solid var(--color-success);
}

.clin-feedback-form {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.clin-feedback-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.clin-feedback-textarea {
    width: 100%;
    min-height: 8rem;
    resize: vertical;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 0.75rem 0.85rem;
    font: inherit;
    line-height: 1.5;
}

.clin-feedback-textarea:focus {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 2px;
    border-color: var(--color-primary);
}

.clin-feedback-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.clin-feedback-meta {
    color: var(--text-tertiary);
    font-size: 0.82rem;
}

/* ---- Transcript ---- */
.clin-transcript {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.clin-msg {
    max-width: 80%;
    padding: 0.7rem 0.95rem;
    border-radius: var(--radius-md);
}

.clin-msg-patient {
    align-self: flex-end;
    background: var(--color-primary-bg);
    border: 1px solid var(--color-primary-light);
}

.clin-msg-bot {
    align-self: flex-start;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.clin-msg-role {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    margin-bottom: 0.2rem;
}

.clin-msg-content {
    line-height: 1.5;
    white-space: pre-wrap;
}

.clin-msg-time {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    margin-top: 0.3rem;
}

/* ---- Responsive ---- */
@media (max-width: 800px) {
    /* The queue row re-flows: time (with its Now/Next tag) and the action share
       the top line, the name + context chips get the full width underneath, and
       the chevron spans both rows so it stays optically centred. At 390px the
       old single-line row could not fit a name and two chips beside a 6.5rem
       time box — this is the same content, stacked. */
    .clin-appt-link {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas:
            "when action chevron"
            "body body   chevron";
        column-gap: 0.6rem;
        row-gap: 0.25rem;
    }

    /* Below the panel breakpoint the per-day buttons collapse into the
       native select (issue 1853's mobile affordance). */
    .clin-daytabs-btns {
        display: none;
    }

    .clin-daytabs-select {
        display: block;
    }

    .clin-header {
        flex-wrap: wrap;
        gap: 0.6rem;
        padding: 0.7rem 1rem;
    }

    /* .clin-back is sized once in the base rule — it must not change height
       across the breakpoint. */
    .clin-brand {
        min-height: var(--touch-target-min);
    }

    .clin-header-right .practice-switcher select,
    .clin-header-right .theme-toggle-inline,
    .clin-header-right .admin-actions .btn {
        min-height: var(--touch-target-min);
    }

    .clin-header-right .theme-toggle-inline {
        min-width: var(--touch-target-min);
    }

    /* Let the control cluster wrap neatly under the brand and stay
       right-aligned instead of stretching the header. */
    .clin-header-right {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.6rem;
    }

    .clin-console-link {
        display: none;
    }

    /* …except the demo affordances, which are the only reason a prospect is
       on this page. They keep their labels (an unlabelled compass is a
       guessing game) and rely on `.clin-header-right`'s flex-wrap to drop
       onto their own line when the header runs out of room. */
    .clin-console-link.clin-demo-action {
        display: inline-flex;
        padding: 0.35rem 0.75rem;
        font-size: 0.8rem;
    }

    .clin-summary-headrow {
        flex-direction: column;
    }

    .clin-feedback-head,
    .clin-feedback-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .clin-feedback-pins {
        justify-content: flex-start;
    }
}

/* Phone: compact the header controls so they fit one row without wrapping
   mid-control (e.g. "Sign / out"). The identity badge is secondary here; the
   actionable controls (practice switch, theme, sign-out) take priority. */
@media (max-width: 560px) {
    /* Phone legibility floor: these chips sit at 0.66–0.72rem (10.6–11.5px),
       which reads as fine print on a handset. 12px is the smallest size the
       patient/mobile audits accept, and the dashboard is a surface a GP checks
       between consults — and, via /demo, the first thing a cold prospect sees
       on their phone. Desktop sizing is deliberately untouched. */
    .clin-appt-age,
    .clin-tag {
        font-size: 0.75rem;
    }

    .clin-tag-next {
        font-size: 0.75rem;
    }

    /* Same legibility floor for the action chip — it is the one word on the
       row a clinician actually acts on. */
    .clin-action {
        font-size: 0.75rem;
    }

    /* Transcript speaker/turn line ("Audri · turn 3"). */
    .clin-msg-role {
        font-size: 0.75rem;
    }

    /* WCAG 2.5.8 tap targets. The day picker and the summary Copy control are
       the two things a reader actually reaches for on a phone, and both sat
       around 32px tall. Height only — widths are already comfortable, so this
       cannot reflow either layout. */
    .clin-daytabs-select select {
        min-height: var(--touch-target-min);
    }

    #copy-summary-btn,
    [data-consult-action="copy"] {
        min-height: var(--touch-target-min);
    }

    .clin-header-right {
        gap: 0.5rem;
    }

    .clin-header-right .admin-user-badge {
        display: none;
    }

    .clin-header-right .practice-switcher select {
        max-width: 9rem;
    }

    .clin-header-right .admin-actions .btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ---- Print ---- */
@media print {
    .clin-header,
    .no-print,
    .clin-back {
        display: none !important;
    }

    .clin-card,
    .clin-redflags {
        break-inside: avoid;
        box-shadow: none;
    }
}

/* ---- Consult scribe (spec 2026-07-03) ---- */

.consult-card-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

.consult-capture-bar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.consult-capture-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-success);
    animation: consult-pulse 1.6s ease-in-out infinite;
}

@keyframes consult-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.consult-capture-label {
    font-weight: 600;
    color: var(--text-primary);
}

.consult-capture-timer {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.consult-save-state {
    font-size: var(--text-sm);
    margin-left: auto;
}

.consult-notes-textarea {
    width: 100%;
    min-height: 20rem;
    resize: vertical;
    padding: 0.75rem 0.9rem;
    font: inherit;
    font-size: var(--text-sm2);
    line-height: 1.55;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.consult-notes-textarea:focus {
    outline: 2px solid var(--color-primary-light);
    outline-offset: -1px;
}

/* Typed annotations sidebar during audio capture (D25) — collapsed by
   default; the pane is secondary to the recording bar. */
.consult-annotations {
    margin-top: var(--space-3);
}

.consult-annotations-summary {
    cursor: pointer;
    font-size: var(--text-sm2);
    color: var(--text-secondary);
    user-select: none;
}

.consult-annotations-textarea {
    margin-top: var(--space-2);
    min-height: 7rem;
}

.consult-generating {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 0;
    color: var(--text-secondary);
}

.consult-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: consult-spin 0.9s linear infinite;
}

@keyframes consult-spin {
    to { transform: rotate(360deg); }
}

.consult-failed {
    padding: 0.85rem 1rem;
    background: var(--color-error-bg);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.consult-failed-title {
    color: var(--color-error);
    font-weight: 600;
}

/* Supplemental guidance under a failed-state title ("retrying won't help…") —
   colour comes from the paired text-muted utility; this sizes it as a hint. */
.consult-failed-help {
    font-size: var(--text-sm2);
}

/* Terminal "consult cancelled" line. Used by BOTH note fragments and, until
   the unified surface pulled it into the guarded set, defined by neither — it
   had been rendering unstyled on the legacy fragment. Colour comes from the
   paired text-muted utility; this only matches the siblings' rhythm. */
.consult-cancelled {
    padding: 0.85rem 0;
    font-size: var(--text-sm2);
}

.consult-conflict-banner {
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.7rem;
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-radius: var(--radius-md);
    color: var(--color-warning-text);
    font-size: var(--text-sm2);
}

.consult-speaker-confirm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.85rem;
    margin-bottom: 0.8rem;
    background: var(--color-info-bg);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-md);
    font-size: var(--text-sm2);
}

.consult-speaker-confirm-label {
    font-weight: 600;
}

.consult-speaker-chip {
    padding: 0.1rem 0.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 999px;
}

.consult-problem {
    margin-bottom: 1rem;
}

.consult-problem-title {
    font-size: 1.02rem;
    font-weight: 650;
    color: var(--text-primary);
    margin: 0 0 0.4rem;
}

.consult-section-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin: 0.6rem 0 0.25rem;
}

.consult-stmt-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.consult-stmt {
    padding: 0.22rem 0;
    line-height: 1.55;
    font-size: var(--text-sm2);
    color: var(--text-primary);
}

.consult-stmt-actions {
    opacity: 0;
    margin-left: 0.35rem;
}

.consult-stmt:hover .consult-stmt-actions,
.consult-stmt:focus-within .consult-stmt-actions {
    opacity: 1;
}

.consult-stmt-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    padding: 0 0.2rem;
}

.consult-stmt-btn:hover {
    color: var(--color-primary);
}

.consult-stmt-add-btn {
    color: var(--text-tertiary);
}

.consult-stmt-edited .consult-stmt-text,
.consult-stmt-added .consult-stmt-text {
    border-bottom: 1px dotted var(--color-accent);
}

.consult-stmt-carried .consult-stmt-text {
    border-left: 2px solid var(--color-info);
    padding-left: 0.4rem;
}

.consult-stmt-amended .consult-stmt-text {
    border-bottom: 1px dotted var(--color-info);
}

/* Editable note labels (spec 2026-07-24, issue 2202): a LABEL line ("Plan:",
   "O/E:", "PMHx:" …) is an ordinary editable statement carrying
   `data-label-for` — data, not chrome. Style it with a subtle emphasis so the
   GP reads it as a section marker while it stays deletable/rewordable like any
   other line. Existing tokens only: a slightly darker weight + a whisker of
   top space above the run it opens. Applies on BOTH surfaces — the SSR list
   (`.consult-stmt-label`) and the live editor (`.cne-statement[data-label-for]`). */
.consult-stmt-label .consult-stmt-text,
.cne-statement[data-label-for] .cne-stmt-text {
    font-weight: 600;
    color: var(--text-secondary);
}

.consult-stmt-label,
.cne-statement[data-label-for] {
    margin-top: 0.35rem;
}

/* BLOCK HEADING vs GROUP LABEL (spec 2026-08-02).

   Both are label statements, but they do different jobs and the data already
   tells them apart: a heading opens a block and carries NO `presentation_group`
   (so no `data-compact-group`), while a group label LEADS AN INLINE RUN
   (`Medications: a, b`) and carries one.

   Rendered identically, `Background:` looked like a peer of the `Medications:`
   line nested underneath it, and the block read as a flat list. So a heading
   now matches the narrative_first preview the GP signed off on
   (`.note-preview-block-heading` + `.note-preview-block + .note-preview-block`
   in shared-components.css): full-contrast bold, with real separation above so
   the block reads as a section.

   A group label keeps the quieter treatment above — it is part of its line, and
   narrative_first renders that whole line as ordinary text. */
li.consult-stmt:not([data-compact-group]) > .consult-stmt-label .consult-stmt-text,
.cne-statement[data-label-for]:not([data-compact-group]) .cne-stmt-text {
    color: var(--text-primary);
}

li.consult-stmt:not([data-compact-group]):has(> .consult-stmt-label),
.cne-statement[data-label-for]:not([data-compact-group]) {
    margin-top: 0.9rem;
}

/* ...and a heading carries NO provenance tint. It is structure, not clinical
   content, so "carried forward from intake" says nothing useful about it — and
   because `.cne-compact` zeroes `border-left` for every member of a compacted
   run, the heading was otherwise the ONLY tinted line in its own block, pulling
   the eye as though it had provenance its content lacked. narrative_first draws
   no such bar. */
.cne-statement[data-label-for]:not([data-compact-group]) {
    border-left-color: transparent;
}

/* Inline editing (amendment 2026-07-19, issue 2133): the statement text is
   the edit surface on a draft. A subtle affordance on hover/focus; a clear
   focus ring so the GP knows where the caret is. */
.consult-stmt-text[contenteditable="true"] {
    cursor: text;
    border-radius: 3px;
    padding: 0 0.15rem;
    margin: 0 -0.15rem;
    outline: none;
    transition: background 0.12s ease;
}

.consult-stmt-text[contenteditable="true"]:hover {
    background: var(--bg-secondary);
}

.consult-stmt-text[contenteditable="true"]:focus {
    background: var(--bg-secondary);
    box-shadow: 0 0 0 2px var(--color-primary);
}

.consult-stmt-text[contenteditable="true"]:empty::before {
    content: "New statement\2026";
    color: var(--text-tertiary);
}

/* Inline "rewrite as text" editor (replaces the window.prompt). */
.consult-rewrite-row {
    list-style: none;
    margin: 0.3rem 0;
    padding: 0;
}

.consult-rewrite-note {
    font-size: var(--text-xs);
    margin-bottom: 0.25rem;
}

.consult-rewrite-editor {
    width: 100%;
    font: inherit;
    font-size: var(--text-sm2);
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    resize: vertical;
}

.consult-rewrite-controls {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.consult-provenance-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.42rem;
    font-size: var(--text-xs);
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.cne-restore-prior {
    flex: 0 1 auto;
    max-width: min(28rem, 46%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.cne-restore-prior[hidden] {
    display: none;
}

/* Misclick guard for the one-way "was: …" restore (issue 2294). Body-anchored and
   absolutely positioned: it floats over the ProseMirror surface, so it must not
   sit inside the nodeView that repaints under it. */
.consult-restore-confirm {
    position: absolute;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font-size: var(--text-xs);
    color: var(--text-primary);
    white-space: nowrap;
}

.consult-restore-confirm-q {
    font-weight: var(--weight-semibold);
}

.consult-restore-confirm-btn {
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.consult-restore-confirm-btn:hover {
    background: var(--bg-tertiary);
}

.consult-restore-confirm-yes {
    color: var(--text-on-primary);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* `--color-primary-dark` is the ONLY safe hover fill here: in dark mode it is
   blue-400 under the near-black --text-on-primary (4.5:1, just over AA), and in
   light mode blue-700 under white (comfortable). Do NOT reach for
   --color-primary-light — it renders blue-400 under WHITE in light mode, which
   is 4.2:1 and fails. */
.consult-restore-confirm-yes:hover {
    background: var(--color-primary-dark);
}

.cne-restore-prior:hover {
    color: var(--text-primary);
    border-color: var(--color-primary);
}

.consult-cite {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--color-primary);
    font-size: 0.72em;
    /* Keep a real hit target: line-height: 0 paints the superscript text but
       gives the button a zero-height box, making source navigation effectively
       unclickable for pointer users and invisible to accessibility tooling. */
    line-height: 1;
    margin-left: 0.15rem;
    vertical-align: super;
}

.consult-cite:hover {
    text-decoration: underline;
}

/* A superscript marker is ~10px tall: a fine MOUSE target and an unusable
   finger one — and "tap a citation to see the words behind that line" is the
   evidence affordance itself, including on the public demo, which prospects
   open on a phone. Grow the HIT BOX only, on coarse pointers only, so the
   rendered marker and the line box are untouched (padding on the button would
   change neither the line height nor, usefully, its measured rect — an
   inset-negative ::after over a relatively-positioned inline is what actually
   catches the finger).

   The INLINE inset is deliberately small. Citations run adjacent (`[s0:11]
   [s0:13]`) with ~2px between them, so a generous horizontal expansion would
   make the two hit boxes overlap and open the wrong source — a worse failure
   than a small target. Vertically there is nothing to collide with, so that is
   where the size comes from. */
@media (pointer: coarse) {
    .consult-cite {
        position: relative;
    }

    .consult-cite::after {
        content: "";
        position: absolute;
        inset: -14px -2px;
    }
}

.consult-changes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--text-sm2);
}

.consult-changes {
    margin-top: 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-color-light);
    border-radius: 6px;
    background: var(--bg-secondary);
}

.consult-change-stale {
    color: var(--color-warning);
}

.consult-change-topic {
    font-weight: 600;
    text-transform: capitalize;
    margin-right: 0.3rem;
}

.consult-change-from {
    color: var(--text-tertiary);
    text-decoration: line-through;
}

.consult-change-to {
    color: var(--text-primary);
    font-weight: 550;
}

.consult-redflags .consult-stmt-text {
    color: var(--color-error);
}

.consult-background,
.consult-objective,
.consult-plan-block {
    margin-top: 0.35rem;
}

.consult-note-body {
    min-width: 0;
}

.consult-note-chip {
    display: inline-flex;
    margin: 0 0.35rem 0.45rem 0;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    font-size: var(--text-xs);
}

.consult-note-flag {
    color: var(--color-warning);
}

/* A refused scribe operation (spec 2026-08-03). Unlike the other chips this one
   carries CONTENT the note did not get, so it wraps to a block and reads as a
   quotation rather than a pill — an ordinal-only chip is what let a dropped
   Plan go unnoticed in production. */
.consult-note-unapplied {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: baseline;
    /* The chip family carries no TOP margin (a row of pills needs none), but this
       one is a multi-row block holding accept/dismiss controls, so without it the
       border abuts whatever sits above — in the review panel, the primary
       capture button. Breathing room on the one chip that reports lost clinical
       content is not decoration. */
    margin-top: 0.35rem;
    border-radius: var(--radius-sm);
}

/* A refusal that left the note SHORT of something. The neutral chip reads as
   routine chrome next to "Changed since copy", which is how a dropped Plan
   went unnoticed in production; warning tokens make real loss scannable.
   Benign verdicts (`duplicate`) keep the neutral chip on purpose — emphasis
   everywhere is emphasis nowhere. */
.consult-note-unapplied-lost {
    border-color: var(--color-warning-border);
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

/* A PARKED operation (spec 2026-08-04 M3): proposed, awaiting the speaker-map
   confirm, NOT refused. It deliberately does not borrow the warning wash the
   `-lost` chip uses — nothing has been dropped yet, and emphasis everywhere is
   emphasis nowhere. It reads as pending work: the muted chip shell plus an
   accent edge so it is still findable on a busy panel. */
.consult-note-pending {
    border-left: 3px solid var(--color-info);
}

/* WHY the refusal was refused. It shares the chip's line with the quoted text
   and the accept/dismiss buttons, so it may wrap on its own rather than forcing
   a break — the reason and the words it is about must read as one sentence. */
.consult-unapplied-reason {
    color: inherit;
}

.consult-unapplied-text {
    color: var(--text-primary);
    font-style: italic;
}

/* The statements a `new_problems` title collision DISCARDED. They are the loss,
   not decoration, so they take the full chip width rather than flowing inline
   with the reason. */
.consult-unapplied-nested {
    flex-basis: 100%;
    margin: 0.2rem 0 0;
    padding-left: 1.1rem;
    color: var(--text-primary);
}

.consult-note-unapplied-lost .consult-unapplied-nested {
    color: var(--color-warning-text);
}

/* Dismiss resolves the queue row and writes no note revision. Always rendered
   (it is the only exit for a refusal accept cannot serve), so unlike accept it
   is never `hidden` and needs no `[hidden]` pairing. */
.consult-unapplied-dismiss {
    flex-shrink: 0;
}

/* The quoted clinical text stays high-contrast against the warning wash — it
   is the thing being read, not the thing being flagged. */
.consult-note-unapplied-lost .consult-unapplied-text {
    color: var(--color-warning-text);
}

.consult-unapplied-accept {
    flex-shrink: 0;
}

/* The accept button ships `hidden` and is revealed by JS once an editor
   provider can service it. Inside a flex container an author `display` would
   beat the UA `[hidden]` rule, so the pairing is mandatory, not defensive. */
.consult-unapplied-accept[hidden] {
    display: none;
}

/* Background compaction (spec 2026-07-27, issue 2206 — the GP's decision "1 B":
   one line per group). A compacted <li> holds N parts, each still its own
   statement with its own data-sid; the parts flow INLINE so the group reads as
   one line while every atom stays independently addressable. The separator text
   comes from the server (the projection), not from a ::after, so the screen and
   the copied payload cannot drift apart. */
.consult-stmt-part {
    display: inline;
}

.consult-stmt-compact > .consult-stmt-part > .consult-stmt-text {
    display: inline;
    padding: 0;
    margin: 0;
    /* ...and NO left border. `.consult-stmt-carried .consult-stmt-text` draws a
       2px provenance edge, which is right for a BLOCK line and wrong inside a
       run: the parts are inline siblings, so every atom drew its own bar and a
       compacted group rendered as

           |Medications: |ramipril 5mg daily, |atorvastatin 20mg nocte

       -- stray rules mid-sentence, breaking the ONE-line reading that spec
       2026-07-27 exists to produce. The editor already zeroes this
       (`.cne-compact { border-left: none }`); the SSR twin just never did, and
       it is the surface a clinician gets whenever the editor does not mount
       (a zero-problem view fails closed, or the bundle fails to load). */
    border-left: none;
}

.consult-stmt-sep {
    display: inline;
    white-space: pre;
    color: var(--text-secondary);
}

/* Clinician-only advisories (spec 2026-07-27 D3, issue 2207): interview-provenance
   signals shown BESIDE the note, never inside it. A multi-line advisory (a
   withheld ungrounded line) needs block layout, so it opts out of the pill
   shape its siblings use. */
.consult-note-advisory {
    display: block;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

.consult-note-advisory-lines {
    margin: 0.3rem 0 0;
    padding-left: 1.1rem;
    color: var(--text-primary);
}

.consult-seeded-note {
    margin: 0.65rem 0 0;
    white-space: pre-wrap;
    color: var(--text-primary);
    font: inherit;
}

.consult-save-status {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* The local-export fallback ships `hidden` and is revealed only after a server
   copy fails. `.btn` sets `display: inline-flex`, and an author `display` beats
   the UA's `display: none` for `[hidden]` — so this pairing is what makes the
   attribute work at all, not a defensive extra. */
.consult-note-copy-local[hidden] {
    display: none;
}

.consult-empty-objective {
    font-size: var(--text-sm2);
    font-style: italic;
    margin: 0.15rem 0;
}

/* ── Consult-note document-model editor (spec 2026-07-22, issue 2177;
   round-2 UX amendment) ──
   The flowing TipTap surface that replaces the statement-list chrome for the
   cohort. NO line chrome at all (founder 2026-07-23) — resting state is just
   the note. Add/delete/edit are pure text; reorder is native cut/copy/paste
   (select the line → Cmd-X → Cmd-V; NOT drag, NO hover gutter). Provenance is a
   quiet token-based left-border tint + hover tooltip (no pills). Tokens only
   (check_dark_mode --strict). The live editor is what prints. */
.cne-editor-container {
    margin-top: 0.2rem;
}

.cne-note-editor {
    outline: none;
    color: var(--text-primary);
    font-size: var(--text-sm2);
    line-height: 1.55;
}

.cne-note-editor:focus-within {
    outline: none;
}

.cne-problem-title {
    font-size: var(--text-md);
    font-weight: 650;
    color: var(--text-primary);
    margin: 0.8rem 0 0.3rem;
}

.cne-section-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin: 0.6rem 0 0.25rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.cne-statement {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.22rem 0 0.22rem 0.6rem;
    color: var(--text-primary);
    /* Quiet provenance (round-2): a subtle token-based left-border tint keyed
       on the data attributes, tuned for light + dark. No border by default so
       an ordinary said-today line reads as plain text. */
    border-left: 2px solid transparent;
    margin-left: -0.6rem;
    padding-left: 0.6rem;
    transition: background 0.12s ease;
}

/* Carried-forward-from-intake: a calm info-blue left-border tint. The border
   (not a background fill) keeps it ambient in BOTH themes — in dark mode a
   low-alpha light token filled behind text reads as a wash, so we tint only
   the edge. */
.cne-statement[data-provenance="intake_carried_forward"] {
    border-left-color: color-mix(in srgb, var(--color-info) 60%, transparent);
}

/* Clinician-edited: a warmer sienna-accent left-border tint (wins over the
   intake hue when an intake line is later edited). */
.cne-statement[data-edited="1"] {
    border-left-color: color-mix(in srgb, var(--color-accent) 70%, transparent);
}

/* No per-line chrome (founder 2026-07-23): the hover gutter (⠿ handle +
   duplicate/delete overflow) is removed. Line editing is plain text + native
   clipboard (reorder = select-line → cut → paste). The `.cne-statement`
   left-border padding below is the provenance TINT indent, not a gutter. */
.cne-stmt-text {
    flex: 1 1 auto;
    border-radius: 3px;
    padding: 0 0.15rem;
    margin: 0 -0.15rem;
    transition: background 0.12s ease;
}

/* Empty-line click-to-type placeholder (round-2): the `.cne-empty` GATE class
   comes from a ProseMirror node Decoration on the STATEMENT; the placeholder
   TEXT is the nodeView's `data-placeholder` on the inner `.cne-stmt-text` span.
   Never document text, so it serialises to []. A CSS `:empty` rule can't be
   used — ProseMirror injects a `ProseMirror-trailingBreak <br>` into an empty
   textblock, so `.cne-stmt-text` is never truly `:empty`. */
.cne-empty .cne-stmt-text::before {
    content: attr(data-placeholder);
    color: var(--text-tertiary);
    font-style: italic;
    pointer-events: none;
}

/* Compacted Background run in the LIVE editor (spec 2026-07-27, issue 2206 D3).
   The `cne-compact*` classes come from a ProseMirror node Decoration recomputed
   on every state change, so deleting an atom moves the separators and the
   terminator correctly — an attribute-driven render would orphan a trailing
   ", ". The members flow inline so the group reads as ONE line while each atom
   remains its own statement node (own sid, own citations, own coverage key).
   The separator TEXT is a widget carrying the server's bytes, never a ::after
   constant: that is what keeps the editor, the screen and the copy payload
   byte-identical. */
.cne-statement.cne-compact {
    display: inline;
    /* Zero ALL box spacing: the base rule's 0.6rem left padding is the
       provenance-tint indent for a BLOCK line, and inside a run it renders as a
       stray gap between atoms. The separator span is the only spacing. */
    padding: 0;
    margin: 0;
    border-left: none;
}

/* The run's first member keeps the tint indent for the whole visual line. */
.cne-statement.cne-compact-first {
    margin-left: -0.6rem;
    padding-left: 0.6rem;
}

/* ...and STARTS A NEW LINE.

   Every run member is `display: inline` (above), and an inline box does not
   end a line -- so without this the next group simply continued on the same
   line as the previous one and the whole Background block rendered as one
   wrapped paragraph:

       PMH: Nil significantMedications: Fluoxetine, Minoxidil, Nexium,
       MeloxicamOTC/supplements: ProbioticsFHx: Father has angina...

   -- groups running together with no separator (there is none to draw: a
   separator belongs BETWEEN atoms of one run, not between runs), and, once it
   wrapped, an atom per visual line. That is the pilot GP's report on
   `grainy-peacock`.

   It only ever showed with TWO OR MORE Background groups. Every fixture had
   one, so a single run had nothing to collide with and the bug stayed
   invisible; a real migrated note carries six to eight.

   An empty block-level ::before splits the inline formatting context, which is
   what begins the new line. It is zero-height and adds no space, and it sits
   outside `contentDOM` so ProseMirror never sees it as content (same technique
   the empty-line placeholder already uses). `cne-compact-last` needs no rule:
   breaking before each run is sufficient and leaves no trailing empty line. */
.cne-statement.cne-compact-first::before {
    content: "";
    display: block;
}

.cne-compact .cne-stmt-text {
    display: inline;
    padding: 0;
    margin: 0;
}

/* ProseMirror appends `<br class="ProseMirror-trailingBreak">` to any textblock
   that ENDS IN AN INLINE ATOM — here, a citation chip — so a caret can still be
   placed after it. On a BLOCK line that br is invisible. Inside a compacted run
   every member is `display: inline`, so it breaks the line, and the run
   exploded into one atom per line:

       Medications: Fluoxetine [s0:36]
       , Minoxidil [s0:36]
       , Nexium [s0:36]

   ONLY cited atoms broke, which is why the same note also showed the opposite
   symptom — an UNCITED atom emits no br, so `OTC/supplements: Probiotics` ran
   straight into `FHx:` with no separator. One cause, both halves of the
   pilot GP's report.

   The br is presentational: the caret position after a trailing atom comes from
   ProseMirror's own selection mapping, not from this node (pinned by the caret
   journeys in tests/e2e/test_compacted_background_caret_browser.py, which
   place and read the caret at the END of a cited atom). Scoped to a compacted
   run so a normal block line keeps it. */
.cne-compact .cne-stmt-text > br.ProseMirror-trailingBreak {
    display: none;
}

.cne-compact-sep,
.cne-compact-term {
    white-space: pre;
    color: var(--text-secondary);
    user-select: none;
}

.cne-changes {
    margin: 0.5rem 0 0.2rem;
}

.cne-changes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--text-sm2);
}

.consult-note-footer {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border-color-light);
}

.consult-copied-note {
    font-size: var(--text-sm);
}

.consult-sources {
    margin-top: 0.9rem;
    border-top: 1px solid var(--border-color-light);
    padding-top: 0.5rem;
}

.consult-sources-summary {
    cursor: pointer;
    font-size: var(--text-sm2);
    color: var(--text-secondary);
}

.consult-sources-list {
    display: grid;
}

.consult-source {
    display: flex;
    gap: 0.55rem;
    padding: 0.3rem 0;
    font-size: var(--text-sm2);
    border-bottom: 1px solid var(--border-color-light);
}

.consult-source-label {
    flex-shrink: 0;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.consult-source-text {
    min-width: 0;
    color: var(--text-secondary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.consult-source.turn-highlight {
    animation: consult-flash 1.6s ease-out;
}

@keyframes consult-flash {
    0% { background: var(--color-info-bg); }
    100% { background: transparent; }
}

/* ---- Consult audio capture (Stage 2) ---- */

.consult-modal-overlay {
    position: fixed;
    inset: 0;
    /* Token-derived scrim: slate-900 at 45% — tracks the palette in both
       schemes without a hardcoded literal. */
    background: color-mix(in srgb, var(--slate-900) 45%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.consult-modal {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem 1.75rem;
    max-width: 34rem;
    width: calc(100% - 2rem);
}

.consult-modal-title {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
}

.consult-modal-text {
    color: var(--text-secondary);
    font-size: var(--text-sm2);
}

.consult-consent-script {
    margin: 0.6rem 0;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid var(--color-primary);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm2);
    color: var(--text-primary);
}

.consult-preflight {
    margin: 0.9rem 0;
}

.consult-level-wrap {
    display: block;
    height: 8px;
    margin-top: 0.55rem;
    background: var(--bg-secondary);
    border-radius: 999px;
    overflow: hidden;
}

.consult-level-inline {
    display: inline-block;
    width: 90px;
    vertical-align: middle;
}

.consult-level-bar {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--color-success);
    border-radius: 999px;
    transition: width 80ms linear;
}

.consult-level-hint {
    margin-top: 0.3rem;
    font-size: var(--text-sm);
}

.consult-capture-dot-rec {
    background: var(--color-error);
}

.consult-silence-banner {
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.7rem;
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-radius: var(--radius-md);
    color: var(--color-warning-text);
    font-weight: 600;
}

.consult-audio-controls {
    margin-top: 0.6rem;
    display: flex;
    gap: 0.5rem;
}

.consult-play-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
    color: var(--color-primary);
    font-size: 0.65rem;
    line-height: 1;
    padding: 0.2rem 0.45rem;
    flex-shrink: 0;
}

.consult-play-btn:hover {
    border-color: var(--color-primary);
}

/* Post-session continuation (spec 2026-07-06, issue 1821 D6): the stale-summary
   demotion. The superseded card stays fully readable — amber accent only,
   never hidden — while the live-refresh poll waits for the new generation. */
.clin-card-superseded {
    border-color: var(--color-warning);
    opacity: 0.85;
}

.clin-tag-superseded {
    color: var(--color-warning);
    background: var(--color-warning-bg);
}

/* ---- Clinic CSV import ---- */

.clin-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.clin-page-title {
    margin: 0;
    font-size: var(--text-2xl);
    letter-spacing: 0;
}

.clin-page-subtitle {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
    max-width: 52rem;
}

.clin-import-panel {
    display: grid;
    gap: 1rem;
}

.clin-import-panel .detail-card {
    background: var(--bg-elevated);
    border-color: var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.clin-import-card {
    padding: 0.75rem;
}

.csv-drop-zone {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 13rem;
    gap: 0.35rem;
    padding: 1.4rem;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    text-align: center;
    cursor: pointer;
    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        transform 160ms ease;
}

.csv-drop-zone:hover,
.csv-drop-zone:focus-visible,
.csv-drop-zone.is-dragover {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
    outline: none;
}

.csv-drop-zone.is-busy {
    cursor: progress;
    opacity: 0.78;
}

.csv-drop-zone-icon {
    font-size: 2rem;
    color: var(--color-primary);
}

.csv-drop-zone-title {
    font-size: var(--text-xl);
    font-weight: 700;
}

.csv-drop-zone-hint {
    max-width: 42rem;
    color: var(--text-secondary);
    font-size: var(--text-sm2);
}

.csv-drop-zone-browse {
    color: var(--color-primary);
    font-weight: 700;
}

.csv-drop-zone-busy {
    margin-top: 0.45rem;
    color: var(--text-secondary);
    font-weight: 650;
}

.csv-drop-zone-error {
    margin-top: 0.6rem;
    width: min(100%, 38rem);
}

.csv-drop-zone-error[hidden],
.csv-drop-zone-busy[hidden] {
    display: none;
}

.csv-drop-zone .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.csv-drop-zone-check {
    display: none;
    width: 4rem;
    height: 4rem;
    color: var(--color-success);
}

.csv-drop-zone-check path {
    fill: none;
    stroke: currentColor;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 42;
    stroke-dashoffset: 42;
}

.clin-import-panel[data-import-outcome="success"] .csv-drop-zone-check {
    display: block;
}

.clin-import-panel[data-import-outcome="success"] .csv-drop-zone-check path {
    animation: csv-check-draw 420ms ease-out forwards;
}

.clin-import-panel[data-import-outcome="success"] .csv-drop-zone-icon {
    display: none;
}

.clin-import-outcome:empty {
    display: none;
}

.clin-import-outcome-title {
    margin: 0 0 0.6rem;
    font-size: var(--text-lg);
}

.clin-import-outcome .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0;
}

.clin-import-outcome .stat-card {
    padding: 0.85rem;
    border-color: var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

.clin-import-panel .table-wrapper {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.clin-import-panel .data-table {
    font-size: var(--text-sm);
}

.clin-import-panel .data-table th,
.clin-import-panel .data-table td {
    padding: 0.65rem 0.75rem;
    vertical-align: top;
}

.clin-import-panel .data-table th {
    background: var(--bg-secondary);
    font-weight: 700;
}

.empty-table-cell {
    text-align: center;
}

/* The held-rows block rides the .alert base class (display:flex), which
   would lay its heading/copy/form out as squashed columns — stack them. */
.alert.csv-import-mapping {
    display: block;
}

.csv-import-mapping h4 {
    margin: 0 0 0.35rem;
}

.csv-import-mapping p {
    margin: 0 0 0.75rem;
}

.csv-import-mapping select {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.csv-import-mapping button {
    margin-top: 0.5rem;
}

.csv-import-mapping-row {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 18rem) auto auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border-color-light);
}

.csv-import-mapping-row:last-child {
    border-bottom: 0;
}

.csv-import-mapping-provider {
    font-weight: 650;
}

.csv-import-mapping-key {
    display: block;
    font-weight: 400;
}

.csv-import-errors,
.csv-import-rows {
    margin-top: 0.85rem;
}

@keyframes csv-check-draw {
    from { stroke-dashoffset: 42; }
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .clin-import-panel[data-import-outcome="success"] .csv-drop-zone-check path {
        animation: none;
        stroke-dashoffset: 0;
    }

    .csv-drop-zone {
        transition: none;
    }
}

@media (max-width: 720px) {
    .csv-import-mapping-row {
        grid-template-columns: 1fr;
    }
}

/* ---- Intake history rail (spec 2026-07-07, issue 1822) ----
   The patient's other intakes, each one click to its own summary. The rail is
   a native <details> collapse: padding lives on the summary/list so the
   collapsed card stays compact. */
.clin-rail {
    padding: 0;
    overflow: hidden;
}

.clin-rail-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.85rem 1.5rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.clin-rail-head::-webkit-details-marker {
    display: none;
}

/* Collapse indicator on the far right — rotates when open (mirrors
   .clin-collapse-summary::after). */
.clin-rail-head::after {
    content: "›";
    align-self: center;
    color: var(--text-tertiary);
    font-size: 1.3rem;
    line-height: 1;
    transition: transform 120ms ease;
}

.clin-rail[open] > .clin-rail-head::after {
    transform: rotate(90deg);
}

.clin-rail-head:hover {
    background: var(--bg-tertiary);
}

/* Zero the title margin so the collapsed head is tight and the count chip
   sits on the title baseline. */
.clin-rail-title {
    margin: 0;
}

/* Decorative "Click to expand" hint, pushed to the far right. The rotating
   chevron below (.clin-rail-head::after) is the actual open/close indicator,
   matching the transcript / clinical-detail collapsibles on this page. */
.clin-rail-hint {
    margin-left: auto;
    align-self: center;
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.clin-rail-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
}

.clin-rail-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.clin-rail-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.5rem;
    margin: 0 -0.5rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-primary);
}

.clin-rail-link:hover {
    background: var(--bg-tertiary);
}

.clin-rail-item.is-selected .clin-rail-link {
    background: var(--color-primary-bg);
    box-shadow: inset 3px 0 0 0 var(--color-primary);
}

.clin-rail-when {
    flex: 1;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-primary-dark);
}

.clin-rail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: flex-end;
}

.clin-rail-chevron {
    color: var(--text-tertiary);
    flex: 0 0 auto;
}

/* ---- Cross-sibling nudge: this intake is thin, a richer one exists ---- */
.clin-nudge {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    color: var(--color-warning-text);
    font-size: 0.92rem;
    line-height: 1.5;
}

.clin-nudge-icon {
    color: var(--color-warning);
    flex: 0 0 auto;
    margin-top: 0.1rem;
}

.clin-nudge-body {
    flex: 1;
}

.clin-nudge-link {
    font-weight: 700;
    color: var(--color-warning-text);
    white-space: nowrap;
}

/* ---- Non-completed intake states share the empty-block look ---- */
.clin-intake-state .clin-empty-title {
    color: var(--text-primary);
}

/* Demo practices (spec 2026-07-12, issue 1842 D9/D10) */
.clin-demo-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
    white-space: nowrap;
}

.clin-demo-budget {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ---- Demo affordances survive the mobile collapse (spec 2026-08-01 D5) ----

   `.clin-console-link` is hidden below 800px (see the media query above): the
   staff console links it was written for — Import / Security / Advanced
   console — all have full-page equivalents a phone user reaches another way.

   A demo clinic's two controls do NOT. "Take the tour" and "New intake" are
   the entire point of the demo, and prospects open demos on their phone, so
   the blanket rule was hiding the only two things we want them to press.

   `.clin-demo-action` is the ONE opt-out marker: putting it on a console link
   says "this is a demo affordance, keep it on a phone". Adding a third demo
   control is adding the class, not editing a media query. */
.clin-console-link.clin-demo-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: var(--touch-target-min);
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
}

.clin-console-link.clin-demo-action:hover {
    border-color: var(--color-primary);
    background: var(--bg-tertiary);
    color: var(--color-primary);
}

/* The tour trigger is the demo's invitation, so it gets the primary outline
   (it used to be transparent grey text between two nav links, indistinguishable
   from them). Its glyph is a compass — a pointer, not another chat bubble. */
.clin-console-link.clin-tour-btn {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: transparent;
}

.clin-console-link.clin-tour-btn:hover {
    background: var(--color-primary);
    color: var(--bg-primary);
}

.clin-demo-action-icon {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
}

/* ---- Cohort-only evidence reference rail (issue 2126) ---- */
.consult-card[data-evidence-enabled="true"] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr);
    column-gap: 1rem;
}

.consult-card[data-evidence-enabled="true"] > .consult-card-head,
.consult-card[data-evidence-enabled="true"] > #consult-capture-area {
    grid-column: 1 / -1;
}

.consult-evidence-rail {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
    padding-left: 1rem;
    border-left: 1px solid var(--border-color);
}

.consult-evidence-head,
.evidence-result-head,
.evidence-topic-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.evidence-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem;
}

.consult-evidence-head {
    display: block;
}

.consult-evidence-head .evidence-search {
    margin-top: 0.65rem;
}

.evidence-task-select {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    min-height: var(--touch-target-min);
}

.evidence-search .form-input {
    min-width: 0;
    width: 100%;
}

.evidence-search .btn {
    white-space: nowrap;
}

.evidence-authority {
    display: inline-flex;
    width: fit-content;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-full);
    background: var(--color-info-bg);
    color: var(--color-primary-dark);
    font-size: var(--text-xs);
    font-weight: 700;
}

.evidence-authority-patient_reported {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.evidence-result {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

.evidence-result-title {
    margin: 0.45rem 0 0.2rem;
    font-size: var(--text-lg);
}

.evidence-date {
    margin: 0 0 0.6rem;
    font-size: var(--text-xs);
}

.evidence-match-basis {
    margin: -0.25rem 0 0.6rem;
    font-size: var(--text-xs);
}

.evidence-status {
    margin: 0.4rem 0;
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

.evidence-status:empty {
    display: none;
}

.evidence-status-error {
    color: var(--color-error);
    font-weight: 700;
}

.evidence-block-options,
.consult-evidence-citations {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.evidence-expand {
    cursor: pointer;
    color: var(--color-primary-dark);
    font-size: var(--text-sm);
    font-weight: 700;
}

.evidence-block-option,
.consult-evidence-citation {
    padding: 0.55rem;
    border-left: 3px solid var(--color-primary-light);
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.consult-evidence-excerpt summary {
    cursor: pointer;
}

.consult-evidence-excerpt-body {
    max-height: 14rem;
    overflow: auto;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    line-height: 1.45;
}

@media print {
    .consult-evidence-excerpt summary {
        display: none;
    }

    .consult-evidence-excerpt-body {
        display: block !important;
        max-height: none;
        overflow: visible;
        margin: 0;
        padding: 0;
        border: 0;
    }
}

.evidence-regimen {
    border: 1px solid var(--color-warning-border);
    border-left: 3px solid var(--color-warning);
    background: var(--color-warning-bg);
}

.evidence-regimen-shell {
    border: 1px solid var(--color-warning-border);
    border-left: 3px solid var(--color-warning);
    background: var(--color-warning-bg);
}

.evidence-regimen-shell .evidence-regimen {
    padding: 0;
    border: 0;
    background: transparent;
}

.evidence-context:not(.evidence-context-renal) {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: flex-start;
    max-width: 100%;
    margin-inline-start: 0.35rem;
    padding: 0.05rem 0.3rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    font-size: var(--text-xs);
    font-weight: 650;
}

.evidence-context-toggle {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.evidence-context-toggle::after {
    content: "▾";
    display: inline-block;
    margin-inline-start: 0.25rem;
    transition: transform 120ms ease;
}

.evidence-context-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.evidence-context-body {
    flex-basis: 100%;
    max-height: 14rem;
    overflow: auto;
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border-color);
    font-weight: 400;
    line-height: 1.45;
}

.evidence-context-body[hidden] {
    display: none;
}

.evidence-context-renal {
    display: block;
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--color-warning-border);
    font-size: var(--text-xs);
}

.evidence-regimen a {
    margin-inline-start: 0.35rem;
}

.evidence-regimen-emphasized {
    box-shadow: 0 0 0 2px var(--color-primary-light);
}

.evidence-context-match {
    margin: 0.4rem 0;
    color: var(--color-primary-dark);
    font-size: var(--text-xs);
    font-weight: 700;
}

.evidence-block-preview {
    max-height: 8rem;
    overflow: auto;
    margin-bottom: 0.4rem;
}

.consult-evidence-number {
    color: var(--color-primary-dark);
    font-weight: 700;
}

.consult-evidence-find,
.consult-evidence-topic-link,
.consult-evidence-remove,
.evidence-dismiss,
.evidence-drawer-close {
    border: 0;
    background: transparent;
    color: var(--color-primary-dark);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-xs);
}

.consult-evidence-find {
    margin-left: 0.5rem;
}

.consult-evidence-remove,
.evidence-drawer-close {
    float: right;
    font-size: var(--text-lg);
}

.evidence-inline-topic-link,
.evidence-inline-section-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary-dark);
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.evidence-inline-topic-link {
    display: inline;
}

.evidence-source-reference {
    color: var(--text-secondary);
}

.evidence-topic-drawer {
    position: relative;
    width: min(52rem, 92vw);
    max-height: 88vh;
    padding: 1.25rem;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.evidence-drawer-close-persistent {
    position: absolute;
    z-index: 1;
    top: 0.65rem;
    right: 0.65rem;
}

.evidence-topic-head {
    padding-right: 2.5rem;
}

.evidence-topic-drawer::backdrop {
    background: color-mix(in srgb, var(--slate-900) 65%, transparent);
}

.evidence-topic-body {
    max-height: 62vh;
    overflow: auto;
    margin: 1rem 0;
    padding-right: 0.5rem;
    line-height: 1.55;
}

.evidence-topic-block {
    margin: 0.5rem 0;
}

.evidence-table-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.evidence-topic-block table {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.evidence-topic-block caption {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-weight: 700;
    text-align: left;
}

.evidence-topic-block th,
.evidence-topic-block td {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}

.evidence-topic-block th,
.evidence-table-header,
.evidence-table-subheader {
    background: var(--bg-secondary);
}

.evidence-topic-block figure {
    margin: 1rem 0;
}

.evidence-topic-block img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 850px) {
    .consult-card[data-evidence-enabled="true"] {
        display: block;
    }

    .consult-evidence-rail {
        margin-top: 1rem;
        padding: 1rem 0 0;
        border-top: 1px solid var(--border-color);
        border-left: 0;
    }

    .clin-rail-link,
    .consult-card .btn-sm {
        min-height: var(--touch-target-min);
        box-sizing: border-box;
    }

    .consult-stmt {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
    }

    .consult-stmt-actions {
        display: inline-flex;
        flex-basis: 100%;
        gap: 0.2rem;
        margin: 0.15rem 0 0;
        opacity: 1;
    }

    .consult-stmt-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        background: var(--bg-secondary);
        color: var(--text-secondary);
    }

    .consult-evidence-rail .btn-sm,
    .consult-evidence-find,
    .consult-evidence-topic-link,
    .consult-evidence-remove,
    .evidence-dismiss,
    .evidence-drawer-close {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
    }

    .consult-evidence-find,
    .consult-evidence-topic-link,
    .consult-evidence-remove,
    .evidence-dismiss,
    .evidence-drawer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .evidence-expand {
        min-height: var(--touch-target-min);
        padding-block: 0.65rem;
    }

    .evidence-context-toggle {
        min-height: var(--touch-target-min);
        padding-inline: 0.35rem;
    }

    .evidence-inline-topic-link {
        display: inline-flex;
        align-items: center;
        min-height: var(--touch-target-min);
        padding-inline: 0.25rem;
    }

    .evidence-authority,
    .evidence-date,
    .evidence-match-basis,
    .evidence-status,
    .evidence-context,
    .evidence-context-match {
        font-size: var(--text-sm);
    }
}