/* ===========================================================================
   EDA Doctor Portal — STRUCTURE
   ---------------------------------------------------------------------------
   Layout, components and responsive behaviour, layered on Bootstrap 5.
   Component shapes and sizes are taken from the approved design-board mockups.

   This file deliberately contains NO literal colours, font families or shadow
   values — every one of those comes from theme.css. If you are about to type a
   hex code here, add a token there instead.

   Responsive strategy
     - One fluid layout, not a stack of fixed breakpoint layouts.
     - Type scales with the viewport through clamp() tokens, so this design
       needs far fewer media queries than its density suggests.
     - Data tables become stacked cards below 768px instead of scrolling
       sideways — a doctor checking a case on a phone should never have to pan.
     - Verified 375px (iPhone SE) through 2560px (4K).
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* Reserves the scrollbar's track space unconditionally. Without this, Safari on macOS
   switches between a zero-width overlay scrollbar (trackpad) and a space-reserving one
   (mouse) the instant it detects a real mouse, narrowing the page right under the
   cursor — this keeps the content width constant regardless of that switch. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
    background: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-accent); text-decoration: none; }
a:hover { color: var(--brand-accent-hover); text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

img, svg, video { max-width: 100%; height: auto; }

h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
h3 { font-size: var(--text-xl); font-weight: var(--weight-bold); }

.muted, .text-muted-2 { color: var(--color-muted) !important; }

/* Long case numbers, emails and file names must never widen the page. */
.case-number, .record-name, .search-hit, .chat-bubble, .breadcrumb-line, td { overflow-wrap: anywhere; }

.eda-eyebrow, .section-eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--brand-accent);
}

/* Page frame. Bootstrap's container is overridden so the gutters and max width
   come from tokens and therefore change with the breakpoint in one place. */
.container-xxl, .container-xl {
    max-width: var(--layout-max-width);
    padding-left: var(--layout-gutter);
    padding-right: var(--layout-gutter);
    margin-inline: auto;
    width: 100%;
}

.page-frame { padding-block: var(--pad-page-y); }

.skip-link {
    position: absolute; left: -9999px;
    background: var(--brand-accent); color: var(--brand-on-accent);
    padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-sm);
    z-index: 2000;
}
.skip-link:focus { left: var(--space-lg); top: var(--space-sm); }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--pad-card-tight);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.3;
}
.btn:hover { text-decoration: none; }

.btn-crimson { background: var(--brand-accent); color: var(--brand-on-accent); }
.btn-crimson:hover, .btn-crimson:focus { background: var(--brand-accent-hover); color: var(--brand-on-accent); }
.btn-crimson:active { background: var(--brand-accent-active); }
.btn-crimson.btn-glow { box-shadow: var(--shadow-accent); }

.btn-charcoal { background: var(--brand-charcoal); color: var(--brand-on-dark-strong); }
.btn-charcoal:hover, .btn-charcoal:focus { background: var(--brand-charcoal-soft); color: var(--brand-on-dark-strong); }

.btn-outline-charcoal {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-line);
    color: var(--color-ink);
}
.btn-outline-charcoal:hover { background: var(--color-surface-alt); color: var(--color-ink); }

.btn-outline-light {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .55);
    color: var(--brand-on-dark-strong);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, .12); color: var(--brand-on-dark-strong); }

.btn-lg { padding: var(--space-md) var(--space-2xl); font-size: var(--text-lg); border-radius: 11px; }
.btn-sm { padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); border-radius: var(--radius-sm); }

/* The table row action, styled as a link rather than a button. */
.view-link { color: var(--brand-accent); font-weight: var(--weight-semibold); font-size: var(--text-base); white-space: nowrap; }

/* Every control gets a finger-sized hit area on touch devices. */
@media (pointer: coarse) {
    .btn, .nav-link, .page-link, .dropdown-item, .google-btn {
        min-height: var(--touch-target);
    }
    /* Inline links need a box before min-height applies. */
    .view-link, .brand, .help-btn {
        display: inline-flex;
        align-items: center;
        min-height: var(--touch-target);
    }
    .status-select { min-height: 36px; padding-block: var(--space-sm); }
    .list-group-item-action { min-height: var(--touch-target); display: flex; align-items: center; }
    .record-actions .btn { min-height: 40px; }
}

/* ---------------------------------------------------------------------------
   Portal chrome
   --------------------------------------------------------------------------- */

