/* =====================================================================================================
   HealthPlanAI — what the payer screens need beyond the platform's shared components.

   The screens are built from the shared components wherever one fits — PageHeader, KpiRow/Kpi,
   PanelCard, Table, Callout, StatusBadge — so a payer page and a provider page share one look for
   the same thing. What remains here is what only the HealthPlanAI mockups (WIP/mockups/HealthPlanAI)
   have: the period bar, the hub and spoke, the citation block, the causal-chain trace, the heat map,
   the premium-model sliders, and the like. Every class is named paip-hp-*, and every rule is scoped
   to .paip-hp (the <main> of every payer page) except the period bar and the synthetic-data strip,
   which sit outside <main> — the bar must be a sibling of the nav for its sticky offset to work.

   Three status colors differ between the app's token block and the mockups'; inside .paip-hp the
   mockups' values win, so a red here is the red in the deck.
   ===================================================================================================== */

.paip-hp {
    --red: #C0392B;
    --amber: #B86A00;
    --green: #1F8A4C;

    --bronze: #A2703F;
    --bronze-soft: rgba(162, 112, 63, 0.12);
    --silver: #6B7C93;
    --silver-soft: rgba(107, 124, 147, 0.12);
    --gold: #B8912F;
    --gold-soft: rgba(184, 145, 47, 0.12);

    --pillar-revenue: #1F8A4C;
    --pillar-expense: #C0392B;
    --pillar-quality: #7A5BC9;
    --pillar-risk: #B86A00;

    line-height: 1.5;
}

/* The mockups reset margins globally; here only inside the payer screens. */
.paip-hp h1, .paip-hp h2, .paip-hp h3, .paip-hp h4, .paip-hp p, .paip-hp ul { margin: 0; padding: 0; }
.paip-hp a, .paip-hp a:visited, .paip-hp a:hover, .paip-hp a:active { color: inherit; text-decoration: none; }
/* A link styled as a button keeps the button's text color. The rule above outranks app.css's .paip-button
   (an element plus a class beats a class alone), so a .paip-button link on a payer page took its parent's
   navy on a navy button, readable only on hover (#521, "Work the queue"). */
.paip-hp a.paip-button, .paip-hp a.paip-button:visited, .paip-hp a.paip-button:hover, .paip-hp a.paip-button:active { color: var(--white); }
.paip-hp a.paip-button-secondary, .paip-hp a.paip-button-secondary:visited, .paip-hp a.paip-button-secondary:hover, .paip-hp a.paip-button-secondary:active { color: var(--navy); }
/* A plain text link that has to read as one (the rule above strips color and underline from every link). */
.paip-hp a.paip-hp-textlink, .paip-hp a.paip-hp-textlink:visited { color: var(--teal-dim); text-decoration: underline; }
.paip-hp a.paip-hp-textlink:hover { color: var(--navy); }
/* #946: a rule badge that opens its scorecard keeps the status badge's look; hovering it says it is a link. */
.paip-hp a.paip-hp-code-rule:hover { text-decoration: underline; }
.paip-hp button { font-family: inherit; cursor: pointer; }
.paip-hp *, .paip-hp *::before, .paip-hp *::after { box-sizing: border-box; }

.paip-hp .paip-hp-wrap { max-width: 1640px; margin: 0 auto; }

/* #799: a link the reader's role cannot open renders as text in the same box (PaipLink). It keeps the
   box's look and loses the link's cursor and hover lift. */
.paip-hp .paip-link-refused { cursor: default; }
.paip-hp .paip-hp-hub-center.paip-link-refused:hover { transform: translate(-50%, -50%); }
.paip-hp .paip-hp-analyzer-tile.paip-link-refused:hover { box-shadow: var(--shadow-sm); transform: none; }

/* ── Common content components ────────────────────────────────────────────────────────────────── */
.paip-hp .paip-hp-card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: var(--space-4); box-shadow: var(--shadow-sm);
    display: block;
}

/* ── Period bar ───────────────────────────────────────────────────────────────────────────────────
   Shell furniture, not page furniture: under the nav, in the same place on every screen. A sibling
   of the nav so its sticky offset is measured against the page, not against <main>.
   🔴 Stacked BELOW the shared slide panel (SlidePanel.razor.css, 600): that panel — the assistant
   among others — starts right under the nav, at the same height as this bar, so a bar above it
   covered the panel's title and close button on every HealthPlanAI screen. */
/* The period bar is a THIRD sticky bar under the top bar and the nav, so whatever the browser scrolls
   into view on a HealthPlanAI screen -- the first empty required field of a submitted form, a #fragment,
   htmx's show: -- has to clear it too. app.css's scroll-padding-top (see its comment) counts the top bar
   and the nav only, and the target landed under this bar (#521, the queue item's booking form). Its
   height is its min-height plus its bottom border. Desktop only: on a phone the bar is static (below). */
:root { --hp-periodbar-h: 41px; }

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

