/* /Components/Account/Pages/Login.razor.rz.scp.css */
/* Reassurance sits directly under the form, before the recovery links: read as a property
   of signing in rather than as one more link in the list. Tinted rather than bordered so it
   reassures without demanding attention like an alert would. */
.login__assurance[b-fdvpfedij0] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-muted);
    background-color: var(--color-surface-sunken);
    border-radius: var(--radius-md);
}

.login__assurance-icon[b-fdvpfedij0] {
    display: inline-flex;
    flex: 0 0 auto;
    margin-top: 0.125rem;
    color: var(--color-primary);
}

/* Recovery links share one line and one treatment; wrap rather than overflow on a phone. */
.login__links[b-fdvpfedij0] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
}

.login__sep[b-fdvpfedij0] { color: var(--color-border-strong); }

.login__divider[b-fdvpfedij0] {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
/* /Components/Account/Pages/LoginWith2fa.razor.rz.scp.css */
/* Second sign-in step. Mirrors Login.razor.css's footer treatment so the two consecutive pages of one
   journey are visibly the same journey — the styles cannot simply be shared, because Blazor's CSS
   isolation scopes .login__* to Login.razor alone. */

.tfa__links[b-ztl645kpis] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
}

.tfa__divider[b-ztl645kpis] {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

/* "Don't ask again on this device" — a real label wrapping its control, so the whole row is a hit
   target and screen readers announce the two together. The scaffolded markup nested the checkbox in a
   <label for="remember-machine"> pointing at an id that did not exist on the page. */
.tfa__check[b-ztl645kpis] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    cursor: pointer;
}

.tfa__check input[type="checkbox"][b-ztl645kpis] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.tfa__check input[type="checkbox"]:focus-visible[b-ztl645kpis] {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}
/* /Components/Account/Pages/LoginWithRecoveryCode.razor.rz.scp.css */
/* Recovery-code step. Same footer rhythm as Login.razor.css and LoginWith2fa.razor.css; duplicated
   rather than shared because CSS isolation scopes each component's classes to that component. */

.rc__divider[b-sm2omel66k] {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
/* /Components/Account/Pages/Manage/EnableAuthenticator.razor.rz.scp.css */
/* Three-step setup. Numbered because the order genuinely matters — the code in step 3 only exists once
   step 2 is done — which the scaffold's <ol class="list"> asserted but did not style. */

.auth-setup[b-8sh6dokkjm] {
    margin: 0;
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.auth-setup > li[b-8sh6dokkjm]::marker {
    color: var(--color-primary);
    font-weight: 700;
}

.auth-setup__step[b-8sh6dokkjm] {
    margin: 0 0 var(--space-2);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text);
}

/* The setup key. Large, spaced and selectable in one gesture, because it is transcribed by hand onto a
   phone more often than it is copied. */
.auth-setup__key[b-8sh6dokkjm] {
    margin: var(--space-3) 0;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
}

.auth-setup__key code[b-8sh6dokkjm] {
    font-size: var(--text-lg);
    letter-spacing: 0.14em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    user-select: all;
    overflow-wrap: anywhere;
}

.auth-setup__deeplink[b-8sh6dokkjm] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.auth-setup__hint[b-8sh6dokkjm] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
/* /Components/Account/Shared/ManageNavMenu.razor.rz.scp.css */
/* Settings sub-navigation. A light rail on the page surface — not the dark
   treatment used by the main sidebar, so it reads as within-page navigation rather than a
   second app-level menu. */

.settings-nav[b-3yeagbc6x6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

/* Rows are <NavLink>, which renders its own <a> under NavLink's CSS scope — so this file's
   [b-…] attribute never reaches it and un-prefixed rules match nothing. ::deep resolves
   against .settings-nav, which does carry the attribute. Same defect as NavMenu's .nav-item. */
.settings-nav[b-3yeagbc6x6]  .settings-nav__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 550;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.settings-nav[b-3yeagbc6x6]  .settings-nav__item:hover {
    background: var(--color-hover);
    color: var(--color-text);
}

.settings-nav[b-3yeagbc6x6]  .settings-nav__item:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
}

/* NavLink stamps .active on the current route. The left bar carries the state in addition
   to colour, so it is not conveyed by colour alone. */
.settings-nav[b-3yeagbc6x6]  .settings-nav__item.active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.settings-nav__icon[b-3yeagbc6x6] {
    display: grid;
    place-items: center;
    width: 1.25rem;
    flex: none;
    font-size: 1.15rem;   /* sizes the 1em SVG icon */
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .settings-nav[b-3yeagbc6x6]  .settings-nav__item { transition: none; }
}
/* /Components/Account/Shared/ShowRecoveryCodes.razor.rz.scp.css */
/* Recovery codes. Presented as a grid of discrete, selectable tokens rather than the scaffold's column
   of <code> lines: these get copied into a password manager or read aloud off a printout, and both are
   easier when each code is visibly a separate item on a stable grid. */

.recovery-codes[b-sl8tkiyq28] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--space-2);
    margin: var(--space-4) 0;
    padding: var(--space-4);
    list-style: none;
    background-color: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.recovery-codes code[b-sl8tkiyq28] {
    display: block;
    padding: var(--space-2);
    text-align: center;
    /* Tabular figures and generous tracking so 0/O and 1/l can be told apart when transcribed by hand. */
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    font-size: var(--text-sm);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    /* Selecting one code must not drag in its neighbours. */
    user-select: all;
}
/* /Components/Customer/PolicyStandingNotice.razor.rz.scp.css */
/* The alert body is prose; the call to action needs to read as a separate, clickable step rather
   than as another sentence in it. */
.standing__link[b-3yq1rdyhwc] {
    margin: var(--space-3) 0 0;
}

.standing__link a[b-3yq1rdyhwc] {
    font-weight: 600;
    color: inherit;
}
/* /Components/Customer/PolicyTabs.razor.rz.scp.css */
.ptabs[b-q6zrjx71ak] {
    display: flex;
    gap: var(--space-5, 1.25rem);
    border-bottom: 1px solid var(--border, #e3e9ec);
    margin-block-end: var(--space-6, 1.5rem);
    overflow-x: auto;
}

.ptabs__tab[b-q6zrjx71ak] {
    flex: 0 0 auto;
    padding: 0.6rem 0.15rem 0.75rem;
    color: var(--text-muted, #6e828c);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;

    /* The indicator is a transparent border on every tab, not only the active one, so switching
       tabs does not change each tab's height and shift the page. */
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.ptabs__tab:hover[b-q6zrjx71ak] {
    color: var(--bloom-ink, #0e2028);
}

.ptabs__tab--on[b-q6zrjx71ak] {
    color: var(--bloom-ink, #0e2028);
    border-bottom-color: var(--brand, #2c4959);
}

.ptabs__tab:focus-visible[b-q6zrjx71ak] {
    outline: 2px solid var(--brand, #2c4959);
    outline-offset: 2px;
    border-radius: 2px;
}
/* /Components/Fica/DocumentPreview.razor.rz.scp.css */
/* Reusable in-browser preview: a toolbar over a neutral preview stage. */

.dp[b-sc9ugsh2la] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.dp__toolbar[b-sc9ugsh2la] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.dp__group[b-sc9ugsh2la] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px;
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.dp__spacer[b-sc9ugsh2la] { flex: 1 1 auto; }

.dp__tool[b-sc9ugsh2la] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 1.05rem;
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.dp__tool:hover:not(:disabled)[b-sc9ugsh2la] { background: var(--color-surface); color: var(--color-text); }
.dp__tool:focus-visible[b-sc9ugsh2la] { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.dp__tool:disabled[b-sc9ugsh2la] { opacity: .4; cursor: not-allowed; }

.dp__zoom[b-sc9ugsh2la] {
    min-width: 3rem;
    padding-inline: var(--space-2);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--color-text-muted);
}

.dp__stage[b-sc9ugsh2la] {
    position: relative;
    display: grid;
    place-items: center;
    height: clamp(24rem, 64vh, 52rem);
    overflow: auto;
    background: var(--color-surface-sunken);
}

.dp__stage:focus-visible[b-sc9ugsh2la] { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.dp__stage--image[b-sc9ugsh2la] { background: #1f2430; }

.dp__img[b-sc9ugsh2la] {
    display: block;
    margin: auto;
    transform-origin: center center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
    background: #fff;
}

.dp__frame[b-sc9ugsh2la] {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.dp__placeholder[b-sc9ugsh2la] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6);
    max-width: 24rem;
    text-align: center;
    color: var(--color-text-muted);
}

.dp__placeholder p[b-sc9ugsh2la] { margin: 0; }
.dp__placeholder-icon[b-sc9ugsh2la] { font-size: 1.75rem; color: var(--color-text-subtle); }

.dp__spinner[b-sc9ugsh2la] {
    width: 1.75rem;
    height: 1.75rem;
    border: 2px solid var(--color-border-strong);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: dp-spin-b-sc9ugsh2la .7s linear infinite;
}

@keyframes dp-spin-b-sc9ugsh2la { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dp__spinner[b-sc9ugsh2la] { animation-duration: 2s; } }
/* /Components/Fica/DocumentStatusExplainer.razor.rz.scp.css */
/* One quiet line under a document's state. Reads as supporting detail, not as an alert. */
.docstate[b-dyxu4frnlj] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-muted);
}

.docstate__text[b-dyxu4frnlj] { min-width: 0; }

/* The timeframe is metadata, so it is set apart from the sentence rather than reading as part of
   it — small caps, tabular so a list of documents keeps its right edge. */
.docstate__time[b-dyxu4frnlj] {
    flex: 0 0 auto;
    padding: 0.125rem var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
    background-color: var(--color-surface-sunken);
    border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
}
/* /Components/Fica/FileDropInput.razor.rz.scp.css */
.drop[b-kayaxpytjb] {
    position: relative;
    border: 1.5px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-sunken);
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

.drop:hover[b-kayaxpytjb] {
    border-color: var(--color-primary);
    background-color: var(--color-primary-soft);
}

.drop--filled[b-kayaxpytjb] {
    border-style: solid;
    border-color: var(--color-success);
    background-color: var(--color-success-bg);
}

/* The real input covers the zone so native drag-and-drop works without JS. */
.drop[b-kayaxpytjb]  .drop__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Keyboard focus lands on the hidden input — surface it on the zone. */
.drop:focus-within[b-kayaxpytjb] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.drop__inner[b-kayaxpytjb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-6) var(--space-4);
    pointer-events: none;
}

.drop__icon[b-kayaxpytjb] {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    font-size: 1.125rem;
    line-height: 1;
}

.drop--filled .drop__icon[b-kayaxpytjb] { color: var(--color-success); border-color: #bbf7d0; }

.drop__name[b-kayaxpytjb] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 550;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.drop__meta[b-kayaxpytjb] {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
/* /Components/Fica/VerificationAssistant.razor.rz.scp.css */
/* Review assistant. The one panel a reviewer should be able to decide from, so it is the only thing
   in the rail with any visual weight — everything else on the page recedes beneath it. */

.va[b-9ptjd7jz62] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* ── Headline ──────────────────────────────────────────────────────────────────
   Tinted by outcome, because this is the one place in the product where a glance
   should answer "do I need to do anything". The words say the same thing, so the
   tint is reinforcement rather than the signal. */

.va__head[b-9ptjd7jz62] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.va__head--ok[b-9ptjd7jz62]        { background-color: var(--color-success-bg); }
.va__head--attention[b-9ptjd7jz62] { background-color: var(--color-warning-bg); }
.va__head--alert[b-9ptjd7jz62]     { background-color: var(--color-danger-bg); }

.va__icon[b-9ptjd7jz62] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    font-size: 1.125rem;
    line-height: 1;
}

.va__head--ok .va__icon[b-9ptjd7jz62]        { color: var(--color-success); }
.va__head--attention .va__icon[b-9ptjd7jz62] { color: var(--color-warning); }
.va__head--alert .va__icon[b-9ptjd7jz62]     { color: var(--color-danger); }

.va__headline[b-9ptjd7jz62] { min-width: 0; }

.va__title[b-9ptjd7jz62] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: normal;
    color: var(--color-text);
}

.va__explain[b-9ptjd7jz62] {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* ── The job ───────────────────────────────────────────────────────────────────
   Sits directly under the outcome, above the evidence. A reviewer's first question is
   not "what did the engine find" but "what am I being asked to do", and this answers it
   in one chip and one sentence. */

.va__task[b-9ptjd7jz62] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.va__task-text[b-9ptjd7jz62] {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text);
}

/* A note no check covers — currently only "this looks like a different document". */
.va__note[b-9ptjd7jz62] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-warning-bg);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text);
}

/* ── Grouped evidence ──────────────────────────────────────────────────────────
   Identity and Address are the reviewer's own categories. The heading carries the
   count so a group can be dismissed without reading its rows. */

.va__group[b-9ptjd7jz62] { border-bottom: 1px solid var(--color-border); }

.va__group-title[b-9ptjd7jz62] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
    background-color: var(--color-surface-sunken);
}

.va__group-count[b-9ptjd7jz62] {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-warning);
}

.va__group-ok[b-9ptjd7jz62] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-success);
}

/* A group where everything agreed. Collapsed by default so it takes one line instead of
   five — the point of the panel is the exception, and a wall of ticks buries it. */
.va__collapsed > summary[b-9ptjd7jz62] {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    cursor: pointer;
}

.va__collapsed > summary:focus-visible[b-9ptjd7jz62] {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
}

.va__collapsed > summary:hover[b-9ptjd7jz62] { color: var(--color-text); }