.portal-bar {
    background: var(--brand-charcoal);
    color: var(--brand-on-dark-strong);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.portal-bar-inner {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
    min-height: var(--chrome-height);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: var(--weight-bold);
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-normal);
    color: var(--brand-on-dark-strong);
    line-height: 1.15;
}
.brand:hover { color: var(--brand-on-dark-strong); text-decoration: none; }
.brand small {
    display: block;
    font-weight: var(--weight-normal);
    font-size: var(--text-2xs);
    color: var(--brand-on-dark-brand);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.navlinks { display: flex; gap: var(--space-xs); }

.navlinks a, .portal-bar .nav-link {
    color: var(--brand-on-dark);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    text-decoration: none;
}
.navlinks a:hover, .portal-bar .nav-link:hover {
    color: var(--brand-on-dark-strong);
    background: rgba(255, 255, 255, .08);
    text-decoration: none;
}
/* Active tab is a translucent pill, not a solid white block. */
.navlinks a.active, .portal-bar .nav-link.active {
    background: rgba(255, 255, 255, .14);
    color: var(--brand-on-dark-strong);
    font-weight: var(--weight-semibold);
}

/* The phone nav scrolls sideways rather than wrapping into ragged rows. */
.portal-nav-scroll {
    display: flex;
    gap: var(--space-2xs);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-sm);
    margin-inline: calc(var(--layout-gutter) * -1);
    padding-inline: var(--layout-gutter);
}
.portal-nav-scroll::-webkit-scrollbar { display: none; }

/* Warm neutral avatar with dark initials — not an accent-coloured badge. */
.avatar-badge {
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    background: var(--color-tint-strong);
    color: var(--brand-charcoal);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    flex: 0 0 var(--avatar-size);
    line-height: 1;
}
.avatar-badge.is-inactive { opacity: .55; }

.tooth-mark { color: var(--brand-on-dark-strong); display: inline-flex; flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   Cards and panels
   --------------------------------------------------------------------------- */

.eda-card {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.eda-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding: var(--pad-card-tight) var(--pad-card);
    border-bottom: var(--border-width) solid var(--color-line);
}
.eda-card-header h2, .eda-card-header h3 { margin: 0; }

.eda-card-body { padding: var(--pad-card); }

/* Stat tiles: tinted rounded-square icon, then a large figure. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); } }

.stat-card {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl) var(--pad-card);
    height: 100%;
}
.stat-card .stat-value {
    font-size: var(--text-stat);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tighter);
    line-height: 1.1;
}
.stat-card .stat-label {
    font-size: var(--text-base);
    color: var(--color-muted);
    font-weight: var(--weight-medium);
    margin-top: var(--space-3xs);
}
.stat-card .stat-note { font-size: var(--text-xs); margin-top: var(--space-3xs); }

.stat-icon {
    width: var(--stat-icon-size);
    height: var(--stat-icon-size);
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--stat-icon-size);
    color: var(--color-ink);
}
.stat-icon svg { width: 20px; height: 20px; }

.ic-total  { background: var(--color-tint); }
.ic-new    { background: var(--brand-accent-tint); color: var(--brand-accent); }
.ic-viewed { background: var(--status-viewed-bg); color: var(--status-viewed-fg); }
.ic-prog   { background: var(--status-progress-bg); color: var(--status-progress-fg); }
.ic-closed { background: var(--status-closed-bg); color: var(--status-closed-fg); }

@media (max-width: 380px) {
    .stat-card { padding: var(--space-md); gap: var(--space-sm); }
    .stat-card .stat-icon { display: none; }
}

/* Main column + side rail, used by the dashboards and case detail. */
.rail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
@media (min-width: 1200px) { .rail-grid { grid-template-columns: minmax(0, 1fr) var(--rail-width); } }

/* ---------------------------------------------------------------------------
   Status chips
   --------------------------------------------------------------------------- */

.chip {
    display: inline-block;
    padding: var(--space-3xs) var(--space-md);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1.5;
    white-space: nowrap;
}

.chip-new      { background: var(--status-new-bg);      color: var(--status-new-fg); }
.chip-viewed   { background: var(--status-viewed-bg);   color: var(--status-viewed-fg); }
.chip-progress { background: var(--status-progress-bg); color: var(--status-progress-fg); }
.chip-closed   { background: var(--status-closed-bg);   color: var(--status-closed-fg); }
.chip-other    { background: var(--status-other-bg);    color: var(--status-other-fg); }

.status-select {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-pill);
    padding: var(--space-3xs) var(--space-2xl) var(--space-3xs) var(--space-md);
    border: var(--border-width) solid transparent;
    cursor: pointer;
    appearance: none;
    max-width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%235F5B55' d='M8 11L4 6h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-sm) center;
    background-size: 11px;
}
.status-select:focus { box-shadow: var(--shadow-focus); outline: none; }

