/* Self-hosted fonts (latin subsets, vendored from Google Fonts like htmx/chart.js — no CDN call).
   These back the --font-display / --font-body / --font-mono tokens below. */
@font-face {
    font-family: "Rajdhani";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/rajdhani-400.woff2") format("woff2");
}

@font-face {
    font-family: "Rajdhani";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/rajdhani-500.woff2") format("woff2");
}

@font-face {
    font-family: "Rajdhani";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/rajdhani-600.woff2") format("woff2");
}

@font-face {
    font-family: "Rajdhani";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/rajdhani-700.woff2") format("woff2");
}

@font-face {
    /* Variable font: one file covers every weight the app uses. */
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/sourcesans3-var.woff2") format("woff2");
}

@font-face {
    font-family: "DM Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/dmmono-400.woff2") format("woff2");
}

@font-face {
    font-family: "DM Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/dmmono-500.woff2") format("woff2");
}

:root {
    --navy: #0C1E48;
    --navy-deep: #061535;
    --navy-mid: #1A2B4A;
    --teal: #00A09A;
    --teal-dim: #007A75;
    --teal-soft: rgba(0, 160, 154, 0.12);
    --off-white: #F4F7FA;
    --white: #FFFFFF;
    --surface-1: #FFFFFF;
    --surface-2: #F4F7FA;
    --surface-3: #E9EEF4;
    --text-primary: #1A2B4A;
    --text-secondary: #3D5470;
    --text-muted: #7A90A8;
    --text-on-navy: #FFFFFF;
    --text-on-navy-muted: rgba(255, 255, 255, 0.62);
    --border: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.16);
    --border-on-navy: rgba(255, 255, 255, 0.12);
    --red: #C0552B;
    --amber: #B8740B;
    --green: #007A75;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;
    --topbar-h: 54px;
    --primary-nav-h: 48px;
    --statusbar-h: 28px;
    --font-display: "Rajdhani", sans-serif;
    --font-body: "Source Sans 3", sans-serif;
    --font-mono: "DM Mono", "JetBrains Mono", monospace;
    --shadow-sm: 0 1px 2px rgba(12, 30, 72, 0.06);
    --shadow-md: 0 2px 8px rgba(12, 30, 72, 0.10);
    --shadow-lg: 0 8px 24px rgba(12, 30, 72, 0.14);
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 10px;
}

/* Anchor jumps must clear the sticky chrome, or the thing jumped to lands underneath it and the
   user has to scroll back up. Two bars stick to the DOCUMENT scroller (.paip-app is min-height
   with no overflow, so the document is what scrolls): .paip-topbar at top: 0, and .paip-nav at
   top: var(--topbar-h) beneath it.

   scroll-padding-top on the scroller rather than scroll-margin-top on each target, because one
   declaration then covers every way a jump happens -- a #fragment link, :target, and the
   scrollIntoView() behind htmx's `show:` modifier, which is what the Teams page's "New team"
   button uses (hx-swap="innerHTML show:#paip-team-editor:top"). Per-target margins would have to
   be added to each new anchor, and would be silently forgotten on the next one.

   Six pages render no nav -- Home, Login, Settings, TenantSelector, Error, NotFound -- so the
   nav's height is added only where one is present; :has() failing anywhere degrades to the
   topbar-only offset rather than to nothing. --space-3 is breathing room so the target does not
   sit flush against the bar. */
html {
    scroll-padding-top: calc(var(--topbar-h) + var(--space-3));
}

html:has(.paip-nav) {
    scroll-padding-top: calc(var(--topbar-h) + var(--primary-nav-h) + var(--space-3));
}

/* Base typography per the mockups (docs/mockups): body font/colour/off-white canvas. */
body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--off-white);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

a, a:visited, a:hover, a:active {
    color: var(--text-secondary);
    text-decoration: none; 
}

.paip-page-content {
    flex: 1;
    background: var(--off-white);
    min-height: calc(100vh - var(--topbar-h) - var(--primary-nav-h) - var(--statusbar-h));
    padding: var(--space-5);
    position: relative;
}

/* The fixed-height screens (working queue, claim review) already stop above the status bar -- their
   own height subtracts --statusbar-h -- so on the full layout they do not take the room .paip-app
   reserves for it (MainLayout.razor.css). With it they measured 802px in an 800px window and
   scrolled by the 2px of the top bar's and nav's borders, which that height does not count. On the
   phone layout they scroll like any page and keep the reservation. */
html:not(.paip-mobile) .paip-app:has(.paip-panes, .paip-cr-layout) {
    padding-bottom: 0;
}

.paip-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Optional kicker above a page heading — the chain layer or section a page belongs to. */
.paip-page-eyebrow {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--teal-dim);
    margin-bottom: 2px;
}

.paip-page-heading {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--navy);
}

.paip-page-sub {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* PageHeader with a Leading mark (the HealthPlanAI analyzer badge): the mark beside the heading block. */
.paip-page-header-lead {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

/* Text utilities. Shared rather than per module — the HealthPlanAI screens use them throughout, and a
   provider screen that wants muted or monospaced text should reach for these, not a new copy. */
.paip-muted  { color: var(--text-muted); }
.paip-mono   { font-family: var(--font-mono); }
.paip-strong { font-weight: 700; color: var(--navy); }

.paip-progression {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    max-width: 920px;
    margin: 0 auto var(--space-5);
}

.paip-progression-step {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.paip-progression-number {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--teal-dim);
    line-height: 1;
}

.paip-progression-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.paip-progression-note {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.paip-anchor-button {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--navy);
    color: var(--white);
    border: none;
    padding: 14px 24px;
    border-radius: var(--r-md);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
    min-width: 300px;
    /* Contents pack to the left so the module badge leads and tenant names line up down the
       column, rather than each button centring its own badge+name pair. */
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    text-align: left;
}

.paip-anchor-button:hover {
    background: var(--teal-dim);
    color:var(--white);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.paip-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--navy);
    color: var(--white);
    border: none;
    padding: 8px 18px;
    border-radius: var(--r-md);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1.4;
}

.paip-button:hover, .paip-button:visited:hover {
    background: var(--teal-dim);
    color: var(--white);
}

.paip-button:visited {
    color: var(--white);
}

.paip-button-secondary {
    background: transparent;
    color: var(--navy);
    border: 1.5px solid var(--border-strong);
}

.paip-button-secondary:hover, .paip-button-secondary:visited:hover {
    background: var(--surface-3);
    color: var(--navy);
}

.paip-button-secondary:visited {
    color: var(--navy);
}

/* #933: a compact button for a control inside a row or a header line (Member 360's Reveal, its pager and a claim's
   detail). Combines with .paip-button and .paip-button-secondary. */
.paip-button-sm {
    font-size: 11px;
    padding: 4px 10px;
}

.paip-button-danger {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: transparent;
    color: var(--red);
    border: 1.5px solid var(--red);
    padding: 5px 12px;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    line-height: 1.4;
}

.paip-button-danger:hover {
    background: var(--red);
    color: var(--white);
}

/* ── Admin section blocks ──────────────────────────────────────────────────
   A titled block of admin copy above a form or table. Global rather than scoped:
   these lived in Settings.razor.css, where Blazor's scope attribute meant they
   only ever matched Settings.razor — the other three users (ReferenceData and
   the two tenant config forms) carry no scope and so rendered unstyled. */

.paip-admin-section {
    margin-top: 1.5rem;
}

.paip-admin-section-heading {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.paip-admin-section-note {
    color: var(--text-muted);
    margin-bottom: 1rem;
    max-width: 60ch;
}

/* ── Form layout ───────────────────────────────────────────────────────── */

.paip-admin-create-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 680px;
}

.paip-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.paip-form-field label {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.paip-form-field input[type="text"],
.paip-form-field input[type="email"],
.paip-form-field input[type="password"],
.paip-form-field input[type="url"],
.paip-form-field input[type="number"],
.paip-form-field select,
.paip-form-field textarea {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--white);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-md);
    padding: 8px 12px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* A form select draws the app's chevron, as .paip-filter-select does, with room for it; the browser's own sat
   against the right border (#975). Border and radius are the inputs', above. */
.paip-form-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 3.5L5 6.5L8 3.5' fill='none' stroke='%237A90A8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.paip-form-field input:focus,
.paip-form-field select:focus,
.paip-form-field textarea:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-soft);
}