/* ── Values read, with provenance ──────────────────────────────────────────────
   A field, its value, and where it came from. Exact values (barcode, digital text) recede;
   recognised ones carry a left rule so a reviewer can find what needs checking by scanning the
   edge rather than reading every row. */

.va__values-list[b-9ptjd7jz62] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.va__value[b-9ptjd7jz62] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    /* Left rule by default: a recognised value is the one that wants attention, so the unmarked
       state is the exception rather than the rule. */
    border-left: 3px solid var(--color-warning);
}

.va__value:last-child[b-9ptjd7jz62] { border-bottom: 0; }

/* Exact: no rule, quieter. Nothing to check. */
.va__value--exact[b-9ptjd7jz62] { border-left-color: transparent; }

.va__value-field[b-9ptjd7jz62] {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.va__value-origin[b-9ptjd7jz62] {
    grid-row: 1;
    grid-column: 2;
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    white-space: nowrap;
}

.va__value--exact .va__value-origin[b-9ptjd7jz62] { color: var(--color-success); }

.va__value-band[b-9ptjd7jz62] { color: var(--color-text-subtle); }

.va__value-text[b-9ptjd7jz62] {
    grid-column: 1 / -1;
    font-size: 0.9375rem;
    font-weight: 550;
    color: var(--color-text);
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.va__value-fix[b-9ptjd7jz62] {
    grid-column: 1 / -1;
    margin-top: 0.125rem;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-warning);
}

/* ── Recommendation / certainty ───────────────────────────────────────────────── */

.va__meta[b-9ptjd7jz62] {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

@media (min-width: 30em) {
    .va__meta[b-9ptjd7jz62] { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}

.va__meta dt[b-9ptjd7jz62] {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.va__meta dd[b-9ptjd7jz62] {
    margin: var(--space-1) 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
}

.va__override[b-9ptjd7jz62] {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-warning);
}

/* ── Checks ───────────────────────────────────────────────────────────────────
   A list separated by hairlines, not a stack of cards. The rows that need attention
   carry a left rule so they are findable by scanning the edge rather than reading. */

.va__checks[b-9ptjd7jz62] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.va__check[b-9ptjd7jz62] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
}

.va__check:first-child[b-9ptjd7jz62] { border-top: 0; }

.va__check--failed[b-9ptjd7jz62]  { box-shadow: inset 3px 0 0 var(--color-danger); }
.va__check--unknown[b-9ptjd7jz62] { box-shadow: inset 3px 0 0 var(--color-warning); }

.va__check-mark[b-9ptjd7jz62] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.125rem;
    margin-top: 0.125rem;
    font-size: 1rem;
    line-height: 1;
}

.va__check--passed  .va__check-mark[b-9ptjd7jz62] { color: var(--color-success); }
.va__check--failed  .va__check-mark[b-9ptjd7jz62] { color: var(--color-danger); }
.va__check--unknown .va__check-mark[b-9ptjd7jz62] { color: var(--color-warning); }

.va__check-body[b-9ptjd7jz62] { min-width: 0; flex: 1; }

.va__check-label[b-9ptjd7jz62] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
}

.va__check-message[b-9ptjd7jz62] {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* ── Expected vs document ─────────────────────────────────────────────────────
   Two columns in a fixed order, on a recessed surface so the pair reads as one
   comparison rather than as two more facts. Monospaced figures keep digits aligned
   between the rows, which is what lets a mismatched ID number be spotted rather
   than read. */

.va__values[b-9ptjd7jz62] {
    display: grid;
    gap: 1px;
    margin: var(--space-3) 0 0;
    background-color: var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

@media (min-width: 26em) {
    .va__values[b-9ptjd7jz62] { grid-template-columns: 1fr 1fr; }

    /* One value, one column. The grid draws its own divider by letting the container's border colour
       show through a 1px gap, so a second column with nothing in it is not empty space — it renders as
       a grey rectangle beside the populated cell, which reads as a rendering fault rather than as
       "there is no document value". Stage 14.1 made this reachable two ways: a name check that could
       read no surname has only our record, and a sex check that could not be tied to the customer has
       only the document's value. */
    .va__values:has(> div:only-child)[b-9ptjd7jz62] { grid-template-columns: 1fr; }
}

.va__values > div[b-9ptjd7jz62] {
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-surface-sunken);
}

.va__values dt[b-9ptjd7jz62] {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.va__values dd[b-9ptjd7jz62] {
    margin: 0.125rem 0 0;
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--color-text);
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.va__when[b-9ptjd7jz62] {
    margin: 0;
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* Signed-out canvas: calm gradient, centred column, brand on top. */

.auth[b-bi0u44l8ex] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background:
        radial-gradient(60rem 32rem at 85% -10%, rgb(73 136 167 / 7%), transparent 60%),
        radial-gradient(48rem 28rem at -10% 100%, rgb(58 113 137 / 6%), transparent 55%),
        var(--color-bg);
}

.auth__header[b-bi0u44l8ex] {
    display: flex;
    justify-content: center;
    padding: var(--space-6) var(--space-4) var(--space-4);
}

.auth__brand[b-bi0u44l8ex] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    border-radius: var(--radius-md);
}

.auth__brand:focus-visible[b-bi0u44l8ex] { outline: 2px solid var(--color-focus); outline-offset: 4px; }

.auth__rule[b-bi0u44l8ex] {
    width: 1px;
    height: 1.625rem;
    background: var(--color-border-strong);
}

.auth__sub[b-bi0u44l8ex] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-text-subtle);
}

.auth__main[b-bi0u44l8ex] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-5) var(--space-4) var(--space-7);
    outline: none;
}

.auth__footer[b-bi0u44l8ex] {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
}

.auth__footer a[b-bi0u44l8ex] { color: var(--color-text-muted); }

#blazor-error-ui[b-bi0u44l8ex] {
    color-scheme: light only;
    display: none;
    position: fixed;
    left: 50%;
    bottom: var(--space-5);
    transform: translateX(-50%);
    z-index: 1000;
    width: min(560px, calc(100% - 2rem));
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-surface);
    border: 1px solid #fecaca;
    border-left: 3px solid var(--color-danger);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    color: var(--color-text);
}

#blazor-error-ui .reload[b-bi0u44l8ex] { margin-left: var(--space-2); font-weight: 600; }

#blazor-error-ui .dismiss[b-bi0u44l8ex] {
    cursor: pointer;
    position: absolute;
    right: var(--space-3);
    top: var(--space-2);
    color: var(--color-text-subtle);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* App shell with a top navigation bar, matched to the bloom.insure header.

   Replaced a dark 260px sidebar rail. Measured from the live site and carried over: white bar, a
   centred content rail, links at #2C4959, a rounded action on the right, hamburger at 980px.

   One structural gain beyond the styling: the header, the page content and the footer now share
   --content-max, so the logo, every page heading and the footer's first column sit on ONE left edge
   down the whole page. With a sidebar that was impossible — content began 260px in while the footer
   began at 0. */

.shell[b-y5j9c8cs72] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--color-bg);
}

/* ── Header ──────────────────────────────────────────────────────────────────
   Sticky, unlike the site's static bar: this is an application whose pages scroll a long way (the FICA
   queue, the audit log), and losing every route out of the page at the fold is a different cost from
   losing it on a marketing page. */
.shell__header[b-y5j9c8cs72] {
    position: sticky;
    top: 0;
    z-index: 30;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.shell__header-inner[b-y5j9c8cs72] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    min-height: 4.75rem;   /* 76px — the site's link block height */
    padding: 0 var(--space-4);
}

/* ── Brand ─────────────────────────────────────────────────────────────────── */
.shell__brand[b-y5j9c8cs72] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    flex: 0 0 auto;
    text-decoration: none;
    border-radius: var(--radius-md);
}

.shell__brand:focus-visible[b-y5j9c8cs72] { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* ── Nav ─────────────────────────────────────────────────────────────────────
   The 32px gap is the site's. flex:1 lets the row take the space between the brand and the actions,
   which is where the site puts its links. */
/* Links sit at the RIGHT of the bar, next to the actions, with the space falling between them and the
   logo. That is what bloom.insure does — its logo is at x=220 and its links do not begin until x=571 —
   and it keeps the whole interactive cluster in one place instead of splitting attention across the
   full width of a 1200px rail. */
.shell__nav[b-y5j9c8cs72] {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: var(--space-6);
    flex: 1;
    min-width: 0;
    align-self: stretch;
}

/* ── The links themselves ────────────────────────────────────────────────────
   EVERY rule targeting .nav-item goes through ::deep, and the rules live HERE rather than in a
   NavMenu.razor.css, for the same reason the old sidebar's stylesheet documented:

   NavLink is a COMPONENT. Blazor's CSS isolation stamps its scope attribute onto elements written in
   a .razor file, not onto the markup a child component renders — so a plain `.nav-item` rule compiles
   to `.nav-item[b-xyz]` and matches nothing at all. The first cut of this header hit exactly that and
   rendered the bar as bare underlined links.

   ::deep resolves against .shell__nav, which is written in MainLayout.razor and does carry the
   attribute, so it reaches the NavLink anchors underneath.

   Values measured from the live bloom.insure header: colour #2C4959, 16px, weight 500, ~32px apart
   (--space-6 above), no text-transform. The site gives its links tall vertical padding so the whole
   bar height is the hit target; align-items: stretch does the same here. */
.shell__nav[b-y5j9c8cs72]  .nav-item {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-1);
    color: #2c4959;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;

    /* Transparent by default so the active rule only changes a colour — a border that appeared on
       activation would shift every other link by 2px. */
    border-bottom: 2px solid transparent;
}

.shell__nav[b-y5j9c8cs72]  .nav-item:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.shell__nav[b-y5j9c8cs72]  .nav-item:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

/* Current page. The website has no active state and does not need one — a marketing visitor knows
   which link they just clicked. An application does: this is the only thing telling somebody which of
   seven areas they are in. Colour AND an underline, never colour alone, so it never depends on
   telling two teals apart. */
.shell__nav[b-y5j9c8cs72]  .nav-item.active {
    color: var(--color-primary);
    font-weight: 700;
    border-bottom-color: var(--color-primary);
}

/* ── Right-hand actions ──────────────────────────────────────────────────────
   The corner the site gives its rounded CTA. Signed in, that is the person's identity and the way
   out; signed out, it is Sign in. */
.shell__actions[b-y5j9c8cs72] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 0 0 auto;
}

.shell__user[b-y5j9c8cs72] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
    font-weight: 550;
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: var(--radius-full);
}

.shell__user:hover[b-y5j9c8cs72] { color: var(--color-text); background: var(--color-surface-sunken); }
.shell__user:focus-visible[b-y5j9c8cs72] { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.shell__avatar[b-y5j9c8cs72] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    background: linear-gradient(145deg, var(--bloom-teal-500), var(--bloom-teal-700));
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 600;
    box-shadow: var(--shadow-xs);
}

/* An email address is long and is not the point of the header. */
.shell__user-name[b-y5j9c8cs72] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14ch;
}


.shell__signout[b-y5j9c8cs72] { display: flex; }

/* A real submit button inside the POST form, dressed as a link — sign-out must never be a GET. */
.shell__signout-btn[b-y5j9c8cs72],
.shell__action-link[b-y5j9c8cs72] {
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 550;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.shell__signout-btn:hover[b-y5j9c8cs72],
.shell__action-link:hover[b-y5j9c8cs72] { color: var(--color-text); text-decoration: underline; }

.shell__signout-btn:focus-visible[b-y5j9c8cs72],
.shell__action-link:focus-visible[b-y5j9c8cs72] { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* The header CTA's pill shape is the shared .btn--pill modifier in BloomButton.razor.css, not a rule
   here — PublicLayout needs the identical treatment, and a scoped override could only reach one of
   them. */

/* ── Hamburger ───────────────────────────────────────────────────────────────
   A CSS-only disclosure: no JavaScript, so the menu still opens when the circuit has dropped — which
   is exactly the moment somebody needs to navigate away from a broken page. */
.nav-toggle[b-y5j9c8cs72] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.shell__burger[b-y5j9c8cs72] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-left: auto;
    cursor: pointer;
    border-radius: var(--radius-md);
    color: var(--color-text);
}

/* Three bars drawn from one element. */
.shell__burger-bars[b-y5j9c8cs72],
.shell__burger-bars[b-y5j9c8cs72]::before,
.shell__burger-bars[b-y5j9c8cs72]::after {
    display: block;
    width: 1.25rem;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.shell__burger-bars[b-y5j9c8cs72] { position: relative; }

.shell__burger-bars[b-y5j9c8cs72]::before,
.shell__burger-bars[b-y5j9c8cs72]::after {
    content: "";
    position: absolute;
    left: 0;
}

.shell__burger-bars[b-y5j9c8cs72]::before { top: -6px; }
.shell__burger-bars[b-y5j9c8cs72]::after { top: 6px; }

.nav-toggle:focus-visible + .shell__burger[b-y5j9c8cs72] { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ── Content ─────────────────────────────────────────────────────────────── */
.shell__content[b-y5j9c8cs72] {
    flex: 1;
    padding: var(--space-5) var(--space-4) var(--space-7);
    outline: none;
}

.shell__container[b-y5j9c8cs72] {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
}

/* ── Below the site's 980px breakpoint ───────────────────────────────────────
   Nav and actions drop into one stacked panel under the bar. They are hidden rather than removed, so
   the tab order stays in DOM order and nothing becomes unreachable. */
@media (max-width: 61.24em) {
    .shell__header-inner[b-y5j9c8cs72] { flex-wrap: wrap; gap: var(--space-3); }

    .shell__burger[b-y5j9c8cs72] { display: flex; }

    .shell__nav[b-y5j9c8cs72],
    .shell__actions[b-y5j9c8cs72] {
        display: none;
        width: 100%;
        flex: 1 0 100%;
    }

    .nav-toggle:checked ~ .shell__nav[b-y5j9c8cs72] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        /* Reset: the desktop rule pushes links along the main axis, which is VERTICAL once this is a
           column — without this the stacked menu would sit hard against the bottom of its panel. */
        justify-content: flex-start;
        gap: var(--space-1);
        padding-bottom: var(--space-3);
    }

    /* Stacked rows: the whole row becomes the hit target, and the bottom underline (which reads as an
       active *tab*) gives way to a left marker, which is what a vertical list wants. */
    .shell__nav[b-y5j9c8cs72]  .nav-item {
        width: 100%;
        padding: var(--space-3) var(--space-4);
        border-bottom: 0;
        border-left: 3px solid transparent;
        border-radius: var(--radius-sm);
    }

    .shell__nav[b-y5j9c8cs72]  .nav-item:hover { background: var(--color-primary-soft); }

    .shell__nav[b-y5j9c8cs72]  .nav-item.active {
        border-bottom-color: transparent;
        border-left-color: var(--color-primary);
        background: var(--color-primary-soft);
    }

    .nav-toggle:checked ~ .shell__actions[b-y5j9c8cs72] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3);
        padding-bottom: var(--space-4);
        border-top: 1px solid var(--color-border);
        padding-top: var(--space-4);
    }

    .shell__user-name[b-y5j9c8cs72] { max-width: 24ch; }
}