.paip-hp-periodbar {
    min-height: calc(var(--hp-periodbar-h) - 1px); background: var(--surface-3);
    border-bottom: 1px solid var(--border); display: flex; align-items: center;
    gap: var(--space-3); padding: 4px var(--space-5);
    position: sticky; top: calc(var(--topbar-h) + var(--primary-nav-h));
    z-index: 500; font-family: var(--font-body); line-height: 1.5;
}
.paip-hp-periodbar a, .paip-hp-periodbar a:visited { text-decoration: none; }
.paip-hp-periodbar-label, .paip-hp .paip-hp-periodbar-label {
    font-family: var(--font-display); font-size: 10px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
    flex-shrink: 0;
}
.paip-hp-presets { display: flex; gap: 4px; flex-shrink: 0; }
.paip-hp-preset, .paip-hp .paip-hp-preset {
    display: inline-block;
    font-family: var(--font-display); font-size: 11px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px;
    border-radius: var(--r-sm); border: 1px solid var(--border-strong);
    background: var(--white); color: var(--text-secondary); cursor: pointer;
    transition: all 0.12s; white-space: nowrap; line-height: 1.5;
}
.paip-hp-preset:hover, .paip-hp .paip-hp-preset:hover { border-color: var(--navy); color: var(--navy); }
.paip-hp-preset.active, .paip-hp-preset.active:visited, .paip-hp .paip-hp-preset.active {
    background: var(--navy); color: var(--white); border-color: var(--navy);
}
/* #949: the links from a data symptom to its fix (HpFixLinks), and a Scorecard row a link asked for. */
.paip-hp .paip-hp-fixlinks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; }
.paip-hp a.paip-hp-fixlink, .paip-hp a.paip-hp-fixlink:visited { color: var(--teal-dim); font-weight: 700; text-decoration: none; }
.paip-hp a.paip-hp-fixlink:hover, .paip-hp a.paip-hp-fixlink:focus-visible { text-decoration: underline; }
.paip-hp tr.paip-hp-row-focus > td { background: color-mix(in srgb, var(--teal) 12%, transparent); }
.paip-hp tr.paip-hp-row-focus > td:first-child { box-shadow: inset 3px 0 0 var(--teal); }
/* A book name in a forecast table that selects that book (#490): reads as the row's label, shows it is a link on hover. */
.paip-hp a.paip-hp-rowlink, .paip-hp a.paip-hp-rowlink:visited { color: inherit; text-decoration: none; }
.paip-hp a.paip-hp-rowlink:hover, .paip-hp a.paip-hp-rowlink:focus-visible { color: var(--navy); text-decoration: underline; }
.paip-hp-months {
    display: flex; gap: 2px; align-items: center; flex: 1;
    min-width: 0; overflow-x: auto;
}
.paip-hp-month, .paip-hp-month:visited {
    font-family: var(--font-mono); font-size: 10px; padding: 4px 7px;
    border-radius: var(--r-sm); border: 1px solid transparent;
    background: var(--white); color: var(--text-secondary); cursor: pointer;
    transition: all 0.1s; white-space: nowrap; user-select: none;
}
.paip-hp-month:hover { border-color: var(--teal); color: var(--navy); }
.paip-hp-month.in-range { background: var(--teal-soft); color: var(--teal-dim); font-weight: 500; }
.paip-hp-month.edge {
    background: var(--teal); color: var(--white); font-weight: 600;
    border-color: var(--teal-dim);
}
.paip-hp-year-tick, .paip-hp-year-tick:visited {
    font-family: var(--font-display); font-size: 10px; font-weight: 700;
    letter-spacing: 0.1em; color: var(--navy); background: var(--white);
    border: 1px solid var(--border-strong); border-radius: var(--r-sm);
    padding: 4px 7px; margin: 0 4px 0 6px; cursor: pointer;
    transition: all 0.12s; white-space: nowrap; user-select: none;
}
.paip-hp-year-tick:first-child { margin-left: 0; }
.paip-hp-year-tick:hover { background: var(--navy); color: var(--white); }
.paip-hp-period-readout {
    font-family: var(--font-mono); font-size: 11px; color: var(--navy);
    font-weight: 500; white-space: nowrap; flex-shrink: 0;
    padding-left: var(--space-3); border-left: 1px solid var(--border-strong);
}
.paip-hp-period-readout .hint {
    color: var(--text-muted); font-size: 10px; display: block; line-height: 1.3;
}

/* ── Synthetic-data strip ── deliberately not dismissible. */
.paip-hp-synthetic {
    background: rgba(184, 106, 0, 0.10); border-bottom: 1px solid rgba(184, 106, 0, 0.25);
    color: #B86A00; font-family: var(--font-display); font-size: 10px;
    font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    text-align: center; padding: 4px; flex-shrink: 0;
}

/* ── "Your work" strip on the Hub (#945) ── each link only for a role that can open it. */
.paip-hp-yourwork {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--surface-3);
}
.paip-hp-yourwork-label {
    font-family: var(--font-display); font-size: 10px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-right: 4px;
}
.paip-hp a.paip-hp-yourwork-link, .paip-hp a.paip-hp-yourwork-link:visited {
    display: inline-block; padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
    background: var(--white); color: var(--navy); font-size: 12px; font-weight: 600; text-decoration: none;
}
.paip-hp a.paip-hp-yourwork-link:hover, .paip-hp a.paip-hp-yourwork-link:focus-visible { border-color: var(--navy); }

/* ── KPI tiles ────────────────────────────────────────────────────────────────────────────────── */

/* ── Layer, pillar and analyzer chips ─────────────────────────────────────────────────────────── */
.paip-hp .paip-hp-layer {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-display); font-size: 9px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px;
    border-radius: 3px;
}
.paip-hp .paip-hp-layer-bronze  { background: var(--bronze-soft); color: var(--bronze); }
.paip-hp .paip-hp-layer-silver  { background: var(--silver-soft); color: var(--silver); }
.paip-hp .paip-hp-layer-gold    { background: var(--gold-soft); color: var(--gold); }
.paip-hp .paip-hp-layer-queue   { background: var(--teal-soft); color: var(--teal-dim); }
.paip-hp .paip-hp-layer-action  { background: var(--teal-soft); color: var(--teal-dim); }
.paip-hp .paip-hp-layer-outcome { background: rgba(31, 138, 76, 0.12); color: var(--green); }

.paip-hp .paip-hp-pillar {
    display: inline-flex; align-items: center; font-family: var(--font-display);
    font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 2px 7px; border-radius: 9px;
    margin-right: 3px;
}
.paip-hp .paip-hp-pillar-revenue { background: rgba(31, 138, 76, 0.12); color: var(--pillar-revenue); }
.paip-hp .paip-hp-pillar-expense { background: rgba(192, 57, 43, 0.12); color: var(--pillar-expense); }
.paip-hp .paip-hp-pillar-quality { background: rgba(122, 91, 201, 0.12); color: var(--pillar-quality); }
.paip-hp .paip-hp-pillar-risk    { background: rgba(184, 106, 0, 0.12); color: var(--pillar-risk); }

.paip-hp .paip-hp-abadge, .paip-hp a.paip-hp-abadge, .paip-hp a.paip-hp-abadge:visited {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; background: var(--teal);
    color: var(--white); font-family: var(--font-display); font-weight: 700;
    font-size: 12px; flex-shrink: 0;
}
.paip-hp .paip-hp-abadge.cross { background: var(--amber); }
.paip-hp .paip-hp-abadge.sm { width: 24px; height: 24px; font-size: 10px; }

/* ── Tables ───────────────────────────────────────────────────────────────────────────────────── */

/* ── Callouts ─────────────────────────────────────────────────────────────────────────────────── */