.paip-form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-2);
}

/* Grouped fields (identity-provider forms): one bordered section per protocol, so the admin can see
   at a glance which half of the form applies. */
.paip-form-fieldset {
    border: 1px solid var(--border, #d9e1e8);
    border-radius: 6px;
    padding: 0.75rem 1rem 0.25rem;
    margin: 0 0 1rem;
    min-width: 0;
}
.paip-form-fieldset legend {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted, #5a7080);
    padding: 0 0.4rem;
}

/* A field whose effect leaves the platform -- the PHI switch on an agent, the body of a knowledge
   entry. Same geometry as .paip-admin-create-success, in amber instead of teal, so a caution reads as
   the sibling of a confirmation rather than as an invented style. These classes were in the markup
   with no rule at all, which rendered the PHI warning exactly like every other field. */
.paip-form-field-warn {
    padding: var(--space-3);
    border-left: 3px solid var(--amber);
    background: rgba(184, 116, 11, 0.08);
    border-radius: var(--r-sm);
}

.paip-form-field-warn label {
    color: var(--text-primary);
}

/* Secondary text beside a control: the "(platform: 1,000)" a budget field inherits, the paragraph
   under the PHI switch. Reset out of the uppercase display face a form label carries, because it is
   a sentence, not a label. */
.paip-form-hint {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-muted);
}

p.paip-form-hint {
    margin: var(--space-1) 0 0;
    color: var(--text-secondary);
}
.paip-form-field label input[type="checkbox"] {
    margin-right: 0.5rem;
}

/* Inline forms inside a table (domain add/remove): controls sit on one line. */
.paip-admin-inline-form {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin: 0;
}
.paip-admin-inline-form .paip-form-field {
    margin: 0;
}
.paip-admin-inline-form .paip-form-actions {
    margin: 0;
}

/* Sign-in landing page: one narrow card, centered in the page both ways. The header and footer
   stay where they are; only the content area centers, so the card sits in the middle of the space
   between them rather than hugging the top-left like a list page would. */
.paip-login {
    display: flex;
    align-items: center;
    justify-content: center;
}
.paip-login-card {
    width: 100%;
    max-width: 28rem;
}
.paip-login-card .paip-page-header {
    justify-content: center;
    text-align: center;
}
.paip-login .paip-login-form {
    width: 100%;
}
.paip-login-route {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--border, #d9e1e8);
    border-radius: 6px;
}
.paip-login-route-unknown {
    border-color: var(--amber, #b8740b);
}
.paip-login-route-info {
    border-color: var(--teal-dim, #2a7f7a);
}
.paip-login-fallback {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border, #d9e1e8);
    text-align: center;
}
.paip-login-fallback .paip-form-help {
    margin-bottom: 0.75rem;
}

/* ── Section header (used above inline HTMX forms) ─────────────────────── */

.paip-section-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
/* ── Claim detail card sections (shared) ───────────────────────────────────
   Global (not scoped) because sections are rendered both by ClaimPaneCard itself and as
   ChildContent from host components (e.g. WqClaimDetail's work/history sections), whose
   elements carry the host's CSS scope — scoped rules in any one component can't reach both. */

.paip-claim-pane-card-section {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border);
}

.paip-claim-pane-card-section:last-child {
    border-bottom: none;
}

.paip-claim-pane-card-section-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 11px;
}

/* Description body styled as the mock's .note callout. */
.paip-claim-pane-card-section-description {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-secondary);
    background: var(--surface-2);
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

/* ── Disposition pill + palette (shared: rail line-4 badge + detail card) ── */

.paip-disp-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--white);
    background: var(--navy);
    border-radius: 999px;
    padding: 1px 8px;
}

.paip-disp-D1 { background: #007A75; }   /* Correct & Resubmit */
.paip-disp-D2 { background: var(--red); }   /* Appeals */
.paip-disp-D3 { background: var(--amber); }   /* Rebill Payer */
.paip-disp-D4 { background: var(--green); }   /* Underpayment Recovery */
.paip-disp-D5 { background: #3D5470; }   /* Patient Billing */
.paip-disp-D6 { background: #7A90A8; }   /* Write Off Review */
.paip-disp-PV { background: #0C1E48; }   /* Prevent */
.paip-disp-RV { background: #9B59B6; }   /* Review (unmapped CARC) */

/* ── Team scope bar labels (shared: WQ + CR rails) ─────────────────────── */

.paip-team-bar-label {
    font-family: var(--font-display);
    font-size: 9.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right: 4px;
}

/* Single-team case: the team name as a static label (not interactive). */
.paip-team-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: 0.02em;
}

/* ── Inline save confirmation (returned as a raw htmx fragment) ────────────
   Global because the endpoint returns this span as raw HTML — it carries no CSS scope
   attribute, so a scoped rule would never match it. */

.paip-settings-note-inline {
    font-size: 0.85rem;
    color: var(--green);
}

/* ── Mode toggle (page-header inline segmented control, WQ + CR) ────────── */

.paip-mode-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.paip-mode-toggle-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.paip-mode-toggle-group {
    display: inline-flex;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--white);
}

.paip-mode-toggle-group button {
    background: transparent;
    border: none;
    padding: 6px 14px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    border-right: 1px solid var(--border);
}

.paip-mode-toggle-group button:last-child {
    border-right: none;
}

.paip-mode-toggle-group button.active {
    background: var(--navy);
    color: var(--white);
    font-weight: 600;
}

/* Locked mode (RcWqMode / RcCrMode): a static label styled like an active segment. */
.paip-mode-locked {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--white);
    background: var(--navy);
    border-radius: var(--r-md);
}

/* ── Pane detail body (the htmx swap target wrapping the claim card) ──────
   Global because the element is emitted both by the page and by the rail's OOB fragment. */

.paip-pane-detail-body {
    display: flex;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

/* ── Denials analytics dashboard body ─────────────────────────────────────────────────
   Global (not scoped) because DaDashboard is returned as a raw htmx fragment from
   /rc/denials/api/dashboard — fragments carry no CSS scope attribute. */

.paip-da-scope {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.paip-da-scope b {
    color: var(--text-primary);
    font-weight: 600;
}

/* KPI row (mock .kpis/.kpi). */
.paip-da-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}

.paip-da-kpi {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 15px 16px;
    box-shadow: var(--shadow-md);
}

.paip-da-kpi-k {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}

.paip-da-kpi-v {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 500;
    color: var(--navy);
    margin-top: 5px;
    letter-spacing: -0.5px;
}

.paip-da-kpi-v-text {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0;
}

.paip-da-kpi-accent .paip-da-kpi-v {
    color: var(--teal-dim);
}

.paip-da-kpi-s {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
}

/* Two-column analytics grid + panels (mock .grid2/.panel). */
.paip-da-grid2 {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 16px;
    align-items: start;
}

/* Card panel (mock .panel/.ph/.pb): shared chrome for the analytics dashboards and RC settings,
   rendered via the PanelCard component. Global (not scoped) so it also applies inside raw htmx
   fragments. Consolidates the former paip-da-panel* and paip-rc-panel* families. */
.paip-panel-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 11px;
    box-shadow: var(--shadow-md);
}

.paip-panel-card-head {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.paip-panel-card-head h3 {
    font-family: var(--font-display);
    font-weight: 600;
    margin: 0;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--navy);
}

.paip-panel-card-body {
    padding: 14px 16px;
}

/* Body modifier: content runs edge-to-edge (e.g. a flush table under the header). */
.paip-panel-card-flush {
    padding: 0;
}

/* Root modifier: top margin for a full-width panel below a grid (mock daTrend/daDrillPanel). */
.paip-panel-card-spaced {
    margin-top: 16px;
}

/* Filter-bar select (mock .sel): shared recipe for the analytics dashboards' scope selects. */
.paip-filter-select {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-body);
    border: 1px solid var(--border-strong);
    background: var(--white);
    border-radius: 8px;
    padding: 7px 28px 7px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* Table styling for the shared <Table> component. Global (not scoped to TableCard) so the
   component is self-styled wherever it renders — inside a TableCard, inside a PanelCard, or as a
   raw htmx fragment. */
.paip-table-card-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 4px;
}

.paip-table-card-table th {
    text-align: left;
    padding: 8px 10px;
    background: var(--surface-2);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.paip-table-card-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border);
}