@media (min-width: 61.25em) {
    .shell__header-inner[b-y5j9c8cs72] { padding: 0 var(--space-6); }
    .shell__content[b-y5j9c8cs72] { padding: var(--space-6) var(--space-6) var(--space-8); }
}

/* Unhandled-error banner */
#blazor-error-ui[b-y5j9c8cs72] {
    color-scheme: light only;
    display: none;
    position: fixed;
    left: 50%;
    bottom: var(--space-5);
    transform: translateX(-50%);
    z-index: 1000;
    width: min(560px, calc(100% - 2rem));
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-surface);
    border: 1px solid #fecaca;
    border-left: 3px solid var(--color-danger);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    color: var(--color-text);
}

#blazor-error-ui .reload[b-y5j9c8cs72] { margin-left: var(--space-2); font-weight: 600; }

#blazor-error-ui .dismiss[b-y5j9c8cs72] {
    cursor: pointer;
    position: absolute;
    right: var(--space-3);
    top: var(--space-2);
    color: var(--color-text-subtle);
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
/* Public chrome: a wide, calm surface with a real header and a legal footer.
   Shares the auth canvas gradient so the landing page and the sign-in page read as
   one product rather than two. */

.pub[b-by1t2mh7r0] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background:
        radial-gradient(60rem 32rem at 85% -10%, rgb(73 136 167 / 7%), transparent 60%),
        radial-gradient(48rem 28rem at -10% 100%, rgb(58 113 137 / 6%), transparent 55%),
        var(--color-bg);
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.pub__header[b-by1t2mh7r0] {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgb(255 255 255 / 82%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
}

.pub__header-inner[b-by1t2mh7r0],
.pub__footer-inner[b-by1t2mh7r0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-3) var(--space-5);
}

.pub__brand[b-by1t2mh7r0] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    border-radius: var(--radius-md);
}

.pub__brand:focus-visible[b-by1t2mh7r0] { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* Hairline between the logo and the product descriptor — enough to separate the two
   without competing with the mark. */
.pub__brand-rule[b-by1t2mh7r0] {
    width: 1px;
    height: 1.5rem;
    background: var(--color-border-strong);
}

.pub__brand-sub[b-by1t2mh7r0] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-text-subtle);
}

.pub__nav[b-by1t2mh7r0] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.pub__nav-link[b-by1t2mh7r0] {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 550;
    padding: var(--space-2) var(--space-1);
    border-radius: var(--radius-sm);
}

.pub__nav-link:hover[b-by1t2mh7r0] { color: var(--color-text); text-decoration: underline; }
.pub__nav-link:focus-visible[b-by1t2mh7r0] { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Sign-out. Reads as a header text link but is a real submit button inside a POST form, because
   signing out must not be reachable by a GET a browser or link-scanner can prefetch. It carries the
   .pub__nav-link treatment by copy rather than by class so that the mobile rule below — which folds
   text links away — cannot take sign-out with it. */
.pub__signout[b-by1t2mh7r0] { display: flex; }

.pub__signout-btn[b-by1t2mh7r0] {
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 550;
    padding: var(--space-2) var(--space-1);
    border-radius: var(--radius-sm);
}

.pub__signout-btn:hover[b-by1t2mh7r0] { color: var(--color-text); text-decoration: underline; }
.pub__signout-btn:focus-visible[b-by1t2mh7r0] { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Below 640px the two buttons alone fill the row; the text link folds away rather
   than wrapping the header onto a second line. */
@media (max-width: 39.99em) {
    .pub__header-inner[b-by1t2mh7r0] { padding-inline: var(--space-4); }
    .pub__nav-link[b-by1t2mh7r0] { display: none; }
    .pub__brand-sub[b-by1t2mh7r0],
    .pub__brand-rule[b-by1t2mh7r0] { display: none; }
}

/* ── Main ───────────────────────────────────────────────────────────────── */

.pub__main[b-by1t2mh7r0] {
    flex: 1;
    outline: none;
}

/* Footer styles removed: the footer is now the shared SiteFooter component, which carries its own
   scoped CSS. Keeping a .pub__footer rule here would have styled nothing while looking authoritative. */

#blazor-error-ui[b-by1t2mh7r0] {
    color-scheme: light only;
    display: none;
    position: fixed;
    left: 50%;
    bottom: var(--space-5);
    transform: translateX(-50%);
    z-index: 1000;
    width: min(560px, calc(100% - 2rem));
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-surface);
    border: 1px solid #fecaca;
    border-left: 3px solid var(--color-danger);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    color: var(--color-text);
}

#blazor-error-ui .reload[b-by1t2mh7r0] { margin-left: var(--space-2); font-weight: 600; }

#blazor-error-ui .dismiss[b-by1t2mh7r0] {
    cursor: pointer;
    position: absolute;
    right: var(--space-3);
    top: var(--space-2);
    color: var(--color-text-subtle);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-a170lh3qdr],
.components-reconnect-repeated-attempt-visible[b-a170lh3qdr],
.components-reconnect-failed-visible[b-a170lh3qdr],
.components-pause-visible[b-a170lh3qdr],
.components-resume-failed-visible[b-a170lh3qdr],
.components-rejoining-animation[b-a170lh3qdr] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-a170lh3qdr],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-a170lh3qdr],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-a170lh3qdr],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-a170lh3qdr],
#components-reconnect-modal.components-reconnect-retrying[b-a170lh3qdr],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-a170lh3qdr],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-a170lh3qdr],
#components-reconnect-modal.components-reconnect-failed[b-a170lh3qdr],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-a170lh3qdr] {
    display: block;
}


#components-reconnect-modal[b-a170lh3qdr] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-a170lh3qdr 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-a170lh3qdr 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-a170lh3qdr 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-a170lh3qdr]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-a170lh3qdr 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-a170lh3qdr {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-a170lh3qdr {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-a170lh3qdr {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-a170lh3qdr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-a170lh3qdr] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-a170lh3qdr] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-a170lh3qdr] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-a170lh3qdr] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-a170lh3qdr] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-a170lh3qdr] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-a170lh3qdr 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-a170lh3qdr] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-a170lh3qdr {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}

/* The scaffold's reconnect animations are decorative; honour the OS preference. */
@media (prefers-reduced-motion: reduce) {
    .components-rejoining-animation[b-a170lh3qdr],
    #components-reconnect-modal[b-a170lh3qdr],
    #components-reconnect-modal .show[b-a170lh3qdr],
    #components-reconnect-modal .hide[b-a170lh3qdr] {
        animation: none !important;
        transition: none !important;
    }
}
/* /Components/Layout/SiteFooter.razor.rz.scp.css */
/* Footer, matched to the bloom.insure footer.

   The measurements are taken from the live site rather than guessed: background #0E2028, a centred
   content rail, three equal contact columns with a wide gutter, bold white labels over white values at
   a 1.7 line-height, then a full-width rule and a quiet legal block. */

.site-footer[b-n9mbosuxvy] {
    /* --bloom-ink is the dark sampled from bloom.insure's footer, and the navigation rail is painted
       in it too — so the rail and the footer are the same colour by construction rather than by two
       people picking the same hex. */
    --footer-bg: var(--bloom-ink);
    --footer-fg: #ffffff;

    /* The site uses #666666 here — roughly 2.6:1 on this background, which fails WCAG AA. This is a
       teal-tinted grey at about 7:1: the same quiet, recessive grey, legible to everyone. */
    --footer-muted: #9fb2bd;
    --footer-rule: rgba(255, 255, 255, 0.16);

    background: var(--footer-bg);
    color: var(--footer-fg);
    padding: var(--space-7) var(--space-4) var(--space-6);
}

/* ONE left rail for everything below the contact block.
   Both layouts previously used justify-content: space-between, throwing the copyright and the legal
   links to opposite edges. The site aligns every row in the footer to the same left edge, which is what
   makes them read as one block. */
.site-footer__inner[b-n9mbosuxvy] {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
}

/* ── Contact columns ─────────────────────────────────────────────────────────
   auto-fit rather than a fixed three, so the grid stays correct if a support value is not configured
   and its column is not rendered at all. The 16rem floor is what drops it to one column on a phone. */
.site-footer__contact[b-n9mbosuxvy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-5) var(--space-6);
    margin-bottom: var(--space-6);
}

.site-footer__col > *[b-n9mbosuxvy] { margin: 0; }

.site-footer__label[b-n9mbosuxvy] {
    font-weight: 700;
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--footer-fg);
}

.site-footer__value[b-n9mbosuxvy] {
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--footer-fg);
}

.site-footer__value a[b-n9mbosuxvy] {
    color: var(--footer-fg);
    text-decoration: none;
}

.site-footer__value a:hover[b-n9mbosuxvy] { text-decoration: underline; }

.site-footer__value a:focus-visible[b-n9mbosuxvy] {
    outline: 2px solid var(--footer-fg);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ── Social row ──────────────────────────────────────────────────────────────
   Icons then a rule that runs to the end of the rail, exactly as the site lays it out. */
.site-footer__social-row[b-n9mbosuxvy] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.site-footer__social[b-n9mbosuxvy] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* White disc with the glyph knocked out in the footer's own ink — the site's treatment. Sized in rem
   rather than em so the discs stay a fixed size regardless of the surrounding text scale. */
.site-footer__social-link[b-n9mbosuxvy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--footer-fg);
    color: var(--footer-bg);
    font-size: 1.125rem;
    transition: background-color 120ms ease;
}

.site-footer__social-link:hover[b-n9mbosuxvy] { background: var(--footer-muted); }

.site-footer__social-link:focus-visible[b-n9mbosuxvy] {
    outline: 2px solid var(--footer-fg);
    outline-offset: 3px;
}

/* Takes the remaining width, so the rule ends flush with the rail however many icons there are. */
.site-footer__rule[b-n9mbosuxvy] {
    flex: 1;
    height: 1px;
    background: var(--footer-rule);
}

/* ── Product disclosures ─────────────────────────────────────────────────── */
.site-footer__legal[b-n9mbosuxvy] {
    margin-bottom: var(--space-5);
    color: var(--footer-muted);
    font-size: var(--text-sm);
    line-height: 1.7;

    /* Runs the full rail, as it does on the site. An earlier 90ch cap read as a narrow column with the
       right half of the footer empty — correct by the usual line-length guidance, and wrong here: this
       is boilerplate that is scanned for a product name rather than read line by line, and the site
       sets it full width. Matching it is the point. */
}

.site-footer__legal section[b-n9mbosuxvy] { margin-bottom: var(--space-4); }

/* A real heading so the disclosures form a navigable outline for a screen reader instead of a wall of
   text, but sized as the quiet label it looks like. h2 because the page's h1 is its own title. */
.site-footer__legal-heading[b-n9mbosuxvy] {
    margin: 0 0 var(--space-1);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.7;
    color: var(--footer-muted);
}

.site-footer__legal p[b-n9mbosuxvy] { margin: 0 0 var(--space-2); }
.site-footer__legal p:last-child[b-n9mbosuxvy] { margin-bottom: 0; }

/* ── Links ───────────────────────────────────────────────────────────────────
   NOT space-between: they sit on the same left rail as everything above. */
.site-footer__links[b-n9mbosuxvy] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
}

.site-footer__links a[b-n9mbosuxvy] {
    color: var(--footer-muted);
    text-decoration: none;
}

.site-footer__links a:hover[b-n9mbosuxvy] {
    color: var(--footer-fg);
    text-decoration: underline;
}