/* ---------------------------------------------------------------------------
   Tables

   Desktop: a normal table.
   Below 768px: each row becomes a stacked card, labelled from the cell's
   data-label attribute. No horizontal panning on a phone.
   --------------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.eda-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); margin: 0; }

.eda-table thead th {
    text-align: left;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-muted);
    padding: var(--space-md) var(--space-lg);
    border-bottom: var(--border-width) solid var(--color-line);
    white-space: nowrap;
}

.eda-table tbody td {
    padding: var(--space-lg);
    border-bottom: var(--border-width) solid var(--color-line-soft);
    vertical-align: middle;
}
.eda-table tbody tr:hover td { background: var(--color-surface-alt); }

.eda-table .case-number { font-weight: var(--weight-semibold); color: var(--brand-charcoal); font-variant-numeric: tabular-nums; }
.eda-table .patient-name { font-weight: var(--weight-semibold); }
.eda-table .sub-line { display: block; font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-3xs); }

.table-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding: var(--space-lg) var(--space-xl);
    font-size: var(--text-base);
    color: var(--color-muted);
    border-top: var(--border-width) solid var(--color-line);
}

@media (max-width: 991.98px) {
    .eda-table thead { display: none; }
    .eda-table, .eda-table tbody, .eda-table tr, .eda-table td { display: block; width: 100%; }

    .eda-table tr {
        border: var(--border-width) solid var(--color-line);
        border-radius: var(--radius-md);
        margin-bottom: var(--space-md);
        padding: var(--space-2xs) var(--space-md);
        background: var(--color-surface);
    }
    .eda-table tbody tr:hover td { background: transparent; }

    .eda-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-md);
        padding: var(--space-sm) 0;
        border-bottom: var(--border-width) solid var(--color-line-soft);
        text-align: right;
    }
    .eda-table tbody td:last-child { border-bottom: 0; }

    /* The column heading travels on the cell, so reading order still works. */
    .eda-table tbody td::before {
        content: attr(data-label);
        font-size: var(--text-2xs);
        font-weight: var(--weight-semibold);
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--color-muted);
        text-align: left;
        flex: 0 0 auto;
        padding-right: var(--space-md);
    }

    /* The case number leads each card: full width, no label. */
    .eda-table tbody td.cell-lead {
        justify-content: flex-start;
        text-align: left;
        padding-top: var(--space-md);
        font-size: var(--text-md);
    }
    .eda-table tbody td.cell-lead::before { content: none; }

    .eda-table tbody td.cell-actions { justify-content: stretch; }
    .eda-table tbody td.cell-actions::before { content: none; }
    .eda-table tbody td.cell-actions .btn { width: 100%; }
    .eda-table tbody td.cell-actions .view-link { width: 100%; text-align: center; padding: var(--space-sm) 0; }

    .eda-table .sub-line { display: inline; margin-left: var(--space-2xs); }

    /* Nothing can scroll sideways once rows are cards. */
    .table-wrap { overflow-x: visible; }
}

/* ---------------------------------------------------------------------------
   Filter bars
   --------------------------------------------------------------------------- */

.filter-bar { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px)  { .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px)  { .filter-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .filter-bar-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.filter-bar .form-label { margin-bottom: var(--space-2xs); }

/* ---------------------------------------------------------------------------
   Stage tracker (All-on-X)
   --------------------------------------------------------------------------- */

.stage-grid { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-2xl); }
@media (min-width: 576px) { .stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .stage-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stage-card {
    position: relative;
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-line);
    border-top: 4px solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-lg) var(--pad-card-tight) var(--space-md);
    height: 100%;
}
.stage-card.is-complete { border-top-color: var(--status-closed-fg); }
.stage-card.is-current { border-top-color: var(--brand-accent); box-shadow: var(--shadow-md); }
.stage-card.is-pending { opacity: .72; }

/* "CURRENT STAGE" ribbon sitting on the top border. */
.stage-flag {
    position: absolute;
    top: -11px;
    left: var(--pad-card-tight);
    background: var(--brand-accent);
    color: var(--brand-on-accent);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: var(--space-3xs) var(--space-sm);
    border-radius: var(--radius-xs);
    line-height: 1.5;
}

.stage-card .stage-name { font-weight: var(--weight-bold); font-size: var(--text-md); }
.stage-card dl { margin: var(--space-md) 0 0; font-size: var(--text-base); }
.stage-card .stage-row { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-3xs) 0; }
.stage-card dt { color: var(--color-muted); font-weight: var(--weight-normal); }
.stage-card dd { margin: 0; font-weight: var(--weight-semibold); text-align: right; }

.stage-flow-row { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }

.stage-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    border: var(--border-width) solid var(--color-line);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    background: var(--color-tint);
    white-space: nowrap;
}
.stage-pill.is-final { background: var(--brand-accent-tint); color: var(--brand-accent); border-color: var(--brand-accent-tint-border); }

/* ---------------------------------------------------------------------------
   Records gallery
   --------------------------------------------------------------------------- */

.record-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px)  { .record-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .record-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1920px) { .record-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.record-tile {
    border: var(--border-width) solid var(--color-line);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
}

.record-preview {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(150deg, var(--color-tint), var(--color-tint-strong));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    overflow: hidden;
}
.record-preview img { width: 100%; height: 100%; object-fit: cover; }

.record-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-top: var(--border-width) solid var(--color-line);
}
.record-meta .record-name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.record-meta .record-ext { font-size: var(--text-2xs); color: var(--color-muted); flex: 0 0 auto; }

.record-actions { display: flex; gap: var(--space-2xs); padding: 0 var(--space-md) var(--space-md); }
.record-actions .btn { flex: 1 1 0; font-size: var(--text-xs); padding: var(--space-xs) var(--space-sm); }

@media (max-width: 400px) { .record-actions { flex-direction: column; } }

/* ---------------------------------------------------------------------------
   Chat
   --------------------------------------------------------------------------- */

