/* Design tokens extracted from the /welcome page (Landing.razor + welcome.css) —
   the marketing page is the visual spec for the whole app. */
:root {

    --blue:         #0385FF;
    --blue-dk:      #0270D9;
    --blue-press:   #0257B8;
    --blue-soft:    #EAF4FF;
    --blue-bg:      rgba(3, 133, 255, .06);
    --blue-line:    rgba(3, 133, 255, .24);
    --focus-ring:   #0385FF;
    --navy:         #0B1B33;
    --violet:       #6D5EF6;
    --cyan:         #22D3EE;

    --heading:      #0B1220;
    --heading-2:    #3D4859;
    --text:         #0B1220;
    --text-2:       #3D4859;
    --text-3:       #6B7688;
    --text-4:       #6B7688;

    --bg:           #FFFFFF;
    --surface:      #FFFFFF;
    --surface-1:    #F5F8FC;
    --bg-muted:     #F5F8FC;
    --bg-2:         #F5F8FC;
    --bg-3:         #ECF2F9;
    --card:         #FFFFFF;
    --hairline:     #E5EBF3;
    --hairline-2:   #EEF3F8;

    --success:      #16A34A;
    --success-bg:   #E9F7EE;
    --success-text: #15803D;
    --warning:      #F59E0B;
    --warning-bg:   #FEF6E7;
    --warning-text: #B45309;
    --danger:       #EF4444;
    --danger-bg:    #FDECEA;
    --danger-text:  #C2342B;
    --slate-bg:     rgba(11, 27, 51, .06);
    --slate-text:   #0B1B33;

    --shadow-card:
        0 1px 1px rgba(11, 27, 51, .05),
        0 2px 2px rgba(11, 27, 51, .045),
        0 4px 5px rgba(11, 27, 51, .04),
        0 7px 10px rgba(11, 27, 51, .035),
        0 12px 18px rgba(11, 27, 51, .03);
    --shadow-card-hover:
        0 1px 1px rgba(11, 27, 51, .05),
        0 2px 3px rgba(11, 27, 51, .045),
        0 5px 8px rgba(11, 27, 51, .05),
        0 10px 16px rgba(11, 27, 51, .055),
        0 18px 30px rgba(11, 27, 51, .06),
        0 30px 48px rgba(11, 27, 51, .07);
    --shadow-pop:
        0 2px 2px rgba(11, 27, 51, .05),
        0 5px 7px rgba(11, 27, 51, .05),
        0 11px 15px rgba(11, 27, 51, .055),
        0 21px 30px rgba(11, 27, 51, .06),
        0 38px 56px rgba(11, 27, 51, .08),
        0 64px 96px rgba(11, 27, 51, .10);
    --shadow-button: 0 10px 26px rgba(3, 133, 255, .32);
    --sh-1: var(--shadow-card);
    --sh-2: var(--shadow-card-hover);
    --sh-3: var(--shadow-pop);
    --sh-blue: var(--shadow-button);

    /* Aliases used by older stylesheets (form1099.css et al.) — resolve to the theme. */
    --accent: var(--blue);
    --text-1: var(--text);
    --blue-ink: #0F4C81; /* dark-blue text on blue-soft chips (extracted from hardcoded uses) */
    --portal-brand: #0E4D7B; /* recipient-portal header/button blue (extracted from PortalLayout) */
    --backdrop: rgba(11, 27, 51, .55); /* modal overlay */

    /* Bridge Bootstrap's own variables to the theme so its components
       (floating labels, list groups, tables, dropdowns) follow dark mode. */
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-body-color-rgb: 11, 18, 32;
    --bs-border-color: var(--hairline);
    --bs-secondary-color: rgba(11, 18, 32, .6);
    --bs-tertiary-bg: var(--bg-2);
    --bs-emphasis-color: var(--heading);
    --bs-secondary-bg: var(--bg-muted);
    --bs-heading-color: var(--heading);
    --bs-link-color: var(--blue);
    --bs-link-hover-color: var(--blue-dk);

    --page-grad: linear-gradient(180deg, #EAF1FC 0%, #EFF5FD 22%, #F7FAFE 55%, #FFFFFF 100%);
    --dot:       rgba(11, 27, 51, .08);
    --aura-a:    .16;

    --donut-track:   #E5EBF3;
    --topbar-bg:     color-mix(in oklab, var(--bg) 82%, transparent);
    --topbar-blur:   saturate(180%) blur(16px);
    --icon-btn-hover-bg: var(--bg-muted);

    --font-display: 'Inter', 'IBM Plex Sans', system-ui, sans-serif;
    --font-body:    'IBM Plex Sans', 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:    'IBM Plex Mono', 'SF Mono', Menlo, monospace;

    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;

    color-scheme: light;
}

:root[data-theme="dark"] {
    --blue:         #3D9EFF;
    --blue-dk:      #5AB0FF;
    --blue-press:   #7CC0FF;
    --blue-soft:    rgba(61, 158, 255, .10);
    --blue-bg:      rgba(61, 158, 255, .08);
    --blue-line:    rgba(61, 158, 255, .30);
    --navy:         #0A1426;
    --violet:       #8B7DFF;
    --cyan:         #34E0F0;
    --blue-ink:     #3D9EFF;
    --backdrop:     rgba(0, 0, 0, .62);

    --heading:      #F1F6FC;
    --heading-2:    #C5D0DE;
    --text:         #F1F6FC;
    --text-2:       #C5D0DE;
    --text-3:       #8C99AC;
    --text-4:       #8C99AC;

    --bg:           #0A1322;
    --surface:      #111B2F;
    --surface-1:    #0E1728;
    --bg-muted:     #141E33;
    --bg-2:         #0E1728;
    --bg-3:         #141E33;
    --card:         #111B2F;
    --hairline:     rgba(148, 163, 184, .16);
    --hairline-2:   rgba(148, 163, 184, .10);

    --success:      #16A34A;
    --success-bg:   rgba(34, 197, 94, .12);
    --success-text: #4ADE80;
    --warning:      #F59E0B;
    --warning-bg:   rgba(245, 158, 11, .12);
    --warning-text: #FCD34D;
    --danger:       #EF4444;
    --danger-bg:    rgba(239, 68, 68, .12);
    --danger-text:  #FCA5A5;
    --slate-bg:     rgba(148, 163, 184, .12);
    --slate-text:   #C5D0DE;

    --shadow-card:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 1px 2px rgba(0, 0, 0, .45),
        0 2px 5px rgba(0, 0, 0, .4),
        0 5px 10px rgba(0, 0, 0, .38),
        0 9px 16px rgba(0, 0, 0, .36);
    --shadow-card-hover:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 1px 2px rgba(0, 0, 0, .5),
        0 3px 7px rgba(0, 0, 0, .45),
        0 7px 15px rgba(0, 0, 0, .48),
        0 15px 30px rgba(0, 0, 0, .52),
        0 26px 48px rgba(0, 0, 0, .56);
    --shadow-pop:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 2px 4px rgba(0, 0, 0, .5),
        0 6px 13px rgba(0, 0, 0, .48),
        0 14px 28px rgba(0, 0, 0, .52),
        0 28px 52px rgba(0, 0, 0, .56),
        0 52px 92px rgba(0, 0, 0, .64);
    --shadow-button: 0 12px 30px rgba(3, 133, 255, .4);

    --page-grad: radial-gradient(135% 95% at 50% 6%, #14203A 0%, #0C1426 40%, #080D1A 74%, #05080F 100%);
    --dot:       rgba(160, 185, 220, .1);
    --aura-a:    .22;

    --donut-track:   #141E33;
    --topbar-bg:     color-mix(in oklab, var(--bg) 82%, transparent);
    --topbar-blur:   saturate(180%) blur(16px);
    --icon-btn-hover-bg: rgba(148, 163, 184, .08);

    --bs-body-color-rgb: 241, 246, 252;
    --bs-secondary-color: rgba(241, 246, 252, .6);

    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --blue-dk:      #5AB0FF;
        --blue-press:   #7CC0FF;
        --blue:         #3D9EFF;
        --blue-soft:    rgba(61, 158, 255, .10);
        --blue-bg:      rgba(61, 158, 255, .08);
        --blue-line:    rgba(61, 158, 255, .30);
        --navy:         #0A1426;
        --violet:       #8B7DFF;
        --cyan:         #34E0F0;
        --blue-ink:     #3D9EFF;
        --backdrop:     rgba(0, 0, 0, .62);

        --heading:      #F1F6FC;
        --heading-2:    #C5D0DE;
        --text:         #F1F6FC;
        --text-2:       #C5D0DE;
        --text-3:       #8C99AC;
        --text-4:       #8C99AC;

        --bg:           #0A1322;
        --surface:      #111B2F;
        --surface-1:    #0E1728;
        --bg-muted:     #141E33;
        --bg-2:         #0E1728;
        --bg-3:         #141E33;
        --card:         #111B2F;
        --hairline:     rgba(148, 163, 184, .16);
        --hairline-2:   rgba(148, 163, 184, .10);

        --success:      #16A34A;
        --success-bg:   rgba(34, 197, 94, .12);
        --success-text: #4ADE80;
        --warning:      #F59E0B;
        --warning-bg:   rgba(245, 158, 11, .12);
        --warning-text: #FCD34D;
        --danger:       #EF4444;
        --danger-bg:    rgba(239, 68, 68, .12);
        --danger-text:  #FCA5A5;
        --slate-bg:     rgba(148, 163, 184, .12);
        --slate-text:   #C5D0DE;

        --shadow-card:
            inset 0 1px 0 rgba(255, 255, 255, .05),
            0 1px 2px rgba(0, 0, 0, .45),
            0 2px 5px rgba(0, 0, 0, .4),
            0 5px 10px rgba(0, 0, 0, .38),
            0 9px 16px rgba(0, 0, 0, .36);
        --shadow-card-hover:
            inset 0 1px 0 rgba(255, 255, 255, .06),
            0 1px 2px rgba(0, 0, 0, .5),
            0 3px 7px rgba(0, 0, 0, .45),
            0 7px 15px rgba(0, 0, 0, .48),
            0 15px 30px rgba(0, 0, 0, .52),
            0 26px 48px rgba(0, 0, 0, .56);
        --shadow-pop:
            inset 0 1px 0 rgba(255, 255, 255, .07),
            0 2px 4px rgba(0, 0, 0, .5),
            0 6px 13px rgba(0, 0, 0, .48),
            0 14px 28px rgba(0, 0, 0, .52),
            0 28px 52px rgba(0, 0, 0, .56),
            0 52px 92px rgba(0, 0, 0, .64);
        --shadow-button: 0 12px 30px rgba(3, 133, 255, .4);

        --page-grad: radial-gradient(135% 95% at 50% 6%, #14203A 0%, #0C1426 40%, #080D1A 74%, #05080F 100%);
        --dot:       rgba(160, 185, 220, .1);
        --aura-a:    .22;

        --donut-track:   #141E33;
        --topbar-bg:     color-mix(in oklab, var(--bg) 82%, transparent);
        --topbar-blur:   saturate(180%) blur(16px);
        --icon-btn-hover-bg: rgba(148, 163, 184, .08);

        --bs-body-color-rgb: 241, 246, 252;
        --bs-secondary-color: rgba(241, 246, 252, .6);

        color-scheme: dark;
    }
}

@media (max-width: 880px) {

    #sidebar-toggle-check:checked ~ .app-shell .sidebar { transform: translateX(0) !important; }
    #sidebar-toggle-check:checked ~ .app-shell .sidebar-overlay {
        display: block !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    #sidebar-toggle-check:checked ~ .app-shell .sidebar-toggle .sidebar-toggle-open  { display: none !important; }
    #sidebar-toggle-check:checked ~ .app-shell .sidebar-toggle .sidebar-toggle-close { display: block !important; }
}

/* MVC app shell (Views/Shared/_Layout.cshtml) — ported verbatim from MainLayout.razor.css.
   The MVC layout hand-writes this markup directly (not through MainLayout.razor), so Blazor's
   scoped .razor.css rules can never match it (the scope attribute only lands on elements a
   component itself renders) — these rules must stay in a plain, non-isolated stylesheet. Keep
   in sync with MainLayout.razor.css if the /legacy Blazor-router shell ever changes. */
.skip-link {
    position: absolute;
    top: -48px;
    left: 8px;
    z-index: 2000;
    background: var(--blue, #0385FF);
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: top 140ms ease;
}
.skip-link:focus {
    top: 8px;
}

.sidebar-toggle-check {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    padding: 0;
    margin: -1px;
}

.app-shell {
    display: flex;
    min-height: 100vh;
    background: transparent; /* the /welcome page gradient on <body> shows through */
    /* The .app-shell::before aura is position:fixed; z-index:-1. Without a stacking context here it
       lives in the root layer and paints OVER content instead of behind it. isolate contains it —
       the same fix Landing/IrisHub already carry on their aura wrappers. */
    isolation: isolate;
}

.sidebar {
    width: 240px;
    flex-shrink: 0;
    background: color-mix(in oklab, var(--card) 72%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-right: 1px solid var(--hairline);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 30;
}

.main-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 56px;
    background: var(--topbar-bg);
    -webkit-backdrop-filter: var(--topbar-blur);
    backdrop-filter: var(--topbar-blur);
    border-bottom: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 24px;
    gap: 6px;
}

.sidebar-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    padding: 8px;
    border-radius: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    margin-right: auto;
    transition: background-color 140ms;
}
.sidebar-toggle:hover { background: var(--bg-muted); }
.sidebar-toggle svg { display: block; }
.sidebar-toggle .sidebar-toggle-close { display: none; }

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 25;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    cursor: pointer;
}

.app-main {
    flex: 1;
    background: transparent;
}

.app-content {
    max-width: 1240px;
    margin: 0 auto;
    padding: 30px 32px 60px;
}

/* Desktop sidebar collapse. The hamburger below is the phone drawer; this is its counterpart for a
   wide screen, where the sidebar is always open and 240px of it is not always wanted. State lives on
   <html> (set before paint by theme-init.js), so it holds across pages and never flashes open. */
.sidebar-collapse {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    padding: 8px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    transition: background-color 140ms, color 140ms;
}
.sidebar-collapse:hover { background: var(--bg-muted); }
.sidebar-collapse:focus-visible { outline: 2px solid var(--blue, #0385FF); outline-offset: 2px; }
.sidebar-collapse svg { display: block; transition: transform 200ms ease; }
html.sidebar-collapsed .sidebar-collapse svg { transform: rotate(180deg); }

@media (min-width: 881px) {
    .sidebar { transition: width 180ms ease; }

    /* Collapsed is a rail, not a disappearance: every icon stays reachable, only the words go.
       Pointing at the rail brings them back — the sidebar clips horizontally, so a tooltip escaping it
       would be cut off, and widening it is what fits. Everything below hides only while NOT hovered, so
       hovering simply stops applying it and the original styles stand; nothing has to be restated (and
       a closed <details> is never forced open, which restating display would do). */
    html.sidebar-collapsed .sidebar { width: 68px; overflow-x: hidden; }
    html.sidebar-collapsed .sidebar:hover { width: 240px; }

    html.sidebar-collapsed .sidebar:not(:hover) .sidebar-link,
    html.sidebar-collapsed .sidebar:not(:hover) .sidebar-group-summary {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
        gap: 0;
    }

    html.sidebar-collapsed .sidebar:not(:hover) .sidebar-link > span,
    html.sidebar-collapsed .sidebar:not(:hover) .sidebar-group-summary > span,
    html.sidebar-collapsed .sidebar:not(:hover) .sidebar-link .chev,
    html.sidebar-collapsed .sidebar:not(:hover) .sidebar-sub,
    html.sidebar-collapsed .sidebar:not(:hover) .sidebar-section-label { display: none; }

    html.sidebar-collapsed .sidebar:not(:hover) .sidebar-brand {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
    /* The logo is one image carrying the badge AND the wordmark; a 68px rail can only hold the badge,
       so it is cropped to its left edge rather than squashed or spilling past the rail. */
    html.sidebar-collapsed .sidebar:not(:hover) .sidebar-brand-img {
        height: 30px;
        width: 30px;
        max-width: 30px;
        object-fit: cover;
        object-position: left center;
    }
}

/* The phone drawer owns the sidebar at this width, so the desktop collapse would only confuse. */
@media (max-width: 880px) {
    .sidebar-collapse { display: none; }
}

@media (max-width: 880px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        transform: translateX(-100%);
        transition: transform 200ms ease;
        box-shadow: var(--shadow-pop);
        z-index: 30;
    }
    .sidebar-toggle { display: inline-flex; }

    .topbar { padding: 0 18px; }
    .app-content { padding: 22px 18px 40px; }
}

html, body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern', 'liga', 'calt';
}

/* /welcome page backdrop: soft gradient wash + fading dot grid pinned behind every page. */
body {
    background: var(--page-grad) no-repeat fixed;
    background-color: var(--bg);
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: radial-gradient(var(--dot) 1px, transparent 1px);
    background-size: 30px 30px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 42%, transparent 78%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 42%, transparent 78%);
    opacity: .7;
    pointer-events: none;
    z-index: -1;   /* decorative layer sits BEHIND content — never paints over surfaces */
}

/* The two drifting color auras from /welcome (blue top-left, violet top-right). */
body::after {
    content: "";
    position: fixed;
    left: -12%;
    top: -18%;
    width: 60vw;
    height: 60vw;
    max-width: 880px;
    max-height: 880px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--blue) 0%, transparent 64%);
    opacity: var(--aura-a);
    filter: blur(54px);
    animation: wAura 30s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}