/* Numeric columns. Same treatment ClaimLineItems already established for its own table -- right
   aligned, mono, tabular figures so digits line up down the column, and no wrapping -- hoisted to
   the shared <Table> so every consumer opts in with class="num" instead of writing a fourth copy.
   Global rather than scoped for the reason the block above is: the element carrying .num is
   rendered by whichever page composes <Table>, never by Table itself, so a scoped rule would have
   to reach out of its own component to find it. */
.paip-table-card-table th.num,
.paip-table-card-table td.num {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Grid table style ─────────────────────────────────────────────────────────────────
   One shared look for data tables: a distinct navy header that sticks to the top of the scroll
   viewport (the topbar scrolls away, so top:0 is correct) and zebra-striped rows with a hover.
   Applied to:
     • every table inside an admin page   (.paip-admin scope)
     • the state-DB result grids          (.paip-db-grid — also adds a bounded scroll container)
     • any table opted in with a wrapper  (.paip-grid-table — e.g. the ingest run-history table)
   Odd rows are white and even rows a light gray, set explicitly so the stripe shows regardless of
   the surrounding surface (the page background is off-white == --surface-2, which washed out a
   single even-row tint). The teal header underline is an inset shadow, not a border, so
   border-collapse doesn't drop it while the header is stuck. */
.paip-admin .paip-table-card-table thead th,
.paip-db-grid .paip-table-card-table thead th,
.paip-grid-table .paip-table-card-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--navy);
    color: var(--text-on-navy);
    box-shadow: inset 0 -2px 0 var(--teal);
}

.paip-admin .paip-table-card-table tbody tr:nth-child(odd),
.paip-db-grid .paip-table-card-table tbody tr:nth-child(odd),
.paip-grid-table .paip-table-card-table tbody tr:nth-child(odd) {
    background: var(--surface-1);
}

.paip-admin .paip-table-card-table tbody tr:nth-child(even),
.paip-db-grid .paip-table-card-table tbody tr:nth-child(even),
.paip-grid-table .paip-table-card-table tbody tr:nth-child(even) {
    background: var(--surface-3);
}

.paip-admin .paip-table-card-table tbody tr:hover,
.paip-db-grid .paip-table-card-table tbody tr:hover,
.paip-grid-table .paip-table-card-table tbody tr:hover {
    background: var(--teal-soft);
}

/* The state-DB result grids add a bounded, scrollable viewport for wide claim-table browsing, plus
   mono/nowrap cells so columns stay aligned as the operator scrolls both axes. */
.paip-db-grid {
    max-height: 60vh;
    overflow: auto;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}

.paip-db-grid .paip-table-card-table {
    margin-top: 0;
}

.paip-db-grid .paip-table-card-table thead th {
    white-space: nowrap;
}

.paip-db-grid .paip-table-card-table td {
    font-family: var(--font-mono);
    font-size: 12px;
    white-space: nowrap;
}

/* ── Wide tables keep their sideways scrollbar in view (PAIP #1045) ─────────────────────────────
   A wrapper with only overflow-x: auto grows to the table's full height, so its horizontal
   scrollbar is drawn after the LAST row: with a long table a reader scrolls to the foot of the page
   to scroll sideways, then back up to read. Capping the wrapper's height makes it the scroll box on
   both axes, so the scrollbar sits at the foot of the visible box, and the header row sticks to its
   top while the rows scroll under it (the .paip-db-grid treatment above, which already did this).

   One shared class, global rather than in a component's .razor.css: CSS isolation scopes a class
   to the component that declares it, so a scoped copy reused by another component renders
   unstyled. Every wide table opts in by adding paip-wide-scroll to its wrapper; the HealthPlanAI
   wrapper (.paip-hp-table-wrap, every /hp table) is listed here instead of being edited in 60
   places. A table shorter than the cap is unaffected. Printing lifts the cap, so a printed table
   is never cut at the box. */
.paip-wide-scroll,
.paip-hp .paip-hp-table-wrap {
    max-height: 70vh;
    overflow: auto;
}

.paip-wide-scroll .paip-table-card-table thead th,
.paip-hp .paip-hp-table-wrap .paip-table-card-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

@media print {
    .paip-wide-scroll,
    .paip-hp .paip-hp-table-wrap {
        max-height: none;
        overflow: visible;
    }
}

/* ── Tenant toolbar ───────────────────────────────────────────────────────────────────
   Inline navigation for a tenant's detail pages, rendered in the page header's actions area so it
   sits beside the tenant name. A wrapping button group that right-aligns and drops below the name
   on narrow viewports. The active section's button renders as a filled (primary) .paip-button. */
.paip-tenant-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* State-DB query console: editor on the left, Save controls + saved-query library on the right to
   conserve vertical space. Collapses to a single column on narrow viewports. */
.paip-query-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

@media (max-width: 1000px) {
    .paip-query-layout {
        grid-template-columns: 1fr;
    }
}