.chat-scroll {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--pad-card-tight);
    max-height: min(56vh, 480px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-surface-alt);
}

.chat-msg { display: flex; gap: var(--space-md); max-width: 90%; }
.chat-msg.is-mine { margin-left: auto; flex-direction: row-reverse; }

.chat-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--color-tint-strong);
    color: var(--brand-charcoal);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
}

.chat-bubble {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-line);
    border-radius: var(--radius-lg);
    border-top-left-radius: var(--radius-xs);
    padding: var(--space-md);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
}
.chat-msg.is-mine .chat-bubble {
    background: var(--brand-accent-tint);
    border-color: var(--brand-accent-tint-border);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-xs);
}
.chat-bubble.is-internal {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    border-style: dashed;
}

.chat-bubble .chat-author { font-size: var(--text-xs); font-weight: var(--weight-semibold); margin-bottom: var(--space-3xs); }
.chat-bubble .chat-time { font-size: var(--text-2xs); color: var(--color-muted); margin-top: var(--space-2xs); }

.chat-day {
    text-align: center;
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    color: var(--color-muted);
    text-transform: uppercase;
}

.online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); display: inline-block; }

/* ---------------------------------------------------------------------------
   RX forms
   --------------------------------------------------------------------------- */

.rx-section {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-xl);
}

.rx-section > header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding: var(--pad-card-tight) var(--pad-card) var(--space-md);
}
.rx-section > header h2 { margin: 0; }
.rx-section > .rx-body { padding: 0 var(--pad-card) var(--pad-card); }

.rx-step {
    width: var(--step-num-size);
    height: var(--step-num-size);
    border-radius: var(--radius-md);
    background: var(--brand-accent);
    color: var(--brand-on-accent);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--step-num-size);
}

.rx-section-sub {
    color: var(--color-muted);
    font-size: var(--text-base);
    margin: 0 0 var(--space-lg) calc(var(--step-num-size) + var(--space-md));
}
@media (max-width: 575.98px) { .rx-section-sub { margin-left: 0; } }

.rx-note {
    background: var(--brand-accent-tint);
    border: var(--border-width) solid var(--brand-accent-tint-border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--pad-card-tight);
    font-size: var(--text-base);
    margin-bottom: var(--space-xl);
}

.req-badge {
    display: inline-block;
    background: var(--brand-accent);
    color: var(--brand-on-accent);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border-radius: var(--radius-xs);
    padding: var(--space-2xs) var(--space-md);
}

.form-label { font-size: var(--text-base); font-weight: var(--weight-semibold); margin-bottom: var(--space-xs); }
.req { color: var(--brand-accent); }

.form-control, .form-select, textarea, input[type="text"], input[type="email"], input[type="date"], input[type="number"] {
    font-family: inherit;
    font-size: var(--text-md);
    border: var(--border-width) solid var(--color-line);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    background: var(--color-surface);
    color: var(--color-ink);
}
.form-control:focus, .form-select:focus, textarea:focus {
    border-color: var(--brand-accent);
    box-shadow: var(--shadow-focus);
    outline: none;
}

/* iOS zooms the page when a focused field is under 16px. Bumping the size on
   touch devices stops the RX form jumping about as doctors tab through it. */
@media (pointer: coarse) {
    .form-control, .form-select, textarea, input, select { font-size: 16px; }
}