.aura-violet, .app-shell::before {
    content: "";
    position: fixed;
    right: -14%;
    top: 6%;
    width: 52vw;
    height: 52vw;
    max-width: 760px;
    max-height: 760px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--violet) 0%, transparent 64%);
    opacity: var(--aura-a);
    filter: blur(58px);
    animation: wAura 38s ease-in-out infinite reverse;
    pointer-events: none;
    z-index: -1;
}

/* Motion + hover vocabulary from /welcome (wAura auras, wPulse dots, lift cards, shimmer CTAs). */
@keyframes wAura   { 0% { transform: translate3d(-3%, -2%, 0) scale(1); } 50% { transform: translate3d(4%, 3%, 0) scale(1.08); } 100% { transform: translate3d(-3%, -2%, 0) scale(1); } }
@keyframes wPulse  { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } }
@keyframes wFloat  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes wShimmer{ 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes wSpin   { to { transform: rotate(360deg); } }

.lift { transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s, border-color .28s; }
.lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-pop); border-color: var(--blue-line); }

.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .4) 50%, transparent 68%);
    background-size: 220% 100%;
    animation: wShimmer 3.2s linear infinite;
    pointer-events: none;
}

.chev { transition: transform .25s; display: inline-block; }
.btn-go:hover .chev { transform: translateX(4px); }