/* Name + scope share one row in the Save controls. */
.paip-save-fields {
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
    flex-wrap: wrap;
}

.paip-save-fields .paip-form-field {
    flex: 1;
    min-width: 120px;
    margin: 0;
}

/* Admin list header controls (tenants: Type/Status/State; users: search) sit beside the card title;
   the A–Z rail takes the full next line (flex-basis:100% forces the wrap deterministically rather
   than leaving it to whether the widths happen to fit). */
.paip-list-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
}

.paip-list-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.paip-list-filter select,
.paip-list-filter input[type="search"] {
    font: inherit;
    font-size: 12px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-primary);
    padding: 2px var(--space-1);
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    background: var(--surface-1);
}

.paip-alpha-rail {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.paip-alpha-link {
    display: block;
    /* 24x24 minimum: WCAG 2.2 SC 2.5.8 target size (the keys sit flush, so no spacing exception). */
    min-width: 24px;
    min-height: 24px;
    padding: 3px var(--space-1);
    background: none;
    border: none;
    border-radius: 3px;
    font: inherit;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    color: var(--teal-dim);
    cursor: pointer;
}

.paip-alpha-all {
    font-size: 11px;
    margin-right: var(--space-2);
}

/* Hover must NOT match the active key: this rule is more specific than the [aria-current] one below
   (:not() carries its argument's weight), so without the guard it would repaint the active chip's
   background while its white text stayed — 1.17:1, i.e. the letter you just picked goes unreadable
   under the cursor that picked it. */
.paip-alpha-link:hover:not(:disabled):not([aria-current="true"]) {
    background: var(--surface-3);
}

/* Empty letters stay in place (the rail is a map of what exists) but are not clickable. */
.paip-alpha-link:disabled {
    color: var(--text-muted);
    opacity: 0.4;
    cursor: default;
}

/* aria-current is the single source of truth for the active letter — style off it directly.
   --teal-dim (not --teal) clears 4.5:1 against white at this size; --teal is only 3.2:1. */
.paip-alpha-link[aria-current="true"] {
    background: var(--teal-dim);
    color: var(--white);
    font-weight: 600;
}

.paip-alpha-link:focus-visible {
    outline: 2px solid var(--teal-dim);
    outline-offset: 1px;
}

/* The Shared toggle sits inline with the save fields (flex-end aligned like its siblings). */
.paip-save-shared {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
    color: var(--text-secondary);
    cursor: pointer;
    padding-bottom: var(--space-2);   /* optically aligns with the input/button baseline */
}

/* Saved-query library scrolls within the side panel; its header stays put (the .paip-admin sticky
   header rule pins to this container because it is the nearest overflow ancestor). */
.paip-saved-scroll {
    max-height: 360px;
    overflow: auto;
    margin-top: var(--space-3);       /* separates the library from the save controls above it */
}

/* Compact saved-query rows: name (loads into the editor) + visibility badges + delete, one line. */
.paip-saved-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.paip-saved-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--border);
}

.paip-saved-item:last-child {
    border-bottom: none;
}

.paip-saved-load {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--teal-dim);
    cursor: pointer;
    text-align: left;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.paip-saved-load:hover {
    text-decoration: underline;
}

.paip-saved-badges {
    display: inline-flex;
    gap: var(--space-1);
    flex: none;
}

.paip-saved-delete {
    display: inline;
    margin: 0;
    flex: none;
}

.paip-da-helper {
    font-size: 11.5px;
    color: var(--text-muted);
}

.paip-da-mono {
    font-family: var(--font-mono);
}

.paip-da-blurb {
    margin-top: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Category bars (mock barList .bar) — whole row is the drill trigger. */
.paip-da-bar {
    display: grid;
    grid-template-columns: 170px 1fr 64px;
    gap: 10px;
    align-items: center;
    margin-bottom: 9px;
    font-size: 12.5px;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.paip-da-bar-lab {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

.paip-da-bar:hover .paip-da-bar-lab {
    color: var(--teal-dim);
}

.paip-da-bar-track {
    background: var(--surface-3);
    border-radius: 6px;
    height: 18px;
    overflow: hidden;
    display: block;
}

.paip-da-bar-fill {
    height: 100%;
    border-radius: 6px;
    background: var(--navy-mid);
    display: block;
}

.paip-da-bar-val {
    text-align: right;
    font-family: var(--font-mono);
    font-weight: 500;
}

/* Test retrieval's score cell: the house bar (.paip-da-bar-track / -fill) beside its figure, in one
   cell. Two adjustments to the bar, both because it now sits in a TABLE rather than on a dashboard:
   the track is white with a hairline so it stays visible on the zebra rows -- the dashboard's grey
   track is the same grey as every second row, which left only the fill showing, as a blob -- and it
   takes the remaining width so a 76% bar is visibly shorter than a 100% one. */
.paip-knowledge-probe-score {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 160px;
}

.paip-knowledge-probe-score .paip-da-bar-track {
    flex: 1;
    min-width: 80px;
    height: 10px;
    background: var(--surface-1);
    border: 1px solid var(--border-strong);
}

.paip-knowledge-probe-score .paip-da-bar-fill {
    background: var(--teal);
}

.paip-knowledge-probe-score .paip-mono {
    flex: none;
    min-width: 3.2em;
    text-align: right;
}

/* Root-cause example rows + CARC chips (mock .carcchip; primary = teal). */
.paip-da-example {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.paip-da-example:last-child {
    border-bottom: none;
}

.paip-da-example-codes {
    margin-top: 4px;
    font-size: 12.5px;
}

.paip-da-carcchip {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: #7A4A00;
    background: #FBEFD8;
    border-radius: 6px;
    padding: 2px 7px;
}

.paip-da-carcchip-primary {
    background: var(--teal-dim);
    color: var(--white);
}

/* Drill table (mock .tbl) + close action. */
.paip-da-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.paip-da-table th {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-align: left;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
}

.paip-da-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

.paip-da-num {
    text-align: right;
}

/* PAIP #364: a sortable column header on the denials drill. A real button, so it is reachable
   and operable from the keyboard; it reads as the header text it replaces. */
.paip-da-sort {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.paip-da-sort:hover,
.paip-da-sort.active {
    color: var(--navy);
}

.paip-da-sort:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
    border-radius: 3px;
}

.paip-da-close {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--border-strong);
    color: var(--navy);
    background: var(--white);
    border-radius: 7px;
    padding: 4px 10px;
    cursor: pointer;
}

.paip-da-placeholder {
    background: var(--white);
    border: 1px dashed var(--border-strong);
    border-radius: 11px;
    padding: 28px 24px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}


/* Productivity & recovery: legend notes, static (non-drill) bars, scrollable detail table. */
.paip-da-legendnote {
    font-size: 11.5px;
    color: var(--text-muted);
    padding: 0 16px 14px;
    line-height: 1.5;
}

.paip-prod-bar-static {
    cursor: default;
}

.paip-prod-bar-static:hover .paip-da-bar-lab {
    color: var(--text-primary);
}

.paip-prod-tablewrap {
    overflow-x: auto;
    padding: 0;
}

/* Local-time timestamps (e.g. the claim-history timeline). The server renders a UTC fallback and
   paipFormatLocalTimes() (App.razor.js) rewrites it to the browser's local time, stamping
   data-localized. Keep the un-localized element hidden — it still reserves its space, so no layout
   shift — so the UTC fallback is NEVER painted. Without this, a freshly-rendered entry (the history
   swapped in out-of-band when a claim is worked) flashes UTC because htmx processes OOB swaps in its
   settle phase, i.e. after the browser has already painted — no post-swap JS event can beat that paint.
   Hiding until localized sidesteps the timing entirely; the entry simply appears already in local time. */
.paip-localtime:not([data-localized]) { visibility: hidden; }

/* Working-queue rail scroll model — keep the filters visible the whole time.
   Previously the whole #wq-rail scrolled, so the team/disposition/class/status bar AND the search box
   slid out of view as the user scrolled the claim list. Instead, make the rail a flex column where
   every control row (header, filter bar, search bar, sort bar) is pinned and only the claim list
   scrolls; the "showing N of M / Load more" strip pins to the bottom so it's always reachable.
   These rules are global (not component-scoped .razor.css) because the rail's rows are rendered by
   several different components (PaneRail, WqQueueRail, RailSort, PaneRailList) and Blazor CSS
   isolation can't reach across them. Scoped to #wq-rail so no other rail is affected. */
#wq-rail {
    display: flex;
    flex-direction: column;
    overflow: hidden;                 /* the list is the scroll region now, not the whole rail */
}
#wq-rail > :not(.paip-pane-rail-list) { flex: 0 0 auto; }   /* header + filters + search + sort + load-more stay put */
#wq-rail > .paip-pane-rail-list {
    flex: 1 1 auto;
    overflow-y: auto;
    scrollbar-gutter: stable;         /* the header sits outside the scroller, so only the list reserves the gutter */
    min-height: 0;                    /* allow the flex child to shrink below its content and scroll */
}

/* ── HealthPlanAI (payer) shared page furniture ───────────────────────────────────────────────
   Global rather than scoped: these are used by pages across the payer module, and Blazor scoped
   CSS only reaches the component that declares it. Component-specific payer styling stays in the
   component's own .razor.css. */

.paip-payer-list {
    margin: 4px 0 0;
    padding-left: 20px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.paip-payer-list li {
    margin-bottom: 4px;
}

.paip-payer-finding-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--navy);
    margin-bottom: 3px;
}