/* Field grids */
.field-grid { display: grid; gap: var(--space-lg) var(--pad-card-tight); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
    .field-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .field-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Card-style radio groups */
.choice-grid { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) { .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .choice-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.choice-card { position: relative; }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card > label {
    display: block;
    border: var(--border-width) solid var(--color-line);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    height: 100%;
    background: var(--color-surface);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.choice-card > label:hover { border-color: var(--brand-accent-tint-border); }
.choice-card input:checked + label { border-color: var(--brand-accent); background: var(--brand-accent-tint); }
.choice-card input:focus-visible + label { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.choice-card .choice-title { font-weight: var(--weight-semibold); font-size: var(--text-md); display: block; }
.choice-card .choice-sub { font-size: var(--text-xs); color: var(--color-muted); display: block; margin-top: var(--space-3xs); }

/* Segmented control */
.segmented { display: inline-flex; border: var(--border-width) solid var(--color-line); border-radius: var(--radius-sm); overflow: hidden; max-width: 100%; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
    padding: var(--space-sm) var(--space-2xl);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    background: var(--color-surface);
    border-right: var(--border-width) solid var(--color-line);
    margin: 0;
    flex: 1 1 auto;
    text-align: center;
}
.segmented label:last-of-type { border-right: 0; }
.segmented input:checked + label { background: var(--brand-accent); color: var(--brand-on-accent); }
.segmented input:focus-visible + label { outline: 2px solid var(--brand-accent); outline-offset: -2px; }
@media (max-width: 575.98px) { .segmented { width: 100%; } }

/* Upload tiles */
.upload-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px)  { .upload-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .upload-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.upload-tile {
    border: 1.5px dashed var(--color-line);
    border-radius: var(--radius-md);
    padding: var(--space-lg) var(--space-md);
    text-align: center;
    background: var(--color-surface);
    transition: border-color var(--transition-fast), background var(--transition-fast);
    height: 100%;
    cursor: pointer;
}
.upload-tile.is-required { border-color: var(--brand-accent-tint-border); }
.upload-tile.is-done { border-style: solid; border-color: var(--color-success-border); background: var(--color-success-bg); }
.upload-tile.is-dragover { border-color: var(--brand-accent); background: var(--brand-accent-tint); }
.upload-tile .tile-name { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.upload-tile .tile-hint { font-size: var(--text-2xs); color: var(--color-muted); margin-top: var(--space-3xs); }
.upload-tile .tile-status { font-size: var(--text-xs); font-weight: var(--weight-semibold); margin-top: var(--space-sm); overflow-wrap: anywhere; }

.upload-progress { height: 4px; border-radius: 2px; background: var(--color-line); overflow: hidden; margin-top: var(--space-sm); }
.upload-progress > span { display: block; height: 100%; background: var(--brand-accent); transition: width var(--transition-fast); }

/* Sticky submit bar */
.rx-footer {
    position: sticky;
    bottom: 0;
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--pad-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    z-index: 5;
    box-shadow: 0 -2px 10px rgba(15, 45, 79, .06);
}
.rx-footer-actions { display: flex; gap: var(--space-md); }

@media (max-width: 767.98px) {
    .rx-footer { flex-direction: column; align-items: stretch; text-align: center; }
    .rx-footer-actions .btn { flex: 1 1 0; }
}

/* Stepper */
.rx-stepper { display: flex; align-items: center; justify-content: center; max-width: 760px; margin: 0 auto var(--space-2xl); }
.rx-stepper .step { display: flex; align-items: center; gap: var(--space-md); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-muted); white-space: nowrap; }
.rx-stepper .step.active { color: var(--color-ink); }
.rx-stepper .step .num {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--color-line);
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
}
.rx-stepper .step.active .num { background: var(--brand-accent); color: var(--brand-on-accent); }
.rx-stepper .step.done .num { background: var(--brand-charcoal); color: var(--brand-on-dark-strong); }
.rx-stepper .bar { flex: 1 1 auto; height: 2px; background: var(--color-line); margin: 0 var(--space-lg); min-width: var(--space-2xl); }

@media (max-width: 575.98px) {
    .rx-stepper .step .step-label { display: none; }
    .rx-stepper .bar { margin: 0 var(--space-sm); }
}

/* Live summary panel */
.summary-panel { position: sticky; top: calc(var(--chrome-height) + var(--space-lg)); }
.summary-row { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) 0; font-size: var(--text-base); border-bottom: var(--border-width) solid var(--color-line-soft); }
.summary-row:last-child { border-bottom: 0; }
.summary-row dt { color: var(--color-muted); font-weight: var(--weight-normal); }
.summary-row dd { margin: 0; font-weight: var(--weight-semibold); text-align: right; overflow-wrap: anywhere; }

@media (max-width: 1199.98px) { .summary-panel { position: static; } }

/* Submitted RX read-back: two-column definition list. */
.rx-readback { display: grid; gap: 0 var(--space-4xl); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .rx-readback { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rx-readback-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-md) 0;
    border-bottom: 1px dotted var(--color-line);
    font-size: var(--text-md);
}
.rx-readback-row dt { color: var(--color-muted); font-weight: var(--weight-normal); }
.rx-readback-row dd { margin: 0; font-weight: var(--weight-semibold); text-align: right; }

/* ---------------------------------------------------------------------------
   Public landing pages
   --------------------------------------------------------------------------- */

.public-bar { background: var(--brand-charcoal); }
.public-bar .nav-link { color: var(--brand-on-dark); font-size: var(--text-md); padding: var(--space-sm) 0; }
.public-bar .nav-link:hover { color: var(--brand-on-dark-strong); text-decoration: none; }
.public-nav-links { display: flex; gap: var(--space-2xl); }

.hero {
    background: linear-gradient(160deg, var(--brand-charcoal) 0%, var(--brand-charcoal-soft) 70%, var(--brand-charcoal-warm) 100%);
    color: var(--brand-on-dark-strong);
    padding-block: var(--space-5xl);
}
@media (max-width: 767.98px) { .hero { padding-block: var(--space-3xl); } }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3xl); align-items: center; }
@media (min-width: 992px) { .hero-grid { grid-template-columns: 1.08fr .92fr; gap: var(--space-5xl); } }

.hero h1 {
    font-size: var(--text-hero);
    font-weight: var(--weight-heavy);
    letter-spacing: var(--tracking-tighter);
    line-height: var(--leading-tight);
}
.hero .accent { color: var(--brand-accent-on-dark); }

.hero-eyebrow {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--brand-accent-on-dark);
    margin: var(--space-2xl) 0 var(--space-md);
}

.hero-sub {
    font-size: var(--text-hero-sub);
    line-height: var(--leading-relaxed);
    color: var(--brand-on-dark);
    max-width: 600px;
    margin-bottom: var(--space-2xl);
}