.site-footer__links a:focus-visible[b-n9mbosuxvy] {
    outline: 2px solid var(--footer-fg);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

@media (min-width: 768px) {
    .site-footer[b-n9mbosuxvy] { padding: var(--space-7) var(--space-6) var(--space-6); }
}
/* /Components/Pages/Admin/AdminHome.razor.rz.scp.css */
/* Page-specific styling only — stat grid, split layout and quick actions come
   from the shared primitives in app.css. */

.admin-home__stats[b-46tgffkxc8] { margin-bottom: var(--space-5); }
/* /Components/Pages/Admin/AuditLog.razor.rz.scp.css */
/* Category and routine actions read as quiet metadata beside the timestamp, so the eye lands on
   the exceptional rows that are still chipped. */
.audit__category[b-cwy2jdw60z] { color: var(--color-text-muted); }

.audit__action[b-cwy2jdw60z] { color: var(--color-text); }
/* /Components/Pages/Admin/Documents.razor.rz.scp.css */
.adoc[b-pf93qbga89] { max-width: 44rem; }

.adoc__drop[b-pf93qbga89]  input[type="file"] {
    display: block;
    width: 100%;
    padding: var(--space-4);
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--color-text);
    background-color: var(--color-surface-sunken);
    border: 1.5px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

.adoc__drop[b-pf93qbga89]  input[type="file"]:hover:not(:disabled) {
    border-color: var(--color-primary);
    background-color: var(--color-primary-soft);
}

.adoc__drop[b-pf93qbga89]  input[type="file"]:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.adoc__drop[b-pf93qbga89]  input[type="file"]:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.adoc__busy[b-pf93qbga89] { margin-top: var(--space-5); }

.adoc__busy-text[b-pf93qbga89] {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.adoc__status[b-pf93qbga89] { margin-top: var(--space-5); }
/* /Components/Pages/Admin/Fica/ProcessedDocuments.razor.rz.scp.css */
/* Layout comes from shared primitives — .admin-filter-grid--wide for the filter bar and .statband
   for the summary figures. What remains here is only what is specific to this table's cells. */

.pd__filters[b-grrutm5u9a] { margin-bottom: var(--space-5); }
.pd__stats[b-grrutm5u9a] { margin-bottom: var(--space-5); }

.pd__name[b-grrutm5u9a] {
    display: block;
    font-weight: 600;
    color: var(--color-text);
}

/* The supporting line under any primary cell value: the customer's email, the OCR confidence, the
   surname read off the document. One class rather than five, because they are all the same thing —
   detail that must be there when asked for and must never compete with the value above it. */
.pd__sub[b-grrutm5u9a] {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

/* Why a person was needed. Muted like the other sub-lines but allowed to wrap onto two lines, since
   truncating the one sentence that explains the row would defeat the column. */
.pd__reason[b-grrutm5u9a] {
    margin-top: 0.125rem;
    color: var(--color-text);
    white-space: normal;
}

/* The extractor's name — "PDF text layer", "RapidOCR (rendered PDF page)". Monospaced digits are
   irrelevant here, but it is a system identifier rather than prose, so it gets the quieter weight of
   a value and is allowed to wrap: these names are long and must not force the column wider. */
.pd__source[b-grrutm5u9a] {
    display: block;
    font-weight: 550;
    color: var(--color-text);
    white-space: normal;
}

/* The per-field match chips. Wraps rather than scrolls, so at 390px the three chips stack into the
   cell instead of pushing the table into a horizontal scroll for the sake of one column. */
.pd__matches[b-grrutm5u9a] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

/* Stacked rows put each cell's content on the right, opposite its label; keep these blocks aligned
   with the rest of the stacked card. Mirrors ReviewQueue.razor.css, which does the same. */
@media (max-width: 767.98px) {
    .pd__name[b-grrutm5u9a], .pd__sub[b-grrutm5u9a], .pd__source[b-grrutm5u9a] { text-align: right; }

    .pd__matches[b-grrutm5u9a] { justify-content: flex-end; }
}
/* /Components/Pages/Admin/Fica/ReviewDocument.razor.rz.scp.css */
/* Administrator document-review workspace: a large in-browser preview stage on the left,
   an always-visible review rail on the right. Modelled on document reviewers like SharePoint
   or Adobe Reader — the reviewer never leaves the page or downloads a file to make a decision. */

.rv__meta[b-jw02e6ijoi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.rv__email[b-jw02e6ijoi] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.rv__message[b-jw02e6ijoi] { margin-bottom: var(--space-5); }

.rv__break[b-jw02e6ijoi] { overflow-wrap: anywhere; }
.rv__muted[b-jw02e6ijoi] { color: var(--color-text-muted); white-space: nowrap; }

/* ── Workspace grid ─────────────────────────────────────────────────────── */

.rv__grid[b-jw02e6ijoi] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
}

/* Roughly 60/40, expressed as fractions rather than a fixed rail width.
   At 22rem the rail was ~31% of the content column at 1440px, which left the assistant — the
   thing a reviewer is supposed to decide from — narrower than the two-column "Our records /
   Document" comparison inside it wanted. A minimum keeps it usable at the breakpoint itself,
   and a maximum stops it sprawling on a very wide monitor where 40% would be ~700px of rail. */
@media (min-width: 62em) {
    .rv__grid[b-jw02e6ijoi] {
        grid-template-columns: minmax(0, 1.5fr) minmax(20rem, 1fr);
        align-items: start;
    }
}

@media (min-width: 100em) {
    .rv__grid[b-jw02e6ijoi] { grid-template-columns: minmax(0, 1.5fr) minmax(24rem, 0.85fr); }
}

/* ── Preview toolbar: document navigation group (in DocumentPreview's ToolbarStart) ──── */

.rv__nav[b-jw02e6ijoi] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px;
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.rv__navbtn[b-jw02e6ijoi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 1.05rem;
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.rv__navbtn:hover:not(:disabled)[b-jw02e6ijoi] { background: var(--color-surface); color: var(--color-text); }
.rv__navbtn:focus-visible[b-jw02e6ijoi] { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.rv__navbtn:disabled[b-jw02e6ijoi] { opacity: .4; cursor: not-allowed; }

.rv__pos[b-jw02e6ijoi] {
    min-width: 3.5rem;
    padding-inline: var(--space-2);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--color-text-muted);
}

.rv__pos-sep[b-jw02e6ijoi] { color: var(--color-text-muted); font-weight: 400; }

/* ── Review rail ────────────────────────────────────────────────────────── */

.rv__rail-inner[b-jw02e6ijoi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Cards keep their natural height instead of being squeezed to fit.
   The rail is a flex column with a max-height and its own scroll, and flex children default to
   flex-shrink: 1 — so every card was compressed to fit the viewport and then clipped by its own
   overflow: hidden. Measured on the running page: the assistant wanted 1072px and was rendered at
   347px; the decision card 550px at 179px; the history card 258px at 85px. On screen the assistant
   showed one check of five, the comment box was sliced in half and the history card was a heading
   with nothing under it — and no scrollbar appeared to suggest anything was missing, because from the
   browser's point of view nothing was: the content really had been made that small.

   ::deep is required and is the whole reason the first attempt at this fix did nothing. The rail's
   children are other components' root elements (VerificationAssistant, BloomCard), so they carry
   their own scope attribute, not this one's — Blazor rewrites a bare `> *` to `> *[b-thisfile]`,
   which matches none of them. Same trap as scoping a rule at NavLink's anchor. */
.rv__rail-inner[b-jw02e6ijoi] >  * { flex-shrink: 0; }

@media (min-width: 62em) {
    /* The rail — summary, decision and history — follows the reviewer and keeps its own
       scroll, so the approval controls stay reachable however tall the preview grows. */
    .rv__rail-inner[b-jw02e6ijoi] {
        position: sticky;
        top: calc(var(--shell-topbar-h) + var(--space-4));
        max-height: calc(100vh - var(--shell-topbar-h) - var(--space-6));
        overflow: auto;
        padding-right: var(--space-1);
    }
}

/* Decision order: approve is primary and first; destructive actions sit below so they are
   never the accidental click. */
.rv__actions[b-jw02e6ijoi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rv__actions[b-jw02e6ijoi]  .btn--danger { margin-top: var(--space-2); }

.rv__done[b-jw02e6ijoi] {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* The workspace region owns the shortcuts and is focused programmatically, so it must not draw a
   focus ring — the ring would appear on arrival around the entire page for a mouse user who never
   asked for it. :focus-visible is left alone: a keyboard user who Tabs back to the
   region still gets the indicator. */
.rv__grid:focus[b-jw02e6ijoi] { outline: none; }

/* ── Shortcut legend ────────────────────────────────────────────────────────────
   On screen rather than in a help page. Reviewers only use shortcuts they can see. */

.rv__keys[b-jw02e6ijoi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin: var(--space-4) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}

.rv__keys-label[b-jw02e6ijoi] {
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rv__keys kbd[b-jw02e6ijoi] {
    display: inline-block;
    min-width: 1.35rem;
    padding: 0.1rem 0.3rem;
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    text-align: center;
    color: var(--color-text);
    background-color: var(--color-surface-sunken);
    border: 1px solid var(--color-border-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
}
/* /Components/Pages/Admin/Fica/ReviewQueue.razor.rz.scp.css */
.rq__filters[b-hbqz0emqfb] { margin-bottom: var(--space-5); }

/* Bottom-aligned so the selects, the inputs and the submit button share one line. The
   "Customer" field carries a hint and the others do not, which under align-items:start left
   its input sitting lower than its neighbours. See .admin-filter-grid in app.css — same grid,
   same fix, kept identical so the two filter bars stay indistinguishable. */
.rq__filter-grid[b-hbqz0emqfb] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: end;
}

.rq__filter-grid > .field[b-hbqz0emqfb],
.rq__filter-grid > .rq__filter-action[b-hbqz0emqfb] { margin-bottom: 0; }

.rq__name[b-hbqz0emqfb] {
    display: block;
    font-weight: 600;
    color: var(--color-text);
}

.rq__email[b-hbqz0emqfb] {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

/* A fifth control (Reason) joined the row, so the columns are redistributed rather than left to
   wrap — at four fixed tracks the new select dropped onto its own line and took the button with it. */
@media (min-width: 768px) {
    .rq__filter-grid[b-hbqz0emqfb] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .rq__filter-grid[b-hbqz0emqfb] {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(0, 1.2fr) minmax(0, 1fr) auto;
    }

    .rq__filter-action[b-hbqz0emqfb] { min-width: 8rem; }
}

/* ── Band subheadings ──────────────────────────────────────────────────────────
   A row group heading inside the shared DataTable. Tinted and ruled so it reads as a
   division of one list rather than as another table header — the column labels above are
   uppercase grey, so these are sentence case and darker to sit clearly above them.

   No ::deep: these elements are this component's own markup, so they carry its scope. */

.rq__band th[b-hbqz0emqfb] {
    padding: var(--space-4) var(--space-5) var(--space-2);
    text-align: left;
    background-color: var(--color-surface-sunken);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    /* Undo the thead conventions inherited from DataTable's th rules. */
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
}

/* The first band opens the table, so it needs no rule above it. */
.rq__band:first-child th[b-hbqz0emqfb] { border-top: 0; }

.rq__band-title[b-hbqz0emqfb] {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
}

.rq__band-note[b-hbqz0emqfb] {
    display: block;
    margin-top: 0.125rem;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--color-text-muted);
}

/* Stacked mode turns every row into a bordered card. A band heading is not a card — it is the
   label above the next few, so it opts out of the card treatment and keeps its full width. */
@media (max-width: 767.98px) {
    .rq__band[b-hbqz0emqfb] {
        display: block;
        margin-bottom: var(--space-2);
        padding: 0;
        border: 0;
        border-radius: 0;
        background-color: transparent;
    }

    .rq__band th[b-hbqz0emqfb] {
        display: block;
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-md);
    }
}

/* Secondary identifiers: present for when they are needed, never competing with the reason. */
.rq__policy[b-hbqz0emqfb] {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
}

.rq__when[b-hbqz0emqfb] {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}

/* Waiting time past the service promise. Bold as well as coloured — the band heading already
   groups these, so the colour reinforces rather than carries the meaning. */
.rq__overdue[b-hbqz0emqfb] {
    font-weight: 700;
    color: var(--color-danger);
}

/* Stacked rows put the name block on the right; keep it left-aligned. */
@media (max-width: 767.98px) {
    .rq__name[b-hbqz0emqfb], .rq__email[b-hbqz0emqfb], .rq__policy[b-hbqz0emqfb], .rq__when[b-hbqz0emqfb] { text-align: right; }
}
/* /Components/Pages/Admin/Fica/VerificationInsights.razor.rz.scp.css */
/* Automation insights.

   Reuses the shared primitives (.statband, .layout-split, .dl-rows, DataTable) — only the things this
   page genuinely introduces are declared here. */

.vi__period[b-7y76uc43gb] {
    max-width: 14rem;
    margin-bottom: var(--space-5);
}

/* ── The investment question ───────────────────────────────────────────────────
   Set on the canvas rather than in a card, because this page exists to answer one question
   and the answer should not look like the first of nine equal panels. */

.vi__hero[b-7y76uc43gb] {
    padding: var(--space-6) var(--space-5);
    margin-bottom: var(--space-5);
    background-color: var(--bloom-teal-50);
    border: 1px solid var(--bloom-teal-200);
    border-radius: var(--radius-lg);
}

.vi__hero-label[b-7y76uc43gb] {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bloom-teal-800);
}

.vi__hero-figure[b-7y76uc43gb] {
    margin: var(--space-2) 0 0;
    /* Clamped: this is words rather than a number, so it must not collide with the label at 390px. */
    font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: normal;
    color: var(--bloom-teal-900);
}

.vi__hero-detail[b-7y76uc43gb] {
    margin: var(--space-2) 0 0;
    max-width: 60ch;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--color-text-muted);
}

/* The comparison between remedies. Bars scaled to the leader, so which one dominates is read
   from length rather than by comparing three numbers. */

.vi__compare[b-7y76uc43gb] {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.vi__compare-item[b-7y76uc43gb] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
}

.vi__compare-label[b-7y76uc43gb] {
    font-size: var(--text-sm);
    color: var(--color-text);
}

.vi__compare-item--lead .vi__compare-label[b-7y76uc43gb] { font-weight: 700; }

.vi__compare-count[b-7y76uc43gb] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.vi__compare-bar[b-7y76uc43gb] {
    grid-column: 1 / -1;
    display: block;
    block-size: 6px;
    border-radius: 3px;
    background-color: var(--bloom-teal-100);
    overflow: hidden;
}

.vi__compare-fill[b-7y76uc43gb] {
    display: block;
    block-size: 100%;
    border-radius: 3px;
    background-color: var(--bloom-teal-500);
}

.vi__compare-item--lead .vi__compare-fill[b-7y76uc43gb] { background-color: var(--bloom-teal-700); }

.vi__caveat[b-7y76uc43gb] {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--bloom-teal-200);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ── Table furniture ───────────────────────────────────────────────────────────
   These tables carry four columns of figures and can outgrow a narrow content column, so each
   passes DataTable a ScrollLabel — which makes the wrapper a focusable, named scroll region
   rather than a box a keyboard user cannot reach. That lives in DataTable rather than here so
   every table in the product gets the same treatment; this page invented its own scroll wrapper
   first, and axe caught the four unreachable regions it produced. */

.vi__pairs[b-7y76uc43gb] { margin-top: var(--space-5); }

/* A qualifier under a figure: the percentage beside a count, or "no decisions" in place of one. */
.vi__sub[b-7y76uc43gb] {
    display: block;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--color-text-subtle);
}

.vi__override[b-7y76uc43gb] {
    display: inline-block;
    margin-left: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-warning);
}

/* How to read the table above it. Placed after, not before: the figures are the content and
   the guidance is the footnote. */
.vi__note[b-7y76uc43gb] {
    margin: var(--space-4) 0 0;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--color-text-muted);
}

.vi__note code[b-7y76uc43gb] {
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

/* ── Reviewer comments ─────────────────────────────────────────────────────────
   Free text, so it wraps and the count stays pinned right. */

.vi__reasons[b-7y76uc43gb] {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.vi__reasons-title[b-7y76uc43gb] {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.vi__reasons-list[b-7y76uc43gb] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vi__reasons-list li[b-7y76uc43gb] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.vi__reasons-list li:last-child[b-7y76uc43gb] { border-bottom: 0; }

.vi__reasons-text[b-7y76uc43gb] {
    font-size: var(--text-sm);
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.vi__reasons-count[b-7y76uc43gb] {
    flex: 0 0 auto;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Admin/Fica/VerificationReport.razor.rz.scp.css */
/* Verification performance.

   Only the things this page genuinely introduces are here. The stat row, the two-column split and the
   label/value lists all reuse the shared primitives (.statband, .layout-split, .dl-rows) rather than
   being redeclared — the alternative is a seventh private copy of a definition list, which is how the
   look drifts screen by screen. */

.vr__period[b-moiof0ou7k] {
    max-width: 14rem;
    margin-bottom: var(--space-5);
}

/* ── The one number ────────────────────────────────────────────────────────────
   Not a card among cards. This page exists to answer a single question, so its
   answer is set on the canvas at a size nothing else on the screen competes with. A tinted
   panel and a large figure carry the emphasis; the supporting tiles below stay quiet. */

.vr__hero[b-moiof0ou7k] {
    padding: var(--space-6) var(--space-5);
    margin-bottom: var(--space-5);
    background-color: var(--bloom-teal-50);
    border: 1px solid var(--bloom-teal-200);
    border-radius: var(--radius-lg);
}

.vr__hero-label[b-moiof0ou7k] {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bloom-teal-800);
}

.vr__hero-figure[b-moiof0ou7k] {
    margin: var(--space-2) 0 0;
    /* Clamped rather than fixed: at 390px a 4rem figure and a five-word label collide. */
    font-size: clamp(2.75rem, 2rem + 4vw, 4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: normal;
    color: var(--bloom-teal-900);
    font-variant-numeric: tabular-nums;
}

/* No bottom margin: it existed to separate the detail line from a progress bar that has since
   been removed as duplicative, and left ~64px of empty tinted panel below the last line of text. */
.vr__hero-detail[b-moiof0ou7k] {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Stated in the same panel as the figure it qualifies, not in a footnote — a caveat a reader
   has to go looking for is a caveat nobody reads. */
.vr__caveat[b-moiof0ou7k] {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--bloom-teal-200);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.vr__stats[b-moiof0ou7k] { margin-bottom: var(--space-5); }

/* ── Ranked reasons ────────────────────────────────────────────────────────────
   Replaces a three-column table. Each row is a label, its count, and a bar scaled to the
   leading row — so the ranking is read from the edge rather than by comparing percentages,
   and at 390px it stays three lines rather than becoming twelve stacked label-value pairs.

   The grid puts label and count on one line and gives the bar the full width beneath, which
   holds at every width without a media query. */

.vr__ranked[b-moiof0ou7k] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vr__ranked-item[b-moiof0ou7k] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
}

.vr__ranked-item:first-child[b-moiof0ou7k] { padding-top: 0; }
.vr__ranked-item:last-child[b-moiof0ou7k] { border-bottom: 0; padding-bottom: 0; }

.vr__ranked-label[b-moiof0ou7k] {
    font-size: var(--text-sm);
    color: var(--color-text);
}

.vr__ranked-count[b-moiof0ou7k] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vr__ranked-share[b-moiof0ou7k] {
    font-weight: 400;
    color: var(--color-text-subtle);
}

.vr__ranked-bar[b-moiof0ou7k] {
    grid-column: 1 / -1;
    display: block;
    block-size: 6px;
    border-radius: 3px;
    background-color: var(--color-surface-sunken);
    overflow: hidden;
}

.vr__ranked-fill[b-moiof0ou7k] {
    display: block;
    block-size: 100%;
    border-radius: 3px;
    /* The leading reason is the one to act on, so the ramp darkens with rank rather than
       colouring every bar the same. One hue, not a traffic light: none of these is "bad". */
    background-color: var(--bloom-teal-500);
}

.vr__ranked-item:first-child .vr__ranked-fill[b-moiof0ou7k] { background-color: var(--bloom-teal-700); }

/* ── Issuers worth adding ──────────────────────────────────────────────────────
   A to-do list inside a supporting card, so it is separated from the measurement above it
   by a rule rather than by another card. */

.vr__suppliers[b-moiof0ou7k] {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.vr__suppliers-title[b-moiof0ou7k] {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.vr__suppliers-lede[b-moiof0ou7k] {
    margin: var(--space-2) 0 var(--space-2);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-muted);
}

.vr__suppliers-lede code[b-moiof0ou7k] {
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}
/* /Components/Pages/Customer/Dashboard.razor.rz.scp.css */
/* Page-specific styling only — the stat grid, main/aside split and quick-action
   list all come from the shared primitives in app.css. */

.dash__notice[b-3ewxxmtclr] { margin-bottom: var(--space-5); }

.dash__stats[b-3ewxxmtclr] { margin-bottom: var(--space-5); }

.dash__ref[b-3ewxxmtclr] {
    font-weight: 600;
    color: var(--color-text);
}

.dash__fica-note[b-3ewxxmtclr] {
    margin: var(--space-4) 0 var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
/* /Components/Pages/Customer/Documents.razor.rz.scp.css */
/* Page-specific styling only — grids and the main/aside loading split come from
   .grid-cards / .layout-split in app.css. */

.docs__checklist[b-2nwd3whf2y] { margin-bottom: var(--space-6); }

.docs__list[b-2nwd3whf2y] {
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--color-border);
}

.docs__list-item[b-2nwd3whf2y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.docs__list-name[b-2nwd3whf2y] {
    font-size: 0.9375rem;
    font-weight: 550;
    color: var(--color-text);
}

/* Status and action travel together on the right, wrapping rather than squeezing on a phone. */
.docs__list-state[b-2nwd3whf2y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.docs__doc-head[b-2nwd3whf2y] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.docs__doc-title[b-2nwd3whf2y] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.docs__meta[b-2nwd3whf2y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.docs__file[b-2nwd3whf2y] {
    font-weight: 550;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.docs__zip[b-2nwd3whf2y] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.docs__revised[b-2nwd3whf2y] {
    font-weight: 550;
    color: var(--color-primary);
}

.docs__note[b-2nwd3whf2y] { margin-bottom: var(--space-4); }

.docs__doc-actions[b-2nwd3whf2y] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
/* /Components/Pages/Customer/PolicyDetail.razor.rz.scp.css */
/* Page-specific styling only — card grids come from .grid-cards and the
   label/value rows from .dl-rows in app.css. */

.pol__meta[b-gpg6f7956m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.pol__synced[b-gpg6f7956m] {
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
}

/* Beneficiaries */
.pol__people[b-gpg6f7956m] { margin: 0; padding: 0; list-style: none; }

.pol__person[b-gpg6f7956m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.pol__person:last-child[b-gpg6f7956m] { border-bottom: 0; }
.pol__person:first-child[b-gpg6f7956m] { padding-top: 0; }

.pol__person-name[b-gpg6f7956m] { font-size: 0.9375rem; font-weight: 550; color: var(--color-text); }

/* Documents */
.pol__docs[b-gpg6f7956m] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }

.pol__doc-link[b-gpg6f7956m] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 550;
    text-decoration: none;
    color: var(--color-text);
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}

.pol__doc-link:hover[b-gpg6f7956m] {
    background-color: var(--color-primary-soft);
    border-color: var(--bloom-teal-200);
    color: var(--color-primary-active);
}

.pol__doc-link:focus-visible[b-gpg6f7956m] { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.pol__doc-icon[b-gpg6f7956m] {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
}
/* /Components/Pages/Customer/PolicyFinancials.razor.rz.scp.css */
/* Layout comes from the shared primitives — .statband, .grid-cards, .dl-rows and DataTable — so this
   file only carries what is specific to a money ledger. The hand-rolled table that used to live here
   duplicated DataTable badly: it scrolled sideways on a phone while every other table in the product
   reflows into stacked cards. */

.fin__toolbar[b-7shbv8x45a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-block-end: var(--space-4);
}

.fin__total[b-7shbv8x45a] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Money right-aligns so decimal points stack down the column, with tabular figures so they stay
   stacked in a proportional face.

   ::deep because the cells are inside DataTable: CSS isolation does not stamp this page's scope
   attribute onto markup a child component renders, so an undeeped rule here would silently do
   nothing. The same trap once left the main navigation rendering as bare underlined links. */
[b-7shbv8x45a] .fin__num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Stacked rows on a phone put the label on the left and the value on the right, so forcing the
   value right there would fight the layout rather than help it. */
@media (max-width: 767px) {
    [b-7shbv8x45a] .dt--stack .fin__num { text-align: left; }
}

.fin__note[b-7shbv8x45a] {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
/* /Components/Pages/Customer/Profile.razor.rz.scp.css */
/* Page-specific styling only — the main/aside split comes from .layout-split. */

.prof__saved[b-um0w9pmvxn] { margin-bottom: 0; }

.prof__dl[b-um0w9pmvxn] { margin: 0 0 var(--space-3); }

.prof__dl dt[b-um0w9pmvxn] {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.prof__dl dd[b-um0w9pmvxn] {
    margin: var(--space-1) 0 0;
    font-size: 0.9375rem;
    font-weight: 550;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.prof__hint[b-um0w9pmvxn] {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.prof__side[b-um0w9pmvxn]  .card__body > :last-child { margin-bottom: 0; }
/* /Components/Pages/Customer/UploadDocument.razor.rz.scp.css */
.up__drop[b-y3bg2pukyt] { margin: var(--space-5) 0; }

.up__actions[b-y3bg2pukyt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

@media (max-width: 575.98px) {
    .up__actions[b-y3bg2pukyt] { flex-direction: column-reverse; }
    .up__actions[b-y3bg2pukyt]  .btn { width: 100%; }
}
/* /Components/Pages/Error.razor.rz.scp.css */
.err__ref[b-j5zapst49v] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-5) 0 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-sunken);
}

.err__ref-label[b-j5zapst49v] {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.err__ref-code[b-j5zapst49v] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text);
    overflow-wrap: anywhere;
}
/* /Components/Pages/Help.razor.rz.scp.css */
/* Help page. The page sits on PublicLayout, which has no content container of its own,
   so the width cap lives here. */

.help[b-3dsxx16fva] {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-8);
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.faq[b-3dsxx16fva] {
    display: grid;
    border-top: 1px solid var(--color-border);
}

.faq__item[b-3dsxx16fva] { border-bottom: 1px solid var(--color-border); }

.faq__q[b-3dsxx16fva] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text);
    list-style: none;
}

/* Replace the native disclosure triangle with a marker that reads at any size and
   matches the icon weight used elsewhere. */
.faq__q[b-3dsxx16fva]::-webkit-details-marker { display: none; }

.faq__q[b-3dsxx16fva]::after {
    content: "+";
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
    font-weight: 700;
    line-height: 1;
    transition: background var(--dur-fast) var(--ease-out);
}

.faq__item[open] .faq__q[b-3dsxx16fva]::after {
    content: "−";
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.faq__q:hover[b-3dsxx16fva] { color: var(--color-primary); }

.faq__q:focus-visible[b-3dsxx16fva] {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.faq__a[b-3dsxx16fva] {
    padding: 0 var(--space-7) var(--space-4) 0;
    color: var(--color-text-muted);
    line-height: 1.65;
}

.faq__a p[b-3dsxx16fva] { margin: 0 0 var(--space-3); }
.faq__a p:last-child[b-3dsxx16fva] { margin-bottom: 0; }

/* ── Contact ────────────────────────────────────────────────────────────── */

.help__contact[b-3dsxx16fva] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    font-size: var(--text-sm);
}

.help__contact dt[b-3dsxx16fva] {
    color: var(--color-text-subtle);
    font-weight: 550;
}

.help__contact dd[b-3dsxx16fva] {
    margin: 0;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.help__note[b-3dsxx16fva] {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}

/* ── Quick links ────────────────────────────────────────────────────────── */

.help__links[b-3dsxx16fva] {
    display: grid;
    gap: var(--space-1);
    font-size: var(--text-sm);
}

.help__links a[b-3dsxx16fva] {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.help__links a:last-child[b-3dsxx16fva] { border-bottom: none; }

@media (max-width: 47.99em) {
    .help[b-3dsxx16fva] { padding: var(--space-5) var(--space-4) var(--space-7); }
    .faq__a[b-3dsxx16fva] { padding-right: 0; }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Landing page. Two-column hero on desktop, single column on mobile with the trust
   panel below the actions — a visitor on a phone should reach "Sign in" without
   scrolling past a wall of reassurance text. */

.hero[b-s3uqjo4ksr] {
    padding: var(--space-8) var(--space-5) var(--space-7);
}

.hero__inner[b-s3uqjo4ksr] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-7);
    align-items: center;
    max-width: var(--content-max);
    margin: 0 auto;
}

.hero__title[b-s3uqjo4ksr] {
    margin: 0 0 var(--space-4);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    line-height: 1.12;
    letter-spacing: normal;
    color: var(--color-text);
}

.hero__lede[b-s3uqjo4ksr] {
    margin: 0 0 var(--space-6);
    max-width: 56ch;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--color-text-muted);
}

.hero__actions[b-s3uqjo4ksr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.hero__meta[b-s3uqjo4ksr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    font-size: var(--text-sm);
}

.hero__meta-sep[b-s3uqjo4ksr] { color: var(--color-border-strong); }

/* ── Trust panel ────────────────────────────────────────────────────────── */

.hero__panel[b-s3uqjo4ksr] {
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.hero__panel-badge[b-s3uqjo4ksr] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    font-weight: 700;
    color: var(--color-text);
}

.hero__panel-icon[b-s3uqjo4ksr] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.hero__panel-list[b-s3uqjo4ksr] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-3);
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--color-text-muted);
}

.hero__panel-list li[b-s3uqjo4ksr] {
    display: grid;
    grid-template-columns: 1rem 1fr;
    gap: var(--space-3);
}

/* Lucide "check" as a masked SVG (no Unicode glyph); tinted with the success colour. */
.hero__panel-list li[b-s3uqjo4ksr]::before {
    content: "";
    width: 1.05em;
    height: 1.05em;
    margin-top: 0.1em;
    background-color: var(--color-success);
    -webkit-mask: var(--icon-check) center / contain no-repeat;
    mask: var(--icon-check) center / contain no-repeat;
}

.hero__panel-note[b-s3uqjo4ksr] {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}

/* ── Content sections ───────────────────────────────────────────────────── */

.landing-section[b-s3uqjo4ksr] {
    padding: var(--space-7) var(--space-5);
}

.landing-section--muted[b-s3uqjo4ksr] {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.landing-section__inner[b-s3uqjo4ksr] {
    max-width: var(--content-max);
    margin: 0 auto;
}

.landing-cta[b-s3uqjo4ksr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.landing-cta__title[b-s3uqjo4ksr] { margin: 0 0 var(--space-2); font-size: var(--text-h2); }

.landing-cta__text[b-s3uqjo4ksr] { max-width: 60ch; }
.landing-cta__text p[b-s3uqjo4ksr] { margin: 0; color: var(--color-text-muted); }

.landing-cta__actions[b-s3uqjo4ksr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

@media (max-width: 61.99em) {
    .hero[b-s3uqjo4ksr] { padding: var(--space-7) var(--space-4) var(--space-6); }

    .hero__inner[b-s3uqjo4ksr] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }

    .landing-section[b-s3uqjo4ksr] { padding-inline: var(--space-4); }
}
/* /Components/Pages/Registration/RegisterOtp.razor.rz.scp.css */
.otp-lede[b-truq9vsii7] {
    margin: 0 0 var(--space-5);
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    text-align: center;
}

.otp-lede strong[b-truq9vsii7] {
    color: var(--color-text);
    font-weight: 600;
    white-space: nowrap;
}

.otp-resend[b-truq9vsii7] { margin: 0; }

/* Looks like a link, stays a real submit button for the resend form post. */
.otp-resend__btn[b-truq9vsii7] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--color-link);
    font-weight: 550;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    border-radius: var(--radius-sm);
}

.otp-resend__btn:hover[b-truq9vsii7] { color: var(--color-primary-active); }
.otp-resend__btn:focus-visible[b-truq9vsii7] { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* /Components/Registration/OtpInput.razor.rz.scp.css */
/* ::deep because InputText renders the <input> as a child component. */
[b-tig49hxn76] input.otp {
    width: 100%;
    padding: var(--space-4) var(--space-3);
    font-family: var(--font-mono);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    text-align: center;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}

[b-tig49hxn76] input.otp::placeholder {
    color: var(--color-border-strong);
    font-weight: 400;
}

[b-tig49hxn76] input.otp:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

[b-tig49hxn76] input.otp.invalid {
    border-color: var(--color-danger);
}
/* /Components/Ui/ActivityTimeline.razor.rz.scp.css */
.tl[b-0ygdptq00i] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tl__item[b-0ygdptq00i] {
    position: relative;
    display: flex;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
}

.tl__item:last-child[b-0ygdptq00i] { padding-bottom: 0; }

/* Connector line down the rail */
.tl__item:not(:last-child)[b-0ygdptq00i]::before {
    content: "";
    position: absolute;
    left: 0.3125rem;
    top: 1rem;
    bottom: 0;
    width: 2px;
    border-radius: 2px;
    background-color: var(--color-border);
}

.tl__marker[b-0ygdptq00i] {
    position: relative;
    z-index: 1;
    width: 0.75rem;
    height: 0.75rem;
    flex: 0 0 auto;
    margin-top: 0.3125rem;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-surface);
    background-color: var(--color-border-strong);
    box-shadow: 0 0 0 1px var(--color-border);
}

.tl__item--brand   .tl__marker[b-0ygdptq00i] { background-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.tl__item--success .tl__marker[b-0ygdptq00i] { background-color: var(--color-success); box-shadow: 0 0 0 1px var(--color-success); }
.tl__item--warning .tl__marker[b-0ygdptq00i] { background-color: var(--color-warning); box-shadow: 0 0 0 1px var(--color-warning); }
.tl__item--danger  .tl__marker[b-0ygdptq00i] { background-color: var(--color-danger);  box-shadow: 0 0 0 1px var(--color-danger); }

.tl__content[b-0ygdptq00i] { min-width: 0; flex: 1; }

.tl__head[b-0ygdptq00i] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.tl__title[b-0ygdptq00i] {
    font-size: 0.9375rem;
    font-weight: 550;
    color: var(--color-text);
}

.tl__time[b-0ygdptq00i] {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tl__detail[b-0ygdptq00i] {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
/* /Components/Ui/BloomAlert.razor.rz.scp.css */
.alert[b-20mwk2z43g] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: 1.55;
}

/* Solid disc in the tone colour with a white character on top. Each tone's
   solid value carries white text at >=5:1 (see docs/DESIGN-SYSTEM.md §2.3). */
.alert__glyph[b-20mwk2z43g] {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    margin-top: 1px;
    border-radius: var(--radius-full);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.alert--info .alert__glyph[b-20mwk2z43g]    { background-color: var(--color-info); }
.alert--success .alert__glyph[b-20mwk2z43g] { background-color: var(--color-success); }
.alert--warning .alert__glyph[b-20mwk2z43g] { background-color: var(--color-warning); }
.alert--danger .alert__glyph[b-20mwk2z43g]  { background-color: var(--color-danger); }

.alert__body[b-20mwk2z43g] { min-width: 0; flex: 1; }

.alert__title[b-20mwk2z43g] { margin: 0 0 var(--space-1); font-weight: 600; }

.alert__text[b-20mwk2z43g]  > :last-child { margin-bottom: 0; }

.alert--info[b-20mwk2z43g]    { background-color: var(--color-info-bg);    border-color: #bae6fd; color: var(--color-info); }
.alert--success[b-20mwk2z43g] { background-color: var(--color-success-bg); border-color: #bbf7d0; color: var(--color-success); }
.alert--warning[b-20mwk2z43g] { background-color: var(--color-warning-bg); border-color: #fde68a; color: var(--color-warning); }
.alert--danger[b-20mwk2z43g]  { background-color: var(--color-danger-bg);  border-color: #fecaca; color: var(--color-danger); }
/* /Components/Ui/BloomButton.razor.rz.scp.css */
.btn[b-p1xvpil53j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-weight: 550;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

.btn:active:not(:disabled)[b-p1xvpil53j] { transform: translateY(0.5px); }

.btn:disabled[b-p1xvpil53j],
.btn.is-loading[b-p1xvpil53j] {
    cursor: not-allowed;
    opacity: 0.6;
}

.btn:focus-visible[b-p1xvpil53j] {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* Sizes */
.btn--sm[b-p1xvpil53j] { padding: 0.375rem var(--space-3); font-size: var(--text-sm); border-radius: var(--radius-sm); }
.btn--md[b-p1xvpil53j] { padding: 0.5625rem var(--space-4); font-size: 0.9375rem; }
.btn--lg[b-p1xvpil53j] { padding: 0.8125rem var(--space-5); font-size: 1.0625rem; }

.btn--block[b-p1xvpil53j] { width: 100%; }

/* Fully-rounded, for the action in a header bar. bloom.insure's header CTA is a pill, and both the
   signed-in and the public header carry it so an anonymous visitor meets the same control whether they
   land on "/" or on a 404. A modifier rather than a per-layout override precisely because there are two
   headers: the first version of this styled only one of them, and the two immediately disagreed. */
.btn--pill[b-p1xvpil53j] { border-radius: var(--radius-full); }

/* Touch: WCAG 2.5.8 asks for a 24px minimum; 44px is the comfortable pointer
   target. Only small buttons fall short, and only on coarse pointers. */
@media (pointer: coarse) {
    .btn--sm[b-p1xvpil53j] { min-height: 2.75rem; padding-inline: var(--space-4); }
    .btn--md[b-p1xvpil53j] { min-height: 2.75rem; }
}

/* Variants */
.btn--primary[b-p1xvpil53j] {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-xs);
}

.btn--primary:hover:not(:disabled)[b-p1xvpil53j] {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.btn--primary:active:not(:disabled)[b-p1xvpil53j] {
    background-color: var(--color-primary-active);
    border-color: var(--color-primary-active);
}

.btn--secondary[b-p1xvpil53j] {
    background-color: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.btn--secondary:hover:not(:disabled)[b-p1xvpil53j] {
    background-color: var(--color-hover);
    color: var(--color-text);
}

.btn--outline[b-p1xvpil53j] {
    background-color: transparent;
    border-color: var(--color-border-strong);
    color: var(--color-link);
}

.btn--outline:hover:not(:disabled)[b-p1xvpil53j] {
    background-color: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary-active);
}

.btn--danger[b-p1xvpil53j] {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
    box-shadow: var(--shadow-xs);
}

.btn--danger:hover:not(:disabled)[b-p1xvpil53j] {
    background-color: #991b1b;
    border-color: #991b1b;
    color: #fff;
}

.btn--ghost[b-p1xvpil53j] {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-text-muted);
}

.btn--ghost:hover:not(:disabled)[b-p1xvpil53j] {
    background-color: var(--color-hover);
    color: var(--color-text);
}

/* Loading */
.btn__spinner[b-p1xvpil53j] {
    width: 0.875em;
    height: 0.875em;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-full);
    animation: btn-spin-b-p1xvpil53j 640ms linear infinite;
}

@keyframes btn-spin-b-p1xvpil53j { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .btn__spinner[b-p1xvpil53j] { animation-duration: 2s; }
}
/* /Components/Ui/BloomCard.razor.rz.scp.css */
.card[b-8vc3znfn60] {
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card--interactive[b-8vc3znfn60] {
    transition: box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}

.card--interactive:hover[b-8vc3znfn60] {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
    transform: translateY(-1px);
}

/* No divider by default.
   Every card drew a full-width rule under its title, inside a bordered box, so a page of four
   cards produced eight horizontal lines before any content. Where the body is prose or controls
   the title's own weight and the padding already separate them — the rule was pure furniture.
   It is kept only for --flush cards, whose body is a table: there it genuinely divides a header
   from a data grid and lines up with the table's own column rule. */
.card__head[b-8vc3znfn60] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-5) var(--space-4);
}

.card--flush > .card__head[b-8vc3znfn60] { border-bottom: 1px solid var(--color-border); }

/* With no body at all, the head's reduced bottom padding leaves the card optically
   bottom-cropped, so restore the full inset. */
.card__head:last-child[b-8vc3znfn60],
.card__head:has(+ .card__foot)[b-8vc3znfn60] {
    padding-bottom: var(--space-5);
    border-bottom: 0;
}

/* Supporting panels recede: no lift, and a title one step down the scale. */
.card--supporting[b-8vc3znfn60] {
    box-shadow: none;
}

.card--supporting .card__title[b-8vc3znfn60] {
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.card__head-text[b-8vc3znfn60] { min-width: 0; }

.card__title[b-8vc3znfn60] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: normal;
    color: var(--color-text);
}

.card__desc[b-8vc3znfn60] {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.card__actions[b-8vc3znfn60] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
}

.card__body[b-8vc3znfn60] { padding: var(--space-5); flex: 1; }

.card--flush .card__body[b-8vc3znfn60] { padding: 0; }

.card__foot[b-8vc3znfn60] {
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-surface-sunken);
    border-top: 1px solid var(--color-border);
}

.card__body[b-8vc3znfn60]  > :last-child { margin-bottom: 0; }
/* /Components/Ui/Breadcrumbs.razor.rz.scp.css */
.crumbs__list[b-3btjci3d0e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
}

.crumbs__item[b-3btjci3d0e] { display: inline-flex; align-items: center; gap: var(--space-2); }

.crumbs__link[b-3btjci3d0e] {
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color var(--dur-fast) var(--ease-out);
}

.crumbs__link:hover[b-3btjci3d0e] { color: var(--color-link); text-decoration: underline; }

.crumbs__sep[b-3btjci3d0e] { color: var(--color-border-strong); }

.crumbs__current[b-3btjci3d0e] { color: var(--color-text); font-weight: 550; }
/* /Components/Ui/ConfirmDialog.razor.rz.scp.css */
.cd__text[b-v3fw2fw9zy] {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}
/* /Components/Ui/DataTable.razor.rz.scp.css */
.dt[b-yz95epj109] { width: 100%; }

/* A wide table scrolls inside its own box rather than pushing the page sideways. Paired with the
   focusable, labelled wrapper in the markup so the hidden columns are reachable by keyboard. */
.dt--scroll[b-yz95epj109] { overflow-x: auto; }

.dt--scroll:focus-visible[b-yz95epj109] {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.dt__table[b-yz95epj109] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    /* Figures line up down every column — policy numbers, contract numbers, counts and dates
       all read as a typeset report rather than as proportional text that drifts. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* The header is a rule, not a filled band.
   A grey block behind the column labels is the single most recognisable piece of admin-template
   furniture, and it competed with the card header directly above it. A firm hairline under quiet
   uppercase labels carries the same structure with none of the weight — the way a printed
   statement separates its columns. */
.dt__table[b-yz95epj109]  thead th {
    padding: var(--space-3) var(--space-5);
    text-align: left;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
    background-color: transparent;
    border-bottom: 1px solid var(--color-border-strong);
    white-space: nowrap;
}

/* Row rules sit lighter than the header rule, so the eye reads the header first and the rows
   as a continuous body rather than as a stack of equally boxed cells. */
.dt__table[b-yz95epj109]  tbody td {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    color: var(--color-text);
}

.dt__table[b-yz95epj109]  tbody tr:last-child td { border-bottom: 0; }

/* Dense variant for report-length tables (the audit log runs to 50 rows).
   At the default row height a log becomes a page of scrolling with more gap than content; an
   executive report packs the rows so a period can be scanned in one view, and relies on the
   column rules rather than air to keep them apart. */
.dt--dense .dt__table[b-yz95epj109]  tbody td { padding: var(--space-2) var(--space-5); }
.dt--dense .dt__table[b-yz95epj109]  thead th { padding: var(--space-2) var(--space-5); }

.dt__table[b-yz95epj109]  tbody tr {
    transition: background-color var(--dur-fast) var(--ease-out);
}

.dt__table[b-yz95epj109]  tbody tr:hover { background-color: var(--color-hover); }

.dt__table[b-yz95epj109]  td.dt-num,
.dt__table[b-yz95epj109]  th.dt-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dt__table[b-yz95epj109]  td.dt-actions { text-align: right; white-space: nowrap; }

/* Stacked cards below md */
@media (max-width: 767.98px) {
    .dt--stack .dt__table[b-yz95epj109],
    .dt--stack .dt__table[b-yz95epj109]  tbody,
    .dt--stack .dt__table[b-yz95epj109]  tr,
    .dt--stack .dt__table[b-yz95epj109]  td { display: block; width: 100%; }

    .dt--stack .dt__table[b-yz95epj109]  thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .dt--stack .dt__table[b-yz95epj109]  tbody tr {
        margin-bottom: var(--space-3);
        padding: var(--space-2) 0;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background-color: var(--color-surface);
    }

    .dt--stack .dt__table[b-yz95epj109]  tbody tr:last-child { margin-bottom: 0; }

    .dt--stack .dt__table[b-yz95epj109]  tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-2) var(--space-4);
        border-bottom: 0;
        text-align: right;
    }

    /* The header text is re-attached per cell from data-label. */
    .dt--stack .dt__table[b-yz95epj109]  tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: var(--text-xs);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--color-text-muted);
        text-align: left;
    }

    .dt--stack .dt__table[b-yz95epj109]  td.dt-actions { justify-content: flex-end; }
}
/* /Components/Ui/EmptyState.razor.rz.scp.css */
/* An empty panel should be quiet, not cavernous. 64px of padding above and below a single
   sentence made "nothing here yet" the largest element on the dashboard — two of these filled
   the customer's main column with ~700px of near-blank surface, which reads as unfinished
   rather than calm. */
.empty[b-s767fluvh8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-7) var(--space-5);
}

.empty--compact[b-s767fluvh8] { padding: var(--space-5) var(--space-4); }

/* Flat, and smaller. The gradient blob was the flashiest thing on an otherwise sober page, and
   it faded into #e6f0ff — a blue left over from the abandoned blue palette, which put an
   off-brand hue on every empty state in the product. */
.empty__glyph[b-s767fluvh8] {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-full);
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 1.25rem;
    line-height: 1;
}

.empty__title[b-s767fluvh8] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text);
}

.empty__desc[b-s767fluvh8] {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: 44ch;
}

.empty__actions[b-s767fluvh8] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
}
/* /Components/Ui/FormField.razor.rz.scp.css */
.field[b-eb6x65of9c] { margin-bottom: var(--space-5); }

.field__label[b-eb6x65of9c] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 550;
    color: var(--color-text);
}

.field__optional[b-eb6x65of9c] {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-text-subtle);
}

.field__hint[b-eb6x65of9c] {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Styles the control the caller passes in (InputText, InputDate, select…). */
.field__control[b-eb6x65of9c]  input,
.field__control[b-eb6x65of9c]  select,
.field__control[b-eb6x65of9c]  textarea {
    display: block;
    width: 100%;
    padding: 0.625rem var(--space-3);
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}

/* Selects carried the operating system's own dropdown arrow, so on a filter row a native
   Windows chevron sat inches from carefully styled text inputs and the two read as belonging to
   different products. Same Lucide chevron the rest of the app uses, inlined as a data URI so it
   costs no request, with room reserved on the right so a long option never runs under it. */
.field__control[b-eb6x65of9c]  select {
    appearance: none;
    padding-right: var(--space-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6b81' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 1.125rem 1.125rem;
}

/* Forced-colours mode replaces backgrounds, which would drop the arrow entirely — hand the
   native control back rather than leave a select with no affordance. */
@media (forced-colors: active) {
    .field__control[b-eb6x65of9c]  select {
        appearance: auto;
        padding-right: var(--space-3);
        background-image: none;
    }
}

.field__control[b-eb6x65of9c]  input::placeholder,
.field__control[b-eb6x65of9c]  textarea::placeholder { color: var(--color-text-subtle); }

.field__control[b-eb6x65of9c]  input:hover:not(:disabled),
.field__control[b-eb6x65of9c]  select:hover:not(:disabled) { border-color: #b6c2d2; }

.field__control[b-eb6x65of9c]  input:focus,
.field__control[b-eb6x65of9c]  select:focus,
.field__control[b-eb6x65of9c]  textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.field__control[b-eb6x65of9c]  input:disabled,
.field__control[b-eb6x65of9c]  select:disabled {
    background-color: var(--color-surface-sunken);
    color: var(--color-text-subtle);
    cursor: not-allowed;
}

/* Blazor adds .invalid on failed validation. */
.field__control[b-eb6x65of9c]  input.invalid,
.field__control[b-eb6x65of9c]  select.invalid,
.field.is-invalid .field__control[b-eb6x65of9c]  input {
    border-color: var(--color-danger);
}

.field__control[b-eb6x65of9c]  input.invalid:focus,
.field.is-invalid .field__control[b-eb6x65of9c]  input:focus {
    box-shadow: 0 0 0 3px rgb(185 28 28 / 20%);
}

.field__error[b-eb6x65of9c] {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-danger);
}

.field__error[b-eb6x65of9c]  .validation-message { color: var(--color-danger); }
/* /Components/Ui/FormPanel.razor.rz.scp.css */
.fp[b-po60fd2noh] {
    width: 100%;
    margin-inline: auto;
}

.fp--sm[b-po60fd2noh] { max-width: 26rem; }
.fp--md[b-po60fd2noh] { max-width: 32rem; }
.fp--lg[b-po60fd2noh] { max-width: 44rem; }

.fp__head[b-po60fd2noh] { margin-bottom: var(--space-5); text-align: center; }

.fp__title[b-po60fd2noh] {
    margin: 0;
    font-size: var(--text-h1);
    font-weight: 700;
    letter-spacing: normal;
    color: var(--color-text);
}

.fp__lede[b-po60fd2noh] {
    margin: var(--space-2) auto 0;
    max-width: 46ch;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

.fp__surface[b-po60fd2noh] {
    padding: var(--space-6);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.fp__surface[b-po60fd2noh]  > :last-child { margin-bottom: 0; }

.fp__foot[b-po60fd2noh] {
    margin-top: var(--space-5);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.fp__foot[b-po60fd2noh]  p { margin-bottom: var(--space-2); }
.fp__foot[b-po60fd2noh]  > :last-child { margin-bottom: 0; }

@media (max-width: 575.98px) {
    .fp__surface[b-po60fd2noh] {
        padding: var(--space-5) var(--space-4);
        border-radius: var(--radius-md);
    }
}
/* /Components/Ui/MatchChip.razor.rz.scp.css */
/* These spans are this component's own markup, so they carry its scope and need no ::deep. The chip
   surface around them belongs to StatusChip and is styled there. */

.match__label[b-4fkj59juk7] {
    font-weight: 550;
}

/* The tick, cross or dash. Sits just after the label with a hair of space, at a slightly larger size
   so it reads as a verdict rather than as punctuation.
   Carries the state a second way: the chip's tone already says matched / did not match /
   nothing to compare, and colour must not be the only thing saying it. */
.match__mark[b-4fkj59juk7] {
    margin-left: 0.3em;
    font-size: 1.05em;
    line-height: 1;
}
/* /Components/Ui/Modal.razor.rz.scp.css */
.modal-scrim[b-8x01a01nyq] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background-color: rgb(15 23 42 / 45%);
    backdrop-filter: blur(3px);
    animation: modal-fade-b-8x01a01nyq var(--dur-base) var(--ease-out);
}

.modal[b-8x01a01nyq] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: calc(100vh - 2rem);
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modal-rise-b-8x01a01nyq var(--dur-base) var(--ease-out);
}

/* Zero-size focus sentinels used to wrap Tab focus inside the dialog. */
.modal__guard[b-8x01a01nyq] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.modal:focus[b-8x01a01nyq] { outline: none; }

.modal--sm[b-8x01a01nyq] { max-width: 24rem; }
.modal--md[b-8x01a01nyq] { max-width: 34rem; }
.modal--lg[b-8x01a01nyq] { max-width: 48rem; }

.modal__head[b-8x01a01nyq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.modal__title[b-8x01a01nyq] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: normal;
}

.modal__close[b-8x01a01nyq] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-subtle);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.modal__close:hover[b-8x01a01nyq] { background-color: var(--color-hover); color: var(--color-text); }
.modal__close:focus-visible[b-8x01a01nyq] { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.modal__body[b-8x01a01nyq] { padding: var(--space-5); overflow-y: auto; }
.modal__body[b-8x01a01nyq]  > :last-child { margin-bottom: 0; }

.modal__foot[b-8x01a01nyq] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-surface-sunken);
    border-top: 1px solid var(--color-border);
}

@keyframes modal-fade-b-8x01a01nyq { from { opacity: 0; } }
@keyframes modal-rise-b-8x01a01nyq { from { opacity: 0; transform: translateY(8px) scale(0.99); } }

@media (prefers-reduced-motion: reduce) {
    .modal-scrim[b-8x01a01nyq], .modal[b-8x01a01nyq] { animation: none; }
}

@media (max-width: 575.98px) {
    .modal__foot[b-8x01a01nyq] { flex-direction: column-reverse; }
    .modal__foot[b-8x01a01nyq]  .btn { width: 100%; }
}
/* /Components/Ui/OutcomePanel.razor.rz.scp.css */
.oc[b-erhku5g6vy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.oc__mark[b-erhku5g6vy] {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    animation: oc-pop-b-erhku5g6vy 420ms var(--ease-out);
}

/* Flat tints rather than gradients. A registration or reset outcome is a moment of
   reassurance, and a graduated blob reads as decoration; the mark's job is to confirm, calmly.
   The info variant faded into #e6f0ff, a blue from the abandoned palette, which put an
   off-brand hue on the confirmation screens customers see at the end of every journey. */
.oc__mark--success[b-erhku5g6vy] { background-color: var(--color-success-bg); border-color: #bbf7d0; color: var(--color-success); }
.oc__mark--danger[b-erhku5g6vy]  { background-color: var(--color-danger-bg);  border-color: #fecaca; color: var(--color-danger); }
.oc__mark--warning[b-erhku5g6vy] { background-color: var(--color-warning-bg); border-color: #fde68a; color: var(--color-warning); }
.oc__mark--info[b-erhku5g6vy]    { background-color: var(--color-primary-soft); border-color: var(--bloom-teal-200); color: var(--color-primary); }

.oc__title[b-erhku5g6vy] {
    margin: 0 0 var(--space-3);
    font-size: var(--text-h1);
    font-weight: 700;
    letter-spacing: normal;
    color: var(--color-text);
}

.oc__text[b-erhku5g6vy] {
    margin: 0;
    max-width: 46ch;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.oc__actions[b-erhku5g6vy] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

@keyframes oc-pop-b-erhku5g6vy { from { opacity: 0; transform: scale(0.86); } }

@media (prefers-reduced-motion: reduce) {
    .oc__mark[b-erhku5g6vy] { animation: none; }
}

@media (max-width: 575.98px) {
    .oc__actions[b-erhku5g6vy] { width: 100%; flex-direction: column-reverse; }
    .oc__actions[b-erhku5g6vy]  .btn { width: 100%; }
}
/* /Components/Ui/PageHeader.razor.rz.scp.css */
.ph[b-3z8bzbyubi] { margin-bottom: var(--space-6); }

.ph__crumbs[b-3z8bzbyubi] { margin-bottom: var(--space-3); }

.ph__row[b-3z8bzbyubi] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.ph__text[b-3z8bzbyubi] { min-width: 0; flex: 1 1 24rem; }

.ph__eyebrow[b-3z8bzbyubi] {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.ph__title[b-3z8bzbyubi] {
    margin: 0;
    font-size: var(--text-h1);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: normal;
    color: var(--color-text);
}

.ph__lede[b-3z8bzbyubi] {
    margin: var(--space-2) 0 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--color-text-muted);
    max-width: 68ch;
}

.ph__actions[b-3z8bzbyubi] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .ph__actions[b-3z8bzbyubi] { width: 100%; }
    .ph__actions[b-3z8bzbyubi]  .btn { flex: 1; }
}
/* /Components/Ui/Pager.razor.rz.scp.css */
.pgr[b-iz3naslapd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
    padding-block-start: var(--space-4);
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.pgr__list[b-iz3naslapd] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.pgr__page[b-iz3naslapd],
.pgr__step[b-iz3naslapd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 2.25rem;
    height: 2.25rem;
    padding-inline: 0.6rem;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;

    /* Tabular figures so the control does not jitter as the digits change. */
    font-variant-numeric: tabular-nums;
}

.pgr__page:hover[b-iz3naslapd],
.pgr__step:hover[b-iz3naslapd] {
    background-color: var(--color-surface-alt, rgba(44, 73, 89, 0.06));
    color: var(--color-text);
}

.pgr__page--on[b-iz3naslapd],
.pgr__page--on:hover[b-iz3naslapd] {
    background-color: var(--color-brand, #2c4959);
    color: #fff;
    cursor: default;
}

/* An end of the range: still announced and still occupying its slot, so the control keeps its
   width, but not a link — an href-less anchor is already unfocusable. */
.pgr__step--off[b-iz3naslapd] {
    opacity: 0.4;
    pointer-events: none;
}

.pgr__gap[b-iz3naslapd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 2.25rem;
    color: var(--color-text-muted);
}

.pgr__page:focus-visible[b-iz3naslapd],
.pgr__step:focus-visible[b-iz3naslapd] {
    outline: 2px solid var(--color-brand, #2c4959);
    outline-offset: 2px;
}

.pgr__summary[b-iz3naslapd] {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* On a phone the numbered list is the first thing to go: previous/next still page through the
   whole statement, and 12 numbered targets at thumb size would wrap into three rows. */
@media (max-width: 520px) {
    .pgr__list[b-iz3naslapd] { display: none; }
    .pgr[b-iz3naslapd] { justify-content: space-between; }
}
/* /Components/Ui/ProgressBar.razor.rz.scp.css */
.pb__head[b-1hqo8ibibx] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.pb__label[b-1hqo8ibibx] {
    font-size: var(--text-sm);
    font-weight: 550;
    color: var(--color-text);
}

.pb__count[b-1hqo8ibibx] {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.pb__track[b-1hqo8ibibx] {
    height: 0.5rem;
    border-radius: var(--radius-full);
    background-color: var(--color-surface-sunken);
    overflow: hidden;
}

.pb__fill[b-1hqo8ibibx] {
    display: block;
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--dur-base) var(--ease-out);
}

/* Flat, single-token fills. The success and warning variants graduated from #22c55e and
   #f59e0b — raw hues belonging to no Bloom token, so a FICA progress bar introduced two
   colours the palette does not contain. A progress indicator also has no reason to change
   colour along its own length. */
.pb__fill--brand[b-1hqo8ibibx]   { background-color: var(--color-primary); }
.pb__fill--success[b-1hqo8ibibx] { background-color: var(--color-success); }
.pb__fill--warning[b-1hqo8ibibx] { background-color: var(--color-warning); }

@media (prefers-reduced-motion: reduce) {
    .pb__fill[b-1hqo8ibibx] { transition: none; }
}
/* /Components/Ui/SectionHeader.razor.rz.scp.css */
.sh[b-np61yp6xvw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.sh__text[b-np61yp6xvw] { min-width: 0; }

.sh__title[b-np61yp6xvw] {
    margin: 0;
    font-size: var(--text-h3);
    font-weight: 600;
    letter-spacing: normal;
    color: var(--color-text);
}

.sh__desc[b-np61yp6xvw] {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: 72ch;
}

.sh__actions[b-np61yp6xvw] { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
/* /Components/Ui/Skeleton.razor.rz.scp.css */
.sk-stack[b-j0mx2ihswk] { display: flex; flex-direction: column; gap: var(--space-3); }

.sk[b-j0mx2ihswk] {
    display: block;
    background: linear-gradient(
        90deg,
        var(--color-surface-sunken) 25%,
        #e9eff7 37%,
        var(--color-surface-sunken) 63%);
    background-size: 400% 100%;
    border-radius: var(--radius-sm);
    animation: sk-shimmer-b-j0mx2ihswk 1.4s ease-in-out infinite;
}

.sk--text[b-j0mx2ihswk]   { height: 0.875rem; width: 100%; }
.sk--last[b-j0mx2ihswk]   { width: 62%; }   /* shortened final line reads as a paragraph */
.sk--title[b-j0mx2ihswk]  { height: 1.5rem; width: 45%; border-radius: var(--radius-md); }
.sk--block[b-j0mx2ihswk]  { height: 8rem; width: 100%; border-radius: var(--radius-lg); }
.sk--circle[b-j0mx2ihswk] { height: 2.5rem; width: 2.5rem; border-radius: var(--radius-full); }

@keyframes sk-shimmer-b-j0mx2ihswk {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .sk[b-j0mx2ihswk] { animation: none; background: var(--color-surface-sunken); }
}
/* /Components/Ui/StatCard.razor.rz.scp.css */
/* A figure cell inside .statband (see app.css). No surface, border, radius or shadow of its
   own — the band owns those, so a row of figures reads as one summary panel. */

.stat[b-zhvlgxa20y] {
    display: block;
    height: 100%;
    padding: var(--space-5);
    background-color: var(--color-surface);
    text-decoration: none;
}

.stat--link[b-zhvlgxa20y] { transition: background-color var(--dur-fast) var(--ease-out); }

/* The whole cell is the target, so it lifts on hover rather than moving — a summary band
   should not shuffle under the cursor. */
.stat--link:hover[b-zhvlgxa20y] { background-color: var(--color-hover); }
.stat--link:focus-visible[b-zhvlgxa20y] { outline: 2px solid var(--color-focus); outline-offset: -2px; }

.stat__dl[b-zhvlgxa20y] { margin: 0; min-width: 0; }

.stat__label[b-zhvlgxa20y] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Small, quiet mark sitting with the label it belongs to, rather than a 40px tinted tile
   floating opposite the number and outweighing it. */
.stat__mark[b-zhvlgxa20y] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: 0.9375rem;
    line-height: 1;
}

.stat__mark--mono[b-zhvlgxa20y]    { color: var(--color-text-subtle); }
.stat__mark--warning[b-zhvlgxa20y] { color: var(--color-warning); }
.stat__mark--danger[b-zhvlgxa20y]  { color: var(--color-danger); }

/* The figure is the point of the cell, so it gets the scale. Tabular figures keep columns of
   numbers aligned down the band; the negative tracking stops large digits looking gappy. */
.stat__value[b-zhvlgxa20y] {
    margin: var(--space-3) 0 0;
    font-size: clamp(1.875rem, 1.6rem + 0.8vw, 2.375rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.stat__hint[b-zhvlgxa20y] {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-subtle);
}

@media (prefers-reduced-motion: reduce) {
    .stat--link[b-zhvlgxa20y] { transition: none; }
}
/* /Components/Ui/StatusChip.razor.rz.scp.css */
.chip[b-nkus4dxkez] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.25rem var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.5;
    white-space: nowrap;
}

.chip__dot[b-nkus4dxkez] {
    width: 0.4375rem;
    height: 0.4375rem;
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    background-color: currentColor;
}

/* Tinted (default) — all pairs verified >=4.5:1 */
.chip--neutral[b-nkus4dxkez] { background-color: var(--color-surface-sunken); border-color: var(--color-border); color: var(--color-text-muted); }
.chip--info[b-nkus4dxkez]    { background-color: var(--color-info-bg);    border-color: #bae6fd; color: var(--color-info); }
.chip--success[b-nkus4dxkez] { background-color: var(--color-success-bg); border-color: #bbf7d0; color: var(--color-success); }
.chip--warning[b-nkus4dxkez] { background-color: var(--color-warning-bg); border-color: #fde68a; color: var(--color-warning); }
.chip--danger[b-nkus4dxkez]  { background-color: var(--color-danger-bg);  border-color: #fecaca; color: var(--color-danger); }
.chip--brand[b-nkus4dxkez]   { background-color: var(--color-primary-soft); border-color: var(--bloom-teal-200); color: var(--color-primary-active); }

/* Solid */
.chip--solid[b-nkus4dxkez] { color: #fff; border-color: transparent; }
.chip--solid.chip--neutral[b-nkus4dxkez] { background-color: var(--color-text-muted); }
.chip--solid.chip--info[b-nkus4dxkez]    { background-color: var(--color-info); }
.chip--solid.chip--success[b-nkus4dxkez] { background-color: var(--color-success); }
.chip--solid.chip--warning[b-nkus4dxkez] { background-color: var(--color-warning); }
.chip--solid.chip--danger[b-nkus4dxkez]  { background-color: var(--color-danger); }
.chip--solid.chip--brand[b-nkus4dxkez]   { background-color: var(--color-primary); }
/* /Components/Ui/StepIndicator.razor.rz.scp.css */
.steps[b-ss92qh7k0f] { margin-bottom: var(--space-6); }

.steps__list[b-ss92qh7k0f] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.steps__item[b-ss92qh7k0f] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
    position: relative;
}

/* Connector between markers */
.steps__item:not(:last-child)[b-ss92qh7k0f]::after {
    content: "";
    position: absolute;
    left: 2.25rem;
    right: -0.5rem;
    top: 0.875rem;
    height: 2px;
    border-radius: 2px;
    background-color: var(--color-border);
}

.steps__item--done[b-ss92qh7k0f]::after { background-color: var(--color-primary); }

.steps__marker[b-ss92qh7k0f] {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    z-index: 1;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1;
    transition: background-color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out);
}

.steps__item--done .steps__marker[b-ss92qh7k0f] {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.steps__item--current .steps__marker[b-ss92qh7k0f] {
    background-color: var(--color-surface);
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 0 4px rgb(58 113 137 / 12%);
}

.steps__label[b-ss92qh7k0f] { display: flex; flex-direction: column; min-width: 0; }

.steps__count[b-ss92qh7k0f] {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.steps__name[b-ss92qh7k0f] {
    font-size: var(--text-sm);
    font-weight: 550;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.steps__item--current .steps__name[b-ss92qh7k0f] { color: var(--color-text); font-weight: 600; }

/* On small screens only the active step keeps its label. */
@media (max-width: 639.98px) {
    .steps__count[b-ss92qh7k0f] { display: none; }
    .steps__item:not(.steps__item--current) .steps__label[b-ss92qh7k0f] { display: none; }
    .steps__item:not(.steps__item--current)[b-ss92qh7k0f] { flex: 0 0 auto; }
    .steps__item:not(:last-child)[b-ss92qh7k0f]::after { left: 1.5rem; right: -0.25rem; }
}
/* /Components/Ui/ValidationPanel.razor.rz.scp.css */
.vp[b-cqfc0a4pkf] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    background-color: var(--color-danger-bg);
    border: 1px solid #fecaca;
    border-left: 3px solid var(--color-danger);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-danger);
}

.vp__glyph[b-cqfc0a4pkf] {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    margin-top: 1px;
    border-radius: var(--radius-full);
    background-color: var(--color-danger);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.vp__body[b-cqfc0a4pkf] { min-width: 0; flex: 1; }

.vp__title[b-cqfc0a4pkf] { margin: 0; font-weight: 600; }

.vp__single[b-cqfc0a4pkf] { margin: var(--space-1) 0 0; }

.vp__list[b-cqfc0a4pkf] { margin: var(--space-2) 0 0; padding-left: var(--space-5); }

.vp__list li + li[b-cqfc0a4pkf] { margin-top: var(--space-1); }