.paip-payer-finding-narrative {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 62ch;
}

.paip-payer-finding-id {
    font-family: var(--font-mono, monospace);
    font-size: 10.5px;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    opacity: 0.75;
    margin-top: 4px;
}

.paip-payer-empty {
    font-size: 12.5px;
    color: var(--text-secondary);
    padding: 10px 2px 4px;
    margin: 0;
}

/* OrthoAI journey stage cell — the stage name reads as a label, not as data. */
.paip-provider-stage {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
}

/* A cell the platform has no source for. Muted and dashed rather than blank: an empty cell reads as
   a rendering fault, and a zero reads as a measured value of zero — which is a different claim. */
.paip-unsourced {
    color: var(--text-secondary);
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
}

/* PAIP #279. A filing-exposure figure is measured against the payer's REGISTRY-stamped window, not
   against a loaded contract, and on the ratified corpus the two disagree by 564 lines -- all of them
   HUMANA, whose contract says 90 days where the registry says 365. The CPO ruling that left the two
   numbers split attached the condition this note satisfies: nothing client-facing quotes a
   filing-exposure number without saying which of the two it is. De-emphasised, never hidden -- a
   basis a reader cannot see is the same as no basis at all. */
.paip-basis-note {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.85em;
    white-space: nowrap;
}

/* ── Assistant (#349) ──────────────────────────────────────────────────────────────────────
   The panel chrome is <SlidePanel> (paip-slide-panel), shared with the home page's hub tiles and the
   report tiles. What is here is the launcher that opens it and the conversation inside it.

   GLOBAL rather than a scoped .razor.css, and the transcript is the reason: its <li> turns are built
   by wwwroot/js/assistant.js at runtime. Blazor's CSS isolation stamps a b-xxxxx attribute onto
   elements AT COMPILE TIME, and JavaScript-created elements never get one -- so a plain scoped rule
   would silently match nothing. A scoped sheet could still reach them with ::deep (which puts the
   scope on the ancestor and leaves descendants unscoped), but every rule below the container would
   need it, and these are the same shared paip-* utilities that already live here beside
   .paip-form-field and .paip-button. */

/* Inside the SlidePanel body, so it fills the panel rather than setting a page width. */
.paip-assistant {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.paip-assistant-transcript {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
    /* Bounded so a long conversation scrolls inside the panel rather than pushing the composer off
       the bottom -- the box a person types into should not move while they are reading. */
    max-height: 55vh;
    overflow-y: auto;
}

.paip-assistant-turn {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-1);
}

/* The user's own turn sits back; the agent's is the one being read. */
.paip-assistant-user {
    background: var(--surface-2);
    border-color: transparent;
}

.paip-assistant-agent {
    border-left: 3px solid var(--teal);
}

.paip-assistant-who {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.paip-assistant-body {
    color: var(--text-primary);
}

.paip-assistant-body p {
    margin: 0;
    /* Model output arrives as plain text with its own newlines; without this it collapses to one
       run-on paragraph. */
    white-space: pre-wrap;
}

/* What the assistant can see from the page behind the panel, e.g. "Looking at claim CLM-1042". A
   quiet chip rather than a banner: it is orientation, and the moment it competes with the answer for
   attention people stop reading both. [hidden] does the hiding, so it occupies nothing on a page
   that offers no context. */
.paip-assistant-context {
    margin: 0;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 12px;
}

/* Whether the selected assistant is told which page you are on (#509, the #506 switch). A small pill
   beside the picker, shown only for an agent that is; one that is not shows nothing. fit-content
   because the form field lays its children out as a stretched column: as an inline-block alone it ran
   the full width of the panel (seen live on :277). */
.paip-assistant-badge {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    margin-top: var(--space-1);
    padding: 0 var(--space-2);
    border: 1px solid var(--teal-soft);
    border-radius: 999px;
    background: var(--teal-soft);
    color: var(--teal-dim);
    font-size: 11px;
    line-height: 18px;
}
/* 🔴 An author `display` beats the browser's own [hidden] { display: none }, so without this a hidden
   badge still drew -- an 18x2px teal sliver under the picker for every agent that is not page aware
   (seen live on :278). The same rule .paip-assistant-context avoids by never setting display. */
.paip-assistant-badge[hidden] {
    display: none;
}

/* The contextual actions under a finished answer -- "Save as note (UTP Assistant)" and, in time,
   whatever else the page context makes possible. A quiet row, because the answer is the content and
   these are what you can do WITH it. */
.paip-assistant-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.paip-assistant-action-status {
    color: var(--text-muted);
    font-size: 12px;
}

/* An agent answer rendered server-side into a claim note. Built by RichTextView out of real
   elements -- never markup the model wrote -- so these style the same shapes the transcript does. */
.paip-richtext-p {
    margin: 0 0 var(--space-2);
}

.paip-richtext-p:last-child {
    margin-bottom: 0;
}

.paip-richtext-heading {
    margin: var(--space-2) 0 var(--space-1);
    font-weight: 600;
}

.paip-richtext-list {
    margin: 0 0 var(--space-2);
    padding-left: var(--space-4);
}

.paip-richtext-table {
    width: 100%;
    margin: 0 0 var(--space-2);
    border-collapse: collapse;
    font-size: 12px;
}

.paip-richtext-table th,
.paip-richtext-table td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.paip-richtext-table th {
    font-weight: 600;
}

.paip-richtext-code {
    margin: 0 0 var(--space-2);
    padding: var(--space-2);
    background: var(--surface-2);
    border-radius: var(--r-md);
    font-size: 12px;
    white-space: pre-wrap;
}

/* The tenant admin's Agent Chat page: a recorded turn's exchange, opened from the row. */
.paip-agent-chat > summary {
    cursor: pointer;
    color: var(--text-secondary);
}

.paip-agent-chat-line {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-2);
    border-left: 3px solid var(--border);
    max-width: 70ch;
}