/* Breadcrumb trail on nested detail pages (Payer → Recipient → Form). */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; margin-bottom: 10px; }
.crumbs-link { color: var(--text-3); font-weight: 500; }
.crumbs-link:hover { color: var(--blue-dk); }
.crumbs-sep { color: var(--text-4); }
.crumbs-here { color: var(--text-2); font-weight: 600; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Clamp long user-supplied names/emails in table cells: ellipsis instead of
   overflowing the borders. Pair with title="" for the full value on hover. */
.txt-clip {
    display: inline-block;
    max-width: 30ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

@media (prefers-reduced-motion: reduce) {
    .lift, .shimmer::after, .chev { animation: none !important; transition: none !important; }
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    color: var(--heading);
    font-weight: 700;
    line-height: 1.15;
}

h1, .h1 { font-size: clamp(1.75rem, 2.5vw, 2.25rem); letter-spacing: -.04em; }
h2, .h2 { font-size: 1.5rem;  letter-spacing: -.025em; font-weight: 700; }
h3, .h3 { font-size: 1.125rem;letter-spacing: -.02em;  font-weight: 600; }
h4, .h4 { font-size: 1rem;    letter-spacing: -.015em; font-weight: 600; }
h5, .h5 { font-size: .9375rem;letter-spacing: -.01em;  font-weight: 600; }
h6, .h6 { font-size: .8125rem;font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }

p { color: var(--text); }
.text-muted { color: var(--text-3) !important; }
.small, small { font-size: .85rem; color: var(--text-3); }

a, .btn-link {
    color: var(--blue);
    text-decoration: none;
    transition: color 140ms ease;
}
a:hover, .btn-link:hover { color: var(--blue-dk); }

code, pre, .font-mono {
    font-family: var(--font-mono);
    font-feature-settings: 'tnum';
}

::selection { background: rgba(3, 133, 255, .25); color: var(--heading); }

.btn {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 12px;
    transition: all 160ms ease;
    border: 1.5px solid transparent;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 3px rgba(3, 133, 255, .18);
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}
.btn:focus-visible, .btn-link.nav-link:focus-visible,
.form-control:focus-visible, .form-check-input:focus-visible,
.form-select:focus-visible {
    outline: none;
}
.btn-primary {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
    box-shadow: var(--shadow-button);
    position: relative;
    overflow: hidden;
}
/* /welcome CTA shimmer sweep */
.btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .4) 50%, transparent 68%);
    background-size: 220% 100%;
    animation: wShimmer 3.2s linear infinite;
    pointer-events: none;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--blue-dk);
    border-color: var(--blue-dk);
    color: #fff;
    transform: translateY(-1px);
}
.btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active {
    background: var(--blue-press) !important;
    border-color: var(--blue-press) !important;
    color: #fff !important;
    transform: translateY(0);
}
.btn-primary:disabled, .btn-primary.disabled {
    background: var(--bg-muted);
    color: var(--text-4);
    border-color: var(--hairline);
    box-shadow: none;
    transform: none;
}

.btn-outline-primary {
    background: var(--card);
    color: var(--blue);
    border-color: var(--hairline);
    box-shadow: var(--sh-1);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background: var(--blue-soft);
    color: var(--blue-dk);
    border-color: var(--blue);
}