.hero-checks { list-style: none; display: flex; flex-direction: column; gap: var(--space-md); margin: 0 0 var(--space-3xl); padding: 0; }
.hero-checks li { display: flex; gap: var(--space-md); align-items: flex-start; color: var(--brand-on-dark-strong); font-size: var(--text-md); }
.hero-checks .tick { color: var(--brand-accent); flex: 0 0 auto; font-weight: var(--weight-bold); }

.hero-cta { display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap; }
.hero-note { font-size: var(--text-sm); color: var(--brand-on-dark-dim); margin-top: var(--space-lg); }


/* Credentials under the "Why ..." lede on both landing pages, wording from the main site. */
.trust-points {
    list-style: none;
    padding: 0;
    margin: var(--space-xl) auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md) var(--space-2xl);
    font-size: var(--text-base);
    color: var(--color-muted);
}
.trust-points li { display: flex; align-items: center; gap: var(--space-sm); }
.trust-points svg { color: var(--brand-accent); flex-shrink: 0; }

.hero-media {
    background: var(--color-surface);
    border-radius: var(--radius-3xl);
    overflow: hidden;
    box-shadow: var(--shadow-hero);
}

.hero-media-badge {
    display: inline-block;
    background: var(--brand-charcoal);
    color: var(--brand-on-dark-strong);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border-radius: var(--radius-xs);
    padding: var(--space-2xs) var(--space-md);
}
/* The hero gallery on /guided-surgery.

   aspect-ratio plus object-fit is what stops the hero resizing between slides: the five
   photographs do not share intrinsic dimensions (guide-05 is 811x541 against 1600x1066 for
   the rest), and without a fixed frame each advance would reflow the largest element above
   the fold. */
.hero-gallery { position: relative; background: var(--color-tint); }
.hero-gallery .carousel-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
/* Whole-photograph variant, for sources whose shape does not match the 3:2 frame. The
   All-on-X photographs are ~2.76:1 banners; cropping them to fill would cut the ends off the
   milled bar and most of the slide whose subject sits at the left. They are shot on white, so
   a white ground reads as margin rather than as letterboxing. */
.hero-gallery--contain,
.hero-gallery--contain .carousel-item img { background: var(--color-surface); }
.hero-gallery--contain .carousel-item img { object-fit: contain; }

/* Matted slide, for a photograph smaller than the frame. Upscaled to the frame's width it
   goes soft, so it keeps its own size and sits as a framed print on the same tint gradient
   the rest of the site uses. The item takes the frame's 3:2 shape itself, since its image no
   longer does. width: auto overrides the width attribute's hint only to use the intrinsic
   size - the same number - so the space is still reserved before the file arrives. */
.hero-gallery .hero-slide--matted.active,
.hero-gallery .hero-slide--matted.carousel-item-next,
.hero-gallery .hero-slide--matted.carousel-item-prev {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-gallery .hero-slide--matted {
    aspect-ratio: 3 / 2;
    padding: var(--space-2xl);
    background: linear-gradient(150deg, var(--color-tint), var(--color-tint-strong));
}
.hero-gallery .hero-slide--matted img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    border: 6px solid var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.hero-gallery-badge { position: absolute; top: var(--space-lg); left: var(--space-lg); z-index: 2; }

/* Bootstrap's control icons are white on a light photograph, so they need their own
   backing rather than relying on whatever the image happens to be behind them. */
.hero-gallery .carousel-control-prev,
.hero-gallery .carousel-control-next { width: 12%; opacity: 1; }
.hero-gallery .carousel-control-prev-icon,
.hero-gallery .carousel-control-next-icon {
    background-color: rgb(0 0 0 / 45%);
    border-radius: 50%;
    padding: var(--space-md);
    background-size: 50%;
}
.hero-gallery .carousel-indicators { margin-bottom: var(--space-sm); }
.hero-gallery .carousel-indicators [data-bs-target] { width: 28px; height: 4px; border-radius: 2px; }

/* Honoured by the browser for the slide transition; site.js additionally stops the
   auto-advance entirely, since a slide that snaps rather than fades is still motion. */
@media (prefers-reduced-motion: reduce) {
    .hero-gallery .carousel-item { transition: none; }
}

.hero-media-note { padding: var(--space-lg) var(--pad-card-tight); font-size: var(--text-base); color: var(--color-muted); border-top: var(--border-width) solid var(--color-line); }

.flow-strip { background: var(--color-surface); border-block: var(--border-width) solid var(--color-line); }
.flow-strip-inner { display: flex; align-items: center; gap: var(--space-2xl); flex-wrap: wrap; padding-block: var(--space-xl); }

.step-dot {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--brand-charcoal);
    color: var(--brand-on-dark-strong);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
}

.how-step-num {
    width: 38px; height: 38px;
    border-radius: var(--radius-lg);
    background: var(--brand-accent);
    color: var(--brand-on-accent);
    font-weight: var(--weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lede { font-size: var(--text-lg); color: var(--color-muted); max-width: 660px; margin-inline: auto; line-height: var(--leading-relaxed); }

/* ---------------------------------------------------------------------------
   Sign-in
   --------------------------------------------------------------------------- */

.auth-card {
    width: 100%;
    max-width: 460px;
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-line);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4xl) var(--space-3xl) var(--space-3xl);
    text-align: center;
}
@media (max-width: 575.98px) { .auth-card { padding: var(--space-2xl) var(--space-lg); } }