.paip-agent-chat-user { border-left-color: var(--navy); }
.paip-agent-chat-refusal { border-left-color: var(--amber); }

.paip-agent-chat-who {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Stored text, shown as stored -- its own newlines and nothing else. */
.paip-agent-chat-text { white-space: pre-wrap; }

/* The outcome is a WORD and not a tint alone: an audit screen read in greyscale, or in a
   screenshot pasted into a ticket, still has to say whether the turn was refused. */
.paip-agent-outcome { font-weight: 600; }
.paip-agent-outcome-refused,
.paip-agent-outcome-budget,
.paip-agent-outcome-tool_cap { color: #8a6300; }
.paip-agent-outcome-error { color: #b3261e; }

/* An agent's chart on a note, as inline SVG rather than a canvas -- see RichTextChart.cs. */
.paip-richtext-chart {
    width: 100%;
    max-width: 520px;
    height: auto;
    display: block;
    margin: 0 0 var(--space-1);
}

.paip-richtext-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin: 0 0 var(--space-2);
    font-size: 11px;
    color: var(--text-muted);
}

.paip-richtext-swatch {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: -1px;
}

/* The note body is structured, so the pre-wrap the plain-text bodies rely on must not apply. */
.paip-notes-body.paip-richtext {
    white-space: normal;
}

/* Opens the conversation as a printable document. Sits under the transcript and above the composer,
   and is hidden until there is something to export. */
.paip-assistant-export {
    align-self: flex-start;
    font-size: 12px;
}

/* The line the transcript shows when the conversation starts over because the claim on screen
   changed. Muted and centered -- it is an explanation, not a turn. */
.paip-assistant-reset {
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
    text-align: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
}

/* "Reading the work queue…" while a tool runs. Muted: it is progress, not an answer, and it is
   removed the moment the first real text arrives. */
.paip-assistant-status {
    color: var(--text-muted);
    font-style: italic;
}

/* A refusal is not an error page -- it is the agent saying what it cannot do, and it has to be
   distinguishable from the answer without shouting. */
.paip-assistant-refusal {
    margin: var(--space-2) 0 0;
    padding: var(--space-2) var(--space-3);
    border-left: 3px solid var(--amber);
    background: var(--surface-2);
    color: var(--text-secondary);
}

/* What the answer looked at. Quiet by default -- it is provenance, not the answer -- and it opens
   on click or Enter because it is a real <details>. Hover is a convenience layered on top; the
   control has to work without it, on a touch screen and from the keyboard. */
.paip-assistant-consulted {
    margin: var(--space-2) 0 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.paip-assistant-consulted > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    user-select: none;
}

/* The icon is an inline SVG in the markup, not a ::before glyph -- the panel loads no icon font, so
   a codepoint outside the system faces renders as the browser's last-resort box. This only has to
   sit it on the text baseline. */
.paip-assistant-consulted-mark {
    display: inline-flex;
    align-items: center;
    flex: none;
}

/* Safari still paints the default triangle without this. */
.paip-assistant-consulted > summary::-webkit-details-marker { display: none; }

.paip-assistant-consulted > summary:hover,
.paip-assistant-consulted > summary:focus-visible {
    color: var(--text-primary);
    background: var(--surface-2);
}

.paip-assistant-consulted ul {
    margin: var(--space-1) 0 0;
    padding-left: var(--space-4);
}

.paip-assistant-consulted li {
    /* A knowledge title can be long; wrapping beats a horizontal scrollbar in a chat panel. */
    overflow-wrap: anywhere;
    margin: 2px 0;
}

.paip-assistant-composer {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
}

.paip-assistant-composer textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    padding: var(--space-3);
    resize: vertical;
}

.paip-assistant-composer textarea:disabled {
    background: var(--surface-3);
    color: var(--text-muted);
}

.paip-assistant-empty {
    color: var(--text-muted);
    font-style: italic;
}

/* Rich answer content. The transcript streams plain text and re-renders once the turn finishes, so
   these only ever style a completed answer. A table here reuses the app's own .paip-table-card-table
   rather than inventing a second table look. */
.paip-assistant-answer > * {
    margin: 0 0 var(--space-2);
}

.paip-assistant-answer > *:last-child {
    margin-bottom: 0;
}

.paip-assistant-answer p {
    white-space: pre-wrap;
}

.paip-assistant-answer table {
    /* The panel is narrower than a page, and a claims table is not: scroll it rather than let it
       widen the panel or squeeze the columns to unreadable. */
    display: block;
    overflow-x: auto;
    max-width: 100%;
    font-size: 12px;
}

.paip-assistant-heading {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-top: var(--space-3);
}

.paip-assistant-list {
    margin: 0 0 var(--space-2);
    padding-left: var(--space-5);
    color: var(--text-secondary);
}

.paip-assistant-list li {
    margin-bottom: var(--space-1);
}

.paip-assistant-answer code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--surface-2);
    border-radius: var(--r-sm);
    padding: 1px 4px;
}

.paip-assistant-code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: var(--space-2);
    overflow-x: auto;
    white-space: pre;
}

/* The chart's outer box: title, then the canvas frame, then clear space before whatever follows. */
.paip-assistant-chart-block {
    margin: var(--space-3) 0;
    overflow: hidden;
}

/* 🔴 Holds NOTHING but the canvas. Chart.js is responsive with maintainAspectRatio off, which means
   it sizes the canvas to THIS element's height -- so anything else in here (the title, until now)
   is laid out on top of a canvas that is already the full 220px, the box overflows, and the chart
   paints over the text below it. A fixed height is still required: without one the canvas collapses
   to nothing. */
.paip-assistant-chart-frame {
    position: relative;
    height: 220px;
}

/* A table or a chart, with a strip above it carrying its title and its download control. The strip
   exists for the control: a table the agent wrote has no title of its own, and the icon still needs
   somewhere to sit that is not on top of the data. */
.paip-richtext-figure {
    margin: 0.75rem 0;
}

.paip-richtext-figure-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 1.5rem;
}

.paip-richtext-figure-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--paip-text, #1f2933);
}

/* Quiet until wanted: the data is what the eye should land on, not the affordance. It sits at full
   strength on hover and on keyboard focus, and is never hidden outright -- a control that appears
   only on hover cannot be found by touch. */