.btn-outline-secondary {
    background: var(--card);
    color: var(--text-2);
    border-color: var(--hairline);
    box-shadow: var(--sh-1);
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
    background: var(--bg-muted);
    color: var(--heading);
    border-color: var(--blue-line);
}

.btn-outline-danger {
    background: var(--card);
    color: var(--danger);
    border-color: var(--danger);
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
    background: var(--danger-bg);
    color: var(--danger-text);
    border-color: var(--danger);
}

.btn-link {
    border: none;
    box-shadow: none;
    padding: 6px 10px;
    color: var(--blue);
}
.btn-link:hover { background: var(--blue-soft); }

/* Remaining Bootstrap variants aligned to the /welcome palette. */
.btn-secondary {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
    box-shadow: var(--shadow-card-hover);
}
.btn-secondary:hover, .btn-secondary:focus { background: var(--navy); color: #fff; filter: brightness(1.15); }
.btn-success {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}
.btn-warning {
    background: var(--warning);
    color: #fff;
    border-color: var(--warning);
}
.btn-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.btn-success:hover, .btn-warning:hover, .btn-danger:hover { filter: brightness(.94); color: #fff; }

/* /welcome lift hover on interactive cards. */
.card, .chooser-card, .software-card, .summary-card,
.dashboard-root .stat, .dashboard-root .action-card {
    transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s, border-color .28s;
}
.chooser-card:hover, .software-card:hover,
.dashboard-root .action-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-pop);
    border-color: var(--blue-line);
}
.card:hover, .summary-card:hover, .dashboard-root .stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.btn-lg { padding: 13px 22px; font-size: 15px; border-radius: 14px; }
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 10px; }

.card {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 20px;
    box-shadow: var(--shadow-card);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--hairline);
    padding: 18px 22px 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--heading);
    letter-spacing: -.02em;
}
.card-body {
    padding: 22px 24px;
    color: var(--text);
}
.card-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--heading);
    letter-spacing: -.015em;
}

.alert {
    border-radius: 12px;
    border: 1px solid transparent;
    padding: 14px 18px;
    font-size: 14px;
}
.alert-info {
    background: var(--blue-bg);
    border-color: var(--blue-soft);
    color: var(--heading-2);
}
.alert-success {
    background: var(--success-bg);
    border-color: rgba(22, 163, 74, .25);
    color: var(--success-text);
}
.alert-warning {
    background: var(--warning-bg);
    border-color: rgba(245, 158, 11, .28);
    color: var(--warning-text);
}
.alert-danger {
    background: var(--danger-bg);
    border-color: rgba(239, 68, 68, .25);
    color: var(--danger-text);
}
.alert-link { color: inherit; text-decoration: underline; font-weight: 600; }

.badge {
    display: inline-flex;
    align-items: center;
    flex: none;
    align-self: flex-start;
    width: fit-content;
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11.5px;
    letter-spacing: 0;
    line-height: 1.4;
}
.bg-primary, .badge.bg-primary { background: var(--blue) !important; color: #fff !important; }
.bg-success, .badge.bg-success { background: var(--success-bg) !important; color: var(--success-text) !important; }
.bg-warning, .badge.bg-warning { background: var(--warning-bg) !important; color: var(--warning-text) !important; }
.bg-danger,  .badge.bg-danger  { background: var(--danger-bg)  !important; color: var(--danger-text)  !important; }
.bg-info,    .badge.bg-info    { background: var(--blue-soft)  !important; color: var(--blue-ink)   !important; }
.bg-secondary, .badge.bg-secondary { background: var(--slate-bg) !important; color: var(--slate-text) !important; }
.bg-light, .badge.bg-light { background: var(--bg-muted) !important; color: var(--heading-2) !important; }
.bg-success-subtle { background: var(--success-bg) !important; }
.bg-warning-subtle { background: var(--warning-bg) !important; }
.bg-danger-subtle  { background: var(--danger-bg) !important; }
.bg-info-subtle    { background: var(--blue-soft) !important; }
.bg-secondary-subtle { background: var(--slate-bg) !important; }

.text-success { color: var(--success-text) !important; }
.text-warning { color: var(--warning-text) !important; }
.text-danger  { color: var(--danger-text)  !important; }
.text-info    { color: var(--blue)         !important; }
.text-primary { color: var(--blue)         !important; }
.text-secondary { color: var(--text-3)     !important; }

[data-theme="dark"] .text-dark { color: var(--heading) !important; }

.form-control, .form-select {
    background: var(--card);
    border: 1px solid var(--hairline-2);
    border-radius: 10px;
    color: var(--text);
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.form-control:focus, .form-select:focus {
    background: var(--card);
    border-color: var(--blue);
    color: var(--text);
}
/* Every dropdown reads like the field picker's trigger: card face, hair border, 10px radius,
   its own chevron, a whisper of shadow, and the blue focus ring. */
.form-select,
select:not([multiple]):not([size]) {
    appearance: none;
    -webkit-appearance: none;
    padding: 9px 32px 9px 12px;
    border: 1px solid var(--hairline-2);
    border-radius: 10px;
    background: var(--card) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    box-shadow: 0 1px 2px rgba(11, 18, 32, .05);
    color: var(--text);
    cursor: pointer;
}
.form-select:focus,
select:not([multiple]):not([size]):focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(3, 133, 255, .15);
}
.form-control:disabled, .form-control[readonly] {
    background: var(--bg-muted);
    color: var(--text-3);
}
.form-control::placeholder { color: var(--text-4); }

.form-label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--heading-2);
    margin-bottom: 6px;
}
.form-text {
    font-size: 12.5px;
    color: var(--text-3);
}

.form-floating > .form-control,
.form-floating > .form-select {
    height: calc(3.5rem + 2px);
    padding: 1rem .75rem;
}
.form-floating > label {
    color: var(--text-3);
    font-size: 14px;
    padding: 1rem .75rem;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: var(--text-3);
    background: transparent;
}

.form-check-input {
    background-color: var(--bg);
    border: 1.5px solid var(--hairline-2);
    width: 1.1rem;
    height: 1.1rem;
}
.form-check-input:checked {
    background-color: var(--blue);
    border-color: var(--blue);
}
.form-check-label { color: var(--text); font-size: 14px; }

.table {
    color: var(--text);
    border-color: var(--hairline);
    margin-bottom: 0;
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-hover-bg: var(--bg-muted);
    --bs-table-hover-color: var(--heading);
    --bs-table-striped-bg: var(--bg-2);
}
.table > thead { vertical-align: middle; }
.table > thead th {
    text-transform: uppercase;
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--text-3);
    background: var(--bg-2);
    border-bottom: 1px solid var(--hairline);
    padding: 14px 18px;
}
.table > tbody td {
    padding: 14px 18px;
    border-color: var(--hairline);
    font-size: 14px;
}
.table-hover > tbody > tr:hover > * {
    background: var(--bg-muted);
    color: var(--heading);
}

/* A table row that navigates to its detail page on click, while nested links/buttons
   (marked with @onclick:stopPropagation) keep their own distinct destinations. */
.row-clickable { cursor: pointer; }