/* ── Grid helpers ─────────────────────────────────────────────────────────────────────────────── */
.paip-hp .paip-hp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.paip-hp .paip-hp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.paip-hp .paip-hp-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.paip-hp .paip-hp-grid-main { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); }
.paip-hp .paip-hp-grid-main > * { min-width: 0; }
@media (max-width: 1200px) {
    .paip-hp .paip-hp-grid-3, .paip-hp .paip-hp-grid-4, .paip-hp .paip-hp-grid-main, .paip-hp .paip-hp-grid-2 { grid-template-columns: 1fr; }
}
.paip-hp .paip-hp-stack > * + * { margin-top: var(--space-4); }

/* ── Chart frames ─────────────────────────────────────────────────────────────────────────────── */
.paip-hp .paip-hp-chart { position: relative; height: 240px; }
.paip-hp .paip-hp-chart.sm { height: 170px; }
.paip-hp .paip-hp-chart.lg { height: 320px; }
.paip-hp .paip-hp-chart-empty { font-size: 11.5px; padding: 18px 0; text-align: center; }

/* ── Hub & spoke (home) ───────────────────────────────────────────────────────────────────────── */
.paip-hp.paip-hp-home { padding-top: 0; }
.paip-hp .paip-hp-hero { text-align: center; padding: var(--space-4) var(--space-5) 0; }
.paip-hp .paip-hp-tagline {
    font-family: var(--font-display); font-size: 13px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-dim);
    margin-bottom: 4px;
}
.paip-hp .paip-hp-title {
    font-family: var(--font-display); font-size: 28px; font-weight: 700;
    color: var(--navy); margin-bottom: 6px;
}
.paip-hp .paip-hp-subtitle {
    font-size: 14px; color: var(--text-secondary); max-width: 820px;
    margin: 0 auto 12px; line-height: 1.55;
}

/* The spoke radius is 268px, as the mockups draw it, and shrinks with the viewport the way their
   resize handler shrinks it. Positions are cos/sin factors computed per domain on the server. */
.paip-hp .paip-hp-hub {
    --hub-r: 268px;
    position: relative; width: 100%; height: 700px; max-width: 1160px;
    margin: 0 auto;
}
@media (max-width: 900px) { .paip-hp .paip-hp-hub { --hub-r: 200px; } }
@media (max-width: 640px) { .paip-hp .paip-hp-hub { --hub-r: 150px; } }
.paip-hp .paip-hp-hub-center {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 200px; height: 200px; background: var(--white); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 32px rgba(0, 160, 154, 0.22), 0 8px 28px rgba(12, 30, 72, 0.18);
    z-index: 100; cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border: 3px solid var(--teal); padding: 20px;
    animation: hpHubPulse 3.5s ease-in-out infinite;
    text-align: center;
}
@keyframes hpHubPulse {
    0%, 100% { box-shadow: 0 0 32px rgba(0, 160, 154, 0.22), 0 8px 28px rgba(12, 30, 72, 0.18); }
    50%      { box-shadow: 0 0 48px rgba(0, 160, 154, 0.40), 0 8px 28px rgba(12, 30, 72, 0.18); }
}
.paip-hp .paip-hp-hub-center:hover { transform: translate(-50%, -50%) scale(1.06); }
.paip-hp .paip-hp-hub-center img { width: 100%; height: auto; display: block; }
.paip-hp .paip-hp-hub-center-sub {
    font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted);
    margin-top: 6px; letter-spacing: 0.02em;
}
/* #690: always visible, so the center reads as a link on a touch screen too, where a title tooltip
   never appears. Underlined on hover and keyboard focus. */