.paip-richtext-export {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    background: none;
    color: var(--paip-muted, #5b6472);
    cursor: pointer;
    opacity: 0.65;
}

.paip-richtext-export:hover,
.paip-richtext-export:focus-visible {
    opacity: 1;
    border-color: var(--paip-border, #e3e7ee);
    color: var(--paip-text, #1f2933);
}

/* 🔴 A printed page cannot be clicked. The export document renders RichTextView with
   Printable=true so the control is never emitted there at all -- this covers the OTHER surfaces,
   where a person uses the browser Print command on a page that does carry one. */
@media print {
    .paip-richtext-export {
        display: none;
    }
}

.paip-assistant-chart-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

/* ── Shared utilities the assistant and the agent admin screens needed ─────────────────────
   These were referenced by markup before they existed anywhere, which is why those screens
   rendered unstyled. */

/* A label that screen readers announce and sighted users do not see. Not display:none, which
   would take it out of the accessibility tree as well. */
.paip-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* An action that belongs in a table cell: reads as a link, behaves as a button. A real <button>
   rather than an <a href="#"> because it performs an action and must be reachable by keyboard as
   one. */
.paip-button-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--teal-dim);
    text-decoration: underline;
    cursor: pointer;
}

.paip-button-link:hover {
    color: var(--teal);
}

.paip-button-link:disabled {
    color: var(--text-muted);
    cursor: default;
    text-decoration: none;
}

/* A checkbox and its description on one row, for the agent tool grants. */
.paip-form-check {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.paip-form-check input[type="checkbox"] {
    flex: 0 0 auto;
}

.paip-form-check strong {
    color: var(--text-primary);
}

/* The confirmation an admin sees after creating something. Referenced by IdentityProviderCreated
   since #331 and by AgentCreated now -- it had no rule in any sheet, so both rendered as bare text. */
.paip-admin-create-success {
    padding: var(--space-3);
    border-left: 3px solid var(--teal);
    background: var(--teal-soft);
    border-radius: var(--r-sm);
    margin-bottom: var(--space-4);
}

.paip-admin-create-success p {
    margin: 0 0 var(--space-2);
}

/* ── Phone layout ─────────────────────────────────────────────────────────────────────────────
   html.paip-mobile is set on the server (services/ViewMode.cs): a phone gets it unless its reader
   chose the full site, which a phone then shows at a fixed desktop width instead. A class rather
   than a media query because the choice is the reader's -- the full site on a phone must not
   reflow into this.

   Every rule leads with html.paip-mobile. That is one element more specific than a component's
   scoped rule (.x[b-abc]), and the scoped bundle loads after this sheet, so a bare .paip-mobile .x
   would lose to the very rule it is overriding.

   Measured at 375px before this section existed: every screen was 906px wide. Nothing in the page
   content overflowed -- tables already scroll inside their own wrappers -- it was the chrome: the
   nav (836px of items in a row), the top bar (616px) and the fixed status bar (916px). */

/* The menu button and its state box render on every page; only the phone layout shows the button,
   and only where there is a nav for it to open. */
.paip-menu-state,
.paip-menu-toggle {
    display: none;
}

html.paip-mobile .paip-topbar {
    padding: 0 var(--space-3);
    gap: var(--space-3);
}

/* The wordmark, the breadcrumb and the dividers. The logomark still links home; the page heading
   says where you are. */
html.paip-mobile .paip-brandtext,
html.paip-mobile .paip-topbar-breadcrumb,
html.paip-mobile .paip-topbar-divider,
html.paip-mobile .paip-user-identity {
    display: none;
}

html.paip-mobile .paip-user-profile {
    margin-left: auto;
    padding: 4px;
}

html.paip-mobile .paip-user {
    padding: 0;
}

/* Anchored to the right edge: anchored left, under an avatar at the right of the bar, it ran off
   the screen. */
html.paip-mobile .paip-user-profile-dropdown {
    left: auto;
    right: 0;
    min-width: 180px;
}

html.paip-mobile:has(.paip-nav) .paip-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--r-md);
    cursor: pointer;
}

/* Three bars, drawn the way the logomark is: one span and two box-shadows. */
html.paip-mobile .paip-menu-toggle > span[aria-hidden] {
    width: 20px;
    height: 2px;
    background: var(--text-on-navy);
    border-radius: 1px;
    box-shadow: 0 -6px 0 var(--text-on-navy), 0 6px 0 var(--text-on-navy);
}

html.paip-mobile .paip-menu-state:checked + .paip-menu-toggle {
    background: rgba(255, 255, 255, 0.12);
}

/* The nav is the menu. Closed, it is gone; open, it covers the page under the top bar, each group
   a heading with its links listed beneath it -- hover dropdowns do not exist on a touch screen. */
html.paip-mobile {
    scroll-padding-top: calc(var(--topbar-h) + var(--space-3));
}

html.paip-mobile .paip-nav {
    display: none;
}

html.paip-mobile:has(.paip-menu-state:checked) .paip-nav {
    display: block;
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    padding: var(--space-2) 0 calc(var(--statusbar-h) + var(--space-5));
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1100;
}

html.paip-mobile:has(.paip-menu-state:checked) body {
    overflow: hidden;
}

html.paip-mobile .paip-nav-item {
    display: block;
    padding: var(--space-3) var(--space-4) var(--space-2);
    border-bottom: 0;
    margin: 0;
    white-space: normal;
}

html.paip-mobile .paip-nav-item.has-children::after {
    content: none;
}

/* A group's label is its toggle (App.razor.js, paipHookMobileNav): a full-width row with a chevron
   that turns when the group is open. */
html.paip-mobile .paip-nav-item.has-children > [data-nav-toggle] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    cursor: pointer;
}

html.paip-mobile .paip-nav-item.has-children > [data-nav-toggle]::after {
    content: '\25BE';
    font-size: 12px;
    opacity: 0.6;
    transition: transform 0.15s;
}

html.paip-mobile .paip-nav-item.open > [data-nav-toggle]::after {
    transform: rotate(180deg);
}

html.paip-mobile .paip-nav-item > a {
    display: block;
    padding: var(--space-2) 0;
}

html.paip-mobile .paip-nav-item.active > a,
html.paip-mobile .paip-nav-item.active > div:first-child {
    color: var(--navy);
}

/* Collapsed unless open. Outranks the component's own hover rule (.paip-nav-item:hover
   .paip-nav-dropdown, scoped), which a tap would otherwise trigger and leave stuck on a touch screen. */
html.paip-mobile .paip-nav .paip-nav-item:not(.open) .paip-nav-dropdown {
    display: none;
}

html.paip-mobile .paip-nav-dropdown {
    display: block;
    position: static;
    min-width: 0;
    margin-top: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal;
}