/* Shared date-divider row for chronological form listings (grouped Today/Yesterday/weekday/date). */
.date-divider-row td {
    background: var(--bg-2, #f8fafc);
    color: var(--text-3, #64748b);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 7px 16px;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--blue);
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-border-radius: 10px;
    gap: 4px;
}
.nav-pills .nav-link {
    color: var(--text-2);
    font-weight: 600;
    font-size: 13.5px;
    padding: 8px 14px;
    border-radius: 10px;
}
.nav-pills .nav-link:hover { background: var(--bg-muted); color: var(--heading); }
.nav-pills .nav-link.active { box-shadow: var(--shadow-button); }

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success);
}
.invalid {
    outline: 1px solid var(--danger);
}
.validation-message, .text-danger { color: var(--danger-text); font-size: 13px; }

.content {
    padding-top: 0;
}
h1:focus { outline: none; }

hr { border-color: var(--hairline); opacity: 1; }

details { color: var(--text); }
summary { cursor: pointer; }
blockquote { color: var(--text-2); border-left: 3px solid var(--hairline-2); padding-left: 16px; }

pre {
    background: var(--bg-muted);
    color: var(--text);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 14px 16px;
}

.container, .container-fluid { padding-left: 24px; padding-right: 24px; }

.eyebrow {
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .12em;
}

.chip {
    display: inline-flex;
    align-items: center;
    flex: none;
    align-self: flex-start;
    width: fit-content;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.chip.success { background: var(--success-bg); color: var(--success-text); }
.chip.warning { background: var(--warning-bg); color: var(--warning-text); }
.chip.danger  { background: var(--danger-bg);  color: var(--danger-text); }
.chip.blue    { background: var(--blue-soft);  color: var(--blue-ink); }
.chip.slate   { background: var(--slate-bg);   color: var(--slate-text); }

:root[data-theme="dark"] .chip.green, :root[data-theme="dark"] .chip.live,
:root[data-theme="dark"] .ord-badge.green { background: rgba(34,197,94,.15); color: #4ADE80; }
:root[data-theme="dark"] .chip.amber, :root[data-theme="dark"] .ord-badge.amber { background: rgba(245,158,11,.15); color: #FCD34D; }
:root[data-theme="dark"] .chip.red, :root[data-theme="dark"] .ord-badge.red { background: rgba(239,68,68,.15); color: #FCA5A5; }
:root[data-theme="dark"] .chip.blue, :root[data-theme="dark"] .ord-badge.blue { background: rgba(3,133,255,.15); color: #3D9EFF; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .chip.green, :root:not([data-theme="light"]) .chip.live,
    :root:not([data-theme="light"]) .ord-badge.green { background: rgba(34,197,94,.15); color: #4ADE80; }
    :root:not([data-theme="light"]) .chip.amber, :root:not([data-theme="light"]) .ord-badge.amber { background: rgba(245,158,11,.15); color: #FCD34D; }
    :root:not([data-theme="light"]) .chip.red, :root:not([data-theme="light"]) .ord-badge.red { background: rgba(239,68,68,.15); color: #FCA5A5; }
    :root:not([data-theme="light"]) .chip.blue, :root:not([data-theme="light"]) .ord-badge.blue { background: rgba(3,133,255,.15); color: #3D9EFF; }
}

.mono {
    font-family: var(--font-mono);
    font-feature-settings: 'tnum';
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--backdrop);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: modal-fade 140ms ease;
}
@keyframes modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.modal-card {
    background: var(--card);
    border-radius: 20px;
    box-shadow: var(--shadow-pop);
    border: 1px solid var(--hairline);
    width: 100%;
    max-width: 640px;
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modal-pop 180ms cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes modal-pop {
    from { opacity: 0; transform: scale(.94) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-card.sm { max-width: 460px; }
.modal-card.lg { max-width: 820px; }
.modal-header {
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.modal-header h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--heading);
}
.modal-close {
    background: none;
    border: none;
    color: var(--text-3);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}
.modal-close:hover { background: var(--bg-muted); color: var(--heading); }
.modal-body {
    padding: 18px 24px;
    overflow-y: auto;
    flex: 1;
    color: var(--text);
}
.modal-message {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-2);
    margin: 0 0 10px;
}
.modal-message strong { color: var(--heading); font-weight: 700; }
.modal-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.modal-form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
}
.modal-form-grid > .form-group { grid-column: span 12; }
.modal-form-grid > .form-group.span-6 { grid-column: span 6; }
.modal-form-grid > .form-group.span-4 { grid-column: span 4; }
.modal-form-grid > .form-group.span-8 { grid-column: span 8; }
.modal-form-grid > .form-group.span-3 { grid-column: span 3; }
.modal-form-grid > .form-group.span-2 { grid-column: span 2; }
.modal-form-grid .form-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: .03em;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.modal-form-grid .form-label .req { color: var(--danger); margin-left: 2px; }
.modal-form-grid .form-control,
.modal-form-grid .form-select {
    padding: 9px 12px;
    font-size: 14px;
    border-radius: 8px;
}
.modal-form-grid .field-error {
    color: var(--danger-text);
    font-size: 12px;
    margin-top: 2px;
}

/* ── Filings list standard ──────────────────────────────────────────────────
   One scale for every filings list page (fonts stay IBM Plex Sans / var(--font-*)):
   base 16 · table 13.5 · thead labels 13 · helper 12.5 · buttons 14.5
   sections 32 · card header 20×24 · cells 12×16 (24 at card edges)
   controls: search/selects/buttons 44, small buttons 36 · content ≤1400px */
.filings-page {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    font-size: 16px;
}
.filings-page .payer-group-head { padding: 20px 24px; }
.filings-page .payer-group-body .table { font-size: 13.5px; }
.filings-page .payer-group-body .table > :not(caption) > * > * { padding: 12px 16px; vertical-align: middle; }
.filings-page .payer-group-body .table > :not(caption) > * > :first-child { padding-inline-start: 24px; }
.filings-page .payer-group-body .table > :not(caption) > * > :last-child { padding-inline-end: 24px; }
.filings-page .payer-group-body .table > thead th { font-size: 13px; font-weight: 600; }
.filings-page .btn { font-size: 14.5px; padding: 10px 18px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.filings-page .btn-sm { font-size: 14px; padding: 8px 14px; min-height: 36px; }
.filings-page input[type="text"], .filings-page input[type="search"], .filings-page select {
    min-height: 44px; font-size: 14.5px; padding: 10px 16px;
}
.filings-page label { font-size: 13.5px; }
.filings-page small, .filings-page .text-muted { font-size: 12.5px; }

.filings-topline {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
/* The one page-title scale, /iris tracking. Scoped variants (.dashboard-root) may adjust margins. */
.page-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.375rem, 1.9vw, 1.625rem);
    letter-spacing: -.015em;
    color: var(--heading);
    margin: 0;
    line-height: 1.1;
}

/* Header pattern: title first, breadcrumb-style eyebrow small beneath it, no description subs.
   Ordered here rather than in 38 page files — the markup keeps its acct/title/sub order. */
.filings-topline .meta { display: flex; flex-direction: column; gap: 5px; max-width: 720px; }
.filings-topline .acct {
    order: 2;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .1em;
}
.filings-topline .title { order: 1; }
.filings-topline .sub { display: none; }
.filings-topline .title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.375rem, 1.9vw, 1.625rem);
    letter-spacing: -.015em;
    color: var(--heading);
    margin: 0;
    line-height: 1.1;
}

.payer-group {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.payer-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px 14px;
    border-bottom: 1px solid var(--hairline);
    background: var(--bg-2);
    gap: 16px;
    flex-wrap: wrap;
}
.payer-group-head .payer-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.payer-group-head .payer-id h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -.015em;
    color: var(--heading);
}
.payer-group-head .payer-id h2 a {
    color: inherit;
    text-decoration: none;
}
.payer-group-head .payer-id h2 a:hover { color: var(--blue); text-decoration: none; }
.payer-group-head .payer-id .mono {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text-3);
    letter-spacing: .04em;
}
.payer-group-head .payer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.payer-group-body { padding: 0; }
.payer-group-body .table { margin-bottom: 0; }
.payer-group-body .table > thead th { background: var(--card); border-top: none; }
.payer-group-body .table > tbody > tr:last-child > td { border-bottom: none; }

.filings-empty {
    background: var(--card);
    border: 1px dashed var(--hairline-2);
    border-radius: 16px;
    padding: 60px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}
.filings-empty-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--blue-soft);
    color: var(--blue);
    display: grid;
    place-items: center;
    margin-bottom: 4px;
}
.filings-empty-icon svg { width: 28px; height: 28px; }
.filings-empty h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -.02em;
    color: var(--heading);
}
.filings-empty p {
    margin: 0;
    color: var(--text-3);
    max-width: 420px;
    line-height: 1.55;
}