.paip-hp .paip-hp-hub-center-cue {
    font-family: var(--font-display); font-size: 11px; font-weight: 700; color: var(--teal-dim);
    margin-top: 8px; letter-spacing: 0.02em;
}
.paip-hp .paip-hp-hub-center:hover .paip-hp-hub-center-cue,
.paip-hp .paip-hp-hub-center:focus-visible .paip-hp-hub-center-cue { text-decoration: underline; }
.paip-hp .paip-hp-system {
    position: absolute; width: 156px; height: 156px; border-radius: var(--r-lg);
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    padding: 12px; text-align: center;
    box-shadow: 0 6px 18px rgba(12, 30, 72, 0.18); color: white;
    border: 1px solid rgba(255, 255, 255, 0.2); font-family: inherit;
    left: calc(50% + var(--hub-r) * var(--cos) - 78px);
    top: calc(50% + var(--hub-r) * var(--sin) - 78px);
}
.paip-hp .paip-hp-system:hover {
    transform: scale(1.08) translateY(-4px);
    box-shadow: 0 14px 36px rgba(12, 30, 72, 0.28); z-index: 50;
}
.paip-hp .paip-hp-system-icon {
    margin-bottom: 6px; display: flex; align-items: center;
    justify-content: center; height: 28px;
}
.paip-hp .paip-hp-system-icon svg { display: block; }
.paip-hp .paip-hp-system-title {
    font-family: var(--font-display); font-size: 13px; font-weight: 700;
    line-height: 1.2; margin-bottom: 4px;
}
.paip-hp .paip-hp-system-count { font-size: 10px; opacity: 0.9; font-weight: 600; font-family: var(--font-mono); }
.paip-hp .paip-hp-system-analyzers {
    font-size: 9px; opacity: 0.85; font-family: var(--font-mono);
    letter-spacing: 0.06em; margin-top: 3px;
}
.paip-hp .paip-hp-system-membership   { background: linear-gradient(135deg, #0C1E48, #1F3370); }
.paip-hp .paip-hp-system-underwriting { background: linear-gradient(135deg, #3D5470, #27384E); }
.paip-hp .paip-hp-system-claims       { background: linear-gradient(135deg, #00A09A, #007A75); }
.paip-hp .paip-hp-system-medmgmt      { background: linear-gradient(135deg, #7A5BC9, #5A3FA0); }
.paip-hp .paip-hp-system-pharmacy     { background: linear-gradient(135deg, #1F8A4C, #156635); }
.paip-hp .paip-hp-system-network      { background: linear-gradient(135deg, #B86A00, #8A4F00); }
.paip-hp .paip-hp-system-payint       { background: linear-gradient(135deg, #C0392B, #922D20); }
.paip-hp .paip-hp-system-finance      { background: linear-gradient(135deg, #12507F, #0B3557); }
.paip-hp .paip-hp-hub-line {
    position: absolute; height: 2px; left: 50%; top: 50%;
    width: calc(var(--hub-r) - 104px);
    background: linear-gradient(90deg, transparent, rgba(0, 160, 154, 0.45), transparent);
    transform-origin: left center; z-index: 1;
    animation: hpLineFade 3.5s ease-in-out infinite;
}
@keyframes hpLineFade { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.75; } }

/* ── Slide-in detail panel ────────────────────────────────────────────────────────────────────── */
.paip-hp .paip-hp-detail-panel {
    position: fixed; right: -760px; width: 720px; max-width: 100vw;
    top: calc(var(--topbar-h) + var(--primary-nav-h) + 40px);
    height: calc(100vh - var(--topbar-h) - var(--primary-nav-h) - 40px - var(--statusbar-h));
    background: var(--white); box-shadow: -16px 0 40px rgba(12, 30, 72, 0.18);
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1); z-index: 600;
    overflow-y: auto; padding: var(--space-5); border-left: 1px solid var(--border);
}
.paip-hp .paip-hp-detail-panel.active { right: 0; }
.paip-hp .paip-hp-detail-close {
    position: absolute; top: 16px; right: 16px; background: var(--surface-2);
    border: 1px solid var(--border); color: var(--text-primary);
    width: 36px; height: 36px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-size: 1.4rem;
    cursor: pointer; transition: all 0.2s;
}
.paip-hp .paip-hp-detail-close:hover {
    background: var(--red); color: white; transform: rotate(90deg);
    border-color: transparent;
}
.paip-hp .paip-hp-detail-title {
    font-family: var(--font-display); font-size: 22px; font-weight: 700;
    color: var(--navy); margin-bottom: 4px;
}
.paip-hp .paip-hp-detail-vendor {
    font-family: var(--font-mono); color: var(--text-muted); font-size: 12px;
    margin-bottom: var(--space-3);
}
.paip-hp .paip-hp-detail-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    margin-bottom: var(--space-3);
}
.paip-hp .paip-hp-stat {
    background: var(--surface-2); padding: 12px; border-radius: var(--r-md);
    border-left: 3px solid var(--teal);
}
.paip-hp .paip-hp-stat-value {
    font-family: var(--font-display); font-size: 20px; font-weight: 700;
    color: var(--navy);
}
.paip-hp .paip-hp-stat-label {
    font-size: 10px; color: var(--text-muted); font-family: var(--font-display);
    letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; margin-top: 2px;
}
.paip-hp .paip-hp-detail-section {
    background: var(--surface-2); border-radius: var(--r-md); padding: var(--space-3);
    margin-bottom: var(--space-3); border: 1px solid var(--border);
}
.paip-hp .paip-hp-section-title {
    font-family: var(--font-display); font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-dim);
    padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
}
.paip-hp .paip-hp-insight-list { list-style: none; }
.paip-hp .paip-hp-insight-list li {
    padding: 6px 0 6px 18px; font-size: 13px; color: var(--text-primary);
    line-height: 1.5; border-bottom: 1px solid rgba(0, 0, 0, 0.04); position: relative;
}
.paip-hp .paip-hp-insight-list[data-size="12"] li { font-size: 12px; }
.paip-hp .paip-hp-insight-list[data-size="12.5"] li { font-size: 12.5px; }
.paip-hp .paip-hp-insight-list li::before {
    content: '→'; position: absolute; left: 0; color: var(--teal); font-weight: 700;
}
.paip-hp .paip-hp-insight-list li:last-child { border-bottom: none; }
.paip-hp .paip-hp-dashboard-btn, .paip-hp a.paip-hp-dashboard-btn:visited {
    display: block; background: var(--navy); color: white; text-decoration: none;
    padding: 10px 16px; border-radius: var(--r-md); font-family: var(--font-display);
    font-weight: 700; font-size: 12px; letter-spacing: 0.06em;
    text-transform: uppercase; text-align: center; margin-top: 12px;
    transition: background 0.2s ease;
}
.paip-hp .paip-hp-dashboard-btn:hover { background: var(--navy-mid); color: white; }

/* ── Citation block ── deliberately styled as raw machine output. */
.paip-hp .paip-hp-cite {
    font-family: var(--font-mono); font-size: 10.5px; line-height: 1.55;
    background: var(--navy-deep); color: rgba(255, 255, 255, 0.82);
    padding: 10px 12px; border-radius: var(--r-sm); overflow-x: auto;
    border-left: 3px solid var(--bronze);
}
.paip-hp .paip-hp-cite .k { color: #7CECDF; }
.paip-hp .paip-hp-cite .v { color: #FFFFFF; }
.paip-hp .paip-hp-cite .h { color: rgba(255, 255, 255, 0.45); }
.paip-hp .paip-hp-cite-row { white-space: nowrap; }

/* ── Causal chain ─────────────────────────────────────────────────────────────────────────────── */
.paip-hp .paip-hp-chain { display: flex; flex-direction: column; gap: 0; }
.paip-hp .paip-hp-chain-step {
    display: grid; grid-template-columns: 132px 1fr; gap: var(--space-4);
    padding: var(--space-4) 0; border-bottom: 1px solid var(--border);
    position: relative;
}
.paip-hp .paip-hp-chain-step:last-child { border-bottom: none; }
.paip-hp .paip-hp-chain-step::before {
    content: ''; position: absolute; left: 13px; top: 44px; bottom: -16px;
    width: 2px; background: var(--border-strong);
}
.paip-hp .paip-hp-chain-step:last-child::before { display: none; }
.paip-hp .paip-hp-chain-marker { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.paip-hp .paip-hp-chain-num {
    width: 26px; height: 26px; border-radius: 50%; background: var(--navy);
    color: var(--white); display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 12px;
}
.paip-hp .paip-hp-chain-body { min-width: 0; }
.paip-hp .paip-hp-chain-label {
    font-family: var(--font-display); font-size: 15px; font-weight: 700;
    color: var(--navy); margin-bottom: 3px;
}
.paip-hp .paip-hp-chain-detail { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; }
/* #652: every action before booking on the action step, and the All bookings panel. */
.paip-hp .paip-hp-chain-actions { margin: 6px 0 0 16px; padding: 0; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.paip-hp .paip-hp-chain-search { display: flex; gap: 6px; margin-bottom: 8px; }
.paip-hp .paip-hp-chain-search input { flex: 1; min-width: 0; font-size: 12px; padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--r-sm); }
.paip-hp .paip-hp-chain-bookings { width: 100%; font-size: 11.5px; border-collapse: collapse; }
.paip-hp .paip-hp-chain-bookings td { padding: 3px 4px; border-bottom: 1px solid var(--border); }
.paip-hp .paip-hp-chain-bookings td.num { text-align: right; }
.paip-hp .paip-hp-chain-older { display: inline-block; margin-top: 6px; font-size: 11.5px; }
.paip-hp .paip-hp-chain-meta {
    font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted);
    margin-top: 6px;
}
.paip-hp .paip-hp-chain-dollars {
    font-family: var(--font-display); font-size: 17px; font-weight: 700;
    color: var(--green); margin-top: 4px;
}

/* ── Progress / score bars ────────────────────────────────────────────────────────────────────── */
.paip-hp .paip-hp-bar {
    display: block; height: 7px; background: var(--surface-3); border-radius: 4px;
    overflow: hidden; min-width: 60px;
}
.paip-hp .paip-hp-bar > span { display: block; height: 100%; background: var(--teal); }
.paip-hp .paip-hp-bar > span.warn { background: var(--amber); }
.paip-hp .paip-hp-bar > span.bad  { background: var(--red); }
.paip-hp .paip-hp-bar > span.good { background: var(--green); }

/* ── Key/value rows (finding disposition, forecast method panel) ──────────────────────────────── */
.paip-hp .paip-hp-kv {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 3px 0; font-size: 12px; border-bottom: 1px solid var(--border);
}
.paip-hp .paip-hp-kv.loose { padding: 4px 0; gap: 8px; }

/* ── Book / component selector bar (forecast screens) ─────────────────────────────────────────── */
.paip-hp .paip-hp-selectbar {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    padding: 10px 14px; background: var(--surface-3);
    border-radius: var(--r-md); margin-bottom: 16px;
}
.paip-hp .paip-hp-selectbar .sep { width: 1px; height: 20px; background: var(--border-strong); }
/* PAIP #951: where a book on Plan Performance leads (HpBookLinks), and a "this book" link in a select bar. */
.paip-hp .paip-hp-book-links { display: flex; gap: 10px; margin-top: 2px; font-size: 10.5px; font-weight: 400; }
.paip-hp .paip-hp-selectbar .paip-hp-this-book { font-size: 12px; }

/* ── Seasonal strip ───────────────────────────────────────────────────────────────────────────── */
.paip-hp .paip-hp-season {
    display: grid; grid-template-columns: repeat(12, 1fr);
    gap: 3px; align-items: end; height: 88px;
}
.paip-hp .paip-hp-season > div { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.paip-hp .paip-hp-season .bar { border-radius: 2px 2px 0 0; }
.paip-hp .paip-hp-season .m { font-size: 8.5px; text-align: center; margin-top: 3px; color: var(--text-muted); }
.paip-hp .paip-hp-season .v { font-size: 8px; text-align: center; font-family: var(--font-mono); }

/* ═════ Page-specific — each from the <style> block of the mockup page named ═════════════════════ */

/* executive/dashboard.html */
.paip-hp .paip-hp-pillar-card {
    display: block; background: var(--white); border: 1px solid var(--border);
    border-top: 3px solid var(--navy); border-radius: var(--r-md); padding: 14px;
    box-shadow: var(--shadow-sm); transition: all .15s;
}
.paip-hp .paip-hp-pillar-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.paip-hp .paip-hp-pillar-card.revenue { border-top-color: var(--pillar-revenue); }
.paip-hp .paip-hp-pillar-card.expense { border-top-color: var(--pillar-expense); }
.paip-hp .paip-hp-pillar-card.quality { border-top-color: var(--pillar-quality); }
.paip-hp .paip-hp-pillar-card.risk    { border-top-color: var(--pillar-risk); }
.paip-hp .paip-hp-pillar-card .v {
    font-family: var(--font-display); font-size: 26px; font-weight: 700;
    color: var(--navy); line-height: 1.1; margin: 6px 0 2px;
}

/* executive/premium-model.html */
.paip-hp .paip-hp-rate-row {
    display: grid;
    grid-template-columns: 190px 1fr 78px 96px 96px 96px 88px;
    gap: 10px; align-items: center; padding: 11px 0;
    border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.paip-hp .paip-hp-rate-row.head {
    font-family: var(--font-display); font-size: 10px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
    border-bottom: 2px solid var(--border); padding-bottom: 7px;
}
.paip-hp .paip-hp-rate-row input[type=range] { width: 100%; accent-color: var(--teal); }
.paip-hp .paip-hp-rate-pct {
    font-family: var(--font-display); font-weight: 700; font-size: 16px;
    color: var(--navy); text-align: right;
}
.paip-hp .paip-hp-scenario, .paip-hp a.paip-hp-scenario:visited {
    font-family: var(--font-display); font-size: 11px; font-weight: 700;
    letter-spacing: .05em; padding: 5px 11px; border-radius: var(--r-sm);
    border: 1px solid var(--border-strong); background: var(--white);
    color: var(--text-secondary); cursor: pointer; transition: all .12s;
}
.paip-hp .paip-hp-scenario:hover { border-color: var(--navy); color: var(--navy); }
.paip-hp .paip-hp-scenario.active { background: var(--navy); color: var(--white); border-color: var(--navy); }
.paip-hp .paip-hp-verdict {
    padding: 14px 16px; border-radius: var(--r-md); margin-bottom: 14px;
    font-size: 13px; line-height: 1.6; border-left: 4px solid var(--navy);
    background: rgba(12, 30, 72, .04);
}
.paip-hp .paip-hp-verdict.good { border-left-color: var(--green); background: rgba(31, 138, 76, .08); }
.paip-hp .paip-hp-verdict.warn { border-left-color: var(--amber); background: rgba(184, 106, 0, .08); }
.paip-hp .paip-hp-verdict.bad  { border-left-color: var(--red);   background: rgba(192, 57, 43, .07); }
@media (max-width: 1250px) {
    .paip-hp .paip-hp-rate-row { grid-template-columns: 1fr 1fr; }
    .paip-hp .paip-hp-rate-row.head { display: none; }
}

/* executive/staging.html */
.paip-hp .paip-hp-stage {
    display: grid; grid-template-columns: 130px 1fr 250px; gap: 18px;
    padding: 16px 0; border-bottom: 1px solid var(--border); align-items: start;
}
.paip-hp .paip-hp-stage:last-child { border-bottom: none; }
.paip-hp .paip-hp-stage-num {
    width: 42px; height: 42px; border-radius: 50%; display: flex; flex-shrink: 0;
    align-items: center; justify-content: center; color: var(--white);
    font-family: var(--font-display); font-weight: 700; font-size: 18px;
}
.paip-hp .paip-hp-stage-title {
    font-family: var(--font-display); font-size: 17px; font-weight: 700;
    color: var(--navy);
}
.paip-hp .paip-hp-stage-time {
    font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
    margin-top: 2px;
}
.paip-hp .paip-hp-stage-impact {
    background: var(--surface-2); border-left: 3px solid var(--teal);
    border-radius: var(--r-sm); padding: 10px 12px; font-size: 12px;
    line-height: 1.5;
}
@media (max-width: 1100px) { .paip-hp .paip-hp-stage { grid-template-columns: 1fr; gap: 10px; } }

/* executive/capabilities.html */
.paip-hp .paip-hp-cap {
    display: grid; grid-template-columns: 190px 1fr 1fr 210px; gap: 18px;
    padding: 18px 0; border-bottom: 1px solid var(--border); align-items: start;
}
.paip-hp .paip-hp-cap:last-child { border-bottom: none; }
.paip-hp .paip-hp-cap-name {
    font-family: var(--font-display); font-size: 19px; font-weight: 700;
    color: var(--navy);
}
.paip-hp .paip-hp-cap-num {
    font-family: var(--font-display); font-size: 11px; font-weight: 700;
    letter-spacing: .14em; color: var(--teal-dim);
}
.paip-hp .paip-hp-cap h4 {
    font-family: var(--font-display); font-size: 10px; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 5px;
}
.paip-hp .paip-hp-cap p { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.paip-hp .paip-hp-cap-proof {
    background: var(--surface-2); border-left: 3px solid var(--teal);
    border-radius: var(--r-sm); padding: 10px 12px;
}
.paip-hp .paip-hp-cap-proof .n {
    font-family: var(--font-display); font-size: 20px; font-weight: 700;
    color: var(--navy); line-height: 1.1;
}
.paip-hp .paip-hp-cap-proof .l { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
@media (max-width: 1200px) { .paip-hp .paip-hp-cap { grid-template-columns: 1fr; gap: 10px; } }

/* pipeline/analyzers.html */
.paip-hp .paip-hp-analyzer-tile, .paip-hp a.paip-hp-analyzer-tile:visited {
    background: var(--white); border: 1px solid var(--border);
    border-top: 3px solid var(--teal); border-radius: var(--r-md);
    padding: 14px; box-shadow: var(--shadow-sm); display: flex;
    flex-direction: column; gap: 8px; transition: box-shadow .15s, transform .15s;
}
.paip-hp .paip-hp-analyzer-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.paip-hp .paip-hp-analyzer-tile.cross { border-top-color: var(--amber); background: rgba(184, 106, 0, 0.035); }
.paip-hp .paip-hp-analyzer-tile-head { display: flex; gap: 10px; align-items: flex-start; }
.paip-hp .paip-hp-analyzer-tile-name {
    font-family: var(--font-display); font-weight: 700; font-size: 15px;
    color: var(--navy); line-height: 1.2;
}
.paip-hp .paip-hp-analyzer-tile-target { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.paip-hp .paip-hp-analyzer-tile-money {
    font-family: var(--font-display); font-size: 22px; font-weight: 700;
    color: var(--navy);
}
.paip-hp .paip-hp-analyzer-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-3);
}
.paip-hp .paip-hp-dep-cell { font-family: var(--font-mono); font-size: 11px; }

/* pipeline/findings.html */
.paip-hp .paip-hp-filterbar {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    padding: 10px 14px; background: var(--surface-3); border-radius: var(--r-md);
    margin-bottom: 14px;
}
.paip-hp .paip-hp-filterbar .grp { display: flex; gap: 4px; align-items: center; }
.paip-hp .paip-hp-filterbar .lab {
    font-family: var(--font-display); font-size: 10px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted);
    margin-right: 2px;
}
.paip-hp .paip-hp-filterbar .sep { width: 1px; height: 20px; background: var(--border-strong); }
.paip-hp .paip-hp-chip, .paip-hp a.paip-hp-chip:visited {
    font-family: var(--font-display); font-size: 11px; font-weight: 700;
    letter-spacing: .05em; padding: 4px 9px; border-radius: var(--r-sm);
    border: 1px solid var(--border-strong); background: var(--white);
    color: var(--text-secondary); cursor: pointer; transition: all .12s;
}
.paip-hp .paip-hp-chip:hover { border-color: var(--navy); color: var(--navy); }
.paip-hp .paip-hp-chip.on, .paip-hp a.paip-hp-chip.on:visited { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* pipeline/integrity.html */
.paip-hp .paip-hp-heat { display: grid; gap: 2px; }
.paip-hp .paip-hp-heat-row { display: grid; grid-template-columns: 210px repeat(5, 1fr); gap: 2px; }
.paip-hp .paip-hp-heat-cell {
    padding: 7px 6px; text-align: center; font-family: var(--font-mono);
    font-size: 11px; border-radius: 2px; color: var(--white);
}
.paip-hp .paip-hp-heat-head {
    font-family: var(--font-display); font-size: 9.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
    padding: 6px; text-align: center; background: none;
}
.paip-hp .paip-hp-heat-label {
    padding: 7px 8px; font-size: 11.5px; font-family: var(--font-mono);
    background: var(--surface-2); border-radius: 2px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}

/* workflow/causal-chain.html */
.paip-hp .paip-hp-chain-pick {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px; margin-bottom: 18px;
}
.paip-hp .paip-hp-chain-card, .paip-hp a.paip-hp-chain-card:visited {
    display: block; background: var(--white); border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong); border-radius: var(--r-md);
    padding: 12px 14px; cursor: pointer; transition: all .15s;
}
.paip-hp .paip-hp-chain-card:hover { border-left-color: var(--teal); box-shadow: var(--shadow-md); }
.paip-hp .paip-hp-chain-card.active {
    border-left-color: var(--teal); background: var(--teal-soft);
    box-shadow: var(--shadow-md);
}
.paip-hp .paip-hp-chain-card .amt {
    font-family: var(--font-display); font-size: 20px; font-weight: 700;
    color: var(--navy);
}

/* workflow/correlation.html */
.paip-hp .paip-hp-venn { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.paip-hp .paip-hp-venn-cell {
    background: var(--white); border: 1px solid var(--border);
    border-left: 3px solid var(--teal); border-radius: var(--r-md);
    padding: 12px 14px;
}
.paip-hp .paip-hp-venn-cell.hot { border-left-color: var(--amber); background: rgba(184, 106, 0, 0.05); }
.paip-hp .paip-hp-venn-label {
    font-family: var(--font-display); font-size: 10px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
.paip-hp .paip-hp-venn-n {
    font-family: var(--font-display); font-size: 28px; font-weight: 700;
    color: var(--navy); line-height: 1.05;
}
.paip-hp .paip-hp-flow-row {
    display: grid; grid-template-columns: 150px 1fr 150px; gap: 12px;
    align-items: center; padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.paip-hp .paip-hp-flow-bar {
    height: 26px; border-radius: 3px; display: flex;
    align-items: center; padding: 0 9px; color: #fff;
    font-family: var(--font-mono); font-size: 11px; white-space: nowrap;
}
@media (max-width: 1200px) { .paip-hp .paip-hp-venn { grid-template-columns: repeat(2, 1fr); } }

/* ── Shared components, as the payer screens use them ─────────────────────────────────────────── */

/* The home hero's KPI row sits centered under the hero copy, as the mockup's grid does. */
.paip-hp .paip-hp-hero .paip-kpi-row { max-width: 1160px; margin: 0 auto 8px; text-align: left; }

/* The shared Table, with the three things a payer table says that a provider table does not: a
   cross-domain row (A6 and A8 findings, amber), a totals footer, and a finding row that opens its
   citation drawer. */
/* .paip-hp-table-wrap scrolls in a height-capped box: the shared wide-table rule in app.css (PAIP #1045). */
.paip-hp .paip-table-card-table td { vertical-align: top; }
.paip-hp .paip-table-card-table tbody tr.cross-domain { background: rgba(184, 106, 0, 0.05); }
.paip-hp .paip-table-card-table tbody tr.cross-domain:hover { background: rgba(184, 106, 0, 0.1); }
.paip-hp .paip-table-card-table tfoot td {
    font-weight: 700; color: var(--navy); border-top: 2px solid var(--border-strong);
    background: var(--surface-2);
}
.paip-hp .paip-table-card-table tr.paip-hp-finding-row { cursor: pointer; }
.paip-hp .paip-table-card-table tr.paip-hp-finding-row:hover { background: var(--surface-2); }
.paip-hp .paip-table-card-table tr.paip-hp-finding-detail > td { background: var(--surface-2); padding: 14px 16px; }

/* Spacing modifiers for PanelCard and Callout where the mockup sets them inline. */
.paip-hp .paip-hp-gap-below { margin-bottom: var(--space-4); }
.paip-hp .paip-callout.paip-hp-flush { margin: 0; }
.paip-hp .paip-callout.paip-hp-flush-top { margin: 16px 0 0; }
.paip-hp .paip-callout.paip-hp-callout-tight { margin: 0 0 12px; font-size: 12.5px; }

/* The analyzer page leads its header with the analyzer's badge, larger. */
.paip-hp .paip-hp-abadge.paip-hp-abadge-lg { width: 44px; height: 44px; font-size: 16px; }

/* ── Phone layout (html.paip-mobile, see services/ViewMode.cs and the matching section of app.css) ──
   The period bar was the widest thing on every HealthPlanAI screen at 375px (907px: label, six
   presets, the month strip and the readout in one row). On a phone it is the presets, scrolling
   sideways, over the readout; the month strip -- 24 chips of 10px type -- is a desktop control, and
   the presets cover the periods a reader on a phone asks for. Not sticky: the nav it sat under is a
   menu here, and two stuck bars would take a fifth of the screen. */
html.paip-mobile .paip-hp-periodbar {
    position: static;
    flex-wrap: wrap;
    gap: 6px var(--space-3);
    padding: 8px var(--space-3);
}

html.paip-mobile .paip-hp-periodbar-label,
html.paip-mobile .paip-hp-months {
    display: none;
}

html.paip-mobile .paip-hp-presets {
    flex: 1 1 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

html.paip-mobile .paip-hp-preset {
    padding: 8px 12px;
}

html.paip-mobile .paip-hp-period-readout {
    border-left: 0;
    padding-left: 0;
    white-space: normal;
}

/* The detail panel (720px, opened from a row or a tile) is the screen on a phone, and starts under
   the top bar: the nav and the period bar it was measured below are not stuck there any more. */
html.paip-mobile .paip-hp .paip-hp-detail-panel {
    box-sizing: border-box;
    width: 100vw;
    right: -105vw;
    top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h) - var(--statusbar-h));
    padding: var(--space-4) var(--space-3);
    border-left: 0;
}

html.paip-mobile .paip-hp .paip-hp-detail-panel.active {
    right: 0;
}

/* Filter groups (Findings) wrap within themselves: the analyzer group alone is nine chips. */
html.paip-mobile .paip-hp .paip-hp-filterbar .grp {
    flex-wrap: wrap;
}

html.paip-mobile .paip-hp .paip-hp-filterbar .sep {
    display: none;
}

/* The integrity heatmap is a 210px label column and five measures: it scrolls inside its own box,
   as the tables do, rather than squeezing five percentages into 30px each. */
html.paip-mobile .paip-hp .paip-hp-heat {
    overflow-x: auto;
}

html.paip-mobile .paip-hp .paip-hp-heat-row {
    min-width: 520px;
}

/* Flow lanes (Correlation): 150px | bar | 150px leaves the bar nothing at 375px. Two lines instead
   -- the domain and its dollars, then the bar across the full width. */
html.paip-mobile .paip-hp .paip-hp-flow-row {
    grid-template-columns: 1fr auto;
    gap: 6px var(--space-3);
}

html.paip-mobile .paip-hp .paip-hp-flow-row > .paip-hp-flow-bar {
    grid-column: 1 / -1;
    grid-row: 2;
}

/* Causal chain steps: a 132px marker column left 169px for the step, and its unbroken reference ids
   pushed the page to 442px. The marker (number and layer) goes above the step instead, and the
   connector line that joined the markers down the left goes with it -- the text now sits there. */
html.paip-mobile .paip-hp .paip-hp-chain-step {
    grid-template-columns: 1fr;
    gap: var(--space-2);
}

html.paip-mobile .paip-hp .paip-hp-chain-step::before {
    display: none;
}

html.paip-mobile .paip-hp .paip-hp-chain-marker {
    flex-direction: row;
    align-items: center;
}

html.paip-mobile .paip-hp .paip-hp-chain-body {
    overflow-wrap: anywhere;
}

/* The notice on a working screen built for a wide display (HpShell WideScreen). */
.paip-hp-wide-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px var(--space-3);
    margin: 0 0 var(--space-4);
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 12.5px;
}

.paip-hp-wide-note a,
.paip-hp-wide-note a:visited {
    color: var(--navy);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Network Management > Contract Performance (PAIP #501, domains/network-contracts.html's .cp-*). */
.paip-hp .paip-hp-cp-pick td a { color: inherit; text-decoration: none; display: block; }
.paip-hp .paip-hp-cp-pick:hover td { background: var(--teal-soft); }
.paip-hp .paip-hp-cp-pick.selected td { background: rgba(12,30,72,0.06); }
.paip-hp .paip-hp-cp-pick.selected td:first-child { box-shadow: inset 3px 0 0 var(--navy); }
.paip-hp .paip-hp-cp-var-up   { color: var(--red);   font-weight: 700; }
.paip-hp .paip-hp-cp-var-down { color: var(--amber); font-weight: 700; }
.paip-hp .paip-hp-cp-var-ok   { color: var(--green); font-weight: 700; }
.paip-hp .paip-hp-cp-terms td { vertical-align: top; }
.paip-hp .paip-hp-cp-quote { font-size: 12px; line-height: 1.5; color: var(--navy); font-style: italic; }
.paip-hp .paip-hp-cp-src { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted, #6b7280); }
.paip-hp .paip-hp-cp-empty { text-align: center; padding: 40px 24px; }
.paip-hp .paip-hp-cp-empty h3 { color: var(--navy); margin: 0 0 8px; }

/* ── Member 360 (#822): one member's record ─────────────────────────────────────────────────────── */
.paip-hp .paip-hp-m360-header { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; background: var(--surface, #fff); }
.paip-hp .paip-hp-m360-id { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 15px; }
.paip-hp .paip-hp-m360-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 16px; margin: 0 0 8px; }
.paip-hp .paip-hp-m360-facts dt { font-size: 11px; color: var(--muted, #667); text-transform: uppercase; letter-spacing: .03em; }
.paip-hp .paip-hp-m360-facts dd { margin: 0; font-size: 12.5px; }
/* #933: what were inline styles on the member and referral screens. */
.paip-hp .paip-hp-inline-form { display: inline; }
.paip-hp .paip-hp-flush-note { padding: 12px 14px; }
.paip-hp .paip-hp-m360-event-facts { font-size: 11.5px; }
.paip-hp .paip-hp-m360-adjustments { font-size: 11px; }
.paip-hp .paip-hp-m360-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.paip-hp .paip-hp-m360-body { display: grid; grid-template-columns: 190px 1fr; gap: 14px; align-items: start; }
.paip-hp .paip-hp-m360-tabs { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 12px; }
.paip-hp .paip-hp-m360-tab { text-align: left; border: 1px solid var(--border); border-radius: 6px; background: transparent; padding: 7px 10px; font-size: 12.5px; cursor: pointer; }
.paip-hp .paip-hp-m360-tab:hover, .paip-hp .paip-hp-m360-tab:focus-visible { border-color: var(--teal-dim, #2a7); }
.paip-hp .paip-hp-m360-panel { min-width: 0; }
.paip-hp .paip-hp-m360-section-title { font-size: 14px; margin: 0 0 10px; display: flex; gap: 8px; align-items: center; }
.paip-hp .paip-hp-m360-timeline { list-style: none; margin: 0; padding: 0; }
.paip-hp .paip-hp-m360-event { border-left: 3px solid var(--border); padding: 6px 0 8px 12px; margin-bottom: 4px; font-size: 12.5px; }
.paip-hp .paip-hp-m360-event[data-m360-category="IP"], .paip-hp .paip-hp-m360-event[data-m360-category="ER"] { border-left-color: var(--red, #c33); }
.paip-hp .paip-hp-m360-drawer-open { margin-top: 4px; }
.paip-hp .paip-hp-m360-claim { margin-top: 6px; }
.paip-hp .paip-hp-m360-link { margin-left: 6px; font-family: inherit; font-weight: 400; white-space: nowrap; }
/* #1049: "Draft a care plan" and its one line of help, under the member's care plans. */
.paip-hp .paip-hp-m360-plan-start { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
/* #823: the financial statement. A maturing month (under 120 days of run-out) is shaded: its medical reads low. */
.paip-hp .paip-hp-m360-statement th[data-m360-maturing], .paip-hp .paip-hp-m360-statement td[data-m360-maturing] { background: color-mix(in srgb, var(--amber) 10%, transparent); }
.paip-hp .paip-hp-m360-statement .paip-hp-m360-total { border-left: 1px solid var(--border); font-weight: 600; }
.paip-hp .paip-hp-m360-statement tr[data-m360-line="subtotal"] td, .paip-hp .paip-hp-m360-statement tr[data-m360-line="subtotal"] th { font-weight: 600; border-top: 1px solid var(--border); }
.paip-hp .paip-hp-m360-statement tbody th { text-align: left; font-weight: 400; white-space: nowrap; }
.paip-hp .paip-hp-chip.on { border-color: var(--teal-dim, #2a7); font-weight: 600; }
@media (max-width: 760px) {
    .paip-hp .paip-hp-m360-body { grid-template-columns: 1fr; }
    .paip-hp .paip-hp-m360-tabs { flex-direction: row; flex-wrap: wrap; position: static; }
}