html.paip-mobile .paip-nav-dropdown a {
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* The status bar keeps the copyright (symbol and year only -- the owner's name does not fit beside
   the rest at 375px; #462), the tenant (it links to the tenant switch) and the layout toggle; the
   module and data-source entries are desktop detail. */
html.paip-mobile .paip-statusbar {
    box-sizing: border-box;                                                 /* width: 100% plus padding overran by the padding */
    overflow: hidden;
    padding: 0 var(--space-3);
    gap: var(--space-3);
}

html.paip-mobile .paip-statusbar .paip-status-owner,
html.paip-mobile .paip-statusbar > .paip-status-item:nth-child(3),
html.paip-mobile .paip-statusbar > .paip-status-item:has(.paip-status-dot),
html.paip-mobile .paip-statusbar > .paip-status-divider {
    display: none;
}

/* "(c) 2026" never gives way; a long tenant name is what takes the ellipsis. */
html.paip-mobile .paip-statusbar > .paip-status-item:first-child {
    flex-shrink: 0;
}

html.paip-mobile .paip-statusbar > .paip-status-item:not(.paip-status-view) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.paip-status-view {
    margin-left: auto;
}

.paip-status-view a,
.paip-status-view a:visited {
    color: var(--text-on-navy);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Slide panels (the assistant, the hub tiles) are 680px; on a phone they are the screen. */
html.paip-mobile .paip-slide-panel {
    width: 100vw;
    right: -105vw;
    top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h) - var(--statusbar-h));
    border-left: 0;
}

html.paip-mobile .paip-slide-panel.open {
    right: 0;
}

html.paip-mobile .paip-page-content {
    padding: var(--space-4) var(--space-3);
    padding-bottom: var(--space-5);                                         /* the status bar's own room is reserved by .paip-app (MainLayout) */
    min-height: 0;
}

/* ── Phone layout: the provider and admin screens ─────────────────────────────────────────────
   Measured at 375px on 2026-10-02, every provider and admin route that renders without a record
   id, plus one tenant's admin sub-pages: 18 of 31 provider screens and 14 of 25 admin screens
   were wider than the phone.

   Tables first, because they were most of it: a table wider than the screen, sitting in a
   container that let it push the page out (TableCard, PanelCard, an htmx fragment, a bare div).
   On a phone the table's own container scrolls instead, which is what the HealthPlanAI tables
   already do (.paip-hp-table-wrap). Keyed on "the parent of a table" rather than on the containers
   by name because tables sit in all of those, and a new one should not have to opt in. A scroll
   container clips what is positioned outside it; no table in the product carries a dropdown or a
   popover, checked when this was written. */
html.paip-mobile main :has(> table) {
    overflow-x: auto;
}

/* KPI tiles (denials, productivity) two to a row, and the two-column panels one to a row. */
html.paip-mobile .paip-da-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.paip-mobile .paip-da-grid2,
html.paip-mobile .paip-charts-row {
    grid-template-columns: minmax(0, 1fr);
}

/* Pillars: the grid already drops to one column under 1100px, but as 1fr -- which cannot shrink
   below its content's minimum, and a collapsed card still holds its six-node causal chain, hidden
   but measured. It made the page 1,350px wide. The chain row scrolls on its own (ChainFlow). */
html.paip-mobile .paip-pillars-grid {
    grid-template-columns: minmax(0, 1fr);
}

html.paip-mobile .paip-pillar-card {
    min-width: 0;
}

/* A chain's anchor (label, value, sentence) wraps instead of holding three columns. */
html.paip-mobile .paip-chain-anchor {
    flex-wrap: wrap;
    gap: 6px 18px;
}

/* Claim review is a fixed-height two-pane screen: a 360px queue rail beside the claim, each
   scrolling inside the viewport. On a phone the panes stack and the page scrolls -- the rail
   first, held to a band so the claim below it is reachable. */
html.paip-mobile main.paip-content:has(.paip-cr-layout) {
    height: auto;
}

html.paip-mobile .paip-cr-header {
    padding: var(--space-4) var(--space-3) 0;
}

html.paip-mobile .paip-cr-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
}

html.paip-mobile .paip-cr-rail {
    max-height: 45vh;
    border-right: 0;
    border-bottom: 1px solid var(--border);
}

html.paip-mobile .paip-cr-detail {
    padding: var(--space-4) var(--space-3);
    padding-bottom: var(--space-5);                                         /* the status bar's own room is reserved by .paip-app (MainLayout) */
}

/* The working queue is the same fixed-height model through <Panes>: its <main> is pinned to the
   viewport and clipped, and under 980px the panes stack -- but only the first row track is pinned
   (minmax(0, 1fr)), so the claim card took the whole height and the queue rail got none. Measured
   at 375px: grid rows "0px 400.75px" -- the rail was its own 2px border and nothing else, every
   claim but the selected one unreachable. On a phone
   the page scrolls, the rail first in a band, the card below it. */
html.paip-mobile main.paip-page-content:has(.paip-panes) {
    height: auto;
    overflow: visible;
}

html.paip-mobile .paip-panes {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
}

html.paip-mobile .paip-pane-rail {
    max-height: 55vh;
}

/* Filter labels (reference data's corpus publish form): a select is as wide as its longest
   option, which pushed the label to 388px. The label wraps and the select shrinks to the screen. */
html.paip-mobile .paip-list-filter {
    max-width: 100%;
    flex-wrap: wrap;
}

html.paip-mobile .paip-list-filter select,
html.paip-mobile .paip-list-filter input {
    min-width: 0;
    max-width: 100%;
}

/* ── Inactivity warning (App.razor, js/idle-timeout.js) ───────────────── */

.paip-idle-dialog {
    width: min(420px, calc(100vw - 32px));
    padding: var(--space-5);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    background: var(--surface-1);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-body);
}

.paip-idle-dialog::backdrop {
    background: rgba(6, 21, 53, 0.45);
}

.paip-idle-dialog h2 {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
}

.paip-idle-dialog p {
    margin: 0 0 var(--space-5);
    color: var(--text-secondary);
    line-height: 1.5;
}

.paip-idle-dialog [data-idle-countdown] {
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.paip-idle-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* ── PHI idle lock (#821; App.razor, js/idle-timeout.js) ───────────────────
   Covering the screen is the whole point of the lock, so the DIALOG ITSELF is the cover (#880): fixed over the whole
   viewport, opaque, above everything. Until #880 only its ::backdrop hid the page, and a dialog left open without modal
   state (showModal() refused, or a re-render) has no backdrop -- a 420px card over a readable page. */

.paip-phi-lock {
    position: fixed;
    inset: 0;
    width: 100%;   /* of the viewport, without the scrollbar (100vw counts it) */
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: var(--space-4);
    box-sizing: border-box;
    border: 0;
    background: rgb(6, 21, 53);
    color: var(--text-primary);
    font-family: var(--font-body);
    z-index: 2147483647;
}

.paip-phi-lock[open] {
    display: grid;
    place-items: center;
}

.paip-phi-lock::backdrop {
    background: rgb(6, 21, 53);
}

.paip-phi-lock-card {
    width: min(420px, 100%);
    padding: var(--space-5);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    background: var(--surface-1);
    box-shadow: var(--shadow-lg);
}

/* #880: on a page that carries the lock (it can show member identifiers), the session-expiry warning hides the page
   too. Elsewhere it keeps its tint. */
body:has(#paip-phi-lock) .paip-idle-dialog::backdrop {
    background: rgb(6, 21, 53);
}

.paip-phi-lock h2 {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
}

.paip-phi-lock p {
    margin: 0 0 var(--space-5);
    color: var(--text-secondary);
    line-height: 1.5;
}