.auth-tooth {
    width: 64px; height: 64px;
    border-radius: var(--radius-3xl);
    background: var(--brand-charcoal);
    color: var(--brand-on-dark-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-xl);
    box-shadow: var(--shadow-lg);
}

.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    width: 100%;
    border: var(--border-width) solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: var(--space-md) var(--pad-card-tight);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.google-btn:hover { background: var(--color-surface-alt); text-decoration: none; color: var(--color-ink); }

.provision-note {
    display: flex;
    gap: var(--space-md);
    text-align: left;
    background: var(--color-tint);
    border: var(--border-width) solid var(--color-tint-strong);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-top: var(--space-xl);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-muted);
}

.auth-foot { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: var(--border-width) solid var(--color-line-soft); font-size: var(--text-base); color: var(--color-muted); }

.request-panel { background: var(--brand-accent-tint); border: var(--border-width) solid var(--brand-accent-tint-border); }

.mini-step { font-size: var(--text-xs); }
.mini-step .mini-step-title { font-weight: var(--weight-bold); }

/* The development account picker: rows must wrap rather than push the card wide. */
.list-group-item-action { flex-wrap: wrap; gap: var(--space-sm); }
.list-group-item-action .chip {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .list-group-item-action .chip { margin-left: calc(var(--avatar-size) + var(--space-md)); }
}

/* ---------------------------------------------------------------------------
   Admin global search
   --------------------------------------------------------------------------- */

.global-search-wrap { position: relative; }

.searchbox {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    background: var(--color-surface);
    border: 2px solid var(--brand-accent);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-search);
    padding: 0 var(--pad-card);
    min-height: 60px;
}
.searchbox input {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    padding: var(--space-lg) 0;
    font-size: var(--text-lg);
    color: var(--color-ink);
}
.searchbox input:focus { outline: none; box-shadow: none; }
@media (max-width: 575.98px) { .searchbox { min-height: 52px; padding: 0 var(--space-lg); gap: var(--space-md); } }

.global-search-results {
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + var(--space-sm));
    z-index: 40;
    background: var(--color-surface);
    color: var(--color-ink);
    border: var(--border-width) solid var(--color-line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-dropdown);
    max-height: min(60vh, 26rem);
    overflow-y: auto;
}

.search-group-label {
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-muted);
    padding: var(--space-md) var(--pad-card) var(--space-2xs);
}

.search-hit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-md) var(--pad-card);
    border-top: var(--border-width) solid var(--color-line-soft);
    color: inherit;
}
.search-hit:hover { background: var(--color-surface-alt); text-decoration: none; color: inherit; }

/* ---------------------------------------------------------------------------
   Activity feed, help panel, bars, directory
   --------------------------------------------------------------------------- */

.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: var(--border-width) solid var(--color-line-soft); }
.feed li:last-child { border-bottom: none; }

.feed-icon {
    width: var(--feed-icon-size);
    height: var(--feed-icon-size);
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--feed-icon-size);
}
.feed-icon svg { width: 16px; height: 16px; }

.d-status { background: var(--status-progress-bg); color: var(--status-progress-fg); }
.d-msg    { background: var(--color-tint); color: var(--color-muted); }
.d-file   { background: var(--status-closed-bg); color: var(--status-closed-fg); }
.d-new    { background: var(--brand-accent-tint); color: var(--brand-accent); }

.feed .txt { font-size: var(--text-base); line-height: var(--leading-snug); overflow-wrap: anywhere; }
.feed .txt b { font-weight: var(--weight-semibold); }
.when, .feed .when { display: block; font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-3xs); }

.help-panel {
    background: linear-gradient(135deg, var(--brand-charcoal) 0%, var(--brand-charcoal-soft) 100%);
    color: var(--brand-on-dark-strong);
    border-radius: var(--radius-lg);
    border: none;
    padding: var(--pad-card);
}
.help-panel h2 { color: var(--brand-on-dark-strong); margin-bottom: var(--space-xs); }
.help-panel p { font-size: var(--text-base); color: var(--brand-on-dark-brand); line-height: var(--leading-normal); margin-bottom: var(--space-lg); }
.help-panel a.help-btn {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    color: var(--brand-on-dark-strong);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    padding: var(--space-md);
    background: rgba(255, 255, 255, .1);
    border-radius: var(--radius-md);
    margin-top: var(--space-sm);
    overflow-wrap: anywhere;
}
.help-panel a.help-btn:hover { background: rgba(255, 255, 255, .16); text-decoration: none; }
.help-panel a.help-btn small { display: block; font-weight: var(--weight-normal); font-size: var(--text-xs); color: var(--brand-on-dark-brand); }

.bar-track { height: 8px; background: var(--color-line); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--brand-accent); border-radius: 4px; }