.filing-chooser {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.chooser-topline { display: flex; flex-direction: column; gap: 4px; max-width: 720px; }
.chooser-topline .acct {
    order: 2;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .1em;
}
.chooser-topline .title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.375rem, 1.9vw, 1.625rem);
    letter-spacing: -.015em;
    color: var(--heading);
    margin: 0;
    line-height: 1.1;
}
.chooser-topline .title { order: 1; }
.chooser-topline .sub { display: none; }

.chooser-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
@media (max-width: 1180px) { .chooser-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .chooser-grid { grid-template-columns: 1fr; } }

.chooser-card {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    padding: 22px 20px 20px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.chooser-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
    border-color: var(--blue-line);
}
.chooser-card.disabled {
    background: var(--bg-2);
    border-style: dashed;
}
.chooser-card.disabled:hover { transform: none; box-shadow: var(--shadow-card); }

.cc-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
}
.cc-icon svg { width: 22px; height: 22px; }
.cc-icon.blue   { background: var(--blue-soft); color: var(--blue); }
.cc-icon.teal   { background: rgba(45, 191, 162, .14); color: #0F9F84; }
.cc-icon.violet { background: rgba(124, 109, 222, .14); color: #6B5DD5; }
.cc-icon.amber  { background: var(--warning-bg); color: var(--warning-text); }

.cc-body { display: flex; flex-direction: column; gap: 8px; }
.cc-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -.015em;
    color: var(--heading);
    margin: 0;
}
.cc-desc {
    margin: 0;
    color: var(--text-3);
    font-size: 13px;
    line-height: 1.5;
    min-height: 40px;
}

.cc-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 4px 0 -2px;
}
.cc-select {
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 8px;
}

.cc-hint {
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid rgba(245, 158, 11, .28);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12.5px;
    line-height: 1.45;
}
.cc-hint.warn strong { color: var(--warning-text); }

.cc-coming-soon {
    display: inline-block;
    background: var(--slate-bg);
    color: var(--slate-text);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    align-self: flex-start;
}

.ac-btn {
    margin-top: auto;
    background: var(--card);
    color: var(--heading);
    border: 1.5px solid var(--hairline);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 140ms ease;
    text-align: center;
}
.ac-btn:hover { border-color: var(--blue); color: var(--blue); }
.ac-btn.primary {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
    box-shadow: var(--shadow-button);
}
.ac-btn.primary:hover { background: var(--blue-dk); border-color: var(--blue-dk); color: #fff; }
.ac-btn:disabled,
.ac-btn[aria-disabled="true"] {
    background: var(--bg-muted);
    color: var(--text-4);
    border-color: var(--hairline);
    cursor: not-allowed;
    box-shadow: none;
}
.ac-btn:disabled:hover,
.ac-btn[aria-disabled="true"]:hover { color: var(--text-4); border-color: var(--hairline); }

.payers-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.search-box {
    position: relative;
    flex: 1;
    max-width: 480px;
    min-width: 240px;
}
.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-3);
    pointer-events: none;
}
.search-input {
    width: 100%;
    height: 40px;
    padding: 0 38px 0 38px;
    border-radius: 10px;
    border: 1px solid var(--hairline-2);
    background: var(--card);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.search-input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(3, 133, 255, .18);
}
.search-input::placeholder { color: var(--text-4); }
.search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--bg-muted);
    color: var(--text-3);
    border: none;
    font-size: 16px;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.search-clear:hover { background: var(--hairline); color: var(--heading); }

.toolbar-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 13px;
    color: var(--text-3);
}
.toolbar-meta strong { color: var(--heading); font-weight: 700; }
.toolbar-pagesize {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.toolbar-pagesize select {
    background: var(--card);
    border: 1px solid var(--hairline-2);
    border-radius: 8px;
    padding: 5px 8px;
    color: var(--heading);
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
}

.alpha-bar {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 0;
}
.alpha-letter {
    background: transparent;
    border: none;
    color: var(--text-2);
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 140ms ease;
    min-width: 26px;
}
.alpha-letter:hover { background: var(--bg-muted); color: var(--heading); }
.alpha-letter.active {
    background: var(--blue);
    color: #fff;
}
.alpha-letter.muted {
    color: var(--text-4);
    cursor: not-allowed;
    opacity: .5;
}
.alpha-letter.muted:hover { background: transparent; }

.payer-group-body .table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: color 140ms ease, background 140ms ease;
}
.payer-group-body .table th.sortable:hover { color: var(--blue); }
.payer-group-body .table th.sortable.sorted-asc,
.payer-group-body .table th.sortable.sorted-desc {
    color: var(--blue);
    background: var(--blue-bg);
}

.payers-no-matches {
    padding: 40px 32px;
    text-align: center;
    color: var(--text-3);
}
.payers-no-matches p { margin: 0 0 12px; }

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 22px;
    border-top: 1px solid var(--hairline);
    background: var(--bg-2);
    flex-wrap: wrap;
}
.pager-info {
    font-size: 13px;
    color: var(--text-3);
}
.pager-info strong { color: var(--heading); font-weight: 700; }
.pager-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pager-btn {
    background: var(--card);
    border: 1px solid var(--hairline-2);
    border-radius: 8px;
    padding: 6px 12px;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: all 140ms ease;
}
.pager-btn:hover:not(:disabled) {
    border-color: var(--blue);
    color: var(--blue);
}
.pager-btn:disabled {
    background: var(--bg-muted);
    color: var(--text-4);
    cursor: not-allowed;
}
.pager-page {
    margin: 0 10px;
    font-size: 13px;
    color: var(--text-3);
}
.pager-page strong { color: var(--heading); font-weight: 700; }

.cart-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 22px;
    align-items: start;
}
@media (max-width: 1000px) {
    .cart-grid { grid-template-columns: 1fr; }
}
.cart-col-items { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cart-col-summary { position: sticky; top: 76px; }

.cart-form-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 22px 16px;
    border-bottom: 1px solid var(--hairline);
}
.cart-form-row:last-child { border-bottom: none; }

.cfr-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: start;
}
.cfr-recipient-block { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cfr-recipient {
    text-decoration: none;
    color: var(--heading);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.3;
}
.cfr-recipient:hover { color: var(--blue); text-decoration: none; }
.cfr-recipient strong { font-weight: 700; }
.cfr-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-3);
}
.cfr-dot { color: var(--text-4); }