.breadcrumb-line { font-size: var(--text-base); color: var(--color-muted); margin-bottom: var(--space-lg); }
.breadcrumb-line a { color: var(--color-muted); }
.breadcrumb-line a:hover { color: var(--brand-accent); }

.internal-note-banner {
    background: var(--color-warning-bg);
    border: var(--border-width) solid var(--color-warning-border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-base);
    color: var(--color-warning);
}

.htmx-indicator { opacity: 0; transition: opacity var(--transition-fast); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

.empty-state { padding: var(--space-4xl) var(--space-lg); text-align: center; color: var(--color-muted); }
.empty-state .empty-icon { font-size: var(--text-stat); opacity: .4; }

/* Practice directory */
.directory-practice { border: var(--border-width) solid var(--color-line); border-radius: var(--radius-lg); margin-bottom: var(--space-lg); overflow: hidden; }
.directory-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); padding: var(--space-lg) var(--pad-card-tight); background: var(--color-surface-alt); border-bottom: var(--border-width) solid var(--color-line); }
.directory-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--pad-card-tight); border-bottom: var(--border-width) solid var(--color-line-soft); }
.directory-row:last-child { border-bottom: 0; }
.directory-stat { text-align: center; min-width: 52px; }
.directory-stat .directory-stat-value { font-weight: var(--weight-bold); font-size: var(--text-md); }
.directory-stat .directory-stat-label { font-size: var(--text-2xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

@media (max-width: 575.98px) {
    .directory-head, .directory-row { gap: var(--space-sm); }
    .directory-stat { min-width: 44px; }
}

/* Access request cards */
.request-card { border: var(--border-width) solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-md); margin-bottom: var(--space-md); }
.request-card .request-source {
    font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide);
    text-transform: uppercase; color: var(--brand-accent); background: var(--brand-accent-tint);
    border-radius: var(--radius-xs); padding: var(--space-3xs) var(--space-sm);
}

/* ---------------------------------------------------------------------------
   Print — a case page should print cleanly for a paper chart
   --------------------------------------------------------------------------- */

@media print {
    .portal-bar, .rx-footer, .btn, .chat-scroll, .help-panel,
    .global-search-wrap, .searchbox, footer, .view-link { display: none !important; }

    body { background: var(--print-surface); }
    .eda-card { border-color: var(--print-line); box-shadow: none; break-inside: avoid; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; }
}

/* Alpine hides these until it initialises, so conditional blocks do not flash on load.
   Previously duplicated as an inline <style> in six views, which blocked tightening
   style-src in the Content-Security-Policy. */
[x-cloak] { display: none !important; }

/* ---------------------------------------------------------------------------
   Former inline styles.
   The Content-Security-Policy sends style-src 'self' with no 'unsafe-inline', so a style=""
   attribute in markup is ignored by the browser. Everything that used one lives here, and
   CspConventionTests fails the build if a new one appears. Widths computed by the server
   (the report and completion bars) are applied from data-width by site.js instead - setting
   element.style from script is permitted; a style attribute in markup is not.

   !important throughout, as Bootstrap's own utilities do: these replace inline styles, which
   outrank every selector, and without it more specific rules won - .help-panel p turned the
   admin greeting's muted line back to the panel's default colour.
   --------------------------------------------------------------------------- */
.text-accent { color: var(--brand-accent) !important; }
.text-ink { color: var(--color-ink) !important; }
.text-on-dark-muted { color: var(--color-on-dark-muted) !important; }
.text-done { color: var(--color-done-mark) !important; }
.text-size-xs { font-size: var(--text-xs) !important; }
.text-size-md { font-size: var(--text-md) !important; }
.text-size-3xl { font-size: var(--text-3xl) !important; }
.mw-16rem { max-width: 16rem !important; }
.mw-22rem { max-width: 22rem !important; }
.mw-34rem { max-width: 34rem !important; }
.mw-46rem { max-width: 46rem !important; }
.grid-span-all { grid-column: 1 / -1 !important; }

.success-disc {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: var(--status-closed-bg) !important;
    color: var(--status-closed-fg) !important;
}
.case-number-card {
    border: 1px solid var(--brand-accent) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--brand-accent-tint) !important;
}
.case-number-value { font-size: var(--text-2xl) !important; color: var(--brand-accent) !important; }

.directory-practice-head { background: var(--color-surface-alt) !important; }
.stat-icon--accent { background: var(--brand-accent-tint) !important; color: var(--brand-accent) !important; }
.avatar-badge--lg { width: 44px !important; height: 44px !important; font-size: .875rem !important; }
.avatar-badge--muted { background: var(--color-avatar-inactive) !important; }
.badge-status-active { background: var(--status-closed-bg) !important; color: var(--status-closed-fg) !important; }
.badge-status-inactive { background: var(--status-other-bg) !important; color: var(--status-other-fg) !important; }

/* htmx's loading-indicator rules. htmx normally inserts these itself as a <style> block, which
   style-src 'self' blocks; the htmx-config meta tag in _Layout turns that off. Same rules. */
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; transition: opacity 200ms ease-in; }