.cfr-remove {
    background: none;
    border: none;
    color: var(--text-3);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    align-self: start;
    white-space: nowrap;
}
.cfr-remove:hover { color: var(--danger-text); }

.cfr-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px dashed var(--hairline-2);
    padding-top: 10px;
}
.cfr-line {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: baseline;
    padding: 4px 0;
    font-size: 13px;
    color: var(--text);
}
.cfr-line.off { color: var(--text-4); }
.cfr-line-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.cfr-line-label > span:first-child { font-weight: 500; color: var(--heading); }
.cfr-line.off .cfr-line-label > span:first-child { color: var(--text-4); font-weight: 400; }
.cfr-line-label s {
    text-decoration: line-through;
    text-decoration-color: var(--text-4);
}
.cfr-line-meta {
    font-size: 11.5px;
    color: var(--text-3);
    font-weight: 400;
}
.cfr-line-price {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--heading);
    letter-spacing: .015em;
    white-space: nowrap;
}
.cfr-line.off .cfr-line-price { color: var(--text-4); font-weight: 400; }
.cfr-line-remove,
.cfr-line-restore {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: underline;
}
.cfr-line-remove { color: var(--text-3); }
.cfr-line-remove:hover { color: var(--danger-text); }
.cfr-line-restore { color: var(--blue); }
.cfr-line-restore:hover { color: var(--heading-2); }

.payer-tinmatch-line {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 14px 22px;
    background: var(--blue-bg);
    border-top: 1px solid var(--blue-soft);
    font-size: 13px;
}
.payer-tinmatch-line.off {
    background: var(--bg-muted);
    border-top-color: var(--hairline);
}
.ptm-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ptm-label strong {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--heading);
}
.payer-tinmatch-line.off .ptm-label strong { color: var(--text-3); font-weight: 500; }
.ptm-label s { text-decoration: line-through; text-decoration-color: var(--text-4); }
.ptm-meta {
    font-size: 11.5px;
    color: var(--text-3);
    line-height: 1.4;
}

.summary-card {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.summary-card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.02em;
    color: var(--heading);
    margin: 0 0 6px;
}
.summary-hint {
    background: var(--blue-bg);
    color: var(--heading-2);
    border: 1px solid var(--blue-soft);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12.5px;
    line-height: 1.45;
    margin-bottom: 6px;
}
.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: var(--text-2);
    padding: 4px 0;
}
.summary-row.total {
    font-size: 16px;
    color: var(--heading);
}
.summary-row.total strong { font-size: 18px; }
.summary-divider {
    height: 1px;
    background: var(--hairline);
    margin: 6px 0 4px;
}
.summary-checkout {
    width: 100%;
    margin-top: 12px;
    font-weight: 700;
}

.tm-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}
.tm-badge-sm {
    padding: 1px 8px;
    font-size: 11px;
    line-height: 1.5;
}
.tm-badge-lg {
    padding: 4px 12px;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: .005em;
}
.tm-badge.tm-match {
    background: var(--success-bg);
    color: var(--success-text);
    border-color: rgba(22, 163, 74, .25);
}
.tm-badge.tm-mismatch,
.tm-badge.tm-invalid {
    background: var(--danger-bg);
    color: var(--danger-text);
    border-color: rgba(239, 68, 68, .3);
}
.tm-badge.tm-foreign {
    background: var(--blue-bg);
    color: var(--heading-2);
    border-color: var(--blue-soft);
}
.tm-badge.tm-pending,
.tm-badge.tm-unchecked {
    background: var(--bg-muted);
    color: var(--text-3);
    border-color: var(--hairline);
}
.tm-badge.tm-na {
    background: transparent;
    color: var(--text-4);
    border-color: var(--hairline);
}

.tm-section {
    margin-bottom: 1.5rem;
}
.tm-section .card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tm-section-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--hairline-2);
}
.tm-section-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.tm-section-row-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.tm-section-row-meta .tm-row-title {
    font-weight: 600;
    color: var(--heading);
    font-size: 14px;
}
.tm-section-row-meta .tm-row-detail {
    font-size: 12.5px;
    color: var(--text-3);
    line-height: 1.4;
}
.tm-section-row-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.tm-blocked-callout {
    background: var(--danger-bg);
    border: 1px solid rgba(239, 68, 68, .25);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 4px;
}
.tm-blocked-callout strong { color: var(--danger-text); }
.tm-blocked-callout .tm-blocked-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.summary-note {
    margin: 4px 0 0;
    font-size: 11.5px;
    color: var(--text-4);
    text-align: center;
}

.addon-disclosure {
    border-left: 3px solid var(--hairline-2);
    padding: 12px 16px;
    margin: 12px 0 16px;
    background: var(--bg-2);
    border-radius: 0 10px 10px 0;
    font-style: italic;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text);
}
.form-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
}
.form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--blue);
}

.blazor-error-boundary {
    background: var(--danger-bg);
    color: var(--danger-text);
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, .3);
}
.blazor-error-boundary::after {
    content: "An error has occurred.";
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.55rem;
}

.usps-verify { margin-top: 2px; }
.usps-result {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid var(--hairline);
    background: var(--bg-2);
}
.usps-result.is-ok { background: var(--success-bg); border-color: var(--success); color: var(--success-text); }
.usps-result.is-suggest { background: var(--blue-bg); border-color: var(--blue); }
.usps-result.is-warn { background: var(--danger-bg); border-color: var(--danger); color: var(--danger-text); }
.usps-result.is-muted { background: var(--bg-2); color: var(--text-2); }
.usps-line { margin: 0; }
.usps-line + .usps-line { margin-top: 4px; }
.usps-std {
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--hairline);
    font-weight: 600;
    color: var(--text);
    line-height: 1.45;
}
.usps-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.usps-flag { margin-top: 6px; color: var(--text-2); }
.usps-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--blue);
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}
.usps-link:hover { color: var(--blue-dk); }

.av-badge {
    display: inline-flex;
    align-items: center;
    flex: none;
    align-self: flex-start;
    width: fit-content;
    gap: 4px;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
    border: 1px solid transparent;
}
.av-badge-sm { font-size: 11.5px; padding: 3px 8px; }
.av-badge-lg { font-size: 13px; padding: 6px 12px; }
.av-verified      { background: var(--success-bg); color: var(--success-text); border-color: var(--success); }
.av-corrected     { background: var(--success-bg); color: var(--success-text); border-color: var(--success); }

.av-review        { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning); }
.av-undeliverable { background: var(--danger-bg);  color: var(--danger-text);  border-color: var(--danger); }
.av-unchecked     { background: var(--bg-2);       color: var(--text-3);       border-color: var(--hairline); }

.app-footer {
    border-top: 1px solid var(--hairline, #e5e7eb);
    margin-top: 28px;
    padding: 16px 0 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: center;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--text-2, #6b7280);
}
.app-footer__disc { max-width: 640px; }
.app-footer__links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.app-footer__links a { color: var(--text-2, #6b7280); text-decoration: none; }
.app-footer__links a:hover { color: var(--blue, #0385FF); text-decoration: underline; }

.modal-backdrop.usps-modal { z-index: 1080; }
.addr-block { font-style: normal; line-height: 1.5; }
/* Address confirm modal: side-by-side entered vs recommended, click to choose. */
.addr-lede { margin: 0 0 14px; color: var(--text-2); }
.addr-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.addr-col {
    text-align: left; background: var(--card); border: 1.5px solid var(--hairline-2);
    border-radius: 12px; padding: 16px; cursor: pointer; font: inherit; color: inherit;
}
.addr-col:hover { border-color: var(--blue); }
.addr-col.selected { border-color: var(--blue); background: var(--blue-bg); box-shadow: 0 0 0 3px rgba(3,133,255,.12); }
.addr-col-t { display: block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 8px; }
.addr-country { font-size: 12px; color: var(--text-3); letter-spacing: .04em; }
@media (max-width: 560px) { .addr-cmp { grid-template-columns: 1fr; } }

.addr-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid var(--hairline);
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.addr-option:hover { border-color: var(--blue); }
.addr-option.selected { border-color: var(--blue); background: var(--blue-bg); }
.addr-option input[type="radio"] { margin-top: 3px; flex: 0 0 auto; }
.addr-option-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-3);
    margin-bottom: 4px;
}
.addr-option-tag.ok { color: var(--success-text); }

.qbo-page .card,
.qbo-page .card-header,
.qbo-page .card-footer { background-color: var(--surface); color: var(--text); border-color: var(--hairline); }
.qbo-page .card-header.bg-white,
.qbo-page .bg-white { background-color: var(--surface) !important; }
.qbo-page .alert-light { background-color: var(--bg-muted); color: var(--text-2); border-color: var(--hairline); }
.qbo-page .table { --bs-table-color: var(--text); --bs-table-bg: transparent; --bs-table-border-color: var(--hairline); color: var(--text); }
.qbo-page .table > :not(caption) > * > * { background-color: transparent; color: var(--text); border-color: var(--hairline); }

:root[data-theme="dark"] .qbo-page .alert-info { background-color: var(--blue-bg); color: var(--text); border-color: var(--hairline-2); }
:root[data-theme="dark"] .qbo-page .alert-success { background-color: var(--success-bg); color: var(--success-text); border-color: rgba(34,197,94,.3); }
:root[data-theme="dark"] .qbo-page .alert-warning { background-color: var(--warning-bg); color: var(--warning-text); border-color: rgba(251,191,36,.3); }
:root[data-theme="dark"] .qbo-page .alert-danger { background-color: var(--danger-bg); color: var(--danger-text); border-color: rgba(239,68,68,.3); }
:root[data-theme="dark"] .qbo-page .text-muted { color: var(--text-2) !important; }
:root[data-theme="dark"] .qbo-page .border { border-color: var(--hairline) !important; }
:root[data-theme="dark"] .qbo-page .badge.text-bg-light { background-color: var(--slate-bg) !important; color: var(--slate-text) !important; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .qbo-page .alert-info { background-color: var(--blue-bg); color: var(--text); border-color: var(--hairline-2); }
    :root:not([data-theme="light"]) .qbo-page .alert-success { background-color: var(--success-bg); color: var(--success-text); border-color: rgba(34,197,94,.3); }
    :root:not([data-theme="light"]) .qbo-page .alert-warning { background-color: var(--warning-bg); color: var(--warning-text); border-color: rgba(251,191,36,.3); }
    :root:not([data-theme="light"]) .qbo-page .alert-danger { background-color: var(--danger-bg); color: var(--danger-text); border-color: rgba(239,68,68,.3); }
    :root:not([data-theme="light"]) .qbo-page .text-muted { color: var(--text-2) !important; }
    :root:not([data-theme="light"]) .qbo-page .border { border-color: var(--hairline) !important; }
    :root:not([data-theme="light"]) .qbo-page .badge.text-bg-light { background-color: var(--slate-bg) !important; color: var(--slate-text) !important; }
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── "View as payer" scope switcher (NavMenu, under the brand) ─────────────────────────── */
.scope-switch { margin: 10px 14px 2px; }
.scope-switch summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); }
.scope-switch summary::-webkit-details-marker { display: none; }
.scope-switch summary:hover { border-color: var(--blue-line); }
.scope-co { min-width: 0; display: flex; flex-direction: column; }
.scope-name { font-weight: 700; font-size: 12.5px; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope-year { font-size: 10px; color: var(--text-3); }
.scope-chev { margin-left: auto; font-size: 10px; color: var(--text-3); transition: transform .15s; }
.scope-switch[open] .scope-chev { transform: rotate(180deg); }
.scope-menu { margin-top: 6px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface);
    box-shadow: var(--shadow-card); overflow: hidden; }
.scope-menu a { display: block; padding: 7px 12px; font-size: 12.5px; color: var(--text-2); text-decoration: none; }
.scope-menu a:hover { background: var(--blue-bg); color: var(--heading); }
.scope-menu a.cur { color: var(--blue-dk); font-weight: 700; background: var(--blue-soft); }
.scope-menu a.firmlink { border-top: 1px solid var(--hairline-2); font-weight: 600; color: var(--blue-ink); }
.scope-find { padding: 8px 10px 6px; border-bottom: 1px solid var(--hairline-2); }
.scope-q { width: 100%; padding: 6px 9px; font: inherit; font-size: 12.5px; color: var(--heading);
    border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); }
.scope-q:focus { outline: none; border-color: var(--blue-line); }
.scope-none { padding: 9px 12px; font-size: 12.5px; color: var(--text-3); }
.scope-hid { display: none !important; }
.scope-years { display: flex; gap: 4px; padding: 8px 10px; border-top: 1px solid var(--hairline-2); }
.scope-years .yr { flex: 1; text-align: center; padding: 4px 0; border-radius: 8px; font-size: 12px;
    font-weight: 600; color: var(--text-3); text-decoration: none; }
.scope-years .yr:hover { background: var(--blue-bg); }
.scope-years .yr.cur { background: var(--blue); color: #fff; }

/* Top-level sidebar section label (mock's "Operate" eyebrow) */
.sidebar-sechead { padding: 10px 16px 4px; font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .14em; color: var(--text-3); }

/* One-click exit from "View as payer" back to the firm console */
.scope-exit { display: block; margin: 6px 14px 0; padding: 6px 12px; font-size: 12px; font-weight: 600;
    color: var(--blue-ink); text-decoration: none; border: 1px dashed var(--blue-line); border-radius: 10px; text-align: center; }
.scope-exit:hover { background: var(--blue-bg); color: var(--blue-dk); }

.rtt-payers { display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:6px; }
.rtt-payer { font-size:12px; color:var(--text-2); background:var(--surface); border:1px solid var(--hairline);
    border-radius:999px; padding:2px 9px; }
.rtt-payer strong { font-variant-numeric:tabular-nums; color:var(--heading); margin-left:5px; }

.cart-span-note { margin:0 0 16px; padding:10px 14px; border:1px solid var(--warning); background:var(--warning-bg);
    color:var(--warning-text); border-radius:12px; font-size:.875rem; }

/* Ack-finding deep link target (box-flag.js): invisible anchor + pulse on the flagged field. */
.box-anchor { display: none; }
.box-flagged { outline: 2px solid var(--warning, #F59E0B); outline-offset: 4px; border-radius: 10px;
    animation: boxFlagPulse 1.6s ease-in-out 3; }
@keyframes boxFlagPulse {
    0%, 100% { outline-color: var(--warning, #F59E0B); }
    50% { outline-color: transparent; }
}
@media (prefers-reduced-motion: reduce) { .box-flagged { animation: none; } }
.ack-finding { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.ack-finding .ack-fix { margin-left: auto; white-space: nowrap; }